206

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?

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141

1 Answers1

406

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

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.

Yangshun Tay
  • 49,270
  • 33
  • 114
  • 141
  • I have a eslintrc file in which I have custom rules. i.e no-extra-semi however running eslint --fix with prettier requires semi colon, do i need a separate rules file for prettier? – jasan Aug 17 '17 at 01:35
  • 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 03 '18 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? – Mateo Hrastnik Apr 22 '18 at 20:43
  • @MateoHrastnik ESLint does not handle all possible formatting issues. Refer to this thread - https://github.com/prettier/prettier-eslint/issues/101 – Yangshun Tay Apr 23 '18 at 21:24
  • I think it's worth to mention how it behaves with some editors like vscode. – Ivan Santos Aug 21 '18 at 20:37
  • 23
    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. – Fate Riddle Jun 10 '19 at 01:55
  • @FateRiddle Just curious, why do you say `prettier-eslint` is not recommended any more? – theblang Oct 21 '19 at 02:08
  • @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. – Yangshun Tay Oct 21 '19 at 06:20
  • 5
    @YangshunTay I'm just curious though, who is recommending that practice? – theblang Oct 21 '19 at 20:48
  • Oh I think it's @FateRiddle who said it. I wasn't thinking too much when I took his words into consideration. I'm also curious who recommended he/she got the recommendation from. – Yangshun Tay Oct 22 '19 at 03:08
  • @FateRiddle care to weigh in on why prettier-eslint is not recommended any more? – Aaron N. Brock Nov 08 '21 at 00:40
  • Prettier generally recommends against using anything other than eslint-config-prettier. You can read what they have to say here https://prettier.io/docs/en/integrating-with-linters.html. Personally, I prefer to not have the red underlines from eslint. The downside is if you have CI setup, you need to make sure it catches prettier as well as eslint. – Danny Harding Jan 04 '22 at 15:20