背景:项目里面规定只有client.ts可以引入node模块与electron模块,其余文件引用报错
这就要求我们去创建一个自己的eslint规则了,这里设计到AST树等知识,可以参考https://m.sohu.com/a/330228148_463970
首先创建一个eslint(自认为)项目
npm i -g yo
npm i -g generator-eslint
// 创建一个plugin
yo eslint:plugin
// 创建一个规则
yo eslint:rule
完后是这样的,现在可以打开工具看ast树了,地址https://astexplorer.net/,
可以慢慢看里面的参数
然后在rule的choose-node.js这样写,根据自己的需求来哈
module.exports = {
meta: {
docs: {
description: "choose-node",
category: "Fill me in",
recommended: false
},
fixable: null, // or "code" or "whitespace"
schema: [] //这里好像可以接受参数类型传参,create可以通过context.options接收到项目的eslintrc.js rules里面的参数数组,后面的博客会研究到
},
create: function(context) {
const name = context.getFilename();
function getFunctionLoc(node) {
return {
start: node.source.start,
end: node.source.end,
name,
};
}
function isImport(node){
const module = ['fs', 'os', 'http', 'child_press', 'events', 'path', 'election'] // 刚会,所以暂时写死,可以在eslintrc.js的rule传参,这里通过context.options接受,暂时没研究明白
return module.some(item => {
return node.source.value == item
})
}
return {
ImportDeclaration: (node) => { //这里的ImportDeclaration一定要和工具的函数名对上啊,不然没用,这是import的,const let var就是VariableDeclaration这个了
let {start, end, name} = getFunctionLoc(node)
let isModule = isImport(node)
if (!name.match('client') && isModule) {
context.report({
loc: {start, end},
node,
message: "不能import Node和electron模块",
});
}
},
};
}
};
测试小弟暂时没写,在test里面的choose-node.js里面,当然,我写了一个不能import,那么require呢?
所以我又创建了一个rule choose-electron,其实我已开始是choose-node是无论是import 还是require Node的模块我都放里面的,后面为了偷下懒,少写几行代码就给弄成choose-node不能import node electron的模块,choose-electron不能require node electron的模块,大家别学我,规范重要
我看有npm-link本地测试的,但我用的是笨方法,直接上传到npm,然后拉下来,改node_module里面的eslint-plugin-zlint测试,哈哈对了,项目名要eslint-plugin开头,不然没用,上传npm的话去注册一下,然后npm login,填写账号密码邮箱,报错的原因之一是你换源成淘宝的了,换回来,然后npm publish,这样就上传到npm平台了,下次改了在package.json换下版本,可以覆盖。
然后是怎么用,这是你的项目,例如我创建了一个空的vue项目
eslint-plugin-可以省略,我的包在npm上是eslint-plugin-zlint,因为package.json的name是这个(之前的eslint项目)
rules那里可以传参,咋传暂时不会,可以把不让用哪些node模块传过去,省的写死啥的。。。
然后0是不管,1是报警,2是报错
看结果 client.ts没报错
其他的报错 a.js client.js
会点皮毛,如有错误,还请指正