216

I want to use Prettier and ESLint together, but I experienced some conflicts just by using them one after another. I see that there are these three packages that seem to allow them to be used in tandem:

  • prettier-eslint
  • eslint-plugin-prettier
  • eslint-config-prettier

However, I am unsure which to use as these package names all contain eslint and prettier.

Which should I use?

2 Answers 2

418

tl;dr: Use eslint-config-prettier, you can ignore the rest.

UPDATE 2023: ESLint is deprecating formatting rules and recommend you use a source code formatter instead. 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 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.

17
  • 6
    Just a comment on the general difference between eslint plugins and configs, because I felt it was what was missing for me: plugins define new eslint rules, and configs set wether or not (and how) the rules should be applied.
    – laugri
    Feb 3, 2018 at 15:51
  • 3
    With eslint-config-prettier, why do we need to run prettier? Wouldn't eslint --fix format the code the same way prettier would? Apr 22, 2018 at 20:43
  • 25
    It's 2019, and this is still the best explanation I find, much better than the official one. You might add that prettier-eslint is not recommended any more. And the latter 2 can work together now. Jun 10, 2019 at 1:55
  • 1
    @theblang 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. Oct 21, 2019 at 6:20
  • 5
    @YangshunTay I'm just curious though, who is recommending that practice?
    – theblang
    Oct 21, 2019 at 20:48
0
  • Use eslint-config-prettier to turn-off eslint rules that are unnecessary or might conflict with Prettier. See 1st line in readme: eslint-config-prettier.
  • Use eslint-plugin-prettier to 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 plugin to run Prettier as an Eslint-rule, and config to turn-off eslint rules that are unnecessary or might conflict with Prettier.
  • You can ignore prettier-eslint

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.