Formatting
Format a tab with Prettier on demand or automatically on run and save, and set the options it uses.
JSLab formats your code with Prettier.
Format a tab
Press ⌥⇧F to format a tab with Prettier, or have it formatted every time it runs or saves.
// Press ⌥⇧F to tidy this up.
const order={id:42,items:[{sku:"A-1",qty:2},{sku:"B-7",qty:1}],paid:true}
const total=order.items.reduce((sum,item)=>sum+item.qty,0)
total
⌥⇧F (Format Code) formats the current tab. It’s also in Actions → Format Code and the command palette.
The format lands as a single undo step. JSLab applies minimal edits rather than replacing the whole buffer, so your folds, scroll position and cursor survive it.
Format automatically
- Format on Run, in Settings → General, formats before each run, unless you’re typing.
- Format on Save, in Settings → Editor, formats when you save a file.
Both are off by default.
Options
Settings → Formatting holds every Prettier option JSLab supports. These are the defaults:
| Setting | Default |
|---|---|
| Print Width | 80 |
| Tab Width | 2 |
| Use Tabs | Off |
| Semicolons | On |
| Single Quotes | Off |
| Quote Props | As needed |
| JSX Single Quotes | Off |
| Trailing Commas | All |
| Bracket Spacing | On |
| Bracket Same Line | Off |
| Arrow Parens | Always |
Print Width takes 20 to 320 and Tab Width 1 to 16. Quote Props can be As needed, Consistent or Preserve; Trailing Commas can be All, ES5 or None; Arrow Parens can be Always or Avoid.
If a format fails
If Prettier can’t parse the tab, the status bar says Couldn’t format with Prettier’s message, and your code is left as it was. A format that takes too long is stopped, and the formatter restarts.
Related
- Settings: every setting, including Format on Run and Format on Save.
- The editor and live output: how and when a run happens.