Catch Bugs and Fix Formatting Automatically (ESLint + Prettier)

Why this matters

JavaScript/TypeScript linting still has more debate than Go or Rust, but the 2026 baseline is clear: ESLint (with typescript-eslint for TS) for catching bugs and style consistency, Prettier for formatting. Pair them with a pre-commit hook (lint-staged + husky, or simple shell script) and CI gating. Don't fight Prettier; it has fewer config options on purpose. Bigger projects move to Biome (rust-based, faster, replaces both) — try it in 2026 if you're greenfield.

Demo

ESLint and Prettier solve different problems and should be understood as separate tools: ESLint enforces code quality rules (unused variables, missing return types, potential bugs) while Prettier enforces formatting (indentation, quote style, line length) — and mixing them up produces redundant rules and confusing conflicts. The correct integration is eslint-config-prettier to disable all ESLint formatting rules, letting Prettier own formatting entirely. Gating both on CI with failing exit codes means style drift and code quality issues get caught before they land in the repository, not during code review.

Try it yourself

1. pnpm add -D eslint @eslint/js typescript-eslint. Create eslint.config.js (flat config). Run pnpm eslint ..
2. pnpm add -D prettier. Run pnpm prettier --write . on a file with messy formatting.
3. Wire both into a pre-commit hook (with husky + lint-staged, or a 4-line shell script). Test by committing intentionally bad code.
4. Try Biome on a small project: pnpm add -D @biomejs/biome && pnpm biome check .. Note it's faster and config-light.

References

• ESLint
• typescript-eslint
• Prettier
• Biome