ESLint 配置检查器 是由著名开发者 Anthony Fu 创建的一款强大的可视化工具，旨在帮助开发者深入理解和检查 ESLint 的扁平化配置文件。自 ESLint v9.0.0 引入新的配置系统以来，配置文件的结构变得更加简洁和透明，极大地简化了配置和维护的复杂度。然而，对于一些复杂或来源多样的配置，开发者仍可能面临难以跟踪规则应用和来源的问题。为了应对这种挑战，ESLint 推出了配置检查器工具，为开发者提供了一个直观的界面，帮助他们清晰地看到规则在项目中的应用情况，快速诊断配置问题。
安装
要使用 ESLint 配置检查器，首先需要将其安装为开发依赖：
pnpm add @eslint/config-inspector -D
安装完成后，您就可以在项目中运行 ESLint 配置检查器了。
使用
配置示例
首先，确保您的 eslint.config.js 配置正确。以下是一个基本的配置示例：
import pluginVue from "eslint-plugin-vue";
import js from "@eslint/js";
import ts from "typescript-eslint";
export default ts.config(
js.configs.recommended,
ts.configs.recommended,
...pluginVue.configs["flat/recommended"]
);
在这个配置中，我们导入了 Vue 插件、ESLint 的推荐规则、以及 TypeScript 的推荐配置，并将它们合并成一个统一的配置对象。这种方式便于我们通过检查器查看各个配置和规则的应用情况。
运行检查器
使用以下命令启动 ESLint 配置检查器：
npx @eslint/config-inspector
运行命令后，检查器会自动打开一个本地服务器，并访问 http://localhost:7777，您将能够看到详细的配置分析和规则应用情况。
功能界面
ESLint 配置检查器的界面分为多个选项卡，帮助开发者轻松查看配置、规则和文件匹配等信息。以下是各个部分的详细介绍：
Configs 配置项
在“配置”选项卡中，您可以看到所有配置对象的详细列表，特别适用于查看外部配置或动态生成的配置。由于 ESLint 配置现在是扁平化的，配置项的层级结构变得更为简洁。在此界面中，您可以看到各个配置项是如何被解析并在您的项目中应用的。
配置展开示例
每一项配置都可以展开查看，以便您快速理解配置的内容和来源。例如，js 配置项可能看起来如下所示：
这展示了 js 配置下的语言配置、忽略规则配置以及文件匹配规则等内容。通过这种方式，您能够清晰地看到每个配置项的具体内容，特别是在多层嵌套的配置文件中，检查器会帮您有效地进行层级化展示。
Rules 规则列表
“规则”选项卡为您提供了一个可视化的规则列表，可以帮助您快速了解项目中启用了哪些 ESLint 规则。每条规则都有一个图标，表示该规则的当前状态：
- 红色感叹号：规则已启用，并设置为
Error级别。 - 灰色禁用图标：规则已禁用。
- 三角形感叹号：规则已启用，并设置为
Warning级别。
这些图标能够直观地反映规则的状态，您只需点击它们，即可查看该规则的具体配置来源。
规则视图示例
在规则视图中，您可以切换到不同的展示方式：
- 列表视图：展示所有规则及其应用状态。
- 网格视图：将规则按类别分组，便于快速查看。
例如，如果您发现某个规则的状态不符合预期，可以直接通过点击相应图标来查看其具体配置，找出配置文件中该规则的来源。
Files 文件列表
“Files”选项卡显示了 ESLint 规则应用到的文件列表，帮助您了解规则如何与项目中的文件匹配。这对于排查某个规则是否生效在特定文件中，或者检查某个文件中哪些规则被启用至关重要。
文件视图示例
在文件视图中，您可以查看匹配特定规则的文件，点击某个文件名可以跳转到该文件对应的配置项。
此外，还有一个名为“File Groups”的视图，它将规则按名称进行分组，每个组下列出了所有匹配该规则的文件。这种方式帮助开发者快速了解哪些文件受特定规则影响，并可以及时进行调整。
通过这种分组方式，您可以更容易地发现规则配置中的问题，并做出相应的修改。
小结
ESLint 配置检查器是一个强大的工具，帮助开发者更加高效地理解和管理 ESLint 配置，特别是在面对复杂的多层级配置时。通过其清晰的界面，您可以直观地查看配置、规则和文件的关系，快速诊断并修复潜在问题。配置调整后可以立即生效，确保代码质量保持一致性。
借助配置检查器，您不仅能够理清规则的应用，还可以发现配置中可能存在的冗余或冲突，并做出优化。
