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

Question

我想把 Prettier 和 ESLint 一起用，但是一个接一个用就遇到了一些冲突。我看到有这三个包似乎允许它们串联使用：

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

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

我应该使用哪个？

Answer 1

tl;dr: 使用eslint-config-prettier，其余的可以忽略。

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

	prettier-eslint	eslint-plugin-prettier	eslint-config-prettier
What it is	A JavaScript module exporting a single function.	An ESLint plugin.	An ESLint configuration.
What it does	Runs the code (string) through prettier then eslint --fix. The output is also a string.	Plugins usually contain implementations for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise ESLint errors when your code differs from Prettier's expected output.	This config turns off formatting-related rules that might conflict with Prettier, allowing you to use Prettier with other ESLint configs like eslint-config-airbnb.
How to use it	Either calling the function in your code or via prettier-eslint-cli if you prefer the command line.	Add it to your .eslintrc.	Add it to your .eslintrc.
Is the final output Prettier compliant?	Depends on your ESLint config	Yes	Yes
Do you need to run prettier command separately?	No	No	Yes
Do you need to use anything else?	No	You may want to turn off conflicting rules using eslint-config-prettier.	No

有关详细信息，请参阅 official Prettier docs。

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