漂亮的eslint，eslint的插件prettier和eslint的配置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一起使用。

由于堆栈溢出不支持表格式 ，因此我以要点的表格格式编写了一个比较 。 如果您喜欢更多的组织机构，请查看。

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

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

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

希望这可以总结出差异。

更新：建议的做法是让Prettier处理格式和ESLint以解决非格式问题， prettier-eslint与该做法的方向不同，因此，不再建议使用prettier-eslint 。 您可以同时使用eslint-plugin-prettier eslint-config-prettier和eslint-config-prettier 。