关于javascript:从0到1开发一个简单的-eslint-插件

38次阅读

共计 3505 个字符,预计需要花费 9 分钟才能阅读完成。

前言:eslint 咱们常利用在代码动态扫描中,通过设定的 eslint 的语法规定,来对代码进行查看,通过规定来束缚代码的格调,以此来进步代码的健壮性,防止因为代码不标准导致利用呈现 bug 的可能。而规定是自在的,你能够设定外部本人团队实用的规定,也能够间接应用开源社区比拟热门的 规定汇合, 比方 airbnb、eslint-plugin-vue 等

1.eslint 的配置

手写规定前,让咱们重温下 eslint 配置,通常咱们是应用 .eslintrc.js 来配置 eslint 的,或者也能够间接 package.json 中定义 eslintConfig 的属性

上图👆是 eslint 次要的配置,咱们简略回顾下每个配置的背地蕴含的意义

1.1 parse

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

对于 Espree 能够参考上面这个例子

而罕用的 解析器 还有包含以下几种

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

对于 AST 的模仿生成,感兴趣的同学能够应用 astexplorer 在线尝试

总结:无论你应用那种解析器,实质是都是为了将 code 转换为 ESLint 可能 浏览 的语言ESTree🔗

1.2 parseOption

parserOptions 参数是用来管制 parse 解析器, 次要包含以下几个属性👇,咱们挑重点的讲讲

  • 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 规定,方便快捷的利用到我的项目中

比方你应用 extends 去扩大 {"extends": [ "eslint:recommended", "plugin:react/recommended", "eslint-config-standard",]}

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

⏰ 揭示:官网规定 npm 包的扩大必须以 eslint-config- 结尾,咱们应用过程中能够省略这个结尾,下面案例中 eslint-config-standard 能够间接简写成 standard。同样,如果要开发一个 eslint 插件,也是须要以这种模式来命名,下节会介绍

咱们再举个列子

上图咱们通过下面这个配置例子,咱们能够看到要么是 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

  • 第一步:装置 npm install -g yo generator-eslint
  • 第二步:创立一个文件夹并而后通过命令行初始化 ESLint 插件的我的项目构造 yo eslint:plugin
  • 第三步:实现插件初始化创立

2.2 创立 rule 规定

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

创立胜利后,咱们看下最终的目录构造

  • 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 是长啥样?

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

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

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

  • meta: 代表了这条规定的元数据,蕴含类别,文档,可接管的参数的 schema 等, 其中次要提下 schema,如果指定该选项,ESLint 能够通过辨认的传参,防止有效的规定配置(排除校验),可参考下节介绍的单元测试的中传递的 options
  • context.report():它用来公布正告或谬误(取决于你所应用的配置)

🌲 举荐浏览:

  • Eslint – Working with Rules

2.4 单元测试

当实现 eslit 插件开发后,咱们须要对开发完的插件进行验证,以此来保障规定校验性能的失常应用。eslint 插件开发我的项目构造中默认应用了 mocha 作为单元测试框架

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

最初执行

2.5 对于公布

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

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

是的,官网文档形容:你能够在一个插件中在 configs 键下指定打包的配置。当你想提供不止代码格调,而且心愿提供一些自定义规定来反对它时,会十分有用。每个插件反对多配置,而后当你应用的时候,能够通过这样应用 `{

"extends": ["plugin:tree-eslint/myConfig"] 

}, ` 这就蕴含预设好的规定配置

最初是 npm 公布 npm pulish

2.6 如何应用

通过第一节的配置的介绍,咱们须要有个 .eslintrc 文件,如果目录没用能够通过命令行 eslint -init 初始化,配置好后,装置刚刚凋谢好的 eslint 插件

配置一能够对咱们开发的那个 rule 进行配置:error,warn,off,如果须要对局部做排除就加上 option,也能够像配置二援用预设好的扩大 extends

你好,我是🌲 树酱,请你喝杯🍵 记得三连哦~

1. 浏览完记得点个赞哦,有👍 有能源

2. 关注公众号前端那些趣事,陪你聊聊前端的趣事

3. 文章收录在 Github frontendThings 感激 Star✨

正文完
 0