Eslint 定制化开发rule与plugin：如何手动创建eslint rule与plugin

虽然现在已经有很多实用的 ESLint 插件了，但随着项目不断迭代发展，你可能会遇到已有 ESLint 插件不能满足现在团队开发的情况。这时候，你需要自己来创建一个 ESLint 插件。

插件脚手架构建

利用 yeoman 和 generator-eslint 来构建插件的脚手架代码。安装：

npm install -g yo generator-eslint
yo eslint:plugin // 搭建一个初始化的目录结构
yo eslint:rule // 生成默认 eslint rule 模版文件

插件文件的目录结构为：

├── README.md

├── docs // 使用文档

│   └── rules

│       └── no-console-time.md

├── lib // eslint 规则开发

│   ├── index.js

│   └── rules // 此目录下可以构建多个规则，本文只拿一个规则来讲解

│       └── demo-test-rule.js

├── package.json

└── tests // 单元测试

    └── lib

        └── rules

            └── no-console-time.js

eslint rule 自定义规则

上面结构中，我们需要在 ./lib/ 目录下去开发 Eslint 插件，这里是定义它的规则的位置。

module.exports = {
    meta: {
        docs: {
            description: "一个demo 测试 案列",
            category: "Fill me in",
            recommended: false
        },
        fixable: null,  // or "code" or "whitespace"
        schema: [
            // fill in your schema
        ]
    },

    create: function(context) {

        // variables should be defined here

        //----------------------------------------------------------------------
        // Helpers
        //----------------------------------------------------------------------

        // any helper functions should go here or else delete this section

        //----------------------------------------------------------------------
        // Public
        //----------------------------------------------------------------------

        return {

            // give me methods

        };
    }
};

具体参看官方文档：https://eslint.org/docs/developer-guide/working-with-rules

ESlint 自定义插件

exports.default = function ({ types: t }) {
    const getCurState = state => {
        if (!states[stateKey]) {
            states[stateKey] = {};
        }
        return states[stateKey];
    };
    return {
        visitor: {
            Program: {
                enter(path, state) {
                    let opts = state.opts && state.opts.baseLibName || 'bk-magic-vue';
                    const curState = getCurState(state);
                    curState.cache = Object.create(null);
                    curState.importSpecified = Object.create(null);
                    curState.waitRemovePathList = [];
                },
                exit(path, state) {
                }
            },
            ImportDeclaration(path, state) {},
            Property(path, state) {},
            VariableDeclarator(path, state) {},
            ExportDefaultDeclaration(path, state) {},
            LogicalExpression(path, state) {},
            ConditionalExpression(path, state) {},
            BinaryExpression(path, state) {},
            MemberExpression(path, state) {},
            ArrayExpression(path, state) {},
            CallExpression(path, state) {},
            NewExpression(path, state) {},
            IfStatement(path, state) {},
            ExpressionStatement(path, state) {},
            ReturnStatement(path, state) {}
        }
    };
}

我们根据需要，去完善里面的代码

待我进一步地学习编译原理，回头再来编辑此篇文章。

参考文章：

【AST篇】手把手教你写Eslint plugin  https://segmentfault.com/a/1190000020663729

如何编写一个自定义的 eslint 规则？ https://achuan.me/blog/19/07/14/95cf20bc/#准备

http://obkoro1.com/web_accumulate/accumulate/tool/ESLint插件.html#手摸手教你写个eslint插件以及了解eslint的运行原理

转载本站文章《Eslint 定制化开发rule与plugin：如何手动创建eslint rule与plugin》,
请注明出处：https://www.zhoulujun.cn/html/Operation/codeGuide/8574.html