Skip to main content
Keep formatting consistent across the extension codebase with minimal manual effort. Prettier runs from scripts, editor integration, and continuous integration (CI). It does not run 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

CapabilityWhat it gives you
Consistent formattingOne shared style for JS, TS, JSON, CSS, and Markdown
Script and editor workflowFormat on save locally and enforce in CI
Lint conflict reductionPair with eslint-config-prettier to avoid rule overlap
Low-maintenance defaultsAdopt a stable baseline with minimal configuration

​
Template examples

​
Prettier configuration template

Preconfigured formatter setup for new projects. new-config-prettier screenshot 
npx extension@latest create my-extension --template=new-config-prettier
Repository: examples/new-config-prettier

​
Usage with an existing extension

Install Prettier: Create a configuration 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
If no format script exists yet:

​
Integration with ESLint

To avoid formatting-rule conflicts in ESLint, install: Then add eslint-config-prettier in your ESLint configuration 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 repositories.

​
Next steps