1. eslint 是如何校验代码的

参考：https://blog.csdn.net/OBKoro1/article/details/103411464
eslint 命令会调用解析器将源码转化为AST(抽象语法树)： https://astexplorer.net/
选择器：https://github.com/estree/estree/blob/master/es5.md
如下代码：

setTimeout(() => {
    console.log('exec setTimeout function')
}, 1000)

image.png

原理：

原理就是依据AST解析的结果，做针对性的检测，过滤出我们要选中的代码，然后对代码的值进行逻辑判断。

image.png

例子：

lib/rules/settimeout-no-number.js:

module.exports = {
    meta: {
    type: "problem",
    docs: { description: "setTimeout 第二个参数禁止是数字" },
    fixable: null, // 修复函数 },
  },
  // rule 核心
  create: function (context) {
    console.log("22222222222");
    // 公共变量和函数应该在此定义
    return {
      // 返回事件钩子
      CallExpression: (node) => {
        console.log("1111111111111111111");
        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第二个参数禁止是数字" });
        }
      },
    };
  },
}

2. eslint-extends-xxx 与 eslint-plugins-xxx的区别：

参考：https://juejin.cn/post/6859291468138774535
eslint-extends-xxx: 里面定义了rules对象，是将规则注册进入eslint中，eslint-plugins-xxx里面定义了一系列规则，还可以定义一些extends，还可以调用指定的插件

image.png

3. eslint ,prettier, vscode 如何相关联系调用

参考：https://blog.csdn.net/Bruski/article/details/115416048

prettier 插件

插件默认使用项目的prettier包，如果找不到并且prettier.resolveGlobalModules设置为true时，扩展也可以尝试解析全局模块，如果都没有，就会使用扩展里面的prettier版本(不同版本，包含不同插件，支持不同类型文件格式化)

1：配置文件：vscode setting， .prettierrc, .editorconfig
2： 命令行运行prettier时，VS代码配置设置无效， 命令行只会根据 .prettierrc
3：检索.prettierrc，会以当前文件夹递归向上检索是否有全局的.prettierrc

通过editor.formatOnSave 触发此扩展, 然后此扩展会调用prettier， vscode 无法直接调用prettier包

// Set the default
"editor.formatOnSave": false,
// Enable per-language
"[javascript]": {
    "editor.formatOnSave": true
}

eslint 包

1：vscode 保存并不会直接触发eslint包
2：eslint检查文件，只会在命令行里面报错，不会在vscode里面报错(这是插件的功能)
3：执行 eslint --fix *.js 会自动修复文件的eslint错误（autoFix基于此）

eslint 扩展

1：该扩展会首先使用项目里面的eslint库，如果没有，则寻找全局安装版本
2：vscode 保存时 可以通知eslint扩展

"editor.codeActionsOnSave": {
        "source.fixAll.eslint": true
    }

3："eslint.enable": false, 会禁止扩展执行eslint，默认不写是true

4. eslint包与prettier包联系

eslint-plugin-prettier

eslint可以通过配置eslint-plugin-prettier ，在执行--fix的时候调用prettier格式化代码,
eslint 只执行检查时，会将prittier格式错误抛出来，而不会调用prettier格式化代码，如下：

image.png

{
  "plugins": ["prettier"],
  "rules": {
    "prettier/prettier": "error"
  }
}

eslint-plugin-prettier插件会调用prettier对你的代码风格进行检查，其原理是先使用prettier对你的代码进行格式化，然后与格式化之前的代码进行对比，如果过出现了不一致，这个地方就会被prettier进行标记。
接下来，我们需要在rules中添加，"prettier/prettier": "error"，表示被prettier标记的地方抛出错误信息。
借助ESLint的autofix功能，在保存代码的时候，自动将抛出error的地方进行fix

eslint-config-prettier

eslint-config-prettier配置，能够关闭一些不必要的或者是与prettier冲突的lint选项。这样我们就不会看到一些error同时出现两次

{
  extends: [
    'standard', //使用standard做代码规范
    "prettier",
  ],
}

同时启用插件和配置：

{
  "extends": ["plugin:prettier/recommended"]
}

5. 不使用prettier插件和eslint，vscode， 保存文件去触发prettier

npm run format

"scripts": {
  "format": "onchange 'src/**/*.js' -- prettier --write {{changed}}"
}

参考：https://zhuanlan.zhihu.com/p/38267286

6. eslint, eslint 插件，prettier，prettier 插件之间的关系

image.png