15 - Prettier

---

What is Prettier

An opinionated code formatter. Unlike ESLint (which finds bugs), Prettier ONLY handles formatting — tabs vs spaces, semicolons, quote style, line length, etc.

Philosophy: Zero debate about formatting. Prettier decides, everyone follows. No config bikeshedding.

---

Prettier vs ESLint — What Each Does

ESLint:
  ✓ Code quality (no-unused-vars, no-undef, hooks rules)
  ✓ Bug detection (missing deps in useEffect)
  ✓ Best practices (prefer-const, eqeqeq)
  ✗ Formatting (can conflict with Prettier)

Prettier:
  ✗ Code quality (doesn't care about logic)
  ✓ Formatting (indentation, line breaks, quotes, semicolons)

Rule of thumb: ESLint for code quality, Prettier for formatting. Never use ESLint formatting rules if you use Prettier.

---

Setup

npm install -D prettier

Config file — .prettierrc

{
  "semi": true,
  "singleQuote": true,
  "tabWidth": 2,
  "trailingComma": "all",
  "printWidth": 100,
  "bracketSpacing": true,
  "arrowParens": "always",
  "endOfLine": "lf"
}

What each option does

Option	Default	Recommended	Effect
semi	true	true	Add semicolons at end of statements
singleQuote	false	true	Use ' instead of "
tabWidth	2	2	Spaces per indent level
trailingComma	"all"	"all"	Trailing commas everywhere valid
printWidth	80	80-100	Max line length before wrapping
bracketSpacing	true	true	{ foo } vs {foo}
arrowParens	"always"	"always"	(x) => x vs x => x
jsxSingleQuote	false	false	JSX keeps double quotes (convention)
endOfLine	"lf"	"lf"	Unix line endings (avoids git diffs)

Ignore file — .prettierignore

dist
node_modules
coverage
*.min.js
pnpm-lock.yaml
package-lock.json

---

Running Prettier

# Format all files
npx prettier --write .

# Check formatting (CI — fails if unformatted)
npx prettier --check .

# Format specific files
npx prettier --write "src/**/*.{ts,tsx}"

package.json scripts

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

---

Prettier + ESLint Integration

The problem: ESLint's formatting rules can conflict with Prettier. ESLint says one thing, Prettier does another → endless loop.

Solution: Disable ESLint formatting rules

npm install -D eslint-config-prettier

// eslint.config.js
import eslintConfigPrettier from 'eslint-config-prettier';

export default [
  // ... your config
  eslintConfigPrettier,   // MUST be last — disables conflicting rules
];

eslint-config-prettier turns off ALL ESLint rules that Prettier handles. Now ESLint only checks code quality, Prettier only formats.

Run order:

# In CI or pre-commit hook:
eslint . --fix && prettier --write .
# ESLint fixes logic issues, Prettier fixes formatting

---

Prettier + VS Code

Install the Prettier extension. Add to .vscode/settings.json:

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true,
  "[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" }
}

Now every Cmd+S / Ctrl+S auto-formats the file with Prettier.

---

Pre-Commit Hook (lint-staged + husky)

Auto-format and lint before every commit. Catches issues before they reach the repo.

npm install -D husky lint-staged
npx husky init

Add to package.json:

{
  "lint-staged": {
    "*.{ts,tsx,js,jsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{json,md,css}": [
      "prettier --write"
    ]
  }
}

Edit .husky/pre-commit:

npx lint-staged

Now on every commit:

1. Only staged files are checked (fast)
2. ESLint fixes what it can
3. Prettier formats
4. If ESLint has unfixable errors → commit blocked

---

Common Interview Context

Q: Why use both ESLint and Prettier? A: They solve different problems. ESLint catches bugs and enforces code quality rules (unused variables, missing hook deps). Prettier handles formatting (indentation, line length, quotes). Using both together — with eslint-config-prettier to avoid conflicts — gives you clean code that's both correct and consistently formatted.

Q: How do you enforce formatting in a team? A: Three layers:

1. VS Code settings → format on save (developer experience)
2. Pre-commit hook via husky + lint-staged (catches before commit)
3. CI pipeline → prettier --check && eslint . (catches everything)