Question

165

What's the difference between prettier-eslint, eslint-plugin-prettier and eslint-config-prettier?

rated 0 times [ 171] [ 6] / answers: 1 / hits: 43283 / 7 Years ago, thu, june 22, 2017, 12:00:00

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?

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

ashelye

Add To Favorites

Follow

Total Points: 479

Total Questions: 97

Total Answers: 85

Location: Benin

Member since Fri, Mar 24, 2023

1 Year ago

answered 7 Years ago ravenl · Accepted Answer

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.