Prettier on demand, on run, on save

JSLab feature notes: one docs page, explained. Today: Formatting.

Scratch code is written fast and formatted never. JSLab, a JavaScript & TypeScript scratchpad for macOS, formats with Prettier, so the mess you typed at speed can look like code before you paste it anywhere.

On demand

⌥⇧F (Format Code) formats the current tab. It's also in Actions → Format Code and the command palette.

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

One ⌥⇧F later:

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;

The format lands as one undo step, and JSLab applies minimal edits instead of replacing the whole buffer, so your folds, scroll position and cursor stay where they were.

On run, on save

Two settings, both off by default:

• Format on Run (Settings → General) formats before each run, unless you're typing.
• Format on Save (Settings → Editor) formats when you save a file.

The options

Settings → Formatting holds every Prettier option JSLab supports, with Prettier's usual defaults:

Setting	Default
Print Width	80
Tab Width	2
Semicolons	On
Single Quotes	Off
Trailing Commas	All
Arrow Parens	Always

Plus Use Tabs, Quote Props, JSX Single Quotes, Bracket Spacing and Bracket Same Line. Print Width goes from 20 to 320, and Tab Width from 1 to 16.

When it can't parse

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, so a giant paste can't hang the editor.

JSLab launches Nov 15. The full page: https://js-lab.app/docs/formatting