UPDATE 2023: ESLint is deprecating formatting rules and recommend you use a source code formatter instead.
tl;dr: Use eslint-config-prettier in eslint, and run prettier separately. You can ignore the rest.
From v8.53.0 onwards, you will see a deprecation warning if those formatting rules are enabled in your config. You should still use eslint-config-prettier to disable conflicting rules until the rules are removed in a new major release.
ESLint contains many rules and those that are formatting-related might conflict with Prettier, such as arrow-parens, space-before-function-paren, etc. Hence using them together will cause some issues. The following tools have been created to use ESLint and Prettier together.
prettier-eslint |
eslint-plugin-prettier |
eslint-config-prettier |
|
|---|---|---|---|
| What it is | A JavaScript module exporting a single function. | An ESLint plugin. | An ESLint configuration. |
| What it does | Runs the code (string) through prettier then eslint --fix. The output is also a string. |
Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output. | This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb. |
| How to use it | Either calling the function in your code or via prettier-eslint-cli if you prefer the command line. |
Add it to your .eslintrc. |
Add it to your .eslintrc. |
| Is the final output Prettier compliant? | Depends on your ESLint config | Yes | Yes |
Do you need to run prettier command separately? |
No | No | Yes |
| Do you need to use anything else? | No | You may want to turn off conflicting rules using eslint-config-prettier. |
No |
For more information, refer to the official Prettier docs.
It's the recommended practice to let Prettier handle formatting and ESLint for non-formatting issues, prettier-eslint is not in the same direction as that practice, hence prettier-eslint is not recommended anymore. You can use eslint-plugin-prettier and eslint-config-prettier together.
GitHub
github.com › prettier › eslint-plugin-prettier
GitHub - prettier/eslint-plugin-prettier: ESLint plugin for Prettier formatting · GitHub
Our recommended configuration automatically enables eslint-config-prettier to disable all formatting-related ESLint rules. For legacy configuration, this plugin ships with a plugin:prettier/recommended config that sets up both eslint-plugin-prettier and eslint-config-prettier in one go.
Author prettier
Prettier
prettier.io › docs › integrating-with-linters
Integrating with Linters · Prettier
The downsides of those plugins are: You end up with a lot of red squiggly lines in your editor, which gets annoying. Prettier is supposed to make you forget about formatting – and not be in your face about it! They are slower than running Prettier directly. They’re yet one layer of indirection where things may break. Finally, we have tools that run prettier and then immediately lint files by running, for example, eslint --fix on them.
Videos
npm
npmjs.com › package › eslint-plugin-prettier
eslint-plugin-prettier - npm
Runs prettier as an eslint rule. Latest version: 5.5.5, last published: 2 months ago. Start using eslint-plugin-prettier in your project by running `npm i eslint-plugin-prettier`. There are 8710 other projects in the npm registry using eslint-plugin-prettier.
» npm install eslint-plugin-prettier
Published Jan 14, 2026
Version 5.5.5
Author Teddy Katz
GitHub
github.com › prettier › eslint-config-prettier
GitHub - prettier/eslint-config-prettier: Turns off all rules that are unnecessary or might conflict with Prettier. · GitHub
If you encounter a shared config that uses a non-standard plugin name, please ask them to use the standard name instead. Some of the rules that eslint-config-prettier turns off may be deprecated, or even removed from ESLint. This is perfectly fine, but if you really need to omit the deprecated and removed rules, you can do so by setting the ESLINT_CONFIG_PRETTIER_NO_DEPRECATED environment variable to a non-empty value.
Author prettier
DEV Community
dev.to › anisriva › setting-up-eslint-and-prettier-for-consistent-code-quality-and-formatting-1ml6
Setting Up ESLint and Prettier for Consistent Code Quality and Formatting - DEV Community
October 3, 2024 - plugin:prettier/recommended: Ensures Prettier rules are enforced and disables conflicting ESLint rules.
Top answer 1 of 2
456
UPDATE 2023: ESLint is deprecating formatting rules and recommend you use a source code formatter instead.
tl;dr: Use eslint-config-prettier in eslint, and run prettier separately. You can ignore the rest.
From v8.53.0 onwards, you will see a deprecation warning if those formatting rules are enabled in your config. You should still use eslint-config-prettier to disable conflicting rules until the rules are removed in a new major release.
ESLint contains many rules and those that are formatting-related might conflict with Prettier, such as arrow-parens, space-before-function-paren, etc. Hence using them together will cause some issues. The following tools have been created to use ESLint and Prettier together.
prettier-eslint |
eslint-plugin-prettier |
eslint-config-prettier |
|
|---|---|---|---|
| What it is | A JavaScript module exporting a single function. | An ESLint plugin. | An ESLint configuration. |
| What it does | Runs the code (string) through prettier then eslint --fix. The output is also a string. |
Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output. | This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb. |
| How to use it | Either calling the function in your code or via prettier-eslint-cli if you prefer the command line. |
Add it to your .eslintrc. |
Add it to your .eslintrc. |
| Is the final output Prettier compliant? | Depends on your ESLint config | Yes | Yes |
Do you need to run prettier command separately? |
No | No | Yes |
| Do you need to use anything else? | No | You may want to turn off conflicting rules using eslint-config-prettier. |
No |
For more information, refer to the official Prettier docs.
It's the recommended practice to let Prettier handle formatting and ESLint for non-formatting issues, prettier-eslint is not in the same direction as that practice, hence prettier-eslint is not recommended anymore. You can use eslint-plugin-prettier and eslint-config-prettier together.
2 of 2
3
- Use
eslint-config-prettierto turn-off eslint rules that are unnecessary or might conflict with Prettier. See 1st line in readme: eslint-config-prettier. - Use
eslint-plugin-prettierto run Prettier as an Eslint-rule. See 1st line in readme: eslint-plugin-prettier - Use both to take advantage of both tools. See recommended configuration: eslint-plugin-prettier.
This way you use
pluginto run Prettier as an Eslint-rule, andconfigto turn-off eslint rules that are unnecessary or might conflict with Prettier. - You can ignore
prettier-eslint
npm
npmjs.com › search
eslint-plugin-prettier - npm search
``` "eslint": "^8.9", "eslint-config-prettier": "^8.3", "eslint-formatter-codeframe": "^7.32", "eslint-plugin-babel": "^5.3", "eslint-plugin-import": "^2.25", "eslint-plugin-jsx-a11y": "^6.5", "eslint-plugin-prettier": "^4.0", "eslint-plugin-react": "^7.2
GitHub
github.com › prettier › eslint-plugin-prettier › blob › main › README.md
eslint-plugin-prettier/README.md at main · prettier/eslint-plugin-prettier
ESLint plugin for Prettier formatting. Contribute to prettier/eslint-plugin-prettier development by creating an account on GitHub.
Author prettier
Robin Wieruch
robinwieruch.de › prettier-eslint
How to use Prettier with ESLint
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.
Cathalmacdonnacha
cathalmacdonnacha.com › setting-up-eslint-prettier-in-vitejs
Setting up ESLint & Prettier in ViteJS
November 27, 2024 - eslint-config-prettier: An ESLint configuration which disables the formatting rules in ESLint that Prettier is going to be responsible for handling, hence avoiding any clashes. eslint-plugin-import: Tells ESLint how to resolve imports.
Joshuakgoldberg
joshuakgoldberg.com › blog › you-probably-dont-need-eslint-config-prettier-or-eslint-plugin-prettier
You Probably Don't Need eslint-config-prettier or eslint-plugin-prettier | Goldblog
Hence the plugin: prefix in front of them: that’s how ESLint knows where to find the configs. eslint-config-prettier is a shareable config that disables formatting-related rules.
npm
npmjs.com › package › eslint-config-prettier
eslint-config-prettier - npm
If you encounter a shared config that uses a non-standard plugin name, please ask them to use the standard name instead. Some of the rules that eslint-config-prettier turns off may be deprecated, or even removed from ESLint. This is perfectly fine, but if you really need to omit the deprecated and removed rules, you can do so by setting the ESLINT_CONFIG_PRETTIER_NO_DEPRECATED environment variable to a non-empty value.
» npm install eslint-config-prettier
Published Jul 18, 2025
Version 10.1.8
Author Simon Lydell
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.
GitHub
github.com › prettier › eslint-plugin-prettier › releases
Releases · prettier/eslint-plugin-prettier
ESLint plugin for Prettier formatting. Contribute to prettier/eslint-plugin-prettier development by creating an account on GitHub.
Author prettier
DEV Community
dev.to › joylee › eslint-and-prettier-a-guide-to-cleaner-code-5go9
ESLint and Prettier: A Guide to Cleaner Code - DEV Community
July 1, 2024 - It makes Prettier errors show up as ESLint errors. eslint-plugin-prettier: Disables ESLint rules that conflict with Prettier.
Ben Ilegbodu
benmvp.com › blog › prettier-eslint
Prettier + ESLint = ❤️ | Ben Ilegbodu
Instead of running prettier as a separate command, eslint-plugin-prettier runs Prettier as an ESLint rule, reporting anything incorrectly formatted as an ESLint error.
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
Yarn
classic.yarnpkg.com › en › package › eslint-plugin-prettier
eslint-plugin-prettier
Fast, reliable, and secure dependency management.
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.
Cloud Four
cloudfour.com › thinks › getting-started-with-the-prettier-plugin-for-eslint
Getting Started with the Prettier Plugin for ESLint – Cloud Four
February 10, 2023 - Start by adding Prettier as an ESLint rule using this first command in the terminal, followed by installing Prettier itself. npm install --save-dev eslint-plugin-prettier npm install --save-dev --save-exact prettier