如何自定义Eslint插件

一. 准备工作

我们需要基于generator-eslint来进行快速开发Eslint自定义插件。

1.下载Yeoman generator：

npm i -g yo

2.然后：

npm i -g generator-eslint

3.我们准备一个文件夹，可以取名为My-Eslint，在该文件夹的路径下通过命令生成创建一个插件Plugin，然后根据提示来输入对应的内容。

yo eslint:plugin

案例如下：ID也就是你的插件的名称，生成后可以在package.json文件里查看name属性，默认以eslint-plugin-为开头。

4.紧接着在相同路径输入命令，生成对应的规则包：

yo eslint:rule

案例如下：

5.生成的目录结构如下：index.js相当于入口文件，所有rules目录下定义的规则都会通过该入口来暴露。

二. 编写自定义组件

从上一个环节，可以发现我们定义了个max-params.js文件，我们来看下他的内容：
参考官网

module.exports = {
    meta: {
        docs: {
            description: "一个方法的参数最大数量不能超过3个",
        },
    },
    create: function (context) {
        function getFunctionParamsLoc(node) {
            const paramsLength = node.params.length;
            return {
                start: node.params[0].loc.start,
                end: node.params[paramsLength - 1].loc.end,
            };
        }
        return {
            FunctionDeclaration: (node) => {
                if (node?.params?.length > 3) {
                    context.report({
                        loc: getFunctionParamsLoc(node),
                        node,
                        message: "一个方法的参数最大数量不能超过3个",
                    });
                }
            },
        };
    },
};

然后该规则的对应test文件内容如下（可以不写）：（tests/lib/rules目录下）

var ruleTester = new RuleTester();
ruleTester.run("max-params", rule, {
  valid: ["function test(d, e, f) {}"],
  invalid: [
    {
        code: "function test(a, b, c, d) {}",
        errors: [{
            message: "参数最多不能超过3个",
        }]
    },
  ],
});

三. 开启本地调试

在实际开发过程中，要用到自己定义好的插件，这个项目肯定是要发布出去的，但在本篇文章中，以本地为主，用npm link来进行模拟。

1.在该项目目录下输入npm link命令，如图：假设图中的名字为eslint-plugin-my-test

2.在测试项目中输入命令

npm link eslint-plugin-my-test

3.在测试项目中的.eslintrc.js文件中添加如下内容：（看下你自定义Eslint项目的name，这里为my-test）
rules的格式："插件名/规则名": "属性值",

可参考官网

// .eslintrc.js
module.exports = {
    plugins: ['my-test'],
    rules: {
        "my-test/max-params": "error",
    }
}

4.添加好后，重启Vscode，让Eslint规则生效，然后写个test.js文件：

function foo(s,s1,s3,s4){

}

5.可以发现代码报错，有对应的提示：

到这里就完成啦