Prettier Reference: Config, ESLint Integration, Format on Save & Plugins

# npm install -D prettier

# .prettierrc (JSON, YAML, or JS — .prettierrc.json most common):
{
  "semi": true,               # semicolons (default: true)
  "singleQuote": false,       # double quotes (default: false)
  "tabWidth": 2,              # indent size (default: 2)
  "useTabs": false,           # spaces, not tabs (default: false)
  "printWidth": 80,           # line wrap width (default: 80)
  "trailingComma": "all",     # trailing commas everywhere valid (default: "all" in v3)
  "bracketSpacing": true,     # { foo: bar } not {foo: bar} (default: true)
  "arrowParens": "always",    # (x) => x not x => x (default: "always")
  "endOfLine": "lf",          # LF line endings (default: "lf")
  "jsxSingleQuote": false,    # double quotes in JSX (default: false)
  "bracketSameLine": false,   # JSX closing > on new line (default: false)
  "proseWrap": "preserve",    # don't reformat markdown prose (default: "preserve")
  "htmlWhitespaceSensitivity": "css"  # respect CSS display for HTML (default: "css")
}

# .prettierignore (same syntax as .gitignore):
dist/
build/
coverage/
node_modules/
*.min.js
*.min.css
public/
.next/
generated/     # skip generated files

# Check if files are formatted (without writing):
npx prettier --check "src/**/*.{ts,tsx,js,json,css,md}"

# Format in place:
npx prettier --write "src/**/*.{ts,tsx,js,json,css,md}"

# Format single file:
npx prettier --write src/index.ts

# The setup that works: Prettier formats, ESLint lints, no conflicts
# npm install -D eslint-config-prettier

# eslint.config.js (flat config):
import eslintConfigPrettier from "eslint-config-prettier";

export default [
  // ... your other configs ...
  eslintConfigPrettier,   // MUST be last — disables ESLint formatting rules
];

# .eslintrc.js (legacy config):
{
  extends: [
    "eslint:recommended",
    "@typescript-eslint/recommended",
    "react/recommended",
    "prettier",   // eslint-config-prettier — always last in extends
  ]
}

# What eslint-config-prettier disables (examples):
# indent, semi, quotes, comma-dangle, space-before-function-paren,
# arrow-parens, max-len, no-extra-semi — all style rules from ESLint core
# and from @typescript-eslint, react, babel, etc.

# eslint-plugin-prettier (optional — makes Prettier violations show as ESLint errors):
# npm install -D eslint-plugin-prettier
# Adds prettier/prettier rule — runs Prettier in ESLint
# WARNING: this slows down ESLint significantly. Most teams skip it and run
# Prettier separately (npx prettier --check in CI).

# VS Code — install "Prettier - Code formatter" extension (esbenp.prettier-vscode)

# .vscode/settings.json (project-level, commit this):
{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"   // ESLint fix on save too
  },
  "[javascript]":  { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescript]":  { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[typescriptreact]": { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[json]":        { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[css]":         { "editor.defaultFormatter": "esbenp.prettier-vscode" },
  "[markdown]":    { "editor.defaultFormatter": "esbenp.prettier-vscode" }
}

# .editorconfig — baseline for editors without Prettier support:
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true

[*.md]
trim_trailing_whitespace = false  # Markdown uses trailing spaces for line breaks

# Per-file-type overrides in .prettierrc:
{
  "overrides": [
    { "files": "*.json", "options": { "printWidth": 120 } },
    { "files": "*.md",   "options": { "proseWrap": "always", "printWidth": 72 } },
    { "files": "*.yaml", "options": { "singleQuote": false } }
  ]
}

# npm install -D husky lint-staged

# Setup husky:
npx husky init          # creates .husky/ and adds prepare script
# Or manually: package.json "prepare": "husky"

# .husky/pre-commit:
npx lint-staged

# .lintstagedrc.json — format only staged files (fast):
{
  "*.{js,jsx,ts,tsx}": [
    "eslint --fix",
    "prettier --write"
  ],
  "*.{json,yaml,yml,md,mdx}": [
    "prettier --write"
  ],
  "*.{css,scss,less}": [
    "prettier --write"
  ]
}

# Alternative — package.json lint-staged key:
{
  "lint-staged": {
    "*.{ts,tsx}": ["eslint --fix --max-warnings 0", "prettier --write"],
    "*.{json,md}": "prettier --write"
  }
}

# CI check (runs in parallel with lint):
# .github/workflows/ci.yml:
# - name: Check formatting
#   run: npx prettier --check "src/**/*.{ts,tsx,js,json,css,md}"
# Fails if any file is not formatted — catches files committed without Prettier

# Useful: format entire repo when first adding Prettier:
npx prettier --write .
git add -A
git commit -m "chore: apply Prettier formatting"
# One-time commit, then all future commits are auto-formatted via lint-staged

# Prettier formats these by default:
# JavaScript, JSX, TypeScript, TSX, JSON, JSONC, CSS, SCSS, Less,
# HTML, Vue, Angular, GraphQL, Markdown, MDX, YAML

# Plugins extend Prettier to more languages:
# npm install -D prettier-plugin-tailwindcss      — sort Tailwind classes
# npm install -D prettier-plugin-sql               — SQL files
# npm install -D @prettier/plugin-java            — Java
# npm install -D @prettier/plugin-ruby            — Ruby
# npm install -D prettier-plugin-organize-imports — auto-sort imports

# .prettierrc with plugins:
{
  "plugins": [
    "prettier-plugin-tailwindcss",
    "prettier-plugin-organize-imports"
  ],
  "tailwindConfig": "./tailwind.config.ts"   # needed for tailwind plugin
}

# prettier-plugin-tailwindcss — automatically sorts Tailwind class names
# according to the recommended order from Tailwind CSS docs:
# Before: <div className="text-sm bg-blue-500 flex p-4 items-center">
# After:  <div className="flex items-center bg-blue-500 p-4 text-sm">

# Prettier API (programmatic use in scripts):
import prettier from "prettier";
const formatted = await prettier.format(code, {
  parser: "typescript",
  semi: true,
  singleQuote: true,
});
const isFormatted = await prettier.check(code, { parser: "typescript" });