Eslint是如何工作的（深度源码解析）

阅读本文，您将收获

• 如何直接调试eslint node_modules源码
• 文件遍历以及文件配置生成过程
• 如何将代码转换成ast
• 如何利用ast和rules生成错误信息
• 如何利用ast和rules进行代码修复

首先，我们需要了解几个重要的点：

• ESLint/FlatESLint入口对应的类, 下图是它的调用方式路径：* node_modules\eslint\lib\eslint\eslint.js* node_modules\eslint\lib\eslint\flat-eslint.js<img src="https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/0513fda628c74f7c8626ae1cc4bdc98c~tplv-k3u1fbpfcp-zoom-in-crop-mark:4536:0:0:0.image?)* CLIEngine 该类是 Eslint 的大脑，控制 Eslint 的执行流程，调用 api 时一般只需要操作 CLIEngine 即可路径: node_modules\eslint\lib\cli-engine\cli-engine.js* FileEnumerator遍历每个文件，并为文件绑定config路径: node_modules\eslint\lib\cli-engine\file-enumerator.js* Linter 该类是 Eslint 的执行总裁，配置文件加载、校验、修复都是该类来控制完成的路径: node_modules\eslint\lib\linter\linter.js* espree> espree是基于Acorn实现的> > 源码位置：node_modules\espree\dist\espree.cjs -> class Espree extends Parser``Eslint使用它将代码转成ast，核心方法espree.parse，路径：node_modules\espree\dist\espree.cjs在Linter类的初始化过程中会将espree缓存到internalSlotsMap全局对象中，后续verify环节会使用* * " style=“margin: auto” />

如何调试？

• 创建最小化eslint demo（字符串这里选择单引号规则）mkdir eslint-demo & cd eslint-demo npm init -ynpm init @eslint/config# 选择js特性即可，字符串请选择单引号规则mkdir src & echo > src/index.js'const a = "hello";' * 配置package.json，修改`script````{ “name”: “eslint-demo”, “version”: “1.0.0”, “main”: “index.js”, “scripts”: { “test”: “npx eslint index.js” }, “devDependencies”: { “eslint”: “^8.27.0” }} * 配置launch.json (后续打断点，按F5即可调试)mkdir .vscode & touch launch.json **launch.json**{“version”: “0.2.0”,“configurations”: [{“name”: “Launch via NPM”,“request”: “launch”,“runtimeArgs”: [“run-script”,“test”],“runtimeExecutable”: “npm”,“skipFiles”: [“<node_internals>/**”],“type”: “node”}]} * 进入node\_modules/eslint/bin/eslint.js找到以下代码所在行，打个断点，按F5即可开启调试require(“…/lib/cli”).execute ```文件遍历以及文件配置生成过程

---

从入口CLIEngine.executeOnFiles调用fileEnumerator.iterateFiles实现文件的遍历和配置生成，其中patterns为命令行传入的文件范围，它可以传一个固定的路径或者模式匹配，具体过程见下图：

如何将代码转换成tokens & ast

主要是调用spree.parse完成转换过程，具体过程见下图：

如何利用ast和rules生成错误信息

通过调用runRules函数，并执行Traverser.traverse遍历ast tree, 并调用相应的检测函数进行校验，输出问题信息

值得注意的是，problems信息中包含fix数据，为后续fix代码做铺垫

如何利用ast和rules进行代码修复

在上一步拿到problems信息的基础上，进一步分析，发现调用了applyFixes函数，即修复过程，具体过程见下图：

p-mark:4536:0:0:0.image?" style=“margin: auto” />

好了，到此文章结束，感谢您的阅读，如果觉得对您有帮助，帮点个小红心，万分感谢~~

最后

为大家准备了一个前端资料包。包含54本，2.57G的前端相关电子书，《前端面试宝典（附答案和解析）》，难点、重点知识视频教程（全套）。



有需要的小伙伴，可以点击下方卡片领取，无偿分享