Eslint 快速入门教程_eslint 教程

ESlint

1.什么是 eslint

eslint 是一个代码检查工具包，用来检查代码的规范。

而相比之下，prettier 是一个代码格式化工具。

• 解决代码风格不一致的问题

• 可以实现自动修复一些结构、风格问题

• 默认是只修复 js 语法的，其他的语言和框架需要配置

• 高灵活度、配置自由

• 对于团队来说，统一项目的代码风格，降低维护成本

• 减少 git 提交

• 避免低级错误

• …

2.安装

1.检查 nodejs 版本

首先检查自己的 node 版本是否支持

前提条件：内置 SSL 支持的 nodejs 版本（^12.22.0、^14.17.0 或 >=16.0.0）Node.js 发行版

之所以需要 node ，是因为 eslint 是调用的 node 来检查我们的代码：

2.安装

pnpm add eslint      
1

初始化

pnpx 会去 bin 中寻找可执行的脚本

pnpx eslint --init
1

终端

PS D:\Projects\fontend\library-management> pnpx eslint --init
.../pnpm/storeDir/v3/tmp/dlx-6452        |  +97 ++++++++++
.../pnpm/storeDir/v3/tmp/dlx-6452        | Progress: resolved 97, reused 97, downloaded 0, added 97, done
You can also run this command directly using 'npm init @eslint/config'.
Need to install the following packages:
  @eslint/create-config@0.4.3
Ok to proceed? (y) y
√ How would you like to use ESLint? · style
√ What type of modules does your project use? · esm
√ Which framework does your project use? · vue
√ Does your project use TypeScript? · No / Yes
√ Where does your code run? · browser
√ How would you like to define a style for your project? · guide
√ Which style guide do you want to follow? · standard
√ What format do you want your config file to be in? · JSON
Checking peerDependencies of eslint-config-standard@latest
Local ESLint installation not found.
The config that you've selected requires the following dependencies:

eslint-plugin-vue@latest eslint-config-standard@latest eslint@^8.0.1 eslint-plugin-import@^2.25.2 eslint-plugin-n@^15.0.0 eslint-plugin-promise@^6.0.0
√ Would you like to install them now? · No / Yes
√ Which package manager do you want to use? · pnpm
Installing eslint-plugin-vue@latest, eslint-config-standard@latest, eslint@^8.0.1, eslint-plugin-import@^2.25.2, eslint-plugin-n@^15.0.0, eslint-plugin-promise@^6.0.0
 WARN  deprecated sourcemap-codec@1.4.8: Please use @jridgewell/sourcemap-codec instead
Packages: +89
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
Progress: resolved 285, reused 198, downloaded 65, added 89, done

dependencies:
- eslint ^8.40.0

devDependencies:
+ eslint ^8.40.0
+ eslint-config-standard 17.0.0
+ eslint-plugin-import 2.27.5
+ eslint-plugin-n 15.7.0
+ eslint-plugin-promise 6.1.1
+ eslint-plugin-vue 9.12.0

Done in 2.1s
Successfully created .eslintrc.json file in D:\Projects\fontend\library-management
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

目录中出现根据我们的选择而生成的配置文件：

如果你安装的过程中出错，请查看你的 es 的版本，并且尝试降低你的 es 的版本。

3.使用

在 vscode 中使用，eslint 会丧心病狂地检查我们的代码。

1.安装插件

注意：插件中并没有含有 eslint 核心代码，而是在项目中寻找 eslint 库。

2.使用命令行

pnpx eslint 文件
1

一般我们不会这么使用。

3.关于保存时格式化

在 setting.json 中配置：

{
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  },
}
1
2
3
4
5

4.配置文件

4.1.配置方式

我们将 eslint 的配置编写在项目的目录中

eslint 会按照以下的顺序查找：

• .eslinttc.js
• .eslintrc.yaml
• .eslintrc.json
• package.json 中的 eslintConfig 字段

在目录中，只有一个配置文件会生效，常用的就是 .eslintrc.js/json，还是建议使用 JavaScript。

eslint 配置的主要内容包括：

• 执行环境（env）
• 全局变量（globals）
• 规则（rules）
• …

