#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

#Template examples

#Prettier config template

Preconfigured formatter setup for new projects.

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

pnpx extension@latest create my-extension --template=new-config-prettier

yarn dlx extension@latest create my-extension --template=new-config-prettier

Repository: examples/new-config-prettier

#Usage with an existing extension

Install Prettier:

npm install -D prettier

yarn add -D prettier

pnpm add -D prettier

bun add -D prettier

deno add -D npm: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 run format

pnpm format

yarn format

If no format script exists yet:

npm prettier --write .

yarn prettier --write .

pnpm prettier --write .

bun prettier --write .

deno prettier --write npm:.

#Integration with ESLint

To avoid formatting-rule conflicts in ESLint, install:

npm install -D eslint-config-prettier

yarn add -D eslint-config-prettier

pnpm add -D eslint-config-prettier

bun add -D eslint-config-prettier

deno add -D npm: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

• Learn how to configure ESLint.
• Add stylesheet linting with Stylelint.