{ // 当前这一段代码的基本信息 "type": "Program", "start": 0, // 开始的字符位置 "end": 14, // 结束的字符位置,总长度是包括代码中的空格的 "body": [ // 该代码的具体内容 { "type": "VariableDeclaration", // 类型为变量声明 "start": 0, "end": 14, "declarations": [ // 该变量声明的内容 { "type": "VariableDeclarator", "start": 4, // 内容的开始 "end": 13, // 内容的结束 "id": { "type": "Identifier", // 声明的标识 "start": 4, // 标识开始 "end": 7, // 标识结束 "name": "foo" // 该表示的名称 }, "init": { // 声明的数据类型为init类型 "type": "Literal", "start": 10, // 数据的开始 "end": 13, // 数据的结束 "value": 123, // 数据的value值 "raw": "123" // 声明的原始数据 } } ], "kind": "var" // 声明的类型,为var 常量 } ], "sourceType": "module" // 来源类型}
如果你仔细看了以上变量声明表达式的解析模块,以及每个模块表达的是什么内容,你应该已经对简单的使用AST,及运行、使用原理有个基本的了解。
如果你已经完全看懂以上代码,说明你已经懂得了ESLint是怎么检查你的代码是否符合规则的了。
没错,就是根据解析出来这段代码的所有细则,然后检查,这段代码的每一部分,是否与你选择指定的检查规则有冲突。
如果有冲突,则在控制台打印出冲突的严重程度,给出黄色字体的警告或者红色字体的报错
还记得在ESLint的文章中给大家提供的ESLint的格式化代码吗?
文章传送门 十九,公众号:前端学海ESlint——可组装的JavaScript和JSX检查工具
该代码配合VsCode的插件,可以将你的代码不符合ESLint检查规则的代码,自动格式为符合代码规则的代码,运行原理,就是查找到错误的代码,通过AST解析代码,在语法树中修改错误的部分,然后将修改后的AST语法树合并生成新的,符合规则的代码。
?开始?
通过使用AST解析和生成函数,来实现代码的自动修改
const demo = 123
将以上代码修改为
var demo = 234
1、安装
npm i recast -S
const recast = require('recast')// 根据需要修改的部分,使用不同的函数方法const { variableDeclaration,variableDeclarator,identifier, literal} = recast.types.builders// 解析 const demo = 123const ast = recast.parse('const demo = 123')// 需要更改的语法树的数据的位置// 不同的解析器,存储对象的位置可能不同,// 切记,根据使用的解析器的解析逻辑去修改语法树const body = ast.program.body[0]console.log(ast, '解析前的语法树')// 找到const所在的位置,并将值替换为var// 找到值的标记 将内容替换为 ‘234’// 根据需要修改的部分,合理嵌套使用内部函数,进行修改ast.program.body[0] = variableDeclaration('var',[ // 将const 改为 var variableDeclarator( identifier('demo'), literal(234) // 将值变为 ‘234’ )])// 现在的ast语法树为已经修改之后语法树,console.log(ast, '解析后的语法树')// 将AST对象重新转回可以阅读的代码const newAST = recast.print(ast).code; // 修改后生成的新代码console.log(newAST, '修改后生成的新代码')
?最后执行文件,输入结果如下?
---end 齐活---
其实babel的运行原理与我们刚刚的示例非常相像,但babel的使用的AST解析器与ESLint又有所不同。
下一次,我们来了解一下babel!