eslint以及其扩展插件

什么是eslint?它能干啥，它的插件能干啥？它可以帮助你发现并修复 JavaScript 代码中的问题。问题可以是任何事情，从潜在的运行时错误到不遵循最佳实践，再到样式问题。每条规则会负责一个特定的任务，有几百条内置规则；还可以自定义插件，写若干条规则扩展能力。
如何搞一个插件？ npm init一个模块，插件需要遵守eslint的接口。 npm install -g yo generator-eslint

新建工程内 yo eslint:plugin 生成插件模板 yo eslint:rule 生成一条规则模板

package.json={main:"./src/index.js", exports:"./src/index.js", files: $"src"$ , peerDependencies:{ "eslint":"^8"}}

src/index.js

js 复制代码

    module.exports.rules = requireIndex(__dirname+"/rules")

src/rules/ (规则集的路径) /package-json-check.js

js 复制代码

const {execSync} = requier("child_process")
function getChangedPackageJsonContent(){
    // 子进程执行git命令，获取暂存区的变更
    const gitDiffContent = execSync('git diff HEAD -- package.json | grep "^+"|sed "s/^+//" ',{encoding:"utf8"})
    return gitDiffContent.replaceAll(/\s+/g,"")
}
module.exports = {
  meta: {
    // 规则的类型 problem|suggestion|layout
    // problem: 这条规则识别的代码可能会导致错误或让人迷惑。应该优先解决这个问题
    // suggestion: 这条规则识别的代码不会导致错误，但是建议用更好的方式
    // layout: 表示这条规则主要关心像空格、分号等这种问题
    type: "suggestion",
    // 对于自定义规则，docs字段是非必须的
    docs: {
      description: "描述你的规则是干啥的",
      // 规则的分类，假如你把这条规则提交到eslint核心规则里，那eslint官网规则的首页会按照这个字段进行分类展示
      category: "Possible Errors",
      // 假如你把规则提交到eslint核心规则里
      // 且像这样extends: ['eslint:recommended']继承规则的时候，这个属性是true，就会启用这条规则
      recommended: true,
      // 你的规则使用文档的url
      url: "https://eslint.org/docs/rules/no-extra-semi",
    },
    // 定义提示信息文本 error-name为提示文本的名称 定义后我们可以在规则内部使用这个名称
    messages: {
      "error-name": "这是一个错误的命名"
    },
    // 标识这条规则是否可以修复，假如没有这属性，即使你在下面那个create方法里实现了fix功能，eslint也不会帮你修复
    fixable: "code",
    // 这里定义了这条规则需要的参数
    // 比如我们是这样使用带参数的rule的时候，rules: { myRule: ['error', param1, param2....]}
    // error后面的就是参数，而参数就是在这里定义的
    schema: [],
  },
  create: function (context) {
      //context lint执行上下文，在此可以获取cwd，eslintrc.js配置里面的setting信息。获取规则Id等，最主要report（）方法，该方法是规则校验完对外展示信息的窗口
    // 这是最重要的方法，我们对代码的校验就是在这里做的
    return {
      // Program ImportDeclaration ... eslint NodeListener 接口约定的多种监听器，根据需要返回对应的监听器，监听器入参是parser 解析出来的ast结构树，可对此进行分析解析
      Program(node){
          context.report({
          node,
          messageId:"",
          data:{} // messageId为上述messages里定义的模板字符串，data可传给模板字符串替换占位符
          })
      }
    };
  },
};

总结：eslint是对工程做静态分析，包括代码分析，样式文件分析，配置文件如json等的分析。并提供修复或者提示信息功能。自定义的插件可配合git工具，做新增代码分析，做commitID之间的差异化分析。 ps:在插件下npm link ,测试工程下 npm lint eslint-plugin-name 即可本地调试插件，借助测试工程，做规则开发测试。