从0到1开发一个简单的 eslint 插件

简介: 前言:eslint我们常应用在代码静态扫描中,通过设定的eslint的语法规则,来对代码进行检查,通过规则来约束代码的风格,以此来提高代码的健壮性,避免因为代码不规范导致应用出现bug的可能。而规则是自由的,你可以设定内部自己团队适用的规则,也可以直接使用开源社区比较热门的规则集合, 比如airbnb、eslint-plugin-vue等

微信截图_20220514190131.png


前言:eslint我们常应用在代码静态扫描中,通过设定的eslint的语法规则,来对代码进行检查,通过规则来约束代码的风格,以此来提高代码的健壮性,避免因为代码不规范导致应用出现bug的可能。而规则是自由的,你可以设定内部自己团队适用的规则,也可以直接使用开源社区比较热门的规则集合, 比如airbnb、eslint-plugin-vue等


1.eslint的配置


手写规则前,让我们重温下eslint配置,通常我们是使用.eslintrc.js来配置eslint的,或者也可以直接package.json中定义eslintConfig的属性


微信截图_20220514190150.png


上图👆是eslint主要的配置,我们简单回顾下每个配置的背后包含的意义


1.1 parse


parse 是用来定义eslint所使用的解析器,默认是使用Espree🔗, 解析器的作用是将代码code转化成为一种AST抽象语法树,eslint中叫ESTree,你可以理解为将code翻译为ESLint能听👂懂的话


关于Espree可以参考下面这个例子


微信截图_20220514190226.png


而常用的解析器还有包括以下几种


  • Esprima: 上文提到espree就是基于Esprima改良的
  • Babel-esLint:一个对Babel解析器的包装,当你项目中使用了babel,babel的解析器会把你的code转换为 AST,然后该解析器会将其转换为ESLint能懂的 ESTree。这个目前我们应用的较多,目前也不再维护和更新,升级为@babel/eslint-parser
  • @typescript-eslint/parser:  将 TypeScript 转换成与 estree 兼容的形式,以便在ESLint中使用。


对于AST的模拟生成,感兴趣的同学可以使用astexplorer在线尝试


微信截图_20220514190240.png


总结:无论你使用那种解析器,本质是都是为了将code转换为ESLint能够阅读的语言ESTree🔗


1.2 parseOption


parserOptions参数是用来控制parse解析器, 主要包括以下几个属性👇,我们挑重点的讲讲


微信截图_20220514190248.png


  • ecmaVersion:用来指定你想要使用的 ECMAScript 版本,默认设置为 5,举个例子:默认情况下,ESLint 支持 ECMAScript 5 语法,但如果你想让eslint使用es6特征来支持,就可以通过修改parserOptions中"ecmaVersion": 6


1.3 rules


rules就是eslint的规则,你可以在rules配置中根据在不同场景、不同规范下添加自定义规则详情可参考之前🌲树酱的 前端规范那些事


1.4 extends(扩展) 与 plugins(插件)


extends和plugins很容易混淆,本质是为了加强eslint的扩展性,使得我们可以直接使用别人已经写好的eslint 规则,方便快捷的应用到项目中,有点类似之前文章中Babel配置傻傻看不懂?提及的babel配置中的present和plugin


比如你使用extends去扩展 {  "extends": [    "eslint:recommended",    "plugin:react/recommended",    "eslint-config-standard",  ]}

但是如果你想用插件,其实等价于 {"plugin": ['react','standard']}


⏰ 提醒:官方规定 npm 包的扩展必须以 eslint-config- 开头,我们使用过程中可以省略这个开头,上面案例中 eslint-config-standard 可以直接简写成 standard。同样,如果要开发一个eslint插件,也是需要以这种形式来命名,下节会介绍


我们再举个列子


微信截图_20220514190304.png


上图我们通过上面这个配置例子,我们可以看到要么是plugins:[]要么是extends:[],通过上图所示的配置二相对于配置一少了parser, parserOptionsplugins 等的信息配置,但其实这两个配置最终实现的结果是一致的,这是因为配置二中定义的extends:plugin:@typescript-eslint/recommended 会自动加载上叙提到的其他几个配置信息


