Prettier how-to

Format the tree with Prettier 3. ESLint does not own formatting.

Install

pnpm add -D prettier

File	Role
.prettierrc	Options
.prettierignore	Build outputs, lockfiles, nested packages, VitePress dist/cache

Commands

pnpm run format         # write
pnpm run format:check   # CI / read-only
pnpm exec prettier --write path/to/file.tsx

Implementation examples

Example .prettierrc

{
  "trailingComma": "es5",
  "singleQuote": true,
  "printWidth": 120,
  "tabWidth": 2,
  "semi": true,
  "arrowParens": "avoid"
}

Package scripts

{
  "scripts": {
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  }
}

Disable ESLint formatting conflicts

import prettier from 'eslint-config-prettier/flat';

export default defineConfig([
  // …next configs
  prettier,
]);

Agent / CI

Integration	Behaviour
Agent PostToolUse	Format the single edited file
CI	format:check inside the quality gate

Relationship to ESLint

eslint-config-prettier turns off rules that conflict with Prettier.