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。