4.1.1 环境 env

eslint 默认不开启任何的环境，可以在 env 字段中使用 "env_name":true 的方式开启，你甚至可以同时开启多个环境。

{
	"env": {
		"broswer":true,
		"node":true,
		"es6":true，
		"commonjs":true,
	}
}
1
2
3
4
5
6
7
8

开启环境之后，使用 eslint 就可以正常解析代码中的全局变量：

• broswer：window
• node：process

比如如果没有声明 broswer 环境，就会对 window 报错，因为你没定义啊。

甚至 console 啥的都会报错 :）

但是，如果你注释了 broswer ，依然是没有报错，你可以看一下你是不是使用的 standard 标准。

也就是

这个标准中自带着一些规范，比如他允许你使用 window。

还有其他的标准，比如：[eslint:all]，这样就会将所有的标准都加上，代码会迷失在血泊里。

还有 [eslint:recommend]，就会推荐的规范。会比全部的相对好一点。

我们推荐使用 standard 的那一套。

4.1.2 全局变量 globals

我们使用 js 进行开发的时候不可避免地会使用到第三方的包，如果第三方的包也使用了全局变量，我们是不能认为我们项目有这个全局变量。

所以我们可以使用 global 来管理代码中的全局变量

可以将其设置为 true/false/off

即可以读取并且更改，读取但是不能更改。

{
    "globals": {
        "$":"true",
    }
}
1
2
3
4
5

off 的作用是用来关闭 env 带来的全局变量，因为有的语法过新，我们可以将其关闭，这样 eslint 就会对于这过新的语法进行报错。

{
  "env":{
    "es6": true
  },
  "globals":{
    "Promise":"off"
  }
}
1
2
3
4
5
6
7
8

4.1.3 解析选项 parserOptions

{
  "parserOptions":{

    /* ecmaVersion: 指定 ECMA 语法版本
    *  取值：
    *      - "latest": 使用最新版本，现在 (2021) 等同于 12
    *      - 版本号：3, 5（默认）, 6, 7, 8, 9, 10, 11, 12
    *      - 年份命名法：2015(=6), 2016(=7), 2017(8) ...
    */ 
    "ecmaVersion":  "latest",

    /* sourceType: 脚本类型，普通脚本 或 ES 模块脚本
    *  取值："script"（默认） | "module"(ES 模块脚本）
    */
    "sourceType":"module",

    /* ecmaFeatures: 支持的特性语法*/
    "ecmaFeatures": {
      
      // 支持在全局使用 return 
      "globalReturn": true,

      // 默认使用严格模式（ES 5 或 以上）
      "impliedStrict": true,

      // 支持 JSX 语法
      "jsx": true 
    }
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

注意如果你开启了更高版本的 ecma 版本，需要更改环境，不然是没有效果的。

4.1.4 其他解释器 parser

eslint 默认的是 expree 解释器，你可以通过 parser 字段设置其他的解释器，如果项目中用到了 ts、react、vue 等，就需要与之对应的解释器。

为了正确的解析代码。

4.1.5 extends 节点

eslint 检查的规范，我们可以选择第三方规范：

具体配置的时候我们可以简写：

4.2 规则配置 rules

我们可以使用 extends 中的规范来规范我们的代码。但是我们也可以自己来配置。

这时候我们在初始化的时候需要选择自己的文件。

0：关闭

1：警告

2：报错

{
    "rule": {
        "semi":0/1/2
    }
}
1
2
3
4
5

注意：这里的规范，如果在你的 extends 中的第三方规范也有，是会覆盖的，也就是说优先级更高。

5.eslint检查代码的规则

本质其实就是函数，我们将代码输入（代码会被转换成用于检查的格式），然后代码检查返回结果。

总计有两百多个。

这些规范，包含了几乎开发活动中可能遇到的各种各样的问题。

我们可以使用的规范包：

• eslint内置规范包：eslint:all / eslint:recommend
• 标准规范包：eslint-config-standard -> 需要另外下载，可能就会出现上面说的 es 的版本的问题
• 第三方规范包：google / airbnb 等等