不知道项目的 Eslint 用了哪些配置？@eslint/config-inspector 帮你搞定目前合格的前端项目

前言

大家好！我是 嘟老板。目前合格的前端项目，离不开代码质量管理， Eslint 正是管理前端代码质量的关键工具之一。然而随着项目规模越来越大，Eslint 的配置也可能越来越复杂，你能整明白真正生效了哪些配置吗？如果你也有这个疑问，可以试试 @eslint/config-inspector。

阅读本文您将收获：

了解 @eslint/config-inspector 基本使用方法。

了解 @eslint/config-inspector 基础原理。

注意：
@eslint/config-inspector 适用于 Eslint V9.x 版本的平铺配置系统(flat configs)。

@eslint/config-inspector 是一款帮助我们检查和理解 Eslint 配置的可视化工具，可一一列出应用的配置和规则，一目了然。

在 Eslint 配置文件(如 eslint.config.js) 所在的目录下，执行以下命令启动服务：

npx @eslint/config-inspector@latest

若未全局安装 @eslint/config-inspector 依赖，会提示是否安装？安装成功后继续。

将 @eslint/config-inspector 作为项目依赖，若要将该工具作为项目命令执行，比如添加到 scripts，可选择该方式。

终端输入以下命令安装依赖：

pnpm add @eslint/config-inspector -D

安装完成后，package.json 文件的 devDependencies 会新增一个依赖项：

然后在 package.json 文件的 scripts 中定义相关命令，例如：

"scripts": {
    "eslint-inspector": "eslint-config-inspector --config eslint-inspector.config.ts",
  }

@zimu/eslint-config 中定义以上命令，通过 --config 标志指定需要检查的 Eslint 配置文件。

终端执行 pnpm eslint-inspector，即可启动服务。

服务启动成功后，访问 http://localhost:7777，查看项目应用的 Eslint 配置。

@eslint/config-inspector 提供了 build 命令，可在 .eslint-config-inspector 目录下生成一个 SPA（单页面）应用，若有需要，可直接部署到服务器。

例如，新增一个 build:eslint-inspector 命令：

"scripts": {
    "build:eslint-inspector": "eslint-config-inspector build --config eslint-inspector.config.ts",
  }

终端输入 pnpm build:eslint-inspector 执行：

成功后会在根目录下的 .eslint-config-inspector 目录内生成编译后的前端代码：

@eslint/config-inspector 使用比较简单，没有过于繁琐的配置。

不过会用不是本文的最终目的，了解其实现原理才是。知其然，也知其所以然，是我学技术的终极目标。

通过上述使用介绍可以发现，@eslint/config-inspector 的运行大致依赖于以下四个部分：

整个处理过程大致如下：

执行 eslint-config-inspector 命令，启动 Node 服务和 Websocket 服务。
Node 服务负责定义请求接口，包括 / 和 /api/payload.json。其中 / 接口用来展示对应的 html 页面，如浏览器访问 http://localhost:7777/，则会前端工程编译后的 index.html；/api/payload.json 返回 Eslint 配置解析结果数据，用于前端渲染。
Websocket 服务主要监听 Eslint 配置文件，若配置变更，则自动刷新页面展示，实现热更新效果。
/api/payload.json 接口内调用了 getData 函数，该函数核心逻辑是检索 Eslint 配置，若 eslint-config-inspector 命令使用 --config 标志指定配置文件，则检索指定配置；若未指定，则在当前目录下寻找以下 Eslint 配置文件：
- eslint.config.js
- eslint.config.mjs
- eslint.config.cjs
- eslint.config.ts
- eslint.config.mts
- eslint.config.cts
获取配置内容后对其进行解析，返回解析后的结果数据。
前端工程负责可视化，使用 Vue 实现，分为 configs、rules、files 三个页面组件及多个拆分组件。打开页面时，调用 /api/payload.json 接口获取 payload 数据进行展示。

本文重点介绍了 @eslint/config-inspector 工具的使用方法和设计原理。

@eslint/config-inspector 可通过 npx @eslint/config-inspector@latest 命令全局执行，也可项目中局部安装，并添加到 scripts 中使用。

@eslint/config-inspector 实现主要涉及四部分：命令行工具、Node 服务、Websocket 服务和前端工程。

其中，命令行工具 提供 eslint-config-inspector、build 命令；Node 服务 提供请求接口及页面跳转；Websocket 服务 负责监听 Eslint 配置文件，热更新；前端工程 负责可视化解析结果。

希望对您有所帮助！ZimuAdmin 的 @zimu/eslint-config 会集成该工具，欢迎 star。

如您对文章内容有任何疑问或想深入讨论，欢迎评论区留下您的问题和见解。

技术简而不凡，创新生生不息。我是 嘟老板，咱们下期再会。