ESLint vs Prettier: Do You Need Both?

ESLint and Prettier are often mentioned in the same breath, which leads to a reasonable question: do you need both, or does one make the other redundant? Short answer: they do different jobs, and most modern JavaScript projects run both.

What ESLint does

ESLint is a linter. It analyzes your code for patterns that are likely bugs or inconsistent with your team's conventions — unused variables, using == instead of ===, unreachable code, missing dependencies in a React hook, and hundreds of other rules. Some of these rules can be auto-fixed; many require a human to actually change the logic.

What Prettier does

Prettier is a formatter. It doesn't look at whether your logic is correct — it only rearranges layout: indentation, line breaks, quote style, spacing. It has no opinion on whether a variable is unused; it only cares how the code around that variable is laid out.

Where they used to conflict

Early on, some ESLint configurations included formatting-style rules (like enforcing a specific indent width) that could conflict with Prettier's own formatting — ESLint would complain about spacing that Prettier had just applied. The common fix is eslint-config-prettier, which turns off all of ESLint's formatting-related rules and leaves that job entirely to Prettier, while ESLint keeps handling logic and code-quality rules.

A typical setup

• Prettier runs on save (or as a pre-commit hook) to handle all formatting.
• eslint-config-prettier disables any ESLint rules that would fight with Prettier.
• ESLint keeps running to catch actual bugs and enforce project-specific conventions.

This division of labor means code reviews stop being about spacing entirely — Prettier already normalized that before the pull request was opened — and ESLint's warnings are reserved for things that actually matter.

Try formatting first

If you're not ready to wire up a full linter yet, you can still get consistent formatting today with the JS formatter on this site, which applies Prettier's rules directly in your browser. When you are ready to add linting, our guide on setting up Prettier in VS Code is a good next step, and pairing it with a style guide like those in Airbnb vs Google vs StandardJS will guide which ESLint rules to enable.