Suggest an editImprove this articleRefine the answer for “How is Prettier different from ESLint?”. Your changes go to moderation before they’re published.Approval requiredContentWhat you’re changing🇺🇸EN🇺🇦UAPreviewTitle (EN)Short answer (EN)The difference between **Prettier** and **ESLint** is that they solve *different tasks*, even though both are connected to "code style": Prettier automatically formats code, while ESLint finds errors and bad practices. **Key point:** Prettier is cosmetics, ESLint is diagnostics.Shown above the full answer for quick recall.Answer (EN)ImageThe 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: ```js const name ="John" if(name == "John"){console.log("hi")} ``` **Prettier will fix it like this:** ```js const name = "John"; if (name == "John") { console.log("hi"); } ``` **ESLint will say:** ```javascript 1. replace '==' with '===' 2. maybe const/let/var should be used correctly 3. check for extra spaces or dead code ``` --- ### **Why 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 |For the reviewerNote to the moderator (optional)Visible only to the moderator. Helps review go faster.