ESLint

首先来看张形象的图片：

1. 简介

• find and fix problems in your js code官网的简介）

1.1 发现问题

语法错误；
逻辑错误；
代码风格错误；

1.2 自动修复

eslint.org/docs/rules/

1.3 自定义

2. 工作原理

2.1 配置ESlint

执行 npx eslint --init 【.eslintrc.js】

    module.exports = {
        {
            "env": {
                "browser": true,
                "es2020": true
            },
            "parser": "@typescript-eslint/parser", //Espree
            "parserOptions": { 
                "ecmaFeatures": {
                    "jsx": true
                },
                "ecmaVersion": 2020,  
                "sourceType": "module" //esmodule
            },
            "rules": {
                "no-undef": "error",
                "semi": "error",
                "no-debugger": "error",
                "react/display-name": "error", // eslint-plugin-react 下的 display-name 规则
            },
            "plugins": [
                "react",
                "@typescript-eslint"
            ],
           "extends": [ //ESlint共享机制
                "eslint:recommended", 
                "plugin:react/recommended", //eslint-plugin-react 的所有推荐规则
                "plugin:@typescript-eslint/recommended"
            ],
            "globals":{
                "var1": "writable", // 变量可读写
                "var2": "readonly", // 变量不允许重写
                "Promise": "off" // 禁用此全局变量
            }
        }
    };

2.2 运行原理

1. 将代码解析成AST;（https://astexplorer.net/） 
2. 深度遍历AST,监听匹配过程；
3. 触发监听选择器rule的回调；
4. 具体的检测规则等细节内容；

• rules ： "no-debugger": "error"

    module.exports = {
            meta: {
                type: "problem",
                docs: {
                    description: "disallow the use of `debugger`",
                    category: "Possible Errors",
                    recommended: true,
                    url: "https://eslint.org/docs/rules/no-debugger"
                },
                fixable: null,
                schema: [],
                messages: {
                    unexpected: "Unexpected 'debugger' statement."
                }
            },
            <!-- rule核心 -->
            create(context) {
                return {
                    <!-- 返回事件钩子 -->
                    DebuggerStatement: (node)=>{
                          context.report({
                            node,
                            messageId: "unexpected"
                        });
                    }
                };
            }
    };
  

3. 自定义ESlint插件

3.1 插件目标

禁止项目中setTimeout的第二个参数是数字

3.2 步骤：

1. 使用模板初始化项目

   ESLint官方提供了使用Yeoman模板(generator-eslint) :npm install -g yo generator-eslint

2. 命令行初始化ESLint插件的项目结构 yo eslint:plugin

3. 创建规则 yo eslint:rule // 生成 eslint rule的模板文件

4. 安装项目依赖

5. 返回事件钩子

    'CallExpression': (node) => {
        if (node.callee.name !== 'setTimeout') return // 不是定时器即过滤
        const timeNode = node.arguments && node.arguments[1] // 获取第二个参数
        if (!timeNode) return // 没有第二个参数
        // 检测报错第二个参数是数字 报错
        if (timeNode.type === 'Literal' && typeof timeNode.value === 'number') {
            context.report({
                node,
                message: 'setTimeout第二个参数禁止是数字'
            })
        }
    }
   

3.3 项目中使用

发布并下项目中使用

eslint-plugin-xxx-xxx settimeout-no-number

npx eslint --init