ESLint

抽象语法树

• 抽象语法树(Abstract Syntax Tree，AST)是源代码语法结构的一种表示
• 它以树状的形式表现编程语言的语法结构，树上的每个节点都表示源代码中的一种结构

抽象语法树的用途

• 代码语法的检查、代码风格的检查、代码的格式化、代码的高亮、代码错误提示、代码自动补全等等
• 优化变更代码，改变代码结构使达到想要的结构

JavaScript Parser

JavaScript Parser是把JavaScript源码转化为抽象语法树的解析器

代码转换

• 1. 将代码转换成ast语法树
• 2. 深度优先遍历，遍历ast抽象语法树
• 3. 代码生成

pnpm install esprima estraverse escodegen -s

const esprima = require('esprima');
const estraverse = require('estraverse');
const escodegen = require('escodegen');
let code = 'function a(){}';

//就是将我们的代码转换成ast语法树
const ast = esprima.parseScript(code);

//访问模式，就是遍历节点的时候，会有两个过程，一个是进入，一个是离开
estraverse.traverse(ast,{
    enter(node){
        console.log(node);
        if(node.type === 'FunctionDeclaration'){
            node.id.name = 'ast';
        }
    },
    leave(node){
        console.log(node);
    }
});
console.log(escodegen.generate(ast));

//es6->es5语法，典型的语法转化，将箭头函数转换成普通函数

babel插件

转换箭头函数

• @babel/core Babel的编译器，核心API都在这里面，比如常见的transform、parse，并实现了插件功能
• @babel/types 用于AST节点的lodash式工具库，它包含了构造、验证以及变换AST节点的方法，对编写处理AST逻辑非常有用
• babel-plugin-transform-es2015-arrow-functions转换箭头函数插件

const babel = require("@babel/core");
const types = require("@babel/types");
const arrowFunctions = require('babel-plugin-transform-es2015-arrow-functions')

const code = `const sum = (a,b) => a+b`

//转化代码，通过arrowFunctions插件
const result = babel.transform(code,{
    plugins: [arrowFunctions]
});
console.log(result.code);

ESLint使用

ESLint是一个开源的工具，ESLint采用静态分析找到并修复JavaScript代码中的问题

• ESLint使用Espree进行JavaScript解析
• ESLint使用AST来评估代码中的模式
• ESLint是完全可插拔的，每一条规则都是一个插件，你可以在运行时添加更多
• esprima - 经典的解析器
• acorn - 造轮子媲美Esprima
• @babel/parser (babylon)基于acorn的
• espree最初从Esprima中fork出来的，现在基于acron

pnpm init
pnpm i eslint -D #安装eslint
pnpm create @eslint/config  #初始化eslint的配置文件

生成的配置文件是：

module.exports = {
    env: { //指定环境
        browser: true, //浏览器环境
        es2021: true,  //ECMAScript语法
        node: true     // node环境
    },
    // extends和plugin的区别
    extends: "eslint:recommended", //如果集成后，就可以使用别人写好的规则
    parserOptions: {
        ecmaVersion: "latest", //这个是描述语法的
        sourceType: "module",
        ecmaFeature: {
            "jsx": true
        }
    },
    rules:{ //eslint规则
        //0 off 1 warn  2 error
        "quotes" : ["error","double"] //这个是覆盖掉了之前的规则
    },
    //ts解析器
    plugin: ['@typescript-eslint/eslint-plugin'],
    parser: '@typescript-eslint/parser', //内部用的是espress
    globals:{
        custom: 'readonly'
    }
}