最流行也最实用的代码检查工具

eslint 是什么

eslint会对匹配文件进行语法解析，分析出AST之后交给具体的规则来分析代码，然后判断如何处理错误，以及如何修复错误信息。

eslint自身已经提供了众多规则来约束我们的代码，但是考虑的再完美也只是适用于当下的情况，为了更好的进行扩展，比如：

• • 不支持的文件怎么办？eslint 默认支持 js，那么 ts 怎么办，.xxx 文件又怎么办

• • 现有的规则不是想要的怎么办？

• • 假如系统内存在多个系统，比如SSR中可能服务端的源码，和客户端的源码可能是在一起的，用 node 侧的约束来限制客户端显然是不合理的

• • 配置过于复杂怎么办？

针对于以上的问题 eslint 都给出了解决方案

• • 不支持的文件：可以自定义解析器

• • 复杂配置：有专门的选项可以复用别人的配置好的npm包

• • 规则不够用：支持插件

• • 多个系统：可以对文件进行分组管理

• • 写完代码一片红：可以通过配置自动修复

另外它比 prettier 要更加的严格，更加的自由，更加开放，尤其是针对于多人协作代码不统一，想要对编码风格有所约束时，可以说是不二之选

PS：吐槽下 prettier ，如果配置不配全的话，prettier会格外容易受外在影响，直接的后果就是合并代码时，运气好点就能看到一坨因为格式导致的代码冲突

安装

• • 安装 eslint 库进行检查

npm install eslint -D

• • 安装插件提供IDE工具检查效果

vsocde 插件搜索 ESLint

使用

命令行支持 glob 语法，用起来的感觉如下

# 只检查所有错误
npx eslint src/**/*.{html,js,ts,tsx}
# 检查所有文件
npx eslint .
# 修复所有错误
npx eslint src/**/*.{html,js,ts,tsx} --fix

创建配置文件

• • 如果使用 packages.json ，配置字段为 eslintConfig

//packages.json
{
  "eslintConfig": {
    //...
  }
}

• • 在根目录下创建配置文件( 优先级循环从低到高，选择其中一种即可，推荐 .eslintrc.js )

1. 1. .eslintrc.js

2. 2. .eslintrc.cjs

3. 3. .eslintrc.yaml

4. 4. .eslintrc.yml

5. 5. .eslintrc.json

6. 6. package.json

配置文件选项

module.exports = {
  //root的意义是告诉Lint当前是顶级目录了，不需要继续向上查找了
  "root": true,
  
  //指定代码运行的宿主环境，可以指定多个，因为不同环境会有不同的全局变量，例如ssr就会同时存在 浏览器&node 的环境变量
  "env": {
    browser: true,
    commonjs: true,
    es6: true,
    jest: true,
    node: true,
    serviceworker: true,
    worker: true
  },
  
  //声明全局变量
  "globals": {
    "bbq": true
  },
  
  //解析器，解析器有很多，对于默认不支持的文件需要自定义指定，比如这个 ts 的
  "parser": "@typescript-eslint/parser",
  
  //传递给 parser 的配置选项，普遍如下，其他选项基本都是特殊选项，得看使用的 parser 的文档
  "parserOptions": {
    "ecmaFeatures": {
      "jsx": true //是否应用了 jsx 语法，这里不代表react-jsx，想要更好支持react得用插件 eslint-plugin-react
    },
    "ecmaVersion": "latest",//当前使用的 js 的版本
    "sourceType": "module" //当前用的es6(module) 还是 es5(script 这是默认值)
  },
  
  //是否禁用所有内联注释
  "noInlineConfig": false,
  
  //要忽略哪些文件的检测，效果和 .eslintignore 相同
  "ignorePatterns": ["dll/vendor/*.js"],
  
  //共享配置，该内容会传递给每条要执行的规则
  "settings": {},
  
  //预设 -- 具体看下边
  "extends": [
    "plugin:react/recommended",
    "airbnb"
  ],
  
  //插件 -- 具体看下边
  "plugins": [
    "react",
    "@typescript-eslint"
  ],
  
  //检查规则 -- 具体看下边
  "rules": {
    "semi": 0,
    "no-console": 0
  }

  //代码分组，尤其是一个SSR项目，里面可能同时存在 浏览器和服务端 的两种风格源码，这时候就要区别管理
  //选项和外边一样，还多了个别选项
  "overrides": [
    {
      "files": ["app/**/*"],
      "excludedFiles": "*.test.js",
      "plugins": ["react"]
    },
    {
      "files": ["server/**/*"],
      "excludedFiles": "*.test.js"
    }
  ]
}