2 开发eslint插件


通过上一节对eslint的配置的了解,接下来看看如何从0到1开发一个eslint插件。


2.1 eslint插件初始化


ESLint 官方为了方便开发者,提供了使用Yeoman脚手架的模板(generator-eslint🔗)。以此方便我们通过该脚手架拉取eslint插件模版,对Yeoman 进一步了解可以阅读🌲树酱的前端工程化那些事 - yeoman


微信截图_20220514190312.png


  • 第一步:安装 npm install -g yo generator-eslint
  • 第二步:创建一个文件夹并然后通过命令行初始化ESLint插件的项目结构 yo eslint:plugin
  • 第三步:完成插件初始化创建


2.2 创建rule规则


完成插件项目结构初始化创建后,开始生成ESLint插件中具体规则,在ESLint插件的项目中执行命令行 yo eslint:rule,来生成eslint规则的模版,实际效果如下所示


微信截图_20220514190320.png


创建成功后,我们看下最终的目录结构


微信截图_20220514190329.png


  • docs: 使用文档,描述你编写的规则
  • lib/rules 目录:规则开发源码文件 (例如,no-extra-semi.js)
  • tests/lib/rules 目录: 单元测试文件 (例如,no-extra-semi.js)


2.3 编写规则


当完成上面一系列操作之后,eslint插件模版初步完成,接下来我们找到目录中lib/rules中对刚刚创建的rule进行开发


假设我们有个场景,我们想创建一个规则,用来判读代码中是否存在console方法的调用,首先回到第一节提到的parse解析器,本质上rule的逻辑判断是通过识别Espree返回的抽象语法🌲去判断,分别针对各种类型定义检查方法。写代码之前,我们先看下console返回的AST是长啥样?


微信截图_20220514190339.png


通过上图我们可以清晰的看到 console.log()是属于 ExpressionStatement(表达式语句)中的 CallExpression(调用语句),可以通过callee属性中的object来判断是否为console, 同时也可以利用其property属性来判断是console的哪种方法,比如loginfo


so~ 我们开始造玩具,我们通过在 create 返回的对象中,定义一个 CallExpression 方法,当ESLint开始对esTree遍历时,通过对调用语句的监听,来检查该调用语句是否为 console 调用,代码如下👇


微信截图_20220514190348.png


每条 rule 就是一个 node 模块,其主要由 meta 和 create 两部分组成,重点讲下下面两个👇


  • meta:  代表了这条规则的元数据,包含类别,文档,可接收的参数的 schema 等, 其中主要提下schema,如果指定该选项,ESLint可以通过识别的传参,避免无效的规则配置(排除校验),可参考下节介绍的单元测试的中传递的options
  • context.report():它用来发布警告或错误(取决于你所使用的配置)


🌲 推荐阅读:


2.4 单元测试


当完成eslit插件开发后,我们需要对开发完的插件进行验证,以此来保证规则校验功能的正常使用。eslint插件开发项目结构中默认使用了mocha作为单元测试框架


我们对tests/rules/treegogo.js单元测试文件进行修改,定义invalid与valid的不同例子


微信截图_20220514190358.png


最后执行


微信截图_20220514190407.png


2.5 关于发布


在发布之前,还需要对packjson中main定义入口文件即lib/index.js,暴露出rules与configs


微信截图_20220514190416.png


👨‍🎓 啊宽同学:那我如何定义一个包含配置的集合呢?


是的,官方文档描述:你可以在一个插件中在 configs 键下指定打包的配置。当你想提供不止代码风格,而且希望提供一些自定义规则来支持它时,会非常有用。每个插件支持多配置,然后当你使用的时候,可以通过这样使用 {     "extends": ["plugin:tree-eslint/myConfig"]  }, 这就包含预设好的规则配置

最后是npm发布 npm pulish


更多了解npm发布,可以阅读树酱的从0到1开发工具库 - npm发布 这里不重复介绍


2.6 如何使用


通过第一节的配置的介绍,我们需要有个.eslintrc文件,如果目录没用可以通过命令行eslint -init初始化,配置好后,安装刚刚开放好的eslint插件


