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

Posted 2023-02-22

【中文标题】防止 Prettier（代码格式化程序）和 ESLint/TSLint 之间的冲突

【英文标题】：Preventing conflict between Prettier (code formatter) and ESLint/TSLint

【发布时间】：2019-10-29 10:59:52

【问题描述】：

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

我知道这不是一个“错误”，但我更喜欢干净的构建，并且喜欢尽可能删除警告。

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

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

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

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

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

所以，归根结底，我必须处理不同意的情况，让我别无选择，只能忽略这一点，做我想让他们做的事，那就是一起玩得很好。

还有其他人反对这个吗？有没有办法： 1) 停止 prettier 仅在此特定情况下添加分号，或者... 2) 阻止 linter 仅在这种特定情况下将其报告为警告？

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

【参考方案1】：

通常，在使用 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

【参考方案2】：

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

我完全同意@Josh 的观点，即你应该让 prettier 做它的事情并让 linter 同意它的风格选择。但是我不想依赖额外的插件，而且 TSLINT 文章有点太长了，所以这里是你需要调整的具体规则：

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

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

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

【讨论】：

旁注：自 2019 年起，TSLINT 已被弃用