Formatting with Prettier

Chapter one gave your code a type system. This chapter gives it everything else: a formatter, tests, stories, a linter, a browser.

Start with the cheapest win. order-card/index.marko works — the preview proves it — but nobody would enjoy reading it. The interface is crammed onto one line, the indentation is somebody’s bad day, and the <if> block wanders.

The plugin does the work. Prettier has no idea what a .marko file is until prettier-plugin-marko tells it. This template lists the plugin in package.json under a "prettier" key, so every prettier run here already knows the language. It handles the tags API and the TypeScript syntax in the same pass — one formatter for the whole file, not two.

1. Read order-card/index.marko and wince.
2. Open the terminal tab and run pnpm format.
3. Watch the editor. The interface unfolds, the tree lines up, and the onClick body gets its own lines. You changed nothing; the file is just correct now.

Prettier normalises Marko’s own spellings too, not just whitespace: <let/open = false /> becomes <let/open=false>, because that’s the canonical form of a tag variable. Argue with it and it will simply put it back.

The party trick. Marko has a second syntax — concise mode, no angle brackets — and this plugin is the converter. Try it (it prints to the terminal; nothing is written):

npx prettier src/tags/order-card/index.marko \
  --plugin=prettier-plugin-marko --marko-syntax=concise

The same tag, indentation-structured. --marko-syntax takes auto (the default — it detects and preserves whatever the file already uses), html, or concise, so this converts in both directions. This tutorial teaches the tag syntax throughout, but now you know the door exists, and that walking through it is one command.

You should now see order-card/index.marko neatly indented, its interface on four lines, and the preview unchanged — formatting never alters behaviour. Next: proving that behaviour, instead of eyeballing it.