自定义eslint

本文介绍如何创建一个自定义的eslint规则,防止在项目中除client.ts外的其他文件引入node和electron模块。过程涉及AST树解析,并提供了一种通过npm上传和测试自定义规则的方法。示例代码展示了选择性禁止import和require的行为,并提醒了使用eslint-plugin开头的项目名称以及错误级别设置。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

背景:项目里面规定只有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
在这里插入图片描述
在这里插入图片描述会点皮毛,如有错误,还请指正

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值