How is Prettier different from ESLint?
The difference between Prettier and ESLint is that they solve different tasks, even though both are connected to "code style", and they are often used together, not instead of each other.
The main difference in one sentence
| Tool | Role |
|---|---|
| Prettier | Formats code automatically (indentation, quotes, line breaks, semicolons, brackets, the code's appearance). |
| ESLint | Finds errors and bad practices in the code (logic, potential bugs, violations of language and style rules). |
What Prettier specifically does
Prettier is responsible for beauty and a consistent style. It:
- adds or removes
; - picks one quote style,
'or" - formats indentation
- wraps long lines
- places spaces
- formats JSX, HTML, JSON
- makes the code visually consistent across the whole project
Its philosophy is no arguments about style, the tool decides everything itself.
What ESLint specifically does
ESLint is responsible for code quality and possible errors. It:
- catches dangerous constructs and errors
- does not allow using undeclared variables
- warns about "dangling" promises
- forbids dead code
- watches over best practices (for example,
===instead of==) - configures rules for style and logic
- can even rewrite parts of the code (auto-fix)
Its task is to eliminate bugs and maintain quality standards.
An example for clarity
There is code like this:
const name ="John"
if(name == "John"){console.log("hi")}Prettier will fix it like this:
const name = "John";
if (name == "John") {
console.log("hi");
}ESLint will say:
1. replace '==' with '==='
2. maybe const/let/var should be used correctly
3. check for extra spaces or dead codeWhy they are set up together
Because the combination is ideal:
| Tool | Makes the project |
|---|---|
| Prettier | Clean and consistent |
| ESLint | Safe, logical, and high-quality |
ESLint is usually used for logic and errors, while all formatting rules are disabled in ESLint, leaving them to Prettier, so the tools do not conflict.
Summary
| Prettier | ESLint |
|---|---|
| Formatting | Logic and quality |
| Beauty | Safety |
| Does not look for errors | Looks for errors |
| Auto-format | Code analysis |
Short Answer
Interview readyA concise answer to help you respond confidently on this topic during an interview.