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.

Last updated