各位靓仔靓女，晚上好！我是你们的老朋友，今天咱们来聊聊Eslint的幕后英雄——抽象语法树（AST）。别怕，这名字听起来吓人，其实它就像是代码的X光片，能把代码的骨架看得清清楚楚。咱们就从AST是啥、Eslint为啥用它，以及怎么用它来检查代码风格和语法这几个方面，掰开了揉碎了讲讲。
一、 啥是AST？代码的X光片！
想象一下，你去医院拍片，医生看到的不是你本人，而是你的骨骼。AST就是这么个东西，它把你的JavaScript代码“拍成”一棵树，这棵树上的每个节点都代表了你代码中的一个语法单元，比如变量声明、函数调用、循环语句等等。
举个例子，有这么一段简单的代码：
let x = 10;
console.log(x + 5);这段代码会被解析成一个AST，这个AST大致长这样（简化版）：
Program
|
|- VariableDeclaration (let x = 10)
| |
| |- VariableDeclarator (x = 10)
| |
| |- Identifier (x)
| |
| |- Literal (10)
|
|- ExpressionStatement (console.log(x + 5))
|
|- CallExpression (console.log(x + 5))
|
|- MemberExpression (console.log)
| |
| |- Identifier (console)
| |
| |- Identifier (log)
|
|- BinaryExpression (x + 5)
|
|- Identifier (x)
|
|- Literal (5)这棵树看起来有点复杂，但其实很简单：
- Program: 代表整个程序。
- VariableDeclaration: 代表变量声明，比如
let x = 10。 - VariableDeclarator: 代表变量声明符，比如
x = 10。 - Identifier: 代表标识符，也就是变量名，比如
x。 - Literal: 代表字面量，也就是具体的值，比如
10。 - ExpressionStatement: 代表表达式语句，比如
console.log(x + 5)。 - CallExpression: 代表函数调用，比如
console.log(x + 5)。 - MemberExpression: 代表成员表达式，比如
console.log。 - BinaryExpression: 代表二元表达式，比如
x + 5。
总之，AST就是把代码分解成一个个小的语法单元，然后用树状结构把它们组织起来。
二、 Eslint为啥要用AST？因为看得透彻！
Eslint如果直接分析代码字符串，那效率太低了，而且很容易出错。有了AST，Eslint就可以像医生看X光片一样，直接分析代码的结构，找出潜在的问题。
用AST的好处：
- 准确性高： AST是代码的语法结构表示，Eslint可以基于AST进行精确的分析，避免了字符串匹配的模糊性。
- 效率高： Eslint可以快速遍历AST，找到需要检查的节点，而不需要逐行扫描代码。
- 可扩展性强： 我们可以自定义Eslint规则，基于AST进行各种各样的检查，满足不同的需求。
三、 Eslint怎么用AST？规则就是命令！
Eslint的核心就是规则，每个规则都定义了一种代码风格或语法规范。Eslint会遍历AST，找到符合规则要求的节点，然后进行检查。
咱们来写一个简单的Eslint规则，检查变量名是否使用驼峰命名法。
-
创建规则文件： 比如
./eslint-rules/camelcase.js。 -
编写规则代码：
module.exports = {
meta: {
type: 'suggestion', // 规则类型：suggestion、problem、layout
docs: {
description: '强制使用驼峰命名法命名变量',
category: 'Stylistic Issues', // 规则分类
recommended: 'warn', // 推荐级别：off、warn、error
},
fixable: 'code', // 是否可自动修复
schema: [], // 规则选项
},
create: function (context) {
return {
VariableDeclarator(node) {
if (node.id.type === 'Identifier' && !/^[a-z]+([A-Z][a-z]+)*$/.test(node.id.name)) {
context.report({
node: node.id,
message: '变量名 {{name}} 必须使用驼峰命名法',
data: { name: node.id.name },
fix: function (fixer) {
// 自动修复的逻辑，这里省略
return null;
},
});
}
},
};
},
};这段代码解释如下：
meta：定义规则的元数据，包括类型、描述、分类、推荐级别等等。create：定义规则的具体逻辑。它接收一个context对象，这个对象包含了Eslint的上下文信息，比如AST、源代码等等。VariableDeclarator(node)：这是一个选择器，它会匹配AST中的所有VariableDeclarator节点，也就是变量声明符。node：代表当前匹配到的VariableDeclarator节点。node.id.type === 'Identifier'：判断变量名是否是标识符。!/^[a-z]+([A-Z][a-z]+)*$/.test(node.id.name)：使用正则表达式判断变量名是否符合驼峰命名法。context.report()：如果变量名不符合驼峰命名法，就报告一个错误。message：错误信息，可以使用模板字符串。data：传递给模板字符串的数据。fix：自动修复的逻辑，这里省略。
- 配置Eslint：
在.eslintrc.js文件中，配置我们的规则：
module.exports = {
// ...其他配置
plugins: ['eslint-plugin-my-rules'], // 插件名，可以随便起
rules: {
'my-rules/camelcase': 'warn', // 规则名：插件名/规则文件名（不带.js后缀）
},
settings:{
"import/resolver": {
node: {
paths: ["src"]
}
}
},
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
},
};注意，你需要使用npm install eslint-plugin-my-rules将你的规则作为一个插件安装。当然更简单的方式，是将规则文件放在项目根目录下，然后直接require进来。
module.exports = {
// ...其他配置
rules: {
'camelcase': require('./eslint-rules/camelcase'), // 直接引入规则文件
},
parserOptions: {
ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
sourceType: 'module', // Allows for the use of imports
},
};- 运行Eslint：
eslint your-code.js如果你的代码中有不符合驼峰命名法的变量名，Eslint就会报错。
四、 更高级的AST玩法：自定义检查！
除了检查代码风格，我们还可以用AST做很多更高级的事情，比如：
- 检查代码复杂度： 可以通过分析AST的深度和节点数量，来判断代码的复杂度，避免写出难以维护的代码。
- 检查是否存在潜在的安全漏洞： 可以通过分析AST，找到可能存在SQL注入、XSS攻击等安全漏洞的代码。
- 自动生成代码： 可以通过修改AST，自动生成一些重复的代码，提高开发效率。
例如，我们可以编写一个Eslint规则，禁止使用eval()函数，因为它存在安全风险。
module.exports = {
meta: {
type: 'problem',
docs: {
description: '禁止使用eval()函数',
category: 'Possible Errors',
recommended: 'error',
},
},
create: function (context) {
return {
CallExpression(node) {
if (node.callee.type === 'Identifier' && node.callee.name === 'eval') {
context.report({
node: node,
message: '禁止使用eval()函数',
});
}
},
};
},
};这个规则会匹配AST中的所有CallExpression节点，也就是函数调用。如果调用的函数名是eval，就报告一个错误。
五、 实战案例：React Hooks规则检查
React Hooks 是现代 React 开发中不可或缺的一部分。但如果使用不当，会导致一些难以调试的问题。我们可以利用 AST 来编写 ESLint 规则，帮助开发者避免这些问题。
例如，React Hooks 有一个 "Rules of Hooks"，其中一条规则是：只能在 React 函数组件或自定义 Hook 中调用 Hook。
我们可以编写一个 ESLint 规则来检查是否违反了这条规则。
module.exports = {
meta: {
type: 'problem',
docs: {
description: '强制 Hook 只能在 React 函数组件或自定义 Hook 中调用',
category: 'React Hooks',
recommended: 'error',
},
},
create: function (context) {
return {
CallExpression(node) {
if (node.callee.type === 'Identifier' && node.callee.name.startsWith('use')) {
// 检查当前节点是否在 React 函数组件或自定义 Hook 中
let current = node.parent;
while (current) {
if (current.type === 'FunctionDeclaration' || current.type === 'FunctionExpression' || current.type === 'ArrowFunctionExpression') {
if (current.id && current.id.name && current.id.name.startsWith('use')) {
// 自定义 Hook
return;
}
// 检查是否是 React 函数组件
if (current.parent && current.parent.type === 'VariableDeclarator' && current.parent.id && current.parent.id.type === 'Identifier') {
// 进一步验证是否是函数组件，例如是否返回 JSX
if(current.body && current.body.type === 'BlockStatement'){
for(const statement of current.body.body){
if(statement.type === 'ReturnStatement'){
if(statement.argument && statement.argument.type === 'JSXElement'){
//返回JSX, 认为是函数组件
return;
}
}
}
}
}
}
if (current.type === 'Program') {
// 已经到达根节点，说明不在 React 函数组件或自定义 Hook 中
context.report({
node: node,
message: 'Hook {{hookName}} 只能在 React 函数组件或自定义 Hook 中调用',
data: { hookName: node.callee.name },
});
return;
}
current = current.parent;
}
}
},
};
},
};这段代码的关键在于向上遍历 AST，找到包含 Hook 调用的函数定义。如果找到的是一个 React 函数组件或自定义 Hook，则认为 Hook 的调用是合法的。否则，报告一个错误。
六、 AST工具：AST Explorer
学习AST的最佳工具是 AST Explorer。这是一个在线工具，可以让你输入代码，然后查看对应的AST。它支持多种编程语言，包括JavaScript。你可以用它来调试你的Eslint规则，或者 просто更好地理解代码的结构。
七、 总结：AST，代码分析的利器！
AST是Eslint的核心技术之一，它让Eslint能够准确、高效地检查代码风格和语法。通过自定义Eslint规则，我们可以实现各种各样的代码检查，提高代码质量，减少bug。掌握AST，就等于掌握了代码分析的利器，让你在编程的道路上更加游刃有余。
好了，今天的讲座就到这里。希望大家有所收获！如果还有什么问题，欢迎随时提问。咱们下次再见！