ESLint and Prettier serve distinct but complementary roles in modern JavaScript/TypeScript development.
ESLint is a static code analysis tool focused on code quality, bug detection, and enforcing coding standards. It identifies issues like unused variables, incorrect syntax, logical errors, and potential bugs. It can also automatically fix some problems and is highly configurable with a vast ecosystem of plugins and rules.
Prettier is an opinionated code formatter that ensures consistent code style across your codebase. It parses code and completely rewrites it according to its own formatting rules (e.g., indentation, line breaks, spacing), eliminating debates over formatting preferences. It supports multiple languages (JavaScript, TypeScript, CSS, HTML, JSON, etc.) and has minimal configuration options.
Key Differences
| Feature | ESLint | Prettier |
| Primary Focus | Code quality, logic, bug prevention | Code formatting, style consistency |
| Automatically Formats | Partially (only fixable issues) | Yes (rewrites entire code) |
| Configuration | Highly customizable, complex | Minimal, opinionated |
| Error Detection | Yes (bugs, bad practices) | No |
| Performance | Slower (due to analysis) | Faster (focused on formatting) |
| Use Case | Catching errors, enforcing best practices | Ensuring consistent code appearance |
Why Use Both?
While ESLint can format code, Prettier generally does it better and faster. Using both together is a best practice:
Prettier handles all formatting concerns.
ESLint handles logic, bugs, and non-formatting style rules.
To avoid conflicts, disable formatting rules in ESLint when using Prettier (e.g., via
eslint-plugin-prettieror by excluding formatting rules).
✅ Bottom Line: Use Prettier for formatting and ESLint for linting. They are not competitors — they are teammates.
Because Prettier generally does a better job of formatting than ESLint. This is for three reasons: It's really fast, particularly in comparison to ESLint. Prettier is designed to format documents and that's it, which means it can be a lot simpler than ESLint, at least architecturally, especially as there's relatively little in the way of plugins. So if you just need to format your code quickly in one chunk, Prettier is the way to go. Prettier is already preconfigured, so it's also usually quicker to get started with. ESLint has some default formatting rules IIRC, but relatively minimal ones. To ensure every detail is formatted the same way, you need to put a lot of effort into configuring ESLint, which most people don't really want to do. Related: Conceptually, Prettier formats holistically, which is to say, it takes a whole document and applies its formatting to every single syntax node - generally, this means that you get very close to having exactly one valid output, no matter how the input file is formatted. ESLint, on the other hand, not only requires each formatting rule to be configured individually, but also applies them generally individually, so it's easier to have cases where you can get inconsistent behaviour depending on the original formatting of the file. Answer from MrJohz on reddit.com
StackShare
stackshare.io › stackups › eslint-vs-prettier
ESLint vs Prettier | What are the differences? | StackShare
Prettier - Prettier is an opinionated code formatter. It enforces a consistent style by parsing your code and re-printing it with its own rules that take the maximum line length into account, wrapping code when necessary.
DEV Community
dev.to › patarapolw › eslint-vs-prettier-vs-editorconfig-or-just-use-everything-1da7
eslint vs prettier vs editorconfig, or just use everything? - DEV Community
June 2, 2020 - Eslint is a linter for your code, it looks for errors. Prettier is a code formatter, it doesn't look for errors.
Why use prettier if ESLint can format?
Because Prettier generally does a better job of formatting than ESLint. This is for three reasons: It's really fast, particularly in comparison to ESLint. Prettier is designed to format documents and that's it, which means it can be a lot simpler than ESLint, at least architecturally, especially as there's relatively little in the way of plugins. So if you just need to format your code quickly in one chunk, Prettier is the way to go. Prettier is already preconfigured, so it's also usually quicker to get started with. ESLint has some default formatting rules IIRC, but relatively minimal ones. To ensure every detail is formatted the same way, you need to put a lot of effort into configuring ESLint, which most people don't really want to do. Related: Conceptually, Prettier formats holistically, which is to say, it takes a whole document and applies its formatting to every single syntax node - generally, this means that you get very close to having exactly one valid output, no matter how the input file is formatted. ESLint, on the other hand, not only requires each formatting rule to be configured individually, but also applies them generally individually, so it's easier to have cases where you can get inconsistent behaviour depending on the original formatting of the file. More on reddit.com
55
88
July 27, 2022What is the difference between Prettier, StandardJS and ESLint?
I understand that Prettier is code formatter only, not linter but I don't understand well that how StandardJS is different from Prettier and how StandardsJS and ESlint are different. More on github.com
8
Eslint, Prettier and coc.nvim
Give ALE a try. I use it for eslint and rubocop and it works great.
More on reddit.com 8
10
February 2, 2019Do you use eslint and/or prettier?
Eslint and Prettier try to solve different problems . Altough Eslint can be used to format code, its not built specifically for this, and formatting plugins can only do so much. You can use both Eslint and Prettier if you care greatly about both linting and code formatting. Prettier has a plugin to disable Eslint's formatting rules. More on reddit.com
2
2
May 4, 2022What is ESLint used for?
ESLint analyzes code for potential errors, enforces coding standards, and improves overall code quality. It helps catch issues like unused variables, improper syntax, and bad logic before they cause problems in development or production.
dhiwise.com
dhiwise.com › post › eslint-vs-prettier-choosing-the-best-tool
ESLint vs. Prettier: Choosing the Best Tool
What is the difference between linting and Prettier?
Linting involves analyzing code to find logical errors and enforce coding rules, typically using tools like ESLint. Prettier, on the other hand, is a formatter that ensures code looks consistent by adjusting indentation, spacing, and style without checking for logic or bugs.
dhiwise.com
dhiwise.com › post › eslint-vs-prettier-choosing-the-best-tool
ESLint vs. Prettier: Choosing the Best Tool
Videos
13:38
Saying Goodbye To ESLINT and Prettier - YouTube
10:22
Prettier & ESLint in Visual Studio Code: The Ultimate Guide - YouTube
21:39
Using ESLint and Prettier in Visual Studio Code - YouTube
15:04
I Will Never Use Prettier or ESLint Again - YouTube
13:07
I Ditched Prettier and ESLint (Here's Why) - YouTube
Robin Wieruch
robinwieruch.de › prettier-eslint
How to use Prettier with ESLint
February 14, 2022 - Whereas Prettier is used to autoformat my code to enforce an opinionated code format, ESLint makes sure to keep my code style in a good shape. In this brief setup guide, I want to show you how to combine Prettier with ESLint without wasting any tear.
Reddit
reddit.com › r/node › why use prettier if eslint can format?
r/node on Reddit: Why use prettier if ESLint can format?
July 27, 2022 -
I've heard ESLint can format but I haven't found a clear answer why it seems prettier is used instead of the ESLint formatter. Whenever I try to look it up most comments neglect to mention that ESLint can also format so it's not obvious why prettier would be needed at all.
Top answer 1 of 21
106
Because Prettier generally does a better job of formatting than ESLint. This is for three reasons: It's really fast, particularly in comparison to ESLint. Prettier is designed to format documents and that's it, which means it can be a lot simpler than ESLint, at least architecturally, especially as there's relatively little in the way of plugins. So if you just need to format your code quickly in one chunk, Prettier is the way to go. Prettier is already preconfigured, so it's also usually quicker to get started with. ESLint has some default formatting rules IIRC, but relatively minimal ones. To ensure every detail is formatted the same way, you need to put a lot of effort into configuring ESLint, which most people don't really want to do. Related: Conceptually, Prettier formats holistically, which is to say, it takes a whole document and applies its formatting to every single syntax node - generally, this means that you get very close to having exactly one valid output, no matter how the input file is formatted. ESLint, on the other hand, not only requires each formatting rule to be configured individually, but also applies them generally individually, so it's easier to have cases where you can get inconsistent behaviour depending on the original formatting of the file.
2 of 21
11
prettier does a better job, is faster, and can format more than js
HackerNoon
hackernoon.com › why-the-hell-do-people-confuse-prettier-with-eslint
Why the Hell Do People Confuse Prettier With Eslint? | HackerNoon
June 8, 2023 - Clearing up the confusion between Prettier and ESLint. Prettier tidies code, ESLint ensures quality. Use both wisely!
LogRocket
blog.logrocket.com › home › linting in typescript using eslint and prettier
Linting in TypeScript using ESLint and Prettier - LogRocket Blog
October 8, 2024 - For example, you can specify a ... one. In essence, you can use ESLint to specify rulesets that must be adhered to and then use Prettier to fix cases in your code where these rulesets are broken....
Ben Ilegbodu
benmvp.com › blog › prettier-eslint
Prettier + ESLint = ❤️ | Ben Ilegbodu
January 30, 2021 - Prettier is a highly-opinionated code formatter intended to remove discussions about code style in code reviews. By default, we run prettier --write by itself and it formats our code. But if you also have ESLint (a JavaScript linter) in your tool chain, things can get tricky.
DhiWise
dhiwise.com › post › eslint-vs-prettier-choosing-the-best-tool
ESLint vs. Prettier: Choosing the Best Tool
May 13, 2025 - Prettier is an opinionated code formatter that formats your code using predefined rules. Unlike ESLint, it doesn’t care about logic errors—it focuses solely on code formatting to maintain a consistent style.
Visual Studio Marketplace
marketplace.visualstudio.com › items
VS Code Prettier ESLint
Extension for Visual Studio Code - A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
Better Stack
betterstack.com › community › guides › scaling-nodejs › prettier-vs-eslint
Prettier vs ESLint: Choosing the Right Tool for Code Quality | Better Stack Community
April 17, 2025 - Prettier is the go-to code formatter, focusing exclusively on code style and formatting. It takes and rewrites your code according to a consistent style, removing debates about formatting preferences from your development process.
Hornetdynamics
hornetdynamics.com › blog › eslint-vs-prettier
ESLint vs Prettier: Which one is ideal in laravel
ESLint vs Prettier for Laravel: Learn the differences and choose the best tool for code quality, formatting, and productivity.
Hacker News
news.ycombinator.com › item
The debate for me is now eslint —-fix or prettier. I don’t get why people need m... | Hacker News
February 22, 2024 - git blame a1b2c4 -- foo.js Where a1b2c4 is the commit hash. Could even tag the commit to make it more convenient: · git tag beforeRefmt a1b2c4 git blame beforeRefmt —- foo.js and push the tag up for everyone to have access to it
Josh Finnie
joshfinnie.com › blog › adding-eslint-and-prettier-to-my-blog
Adding ESLint & Prettier to My Blog | www.joshfinnie.com
December 2, 2024 - ESLint’s plugin architecture allows customization for any project. It works with frameworks like Astro and integrates with tools like Prettier. While Prettier handles formatting, ESLint focuses on code logic and structure.
Scinos
scinos.dev › posts › 2020-11-23-eslint-plus-prettier
Part I: ESLint + Prettier
November 23, 2020 - They seems to solve the same problem (but they don't) and certainly there is some overlap, but the goals are different. As the Prettier docs puts it: use Prettier to enforce a consistent formatting, use ESLint to catch bugs.
React
react.dev › learn › editor-setup
Editor Setup – React
We recommend disabling all formatting rules in your ESLint preset using eslint-config-prettier so that ESLint is only used for catching logical mistakes.
Medium
medium.com › @daveed_kz › eslint-and-prettier-battle-for-supremacy-f2657c9cf950
Solving ESLint and Prettier’s battle for supremacy. | by David Kezi | Medium
May 20, 2018 - The thing is Prettier does it so much better while ESLint deals with code quality and patterns that prettier doesn’t care about.
GitHub
github.com › prettier › prettier › issues › 2364
What is the difference between Prettier, StandardJS and ESLint? · Issue #2364 · prettier/prettier
April 18, 2017 - I understand that Prettier is code formatter only, not linter but I don't understand well that how StandardJS is different from Prettier and how StandardsJS and ESlint are different.
Published Jun 30, 2017
Mario Fernandez
hceris.com › replacing eslint with prettier
Replacing ESLint with prettier | Mario Fernandez
August 29, 2018 - I've started using Prettier for formatting my code. ESLint is now purely a linter. Both of them work together beautifully
Luke Deniston
lukedeniston.com › eslint-prettier
You Probably *Do* Need ESLint-Prettier – Luke Deniston
February 24, 2024 - Our brains love that. We’re just fancy pattern matchers and if a pattern doesn’t exist we invent one. So all those rules that ESLint follows we call linting and the ones that Prettier follows we call formatting.
yield code();
yieldcode.blog › post › farewell-rust
Farewell, Rust - Dmitry Kudryavtsev
3 weeks ago - The never-ending deprecation of cjs in favor of esm; it’s mostly good, until you encounter a cjs package, and then it’s hell. The cumbersome eslint and prettier setup where you need to juggle between 2 files and dozen of plugins to get basic functionality you get with clippy out-of-the-box; ...