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

Question

我想一起使用Prettier和ESLint,但我只是通过一个接一个地运行它们而遇到了一些冲突.我看到有这三个包似乎允许它们串联使用:

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

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

我应该使用哪个？

Answer 1

ESLint包含许多规则和那些格式化有关可能与更漂亮冲突,比如arrow-parens,space-before-function-paren等.因此使用它们在一起会引起一些问题.已创建以下工具以一起使用ESLint和Prettier.

我在gist 中以表格格式编写了一个比较,因为Stack Overflow不支持表格格式.如果您更喜欢组织,请查看它.

prettier-eslint:prettier然后运行eslint --fix代码运行.eslint通常有自动修复格式化相关规则,并将eslint --fix能够修复Prettier引入的冲突格式.您无需prettier单独运行该命令.

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

eslint-config-prettier:这是一个ESLint配置,它包含规则的配置(某些规则是打开,关闭还是特殊配置).此配置允许您将Prettier与其他ESLint配置一起使用,例如eslint-config-airbnb关闭可能与Prettier冲突的格式相关规则.使用此配置,您无需使用,prettier-eslint因为在Prettier格式化代码后,ESLint不会抱怨.但是,您需要prettier单独运行该命令.

希望这总结了差异.