How is ESLint different from Prettier?
ESLint and Prettier are often used together, but they solve different tasks, so they should not be confused.
The main difference
| Tool | What it is responsible for |
|---|---|
| ESLint | Analyzes code for errors, anti-patterns, and violations of JavaScript/TypeScript rules |
| Prettier | Formats code (layout, whitespace, line breaks, quotes, etc.) |
What ESLint does
ESLint is responsible for code quality and logic. It checks:
- unused variables,
- incorrect constructs,
- dangerous practices,
- compliance with the code style (if rules are set),
- potential bugs.
Example: ESLint will catch this error:
js
const x = 10;
console.log(y); // ESLint will say that y is not definedWhat Prettier does
Prettier is responsible exclusively for formatting style, not for logic. It automatically:
- applies consistent indentation,
- places commas,
- formats quotes,
- wraps lines,
- adds/removes semicolons.
Example: Prettier will format this code
js
const obj={name:"Tom",age:20}into
js
const obj = { name: 'Tom', age: 20 };The key difference in two phrases
- ESLint is responsible for the correctness of the code.
- Prettier is responsible for the beauty and consistency of formatting.
How they are used in real projects
They are usually set up together:
- Prettier → automatically formats the code
- ESLint → watches over logic and rules
ESLint can be configured so that it does not complain about style, leaving those tasks to Prettier.
Conclusion
| ESLint | Prettier |
|---|---|
| Prevents errors | Makes the code neat |
| Watches over rules | Watches over formatting |
| About logic | About appearance |
These tools are not competitors, they complement each other, covering different sides of code quality.
Short Answer
Interview readyPremium
A concise answer to help you respond confidently on this topic during an interview.