防止 Prettier（代码格式化程序）和 ESLint/TSLint 之间的冲突

Question

我正在 VS Code 中开发一个 Angular 项目，使用“Prettier”插件进行代码格式化，使用 ESLint/TSLint 插件进行标准执行。

我知道这不是“错误”，但我非常喜欢干净的构建，并希望尽可能删除警告。

  groupMouseDown = d => {
   ...
  }; <--- This semicolon is the issue

上面是 Typescript 中的一个函数，使用“胖箭头”语法，使函数内联。请注意，在该行的末尾，是一个分号。

我不是在这里开始争论分号是否应该在这里，网上有很多这样的。相反，我只需要处理它。

Prettier 被认为是一个“固执己见”的格式化者，他们在这个问题上的立场是他们认为它应该存在。这很好，但他们也拒绝添加一个不把它放在那里的选项，因此是“有意见的”部分。

另一方面，linters 认为分号不应该存在，因此他们将其标记为不必要的分号。到目前为止，我还没有找到不将此报告为警告的选项，除非我为每个案例删除它。

所以，在一天结束时，我必须解决不同意的问题，让我别无选择地忽略这一点并做我想让他们做的事情，这就是一起玩得很好。

有没有其他人反对这个？有没有办法：1）仅在这种特定情况下停止添加分号，或者... 2）停止短绒仅在这种特定情况下将其报告为警告？

我不想做的是告诉 Prettier 不要在需要的地方放置任何分号，也不想告诉 linters 忽略所有不必要的分号。

Answer 1

这里没有接受的答案，所以我将分享我的两分钱：

我完全同意 @Josh 的观点，即你应该让 prettier 做它的事情并使 linter 同意它的风格选择。但是，我不想依赖额外的插件，并且 TSLINT 文章有点太长而无法阅读，因此这里是您需要调整的特定规则：

如果您使用的是 TSLINT，则可以将以下规则添加到您的tslint.json文件中

• "semicolon": [true, "always", "ignore-bound-class-methods"]
• 来源：tslint 文档

我还没有使用 ESLINT，所以我不知道 linter 是否抱怨这个用例，如果是，我没有找到任何处理它的选项

Answer 2

通常，在使用 Prettier 时，最好让 Prettier 完成所有格式化工作。仅将 linter 用于非格式问题，例如错误检测。

ESLint 和 TSLint 都有插件可以关闭所有样式规则：

• ESLint：https : //github.com/prettier/eslint-plugin-prettier
• TSLint：https : //github.com/prettier/tslint-plugin-prettier

如果您的 linter 仍然抱怨某些格式规则，您可以在这些 GitHub 项目上提交错误，同时配置您的 linter 以禁用该规则：

• ESLint：https ://eslint.org/docs/user-guide/configuring
• TSLint：https ://palantir.github.io/tslint/usage/configuration

或者，您可以在行、块或文件的基础上禁用规则：

• ESLint：https ://eslint.org/docs/3.0.0/user-guide/configuring#configuring-rules
• TSLint：https ://palantir.github.io/tslint/usage/rule-flags/

这很好，但他们也拒绝添加一个不把它放在那里的选项，因此是“有意见的”部分。

以防万一有人从 Google 来到这里并感到困惑：Prettier 确实有配置选项，只是不像帖子想要的那么细。https://prettier.io/docs/en/configuration.html