prettier-formatting

When to Use

• Setting up Prettier in a new or existing project for consistent formatting.
• Configuring .prettierrc options to match team style preferences.
• Integrating Prettier with ESLint without rule conflicts.
• Adding format-on-save in VS Code, JetBrains, or other editors.
• Setting up pre-commit hooks to enforce formatting before code is committed.
• Adding file-type-specific overrides (e.g., different printWidth for Markdown vs TypeScript).

Critical Patterns

• Prettier Decides, You Don't Argue: Prettier is intentionally opinionated. Configure only the options it exposes — do NOT fight its AST-based formatting decisions with hacks.
• ESLint Separation: Use eslint-config-prettier to disable ESLint formatting rules. Do NOT use eslint-plugin-prettier — it's slow and mixes concerns. Run Prettier and ESLint as separate steps.
• Ignore Correctly: Always create .prettierignore to skip generated files, build output, and lock files. Prettier reads .gitignore by default, but explicit ignores prevent accidents.
• Pin the Version: Lock the Prettier version in package.json to avoid formatting churn across developer machines and CI.
• Format All or Nothing: When adding Prettier to an existing project, do one full format commit. Never mix formatting changes with logic changes in the same commit.
• Pre-Commit Enforcement: Use lint-staged + husky (or lefthook) to format only staged files. Running Prettier on the entire repo per commit is wasteful.

Code Examples

Configuration (.prettierrc.json)

{
  "printWidth": 100,
  "tabWidth": 2,
  "useTabs": false,
  "semi": true,
  "singleQuote": true,
  "trailingComma": "all",
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf",
  "proseWrap": "preserve",
  "htmlWhitespaceSensitivity": "css",
  "singleAttributePerLine": false
}

File-Type Overrides

{
  "printWidth": 100,
  "singleQuote": true,
  "trailingComma": "all",
  "overrides": [
    {
      "files": "*.md",
      "options": {
        "printWidth": 80,
        "proseWrap": "always"
      }
    },
    {
      "files": ["*.json", "*.jsonc"],
      "options": {
        "tabWidth": 2,
        "trailingComma": "none"
      }
    },
    {
      "files": "*.yaml",
      "options": {
        "tabWidth": 2,
        "singleQuote": false
      }
    }
  ]
}