如何查看ESLint配置文件？

照片由 Mark Koch 拍摄，（经由）Unsplash。来源：

ESLint 是一个通过静态代码分析在项目中确保代码质量的优秀工具，现在它使用了一个扁平化的配置文件，简化了配置流程。这样，配置过程变得更加简单。

在我看来，只要配置好了并按预期工作时，ESLint是非常出色的，但要调试配置文件总是很麻烦。

幸運的是，你可以使用扁平配置中的ESLint Config Inspector这一有用开发工具，我将在接下来的文章中详细探讨一下。

让我们假设你最近刚将 ESLint 添加到了你的 Angular 应用程序中，因此 eslint.config.js 文件（注意，文件名保留英文原样）如下：

    // @ts-check  
    const eslint = require("@eslint/js");  
    const tseslint = require("typescript-eslint");  
    const angular = require("angular-eslint");  

    // 导出配置，用于处理 TypeScript 文件的检查配置
    module.exports = tseslint.config(  
      {  
        files: ["**/*.ts"],  
        extends: [  
          eslint.configs.recommended,  
          ...tseslint.configs.recommended,  
          ...tseslint.configs.stylistic,  
          ...angular.configs.tsRecommended,  
        ],  
        processor: angular.processInlineTemplates,  
        rules: {  
          "@angular-eslint/directive-selector": [  
            "error",  
            {  
              type: "attribute",  
              prefix: "app",  
              // 属性选择器的样式设定为驼峰式
              style: "camelCase",  
            },  
          ],  
          "@angular-eslint/component-selector": [  
            "error",  
            {  
              type: "element",  
              prefix: "app",  
              // 元素选择器的样式设定为短横线分隔
              style: "kebab-case",  
            },  
          ],  
        },  
      },  
      {  
        files: ["**/*.html"],  
        extends: [  
          ...angular.configs.templateRecommended,  
          ...angular.configs.templateAccessibility,  
        ],  
        rules: {},  
      }  
    );

它运行得非常好；不仅考虑了 TypeScript 文件，还考虑了 HTML 文件。但背后到底发生了什么呢？

让我们运行以下命令来运行 ESLint 配置检查：

    npx eslint --inspect-config

运行此命令来检查和显示 ESLint 配置详情。

用户界面包含三个选项卡：

• 设置
• 规
• 档

zh: 设置

此视图展示了所有的配置对象（配置项）在您的 ESLint 配置中。这里有 19 个配置项，但它们的来源可能并不明确，。如果您看看针对 TypeScript 文件的配置，可以看到我们引入了四个第三方插件。

    // 以下是代码片段，用于配置tslint。
    module.exports = tseslint.config(  
      {  
        files: ["**/*.ts"],  // 指定所有扩展名为.ts的文件。
        extends: [  
          // 继承eslint推荐的规则。
          eslint.configs.recommended,  
          // 继承tslint推荐的规则。
          ...tseslint.configs.recommended,  
          // 继承tslint推荐的格式化规则。
          ...tseslint.configs.stylistic,  
          // 继承angular推荐的typescript规则。
          ...angular.configs.tsRecommended,  
        ],  
        // 部分配置项已被省略，以保持简洁。
        ...  
      },  
      // 部分配置项已被省略，以保持简洁。
      ...  
    );

当谈到HTML文件来说，通常有两个第三方插件。

    module.exports = tseslint.config(  
      {  
        files: ["**/*.html"],  
        extends: [  
          ...angular.configs.templateRecommended,  
          ...angular.configs.templateAccessibility,  
        ],  
        rules: {},  
      },  
      ...  
    );

// 此代码段用于配置 ts-lint，指定对 HTML 文件进行检查，并继承了 angular 自定义的模板相关配置。

让我们关注一下 tseslint.configs.recommended 这个条目，以理解为什么配置视图中显示了 19 个配置项。事实上，这个条目实际上是一个包含多个配置对象的数组，对总数的贡献很大，这也是总数达到19的原因。

• 基础设置：设置插件及解析器。

• eslint-recommended: 从 eslint.configs.recommended 中的规则调整，以便更好地与TypeScript文件协同工作。

• 建议如下：为 TypeScript 文件设置特定规则。

你可以很容易地通过规则名称前的图标来看出一个特定的配置对象如何影响规则的严重程度（关闭、警告、错误）。它还提供了一些关于规则本身的额外信息，如该规则是否被推荐执行、是否支持自动修复功能以及简短的描述。

总之，「配置」标签允许你查看并检查所有适用于 ESLint 配置文件的配置对象。

规则:

此视图展示了我们在“配置”选项卡中看到的所有规则设置。

这个视图一开始看起来可能因为众多的过滤选项而让人感到有些不知所措。你可以用下面的方法来筛选规则：

• 插件（规则自带的插件）
• 使用（规则的严重性及其他分组过滤器）
• 状态（规则的相关信息 — 是否被推荐、是否可修复、是否已弃用）

此外，还有一个搜索功能，你可以使用它通过关键词进行筛选。

真正强大之处在于它能展示一个特定配置对象如何影响规则的最终设定。

我们可以看到，后面定义的配置项会覆盖前面的配置，并覆盖该规则的严重性级别。这在你想要了解某个规则为何在最终配置中处于激活或未激活状态时很有用。

文件

最后但同样重要的是，您可以专注于特定文件并查看哪些配置对象与它相关。

另外，您可以查看匹配规则的列表，并检查哪个配置项是规则的来源。

ESLint Config Inspector 是一个非常有用的工具，适用于使用 ESLint 扁平配置的开发人员。它提供了对配置对象、规则及其应用于特定文件的详细分解。这使得调试和理解配置变得更加容易。它能帮你节省时间，减少挫败感，提供清晰的洞察力，确保您的 ESLint 配置在整个项目中都能正常工作。

希望你看了我的博客觉得不错，谢谢你的阅读！🙂