Prettier vs ESLint — What Formats Your Code?

Prettier and ESLint both touch your code and both are often installed together, which leads to a common confusion: aren't they doing the same thing? They're not. They do completely different jobs. Understanding the distinction makes you a better developer and helps you set up your toolchain correctly.

Short version: Prettier formats. ESLint lints. Run both. They don't overlap when configured correctly.

What Prettier Does — Formatting Only

Prettier is a code formatter. It changes whitespace, line breaks, quote style, indentation, and line length. It does NOT analyze your code for bugs, unused variables, or anti-patterns.

Prettier's job: make all your code look the same. It's opinionated — few options, strong defaults. The output is always consistent, deterministic, and follows the same rules regardless of who wrote the original code.

What Prettier handles:

• Indentation (2 vs 4 spaces)
• Single vs double quotes
• Semicolons (add or remove)
• Line length (wrap at 80 chars)
• Trailing commas
• Object/array formatting

You can use Prettier online (without installing it) at this free browser-based formatter.

What ESLint Does — Linting and Bug Finding

ESLint is a linter. It analyzes your code's logic and structure for potential bugs, anti-patterns, and style violations that have semantic meaning.

ESLint catches:

• Unused variables (no-unused-vars)
• Calling functions incorrectly
• Using == instead of ===
• Accessing properties before definition
• React hooks called conditionally
• Security vulnerabilities (with plugins)

Some ESLint rules auto-fix code (like converting var to let). But the core purpose is bug detection, not formatting.

Sell Custom Apparel — We Handle Printing & Free Shipping

Where Prettier and ESLint Overlap — And How to Handle It

ESLint has formatting rules too (indentation, quotes, semicolons). So does Prettier. Running both creates conflicts: ESLint wants 4-space indentation, Prettier wants 2. They fight.

The solution is eslint-config-prettier — a configuration that disables all ESLint formatting rules so Prettier handles formatting exclusively. This is the standard setup:

1. Install: npm install --save-dev eslint-config-prettier
2. Add to your ESLint config: "extends": ["eslint:recommended", "prettier"]

Now ESLint handles logic rules only. Prettier handles formatting only. No conflicts.

Which to Run First — Prettier or ESLint?

In a pre-commit hook or CI pipeline, run Prettier first, then ESLint.

Reason: Prettier may reorganize code in ways that trigger or resolve ESLint warnings. Running Prettier first ensures ESLint evaluates the final formatted state of the code, not an intermediate state that Prettier would change anyway.

Standard setup with lint-staged:

{ "*.{js,ts,jsx,tsx}": ["prettier --write", "eslint --fix"] }

Using an Online Formatter — The No-Config Option

If you just need to format code quickly without setting up ESLint or Prettier locally, the browser formatter gives you Prettier's output with zero configuration:

• No npm install
• No .prettierrc file to create
• No ESLint conflict to manage

You set your preferences once (tab width, quotes, semicolons), paste code, get formatted output. It's the fastest path to clean code when you're outside your normal environment. See formatting without VS Code for the full picture.

Frequently Asked Questions

Can I use ESLint without Prettier?

Yes. Some teams use ESLint formatting rules instead of Prettier. This was more common before Prettier existed. The ESLint-only approach requires more configuration and produces less consistent results — most new projects choose Prettier for formatting.

Can I use Prettier without ESLint?

Yes. Prettier handles formatting; you just lose ESLint's bug detection. For personal projects or quick scripts, Prettier alone is perfectly reasonable.

What about TypeScript — do I need typescript-eslint?

For TypeScript projects, use @typescript-eslint/parser with ESLint. Prettier handles TypeScript formatting without any extra plugins.