项目中一直用到eslint做代码检测,但对其原理一直没有搞得很清楚,这次借用参与eslint插件编写的契机,加深对eslint的了解。
先送上ESLint官网地址,官网文档很全面很详细,基本的使用参考这里就可以了。
eslint的作用
ESLint 的用法包括两部分:
- 通过配置文件配置 lint 规则;
- 通过命令行执行 lint,找出不符合规范的地方(当然有些不符合的规则也可以尝试修复);
结合编辑器插件使用是更常见的做法。
这篇文章并不会讲解eslint的配置方法,或者具体规则,着重在分析eslint作用原理上。
从extends开始
用以下的 .eslintrc.yml 文件为例(结合vscode编辑器 ESLint 插件使用)
extends: prettier
parser: babel-eslint
parserOptions:
sourceType: module
ecmaFeatures:
classes: true
modules: true
blockBindings: true
forOf: true
jsx: true
env:
node: true
browser: true
es6: true
plugins:
- react
settings:
react:
version: 16.12.0
rules:
# [Possible errors]
no-cond-assign: error
no-constant-condition: error
# [Best practices]
no-lone-blocks: error
# [Variables]
no-shadow-restricted-names: error
# [Stylistic issues]
new-cap:
- error
- capIsNew: false
no-new-object: error
no-unneeded-ternary: error
# [ES6]
constructor-super: error
...
# [React]
react/jsx-no-duplicate-props: error
...
# [React Hooks]
react-hooks/rules-of-hooks: error
react-hooks/exhaustive-deps: warn
# [Prettier]
prettier/prettier: error
extends 中包含了 ESLint 的共享机制,这里的prettier
是 eslint-config-prettier
的简写。
我们自己配置中的"extends": "prettier"
相当于告诉 ESLint ,把 eslint-config-prettier
的规则做为拓展引用到我们自己的项目中来。
如果我们在 npm 中搜索 eslint-config- 可以发现大量的 ESLint 拓展配置模块,我们可以直接通过这些模块在 ESLint 中使用上流行的风格,也可以把自己的配置结果封装为一个模块,供之后复用。
extends 可以是
-
一个字符串,也可以是一个数组。其中可以包含以下内容: 以eslint: 开头的字符串,如 eslint:recommended,这样写意味着使用 ESLint 的推荐配置,在这里可以查看其具体有哪些规则;
-
以 plugin: 开头的字符串,如 “plugin:react/recommended”,这些写意味着应用第三方插件
-
以 eslint-config- 开头的包,这其实是第三方规则的集合,由于 eslint 中添加了额外的处理,我们也可以省略 eslint-config-,如上面的 eslint-config-airbnb-base也可以写作airbnb-base;
-
一个本地路径,指向本地的 ESLint 配置,如 ./rules/react;
extents 中的每一项内容最终都指向了一个和 ESLint 本身配置规则相同的对象。
rule 如何起作用
ESLint 的核心是由各种 rule 组成的集合,ESLint 是怎么依据这些配置起作用的呢?这就需要了解 AST(Abstract Syntax Tree(抽象语法树))。
ESLint 使用 espree 来解析JS 语句,来生成抽象语法树,具体源码是在这里。
AST explorer可以帮我们方便的查看,一段代码被解析成 AST 后的样子。
就像 CSS 选择器一样,AST 选择器也有多种规则让我们可以更方便的选中特定的代码片段,具体规则可以参考
- Selectors - ESLint - Pluggable JavaScript linter
- GitHub - estools/esquery: ECMAScript AST query library. 。
以eslint