Docs
Blog
Docs
Blog

Prettier

Keep formatting consistent across the extension codebase with minimal manual effort. Prettier runs from scripts, editor integration, and CI rather than inside the Extension.js build pipeline.

When Prettier is a good fit

  • You want deterministic formatting in local and CI workflows.
  • You are onboarding contributors and need low-friction style consistency.
  • You want ESLint to focus on correctness while Prettier handles formatting.

Prettier capabilities

Capability What it gives you
Consistent formatting One shared style for JS, TS, JSON, CSS, and Markdown
Script and editor workflow Format on save locally and enforce in CI
Lint conflict reduction Pair with eslint-config-prettier to avoid rule overlap
Low-maintenance defaults Adopt a stable baseline with minimal config

Template examples

Prettier config template

Preconfigured formatter setup for new projects.

new-config-prettier screenshot

npm
pnpm
yarn
npx extension@latest create my-extension --template=new-config-prettier

Repository: examples/new-config-prettier

Usage with an existing extension

Install Prettier:

npm
yarn
pnpm
bun
npm install -D prettier

Create a config file (for example .prettierrc):

{
  "semi": false,
  "singleQuote": true,
  "trailingComma": "none",
  "printWidth": 80,
  "tabWidth": 2,
  "arrowParens": "always"
}

Run Prettier from scripts or manually:

npm
pnpm
yarn
npm run format

If no format script exists yet:

npm
yarn
pnpm
bun
npm prettier --write .

Video demo soon: Prettier formatting workflow

Integration with ESLint

To avoid formatting-rule conflicts in ESLint, install:

npm
yarn
pnpm
bun
npm install -D eslint-config-prettier

Then add eslint-config-prettier in your ESLint config chain so ESLint defers formatting concerns to Prettier.

Best practices

  • Keep formatting automatic in editor and CI, not manual.
  • Use --check in CI and --write locally.
  • Format staged files pre-commit in larger repos.

Next steps

ON THIS PAGE