Skip to main content

格式化怎么样？


我们建议不要使用 ESLint 进行格式化。 我们建议使用 Prettier、dprint 或等效项。

英：We recommend against using ESLint for formatting. We recommend using Prettier, dprint, or an equivalent instead.

格式化器与代码检查器​

格式化程序 是验证和纠正代码中的空白问题（例如空格和换行符）的工具。 格式化程序通常运行得非常快，因为它们只关心更改空白，而不是代码逻辑或命名。

英：Formatters are tools that verify and correct whitespace issues in code, such as spacing and newlines. Formatters typically run very quickly because they are only concerned with changing whitespace, not code logic or naming.

代码检查器 是验证和纠正代码中的逻辑和非空白样式问题的工具，例如命名一致性和错误检测。 Linters 通常需要几秒钟或更长时间才能运行，因为它们将许多逻辑规则应用于代码。

英：Linters are tools that verify and correct logical and non-whitespace style issues in code, such as naming consistency and bug detection. Linters often take seconds or more to run because they apply many logical rules to code.

使用代码检查器作为格式化器的问题​

Linters 被设计为在解析、检查、报告、修复周期中运行。 这意味着在 linter 修复代码的格式问题之前需要完成许多中间工作。

英：Linters are designed to run in a parse, check, report, fix cycle. This means that there is a lot of intermediate work that needs to be done before a linter can fix a formatting issue with your code.

此外，linter 通常运行彼此隔离的每条规则。 这有几个问题，例如：

英：Additionally linters typically run each rule isolated from one another. This has several problems with it such as:

  • 任何两个 lint 规则不能共享配置，这意味着一个 lint 规则的修复程序可能会违反另一个 lint 规则的修复程序（例如，一个 lint 规则可能使用不正确的缩进字符）。
  • lint 规则修复程序可能会发生冲突（应用于相同的代码范围），从而迫使 linter 执行额外的循环以尝试将修复程序应用于一组干净的代码。

这些问题导致 linter 变慢 - 这在启用 类型化的 linting 的项目中可能是一个更大的问题。 与专用格式化程序相比，使用 linter 进行格式化的一致性也较差，并且无法处理边缘情况。 因此，与格式相关的 lint 规则的维护成本通常非常高。

英：These problems cause a linter to be much slower - which can be much more of a problem in projects that enable typed linting. Formatting with a linter is also much less consistent and less able to handle edge-cases than a purpose-built formatter. The maintenance cost of formatting-related lint rules is typically very high as a result.

Prettier 等现代格式化程序的架构方式是将格式应用于所有代码，而不管原始格式如何。 这种设计使格式化程序更加全面和一致，并且维护成本比 linter 低得多。

英：Modern formatters such as Prettier are architected in a way that applies formatting to all code regardless of original formatting. This design allows formatters to be much more comprehensive and consistent at much lower maintenance cost than linters.

建议用法 - Prettier​

typescript-eslint 和 ESLint 核心都不会在任何推荐的预设中启用任何与格式相关的规则。 但是，某些第三方插件配置可能仍然会导致这种不良做法。

英：Neither typescript-eslint nor ESLint core enable any formatting-related rules in any recommended presets. However, some third party plugin configurations may still enable that bad practice.

如果你看到 ESLint 配置中启用了格式化规则，我们建议使用 eslint-config-prettier 在 ESLint 配置中禁用格式化规则。 然后，你可以与 ESLint 分开配置格式化程序。

英：If you see formatting rules enabled in your ESLint configuration, we recommend using eslint-config-prettier to disable formatting rules in your ESLint configuration. You can then configure your formatter separately from ESLint.

通过将其添加到 extends 的末尾来使用此配置：

英：Using this config by adding it to the end of your extends:

.eslintrc.js
/* eslint-env node */
module.exports = {
  extends: [
    'eslint:recommended',
    'plugin:@typescript-eslint/recommended',
    'other-configuration-that-enables-formatting-rules',
    'prettier',
  ],
  parser: '@typescript-eslint/parser',
  plugins: ['@typescript-eslint'],
  root: true,
};

