别再用 ESLint 格式化你的代码了！原理揭秘。

以下两个工具通常被用来帮助 ESLint 与 Prettier 更好地交互：

• eslint-config-prettier：一个 ESLint 共享配置，它禁用了与格式化相关的规则
• eslint-plugin-prettier：一个 ESLint 插件，它将 Prettier 作为规则在 ESLint 内部运行

我认为在大多数项目中，这两个工具都不再有用。本文将解释每个工具的用途、它们之间的区别，以及为什么我通常不使用它们。

回顾：ESLint 自定义

ESLint通过让用户单独配置“规则”或对代码库进行检查来工作。ESLint 将执行代码解析成规则可以理解的形式、将代码传递给这些规则，并让你知道任何由这些规则发出的报告。

ESLint 具有高度可扩展性：这意味着你可以自定义其运行的许多方面。最常见的自定义方式有：

• 解析器：替换 ESLint 内置的 JavaScript 解析器，以支持读取与原生 JavaScript 语法不同的代码
• 插件：提供一组可配置的规则
• 共享配置：为任何数量的规则提供配置选项，无论是作为独立的 npm 包还是作为插件的一部分

请注意，插件和共享配置是两个不同的东西。

• 插件使规则可用，而不配置这些规则。
• 共享配置配置 ESLint 自带的规则和/或之前在插件中提供的规则。

ESLint 自定义示例：TypeScript

如果你使用 ESLint 来检查 TypeScript 代码，那么你希望使用所有三种自定义：

• 解析器：@typescript-eslint/parser支持解析 TypeScript 代码
• 插件：@typescript-eslint/eslint-plugin加载特定于 TypeScript 的规则
• 共享配置：与@typescript-eslint/eslint-plugin一起打包的共享设置，可以一次性配置许多规则，例如plugin:@typescript-eslint/recommended。

请注意，typescript-eslint 的共享配置来自@typescript-eslint/eslint-pluginnpm 包。因此，它们前面有plugin:前缀：这是 ESLint 知道在哪里找到配置的方式。

eslint-config-prettier

eslint-config-prettier是一个共享配置，它禁用了与格式化相关的规则。你可以通过在 ESLint 配置中的"extends"数组中列出它来加载它：

代码语言：javascript复制

{
  "extends": [
    // （简写为"eslint-config-prettier"）
    "prettier"
  ]
}

eslint-config-prettier的唯一目的是关闭规则。在内部，它看起来像一个对象，其中包含许多值为0或"off"的属性。大致如下：

代码语言：javascript复制

{
  "curly": "off",
  "no-unexpected-multiline": "off",
  "@babel/object-curly-spacing": "off",
  "@typescript-eslint/lines-around-comment": "off"
}

eslint-config-prettier 为何出现

过去，流行的共享配置，如 eslint-config-airbnb，经常被用来一次启用许多规则。这些配置之所以流行，是因为它们建立了一个众所周知的、有意见的风格指南和代码逻辑检查。它们的缺点是它们经常过于武断——甚至启用了格式化规则。

开发者通过知道 ESLint 按照它们在"extends"下列出的顺序评估配置来绕过这些格式化规则。eslint-config-prettier可以在项目的 ESLint 配置中最后列出，以关闭之前插件启用的任何格式化规则。

代码语言：javascript复制

{
  "extends": [
    // 1. 配置许多ESLint规则，包括启用一些格式化规则
    "airbnb",
    // 2. 仅禁用之前配置中的格式化规则
    "prettier"
  ]
}

通过从eslint-config-prettier最后扩展，项目可以在不运行 ESLint 中的格式化规则的情况下获得那些流行共享配置的好处。

eslint-config-prettier 为何通常不必要

在过去几年中，ESLint 最佳实践在两个方面（以及其他方面）得到了发展：

• ESLint 核心和大多数社区插件已经确定，在共享配置中启用过于武断的规则——尤其是风格化规则——会让开发者不喜欢 ESLint 而没有太多实际好处
• ESLint 和 typescript-eslint 的推荐规则集已经包括了大多数有益的逻辑规则，这些规则集如eslint-config-airbnb主要用于这些规则

因此，许多新项目没有感觉到需要加载如eslint-config-airbnb这样武断的共享配置。许多项目从一个更简单的配置集开始：

1. 开始："eslint:recommended"，ESLint 的内置推荐配置
2. 如果使用 TypeScript："plugin:@typescript-eslint/recommended"或"plugin:@typescript-eslint/recommended-type-checked"，用于推荐的 TypeScript 规则
3. 任何框架或库特定的插件，如eslint-plugin-jsx-a11y的"plugin:jsx-a11y/recommended"

如果你不使用一个启用格式化规则的遗留 ESLint 共享配置，你很可能不需要eslint-config-prettier。 如果在"extends"列表末尾添加eslint-config-prettier，如果一开始没有启用格式化规则，则什么也不做。因此，大多数项目从eslint-config-prettier中没有获得任何好处。

此外，使用eslint-config-prettier冗余地使用可能会出现两个令人困惑的问题：

• 在 ESLint 配置中看到对prettier的引用可能会让新接触该领域的开发者感到困惑。
• 没有什么可以阻止项目在 ESLint 配置的"overrides"或"rules"属性下手动重新启用格式化规则。

我现在建议大多数新项目不要包含eslint-config-prettier。

插件 工具 配置 原理 eslint

0 人点赞