Prettier for browser extensions

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

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 configuration

Template examples

Prettier configuration 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

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

deno run -A npm: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

pnpm add -D prettier

yarn add -D prettier

bun add -d prettier

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

pnpm format

yarn format

bun run format

deno task format

If no format script exists yet:

npx prettier --write .

pnpm exec prettier --write .

yarn prettier --write .

bunx prettier --write .

deno run -A npm:prettier --write .

Integration with ESLint

To avoid formatting-rule conflicts in ESLint, install:

npm install -D eslint-config-prettier

pnpm add -D eslint-config-prettier

yarn 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 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

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

ESLint integration for code quality PostCSS in browser extensions

⌘I

Introduction

Browser extension fundamentals

Getting started

Compare and migrate

Commands reference

Features

Browsers

Languages and frameworks

Integrations

Workflows

Debugging

Implementation guide

Community

Prettier for browser extensions

When Prettier is a good fit

Prettier capabilities

Template examples

Prettier configuration template

Usage with an existing extension

Integration with ESLint

Best practices

Next steps

​When Prettier is a good fit

​Prettier capabilities

​Template examples

​Prettier configuration template

​Usage with an existing extension

​Integration with ESLint

​Best practices

​Next steps

When Prettier is a good fit

Prettier capabilities

Template examples

Prettier configuration template

Usage with an existing extension

Integration with ESLint

Best practices

Next steps