漂亮的eslint，eslint的插件prettier和eslint的配置prettier有什么区别？ [英] What's the difference between prettier-eslint, eslint-plugin-prettier and eslint-config-prettier?

问题描述

我想一起使用Prettier和ESLint，但是我遇到了一些冲突，因为它们只是一个接一个地使用。我发现似乎有这三个软件包可以串联使用：

• prettier-eslint


• eslint-plugin-prettier


• eslint-config-prettier

但是，我不确定使用哪个作为这些软件包名称都包含 eslint 和更漂亮。

我该

解决方案

ESLint包含许多规则，与格式相关的规则可能与Prettier冲突，例如箭头括号，功能前空格等。因此，将它们一起使用会引起一些问题。已创建以下工具，以结合使用ESLint和Prettier。

我写了

prettier-eslint ：运行更漂亮，然后在代码上运行 eslint --fix 。 eslint 通常具有自动修复格式相关规则的格式，而 eslint --fix 将能够修复引入的冲突格式由更漂亮。您将不需要分别运行 prettier 命令。

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

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

希望这可以总结出差异。

更新：推荐的做法是让Prettier处理格式和ESLint以解决非格式问题， prettier-eslint 不在其中遵循与该做法相同的方向，因此，不再建议使用更漂亮的装饰。您可以同时使用 eslint-plugin-prettier 和 eslint-config-prettier 。

I want to use Prettier and ESLint together, but I experienced some conflicts just by using them one after another. I see that there are these three packages that seem to allow them to be used in tandem:

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

However, I am unsure which to use as these package names all contain eslint and prettier.

Which should I use?

解决方案

ESLint contains many rules and those that are formatting-related might conflict with Prettier, such as arrow-parens, space-before-function-paren, etc. Hence using them together will cause some issues. The following tools have been created to use ESLint and Prettier together.

I wrote a comparison in a tabular format in a gist, since Stack Overflow does not support table formatting. Check it out if you prefer more organization.

prettier-eslint: Runs prettier then run eslint --fix on the code. eslint usually has automatic fixes for formatting related rules, and eslint --fix will be able to fix the conflicting formatting introduced by Prettier. You will not need to run the prettier command separately.

eslint-plugin-prettier: This is an ESLint plugin, meaning it contains implementation for additional rules that ESLint will check for. This plugin uses Prettier under the hood and will raise issues when your code differs from Prettier's expected output. Those issues can be automatically fixed via --fix. With this plugin, you do not need to run the prettier command separately, the command is being run as part of the plugin. This plugin does not turn off formatting-related rules, and you will need to turn them off if you see conflicts for such rules either manually or via eslint-config-prettier.

eslint-config-prettier: This is an ESLint config, and it contains configurations for rules (whether certain rules are on, off, or special configurations). This config allows you to use Prettier with other ESLint configs like eslint-config-airbnb by turning off formatting-related rules that might conflict with Prettier. With this config, you do not need to use prettier-eslint as ESLint would not complain after Prettier formats your code. You will however, need to run the prettier command separately.

Hope this sums up the differences.

Update: It's the recommended practice to let Prettier handle formatting and ESLint for non-formatting issues, prettier-eslint is not in the same direction as that practice, hence prettier-eslint is not recommended anymore. You can use eslint-plugin-prettier and eslint-config-prettier together.

这篇关于漂亮的eslint，eslint的插件prettier和eslint的配置prettier有什么区别？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！