prettier-eslint，eslint-plugin-prettier和eslint-config-prettier之间有什么区别？

Question

我想一起使用Prettier和ESLint，但我只是通过一个接一个地运行它们而遇到了一些冲突。我看到有这三个包似乎允许它们串联使用：

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

但是，我不确定使用哪个包，因为这些包名都包含eslint和prettier。

我应该使用哪个？

Answer 1

ESLint包含许多规则，与格式相关的规则可能与Prettier冲突，例如arrow-parens，space-before-function-paren等。因此，将它们一起使用会导致一些问题。已创建以下工具以一起使用ESLint和Prettier。

我在gist中写了一个comparison in a tabular format，因为Stack Overflow不支持表格格式化。如果您更喜欢组织，请查看它。

prettier-eslint：运行prettier，然后在代码上运行eslint --fix。 eslint通常具有格式化相关规则的自动修复功能，eslint --fix将能够修复Prettier引入的冲突格式。您无需单独运行prettier命令。

eslint-plugin-prettier：这是一个ESLint插件，意味着它包含ESLint将检查的其他规则的实现。这个插件使用了Prettier，当你的代码与Prettier的预期输出不同时会引发问题。这些问题可以通过--fix自动修复。使用此插件，您无需单独运行prettier命令，该命令将作为插件的一部分运行。此插件不会关闭与格式相关的规则，如果您手动或通过eslint-config-prettier发现此类规则存在冲突，则需要将其关闭。

eslint-config-prettier：这是一个ESLint配置，它包含规则的配置（某些规则是开启，关闭还是特殊配置）。此配置允许您通过关闭可能与Prettier冲突的格式相关规则，将Prettier与其他ESLint配置（如eslint-config-airbnb）一起使用。使用此配置，您不需要使用prettier-eslint，因为在Prettier格式化代码后，ESLint不会抱怨。但是，您需要单独运行prettier命令。

希望这总结了差异。