请注意，即使你使用 prettier 以外的格式化程序，你也可以使用 eslint-config-prettier，因为它专门将 off 转换为所有格式化规则。

英：Note that even if you use a formatter other than prettier, you can use eslint-config-prettier as it exclusively turns off all formatting rules.

eslint-plugin-prettier​

eslint-config-prettier 与 eslint-plugin-prettier 不同。

英：eslint-config-prettier is not the same as eslint-plugin-prettier.

  • 该配置仅禁用来自核心和其他插件的规则。
  • 该插件在 ESLint 内加载并运行 Prettier。

在 ESLint 中运行 Prettier 可能会很慢： 见 性能故障排除 > eslint-plugin-prettier。 然而，因为它没有在 ESLint 中重新实现 Prettier 的逻辑，所以提到的使用 linter 进行格式化的警告也不适用于 eslint-plugin-prettier。

英：Running Prettier inside ESLint can be slow: see Performance Troubleshooting > eslint-plugin-prettier. However, because it doesn't re-implement Prettier's logic in ESLint, the caveats mentioned about using linters for formatting don't apply to eslint-plugin-prettier either.

ESLint 核心和格式化​

大多数 lint 规则属于两到三类之一：

英：Most lint rules fall into one of two to three categories:

  • 逻辑性： 关心代码运行时行为逻辑的规则（例如缺少 await 或无效的逻辑检查）。
  • 文体： 关心样式问题的规则确实会影响代码的运行时行为，但通常不会影响逻辑。 这些主要是围绕命名或使用大致等效的语法结构（例如函数声明与箭头函数）。
    • 格式化： 只关心琐事（分号、空格等）的风格规则，而不影响代码的运行时行为。 这些规则与 Prettier 等专用格式化程序冲突。

根据 ESLint 的 2020 年规则政策变更博客文章，ESLint 本身已经放弃了风格规则，包括格式规则：

英：Per ESLint's 2020 Changes to Rule Policies blog post, ESLint itself has moved away from stylistic rules, including formatting rules:

风格规则被冻结 - 我们不会向风格规则添加任何更多选项。 我们了解到，没有办法满足每个人的个人喜好，而且大多数规则已经有很多难以理解的选项。 文体规则是指与间距、约定以及一般任何不突出错误或更好的做某事的方法相关的规则。

我们反映了 ESLint 团队摆脱格式和风格规则的做法。 除了错误修复之外，typescript-eslint 不会接受任何新的与格式或风格相关的拉取请求。

英：We mirror the ESLint team's move away from formatting and stylistic rules. With the exception of bug fixes, no new formatting- or stylistic-related pull requests will be accepted into typescript-eslint.

eslint-stylistic​

使用综合格式化程序进行格式化的缺点是它将严格地将意见应用于代码。 尽管你可以使用 忽略 Prettier 中的代码 和其他格式化程序（包括内联格式化程序，如 // prettier-ignore 注释），但格式化程序比 lint 规则更加有态度。

英：The downside of using a comprehensive formatter for formatting is that it will strictly apply opinions to code. Although you can ignore code in Prettier and other formatters, including inline such as with // prettier-ignore comments, formatters are much more opinionated than lint rules.

eslint-stylistic 项目提供了一个包含格式和风格规则的 ESLint 插件。 如果你强烈不想使用专用格式化程序，则该插件可以用作你的格式化程序。

英：The eslint-stylistic project provides an ESLint plugin containing formatting and stylistic rules. That plugin can serve as your formatter if you strongly prefer not to use a dedicated formatter.

有关该项目动机的更多详细信息，请参阅 ESLint 风格 > 为什么？，有关如何设置该项目的更多详细信息，请参阅 ESLint Stylistic > 入门。

英：See ESLint Stylistic > Why? for more details on that project's motivation, and ESLint Stylistic > Getting Started for how to set it up.