eslint原理入门

项目中一直用到eslint做代码检测，但对其原理一直没有搞得很清楚，这次借用参与eslint插件编写的契机，加深对eslint的了解。
先送上ESLint官网地址，官网文档很全面很详细，基本的使用参考这里就可以了。

eslint的作用

ESLint 的用法包括两部分：

1. 通过配置文件配置 lint 规则；
2. 通过命令行执行 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 可以是

1. 一个字符串，也可以是一个数组。其中可以包含以下内容： 以eslint: 开头的字符串，如 eslint:recommended，这样写意味着使用 ESLint 的推荐配置，在这里可以查看其具体有哪些规则；

2. 以 plugin: 开头的字符串，如 “plugin:react/recommended”，这些写意味着应用第三方插件

3. 以 eslint-config- 开头的包，这其实是第三方规则的集合，由于 eslint 中添加了额外的处理，我们也可以省略 eslint-config-，如上面的 eslint-config-airbnb-base也可以写作airbnb-base;

4. 一个本地路径，指向本地的 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