plugins 插件

插件是对规则维度的拓展，作用是可以拓展新的校验规则（rules）对lint进行补充

所有插件的名字都是约定好的

• • 无作用域：eslint-plugin-react

• • 有作用域：@gxs/eslint-plugin | @gxs/eslint-plugin-abc

使用时分为，有作用域( @xx/eslint-plugin )和无作用域( eslint-plugin-xx )，使用时可以对头部进行省略( eslint-plugin 这个词 )，如下

module.exports = {
  plugins: [
    '@jquery/jquery', // 表示 @jquery/eslint-plugin-jquery
    '@foobar', // 表示 @foobar/eslint-plugin
  ]
}

但是使用后规则并不会立马生效，还需要手动在 rules 进行开启和配置，而规则可能会很多对于开发也不友好，所以就可以借助 extends 来进行默认或者批量配置

所有的插件都是扁平化的放置在顶层的node_modules中。因为使用的插件之中还可能会继续嵌套别的插件，嵌套的插件可能还会继续嵌套，也可能会出现循环嵌套等等，都在顶层就保证了插件的唯一

extends 预设

预设就是别人做好的配置，我们可以直接拿过来用

预设的名字的约定是，以eslint-config-为前缀

1. 1. 使用预设的包时可以对前缀省略

2. 2. 使用插件的预设时，需要先下载插件，然后用以下规则进行拼

• • plugin:

• • 插件的包名，例如eslint-plugin-react 缩写成`react``

• • /

• • 配置的名称，通常都会有 **recommended`**，不知道有什么就直接用这个吧，具体都有哪些名称得看插件是怎么配的

1. 1. 路径引用文件( 本地开发会用的多些 )

module.exports = {
  //1. 相当于使用 eslint-config-standard 
  extends: [ "standard" ]
  
  //2. 使用插件的预设，这里用的插件是 eslint-plugin-react
  extends: [ "plugin:react/recommended" ]
  
  //3. 路径引用文件( 本地开发会用的多些 )
  extends: ["./config/eslint/a.js"]
}

因为预设的内容也可能存在重复，所以顺序很重要，后边的会覆盖前边的

rules 规则

这是 lint 配置具体规则的地方，每条规则都有 3 个检查等级

• • 'off' 或 0 关闭此规则

• • 'warn' 或 1 提示变为黄色警告

• • 'error' 或 2 提示变为红色错误

而跟在规则后边的是数组的话，这表示传递参数，这是被扩展后才有的内容，默认是没有的

module.exports = {
  rules: {
    semi: ["error"]
  }
}

规则选项

不同的插件和预设也会改变规则的参数，需要去查看插件的文档

配置文件 key 的提示

感觉有点鸡肋，但聊胜于无，用于在 js 环境下得到些代码提示

1. 1. 下载类型文件 pnpm add @types/eslint -D

2. 2. 使用 jdos 进行提示

/** @type {import("eslint").Linter.Config}*/
module.exports = {
  //...
}

发布插件

1. 1. 在 packages.json 中的 main 指定插件的入口文件

2. 2. 使用 coomonjs 的方式导出一个对象，其中 config 的设置，就是最终用户 extends: [ "plugin:cus/base" ]中，后边那个 key

//cus.js
module.exports = {
  configs: {
    base: require("./lib/base"),
    vue3: require("./lib/vue3")
  }
}

推荐下作者自己配置的插件

eslint-plugin-usagisah( https://www.npmjs.com/package/eslint-plugin-usagisah )

有 6 种配置，属于适用于的 lib, react, vue3, ts, js 的，开放又通用的配置

内部有详细的使用文档，欢迎使用