配置一可以对我们开发的那个rule 进行配置:error,warn,off,如果需要对部分做排除就加上option,也可以像配置二引用预设好的扩展extends


微信截图_20220514190423.png



相关文章
|
并行计算 Shell PyTorch
【ChatGLM2-6B】我在3090显卡上部署了清华大学开源中英双语对话模型
【ChatGLM2-6B】我在3090显卡上部署了清华大学开源中英双语对话模型
453 0
使用全局scss变量
使用全局scss变量
1170 0
|
移动开发 缓存 前端开发
一年前端社招面试总结,入职阿里菜鸟
前言 本篇文章也是认识的一位好朋友「东仔」,也是和Fly一年的前端,最近在面试和他交流了很多,还有雨哥,后面继续约他写一份面试题。最近Fly哥也在疯狂面试,差不多大中厂小厂、得物、B站、爱奇艺、蚂蚁、字节、阿里「有的面完了,有的offer有的还在流程中。等我确定了,我也写一份面经,给大家参考,整体和下面差不多,但是我会有点可视化的,所以最近」更新的可视化文章比较少,精力有限,等我「调整结束」了依旧是高质量文章送上。 介绍 ❝ 个人背景:2020年毕业,二本学校科班前端,一年出头前端经验。上家公司主要做的是 Vue2 PC端的产品,捎带一些可视化方向的技术。技术栈以 Vue2 为主,有自
|
监控 前端开发 JavaScript
一步一步搭建前端监控系统:接口请求异常监控篇
摘要: 如何监控HTTP请求错误? 作者:一步一个脚印一个坑 原文:搭建前端监控系统(四)接口请求异常监控篇 Fundebug经授权转载,版权归原作者所有。 背景:市面上的监控系统有很多,大多收费,对于小型前端项目来说,必然是痛点。
2143 0
|
10月前
|
机器学习/深度学习 人工智能 监控
探索 AI 在软件开发中的新角色:代码审查与质量保证
【10月更文挑战第22天】本文探讨了AI在软件开发中的新角色,特别是在代码审查和质量保证方面。AI通过静态代码分析、代码风格一致性检查和历史数据学习,提高代码审查的效率和准确性。在质量保证中,AI还能够自动生成测试用例、监控应用性能并持续优化。文章还讨论了AI在软件开发中的实践应用、挑战与机遇,以及实施的最佳实践。
|
11月前
|
编译器 C语言 计算机视觉
【ARM汇编速成】零基础入门汇编语言之指令集(二)
【ARM汇编速成】零基础入门汇编语言之指令集(二)
993 0
|
机器学习/深度学习 人工智能 搜索推荐
AI低代码平台:创新开发新选择
Zoho Creator、Airtable、Appian、Creatio Atlas及织信等低代码平台,通过集成AI功能如预测分析、情感分析、自动化文案创作等,显著提升了开发效率与智能化水平。例如,Zoho Creator利用AI预测客户需求并分析情绪;Airtable借助OpenAI模型自动生成代码与文案;Appian通过AI技能自动处理文档与邮件;Creatio Atlas运用AI优化决策流程并提供个性化推荐;织信则集成ChatGPT与Stable Diffusion,实现智能开发与图像生成。这些平台不仅支持多种业务场景,还简化了应用程序开发流程。
318 5
|
数据采集 数据可视化 数据挖掘
基于Django的数据分析可视化系统,有后台,有增删改查,实现多用户登录
本文介绍了一个基于Django框架开发的今日头条数据分析可视化系统,该系统具备后台管理、增删改查功能以及多用户登录,利用数据可视化技术为新闻媒体行业提供数据管理和决策支持。
281 0
基于Django的数据分析可视化系统,有后台,有增删改查,实现多用户登录
|
API 数据库 开发者
掌握数据完整性的关键:全面解析Entity Framework Core中的事务管理策略及其应用
【8月更文挑战第31天】在数据库操作中,确保数据完整性至关重要。Entity Framework Core(EF Core)作为一款强大的ORM工具,提供了丰富的API支持事务管理,帮助开发者实现数据的一致性和完整性。
160 0

热门文章

最新文章