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

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.