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
🌐
Prettier
prettier.io › docs › plugins
Plugins · Prettier
Plugins are ways of adding new languages or formatting rules to Prettier. Prettier’s own implementations of all languages are expressed using the plugin API. The core prettier package contains JavaScript and other web-focused languages built in. For additional languages you’ll need to install ...
🌐
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.
Discussions

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
🌐 r/node
55
88
July 27, 2022
visual studio code - In VSCode, how do I effectively run eslint --fix and prettier --write on "Format Document"? - Stack Overflow
For context, I've locally installed prettier, eslint, and their respective VS Code extensions. I used the word "effectively" in my title because I don't literally need to run eslint --fix; More on stackoverflow.com
🌐 stackoverflow.com
How can I disable the error (prettier/prettier) on eslint?
While coding, I was not using eslint. Now I installed it and it has flooded my editor with prettier/prettier errors, which by no way seem like they make my code prettier. I am looking to find a way... More on stackoverflow.com
🌐 stackoverflow.com
Using Prettier vs Eslint and let the developers learn the rules

I maintain my team's react native and nodejs app eslint rules and prettier configs. Prettier is wonderful, in my opinion. It takes the decision making and team preference out of code formatting, allowing for PRs to focus on structure, logic, and quality. Our eslint rules are configured to error in the developer editor (usually vscode). Most of what eslint catches for us are vars/lets/consts, braceless flow controls, else returns. We also have the complexity rule on.

Prettier doesn't fix code bugs, it fixes the fixation of individuals and teams that think they know the singular best code formatting style.

One thing that helps with Prettier is either prettier on save - my preference, or prettier on commit. Setting it up as the project begins will help future PRs have less formatting churn, making history cleaner in the future.

More on reddit.com
🌐 r/webdev
8
2
November 16, 2014
🌐
GitHub
github.com › prettier › eslint-plugin-prettier
GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting · GitHub
ESLint plugin for Prettier formatting. Contribute to prettier/eslint-plugin-prettier development by creating an account on GitHub.
Starred by 3.6K users
Forked by 212 users
Languages   JavaScript
🌐
Prettier
prettier.io › docs › integrating-with-linters.html
Integrating with Linters · Prettier
Linters usually contain not only code quality rules, but also stylistic rules. Most stylistic rules are unnecessary when using Prettier, but worse – they might conflict with Prettier! Use Prettier for code formatting concerns, and linters for code-quality concerns, as outlined in Prettier vs.
🌐
npm
npmjs.com › package › @connorrose › eslint-plugin-prettier
@connorrose/eslint-plugin-prettier - npm
Runs @btmills/prettier as an eslint rule. Latest version: 3.1.4, last published: 5 years ago. Start using @connorrose/eslint-plugin-prettier in your project by running `npm i @connorrose/eslint-plugin-prettier`. There are no other projects in the npm registry using @connorrose/eslint-plugi...
      » npm install @connorrose/eslint-plugin-prettier
    
