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

Question

我想同时使用 Prettier 和 ESLint，但是在依次使用它们时遇到了一些冲突。我发现有这三个包似乎可以让它们协同使用：

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

然而，这些包的名称都包含eslint和prettier，我不确定应该使用哪一个。

请问我应该使用哪个包？

- Yangshun Tay

Answer 1

简而言之：使用 eslint-config-prettier，你可以忽略其他内容。

2023年更新：ESLint正在弃用格式化规则，并建议您使用源代码格式化工具。从v8.53.0版本开始，如果您的配置中启用了这些格式化规则，您将看到一个弃用警告。在新的主要版本中删除这些规则之前，您仍应该使用 eslint-config-prettier。

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

	prettier-eslint	eslint-plugin-prettier	eslint-config-prettier
它是什么	一个导出单个函数的JavaScript模块。	一个ESLint插件。	一个ESLint配置。
它的作用	将代码（字符串）通过prettier和eslint --fix运行。输出也是一个字符串。	插件通常包含额外规则的实现，ESLint将对其进行检查。该插件在底层使用Prettier，并在代码与Prettier的预期输出不一致时引发ESLint错误。	此配置关闭可能与Prettier冲突的格式相关规则，允许您将Prettier与其他ESLint配置（如eslint-config-airbnb）一起使用。
如何使用	在您的代码中调用该函数，或者如果您更喜欢命令行，则通过prettier-eslint-cli。	将其添加到您的.eslintrc中。	将其添加到您的.eslintrc中。
最终输出是否符合Prettier规范？	取决于您的ESLint配置	是	是
是否需要单独运行prettier命令？	否	否	是
是否需要使用其他内容？	否	您可能希望使用eslint-config-prettier关闭冲突规则。	否

更多信息，请参考官方 Prettier 文档。

推荐的做法是让 Prettier 处理格式化问题，而使用 ESLint 处理非格式化问题，因此不再推荐使用 prettier-eslint。您可以同时使用 eslint-plugin-prettier 和 eslint-config-prettier。

- Yangshun Tay

---

关于eslint插件和配置之间的一般区别，我想提出评论，因为我觉得这是我所缺少的：插件定义了新的eslint规则，而配置设置规则是否应该被应用以及如何应用。 - laugri

使用 eslint-config-prettier，为什么我们还需要运行 prettier 呢？难道 eslint --fix 不会以与 prettier 相同的方式格式化代码吗？ - Mateo Hrastnik

2019年了，这仍然是我找到的最好的解释，比官方解释好多了。你可以补充说明，现在不再建议使用prettier-eslint了。另外后两者现在可以一起使用。 - Fate Riddle

@theblang，推荐的做法是让 Prettier 处理格式问题，ESLint 处理非格式问题。prettier-eslint 不符合这种做法。 - Yangshun Tay

不知道你是好奇还是想了解，推荐这种做法的人是谁？ - theblang

Answer 2

使用`eslint-config-prettier`来关闭不必要的eslint规则，或者可能与Prettier冲突的规则。请参阅自述文件的第一行：eslint-config-prettier。

使用`eslint-plugin-prettier`将Prettier作为Eslint规则运行。请参阅自述文件的第一行：eslint-plugin-prettier。

同时使用两者以充分利用这两个工具。请参阅推荐配置：eslint-plugin-prettier。 这样，您可以使用`plugin`将Prettier作为Eslint规则运行，并使用`config`关闭不必要的eslint规则，或者可能与Prettier冲突的规则。

您可以忽略`prettier-eslint`。

- nickap