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

Question

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?

Answer 1

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.

I wrote a comparison in a tabular format in a gist, since Stack Overflow does not support table formatting. Check it out if you prefer more organization.

prettier-eslint: Runs prettier then run eslint --fix on the code. eslint usually has automatic fixes for formatting related rules, and eslint --fix will be able to fix the conflicting formatting introduced by Prettier. You will not need to run the prettier command separately.

eslint-plugin-prettier: This is an ESLint plugin, meaning it contains implementation for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise issues when your code differs from Prettier's expected output. Those issues can be automatically fixed via --fix. With this plugin, you do not need to run the prettier command separately, the command is being run as part of the plugin. This plugin does not turn off formatting-related rules, and you will need to turn them off if you see conflicts for such rules either manually or via eslint-config-prettier.

eslint-config-prettier: This is an ESLint config, and it contains configurations for rules (whether certain rules are on, off, or special configurations). This config allows you to use Prettier with other ESLint configs like eslint-config-airbnb by turning off formatting-related rules that might conflict with Prettier. With this config, you do not need to use prettier-eslint as ESLint would not complain after Prettier formats your code. You will however, need to run the prettier command separately.

Hope this sums up the differences.

Update: 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.