Published   Aug 12, 2020
Version   3.1.4
Author   Teddy Katz as forked by Connor Rose Delisle
🌐
Omiid
omiid.me › notebook › 44 › adding-prettier-to-eslint
Adding prettier to eslint | Omid Sayfun
April 10, 2025 - Learn how to integrate Prettier with ESLint to enhance code quality and style checks, and troubleshoot common configuration errors.
Find elsewhere
🌐
npm
npmjs.com › package › prettier-eslint
prettier-eslint - npm
May 7, 2025 - The config to use for formatting with ESLint. Can be overridden with filePath. The options to pass for formatting with prettier. If not provided, prettier-eslint will attempt to create the options based on the eslintConfig (whether that's provided or derived via filePath).
      » npm install prettier-eslint
    
Published   May 07, 2025
Version   16.4.2
Author   Kent C. Dodds
🌐
Medium
zakimohammed.medium.com › react-prettier-eslint-configuration-22bf2cd77127
React Prettier ESLint Configuration | by Shaikh Zaki Mohammed | Medium
April 7, 2024 - React Prettier ESLint Configuration Soul pretty but code prettier. We now run by this quote, to maintain our code formatting top notch. Thanks to Prettier to take away this burden from the dev …
🌐
npm
npmjs.com › package › eslint-config-prettier
eslint-config-prettier - npm
July 18, 2025 - This lets you use your favorite shareable config without letting its stylistic choices get in the way when using Prettier. Note that this config only turns rules off, so it only makes sense using it together with some other config. ... Add eslint-config-prettier to your ESLint configuration – either to eslintrc or to eslint.config.js (flat config).
      » npm install eslint-config-prettier
    
Published   Jul 18, 2025
Version   10.1.8
Author   Simon Lydell
🌐
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 2
10

VSCode doesn't support chaining multiple formatters. More at this related question.

But chaining formatters isn't the answer to your problem. If you're using Prettier and ESLint properly then they do not overlap in their ruleset. You can use eslint-plugin-prettier to format the document with only ESLint and it will run Prettier as an ESLint rule. Adding eslint-config-prettier disables any ESLint rules that would conflict with Prettier.

Afterwards, running eslint --fix would apply both your ESLint and Prettier rules in a single format.

If you would like to use ESLint with other filetypes then you need to find ESLint plugins that work for those filetypes. They require installation and configuration unique to each plugin. An example is eslint-plugin-jsonc to add support for JSONC.

In package.json:

{
  "devDependencies": {
    "@typescript-eslint/eslint-plugin": "^6.10.0",
    "@typescript-eslint/parser": "^6.10.0",
    "eslint": "^8.53.0",
    "eslint-config-prettier": "^9.0.0",
    "eslint-plugin-prettier": "^5.0.1",
    "prettier": "^3.0.3",
    "typescript": "^5.2.2"
  }
}

In .eslintrc.json:

{
  "extends": [
    "plugin:prettier/recommended" // must be last element in "extends"
  ],
  "parser": "@typescript-eslint/parser",
  "plugins": [
    "@typescript-eslint"
  ],
  "settings": {
    "import/parsers": {
      "@typescript-eslint/parser": [
        ".ts"
      ]
    },
  }
}

Set your Prettier rules in .prettierrc.json, for example:

{
  "printWidth": 100
}

Now eslint --fix will format the document in a single pass.

For VSCode, install both the dbaeumer.vscode-eslint and the esbenp.prettier-vscode extensions. These each require you to have the corresponding npm package installed, whether locally in your app or globally on your device. You may also need to configure VSCode so that it can find the packages, depending on how they were installed.

Then when you run Format Document With and select ESLint it will apply both your ESLint and Prettier rules with the equivalent of eslint --fix. For example, leaving a trailing space will trigger this INFO alert:

Delete `·` eslint (prettier/prettier)

Formatting the document with ESLint resolves the issue.

2 of 2
1

This bugged me ALOT as well. There are a lot of resources online about different ways. The problem is most of them are outdated, don't work, require some config adjustments, and have their own set of trade-offs.

Here was the solution I ended up going with:

I just added this to my users keybindings.json:

{
    "key": "cmd+alt+f",
    "command": "workbench.action.terminal.sendSequence",
    "args": {
        "text": "npx prettier --write '${file}' > /dev/null 2>&1 && npx eslint_d --fix '${file}' > /dev/null 2>&1 & \u000D" // The CLI command to run "\u000D" is just the return key.
    },
    "when": "editorTextFocus"
},

That command uses eslint_d but thats just a performance enhancement. You could just as easily use eslint instead.

If you want to get it to run on save. You can try vscode-run-on-save

The benefit of this was it just works across any flavor of vscode like cursor, windsurf, etc. I don't have to muck with configs or any other setup.

Hope this helps someone else :).

🌐
Biome
biomejs.dev
Biome, toolchain of the web
Faster than Prettier when formatting 171,127 lines of code in 2,104 files with an Intel Core i7 1270P. Try the Biome formatter on the playground or directly on your project: ... Biome is a performant linter for JavaScript, TypeScript, JSX, CSS and GraphQL that features 455 rules from ESLint, TypeScript ESLint, and other sources.
🌐
Visual Studio Marketplace
marketplace.visualstudio.com › items
Prettier ESLint - Visual Studio Marketplace
Extension for Visual Studio Code - A Visual Studio Extension to format JavaScript and Typescript code using prettier-eslint package
🌐
DEV Community
dev.to › viniciuskneves › prettier-eslint-and-typescript-491j
Prettier, ESLint and Typescript - DEV Community
September 20, 2021 - ESLint has been around for a while. In short, it does a bit more than Prettier as it analyzes your code to find problems (or patterns that you don't want, like variables that are not used should be removed).
🌐
Reddit
reddit.com › r › webdev › comments › 8jh1ol › using_prettier_vs_eslint_and_let_the_developers
r/webdev - Using Prettier vs Eslint and let the developers learn the rules
November 16, 2014 -

I just started reading up about Prettier. I learned that it pretty much checks for any errors in your code and automatically fixes them for you. I was thinking though, how will a developer know what they are doing wrong if they're never told? Eslint for example will tell you what error you have made in the code and you must fix it before committing. This means that most developers will not make that same mistake a second time. However, with Prettier is auto fixes it for them and the developer never really know what they did wrong. Teach a man to fish and all that. Apologies I have never used Prettier so excuse the ignorance.

🌐
Medium
medium.com › @fabianterh › an-opinionated-guide-to-setting-up-prettier-with-eslint-51809b1b3043
An opinionated guide to setting up Prettier with ESLint | by Fabian Terh | Medium
September 2, 2018 - Install prettier and eslint-plugin-prettier. This is the plugin that is responsible for detecting differences between your code’s formatting and Prettier’s rules.
🌐
MoldStud
moldstud.com › articles › developers faq › react web developers questions › ultimate guide - setting up eslint and prettier for your typescript react projects
Ultimate Guide - Setting Up ESLint and Prettier for Your TypeScript React Projects
August 5, 2025 - In this configuration, `@typescript-eslint/parser` allows parsing TypeScript files, while `plugin:@typescript-eslint/recommended` ensures adherence to well-established best practices within the TypeScript ecosystem. Noteworthy is the setting for React, which automatically detects the installed version, reducing manual updates. Another significant aspect is aligning your linter with your code formatter. Integrate both tools to prevent rule conflicts by including `'prettier'` in the extends array.
🌐
NestJS
docs.nestjs.com › first-steps
Documentation | NestJS - A progressive Node.js framework
# Lint and autofix with eslint $ npm run lint # Format with prettier $ npm run format