Prettier Integration

Prettier enforces consistent formatting so code review focuses on behavior, not semicolons and line breaks.

Recipe

Quick-reference recipe card - copy-paste ready.

npm install -D prettier eslint-config-prettier

// .prettierrc
{
  "semi": true,
  "singleQuote": false,
  "trailingComma": "all",
  "printWidth": 100
}

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

When to reach for this:

• Formatting debates slow down PRs.
• You want ESLint to handle logic, Prettier to handle style.
• Contributors use different editors but one output style.

Working Example

// eslint.config.js
import eslint from "@eslint/js";
import tseslint from "typescript-eslint";
import eslintConfigPrettier from "eslint-config-prettier";
 
export default tseslint.config(
  eslint.configs.recommended,
  ...tseslint.configs.recommended,
  eslintConfigPrettier,
  { ignores: ["dist/**"] }
);

// package.json
{
  "scripts": {
    "lint": "eslint .",
    "format": "prettier --write .",
    "format:check": "prettier --check ."
  },
  "devDependencies": {
    "prettier": "^3.4.0",
    "eslint-config-prettier": "^9.1.0",
    "husky": "^9.1.0",
    "lint-staged": "^15.2.0"
  }
}

// lint-staged.config.js
export default {
  "*.{ts,json,md}": ["prettier --write"],
  "*.ts": ["eslint --fix"],
};

npx husky init
echo "npx lint-staged" > .husky/pre-commit

What this demonstrates:

• eslint-config-prettier disables ESLint stylistic rules that fight Prettier.
• lint-staged formats only staged files on commit.
• format:check runs in CI without modifying files.

Deep Dive

How It Works

• Prettier parses and reprints code with deterministic rules.
• ESLint runs after Prettier in pre-commit to catch logic issues on formatted code.
• Editor "format on save" calls Prettier via VS Code/Cursor extension.
• CI uses --check to fail PRs with unformatted diffs.

VS Code Settings (committed or documented)

{
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.formatOnSave": true
}

TypeScript Notes

• Prettier does not typecheck; pair with tsc --noEmit in CI.
• JSON and Markdown in repos benefit from Prettier too - include in format script.

Gotchas

• ESLint stylistic plugins with Prettier - Duplicate formatting fights. Fix: use eslint-config-prettier, remove stylistic ESLint plugins.
• Formatting entire repo in one PR - Noisy git blame. Fix: adopt Prettier early; use one-time format commit with .git-blame-ignore-revs.
• Husky skipped with --no-verify - Bad code can still land. Fix: enforce format:check and lint in CI regardless of hooks.
• Different Prettier versions locally vs CI - Lock Prettier in devDependencies; use npm ci.
• Generated files formatted - Swagger output churns every build. Fix: add dist/, openapi.json to .prettierignore.

Alternatives

FAQs

Related

• Linting Basics - ESLint flat config foundation
• Linting Best Practices - zero-warning and CI policy
• Typecheck in CI - separate gate from formatting

Stack versions: This page was written for Node.js 24.18.0 (Active LTS), npm 10+, TypeScript 5.6+, Express 5, Fastify 5, and NestJS 11.