ESLint

本文最后更新于：19 小时前

关于ESLint的使用教程有很多，但是大多数讲解的内容都比较细，在配置规则等方面讲解的比较多（很多文章实际上是相互之间抄来抄去），较少结合实际场景，所以对于入门小白来说，容易看的云里雾里。在这里，我尝试结合一些简单的应用场景渐进式地介绍 ESLint 的使用，不求大而全，但求能够让小白快速理解ESLint是什么、怎么用

ESLint

一、ESLint入门

1. ESLint是什么

Lint（Linter） 是一种静态代码分析工具，用于标记代码中某些编码错误、风格问题和不具结构性（易导致 bug）的代码。简单理解就是一个代码检查器，检查目标代码是否符合语法和规定的风格习惯。 ESLint 是基于 ECMAScript/JavaScript 语法的 Lint（StyleLint是CSS语法的Lint），能够：

  • 查出 JavaScript 代码语法问题。
  • 根据配置的规则，标记不符合规范的代码。
  • 自动修复一些结构、风格问题。

2. ESLint怎么用（命令行）

第一步，安装 ESLint 模块（不管是使用命令行模式、还是IDE插件模式，都需要先安装），在这个过程中，会出现交互式选项让用户进行简单的配置，配置完之后，自动完成ESLint及相关模块的安装，并生成ESLint配置文件（例如：.eslintrc.json）

1
npm init @eslint/config
1
2
3
4
5
6
7
# 也可以在安装的过程中下载使用指定的共享配置
# npm 6.x
npm init @eslint/config --config semistandard
# ⚠️ npm 7+ 需要使用额外的双杠：
npm init @eslint/config -- --config semistandard
# 或（可以省略 `eslint-config` 前缀）
npm init @eslint/config -- --config eslint-config-semistandard
image-20230616214111541

生成的.eslintrc.js文件长这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
module.exports = {
    "env": {
        "browser": true,
        "es2021": true,
        "node": true
    },
    "extends": [
        "eslint:recommended",
        "plugin:vue/vue3-essential"
    ],
    "parserOptions": {
        "ecmaVersion": "latest",
        "sourceType": "module"
    },
    "plugins": [
        "vue"
    ],
    "rules": {
    }
}

第二步，命令行输入指令即可检查指定文件/目录

1
2
# 在项目根目录输入指令
npx eslint /src/main.js

为了测试检查效果，我在main.js文件中手动制造了一个错误，结果如下：

image-20230616211410204

第三步，自动修复

1
npx eslint --fix ./src/main.js
--fix，此项指示 ESLint 尝试修复尽可能多的问题，只有剩余的未修复的问题才会被输出，但不是所有的问题都可以用此项来修复

所以这里并没有发生任何变化，依然输出原来的错误。

以上操作属于半自动配置的方式，也可以使用完全手动配置的方式（即自己创建 ESLint 配置文件、自己下载ESLint模块），具体请查看：ESLint 入门 - 手动配置

3. 在VSCode中使用ESLint

接上一步（同样需要先在项目中安装好ESLint模块、以及创建ESLint配置文件），插件的作用只是检查项目中是否存在ESLint配置，并在编码过程中进行检查（而不用等到输入命令行输入命令时才执行）

首先，安装 ESLint 插件，安装完自动开启

之后，打开main.js文件，输入一句错误语法的代码，可以看到 ESLint 在此显示了 error 提示

image-20230616212630115

（为了验证是否是 ESLint 在此发挥了作用，我把 ESLint 插件禁用之后，再来查看，可以看到 error 提示消失了，证明 ESLint 插件确实发挥了语法检查的作用！

image-20230616212835429

保存时自动修复？？？？？？？？？？？

4. 使用共享配置

有两种配置规则的方式。第一种是extend字段中设置一个共享配置，直接配置整套规范；第二种是rules字段中直接配置。（通常情况是在extends中配置整套规范，然后在rules中修改部分规范）。这里介绍第一种方式。

第一步，安装「共享配置」，这里以airbnb为例

1
npm i eslint-config-airbnb -D  # 安装为开发依赖，因为只需要在开发期间使用

拓展：可以在npm中搜索config-config，查看可用的共享ESLint配置

第二步，在.eslintrc.js文件中修改extend字段

1
2
3
4
5
6
module.exports = {
    "extends": [
        "airbnb"
    ],
    ...
}

保存，即可生效！对main.js进行检查，可以看到提示：（1）行尾缺少分号，（2）文件尾存在多余空行

image-20230616221301609

5. 自定义配置

接上一步，在rules字段中自定义配置，这里我们将eslint-config-airbnb配置中对行尾分号的约束覆盖掉。（大多数使用场景是，使用extends扩展一个完整的配置文件，然后在rules中对部分内容作修改）

1
2
3
4
5
6
7
8
9
module.exports = {
    "extends": [
        "airbnb"
    ],
     "rules": {
        "semi": 0   // 不检查分号的使用情况
    },
    ...
}

此时我们再对main.js进行检查

1
npx eslint ./src/main.js
image-20230616222001168

可以看到，现在已经只剩下：（2）文件尾存在多余空行 这一条错误了

6. 了解配置文件

通过以上操作，我们已经基本了解了ESLint的简单用法，下面继续深入。

6.1 配置文件格式

ESLint配置文件支持多种格式：.js、.yaml、.json（优先级依次降低，只使用优先级最高那个），也可以在package.json的eslintConfig属性中进行配置（优先级最低）

6.2 配置文件组成部分

1
2
3
4
5
6
7
8
9
10
module.exports = {
    "env": {},				// 环境配置，环境会提供预设的全局变量
    "extends": [],			// 扩展配置文件，继承另一个配置文件的全部内容
    "parserOptions": {},	// 解析器选项配置，用于指定需要支持的 JavaScript 语言特性
    "plugins": [],			// 插件配置，用来扩展ESLint，例如完成对Vue或其它语言的检查
    "rules": {},			// 规则配置，自定义检查规则，或者禁用指定规则
  	"globals": {},			// 全局变量配置
    "ignorePatterns": [],	// 指定ESLint检查时忽略的文件
    "parser": "xxx",		// 指定解析器，缺省默认为Espree
}

6.3 环境配置

JavaScript 生态中有多个运行时、版本、扩展和框架。每个所支持的语法和全局变量都不尽相同。环境会提供预设的全局变量。可用的环境请查看：配置语言选项 - ESLint

1
2
3
4
5
6
7
8
// eslintrc.js
module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    ...
}

以上是在eslintrc.js文件中配置的。也可以在package.json文件中进行配置，如下

1
2
3
4
5
6
7
8
9
10
11
// package.json
{
    "name": "mypackage",
    "version": "0.0.1",
    "eslintConfig": {
        "env": {
            "browser": true,
            "node": true
        }
    }
}

除了使用「配置文件」的方式，还可以使用「配置注释」的方式指定环境，具体请看：配置语言选项 - ESLint

6.4 扩展配置

配置文件使用扩展后，就可以继承另一个配置文件的所有特征（包括规则、插件和语言选项）并修改所有选项。

extends 属性值可以是：

  • 一个指定配置的字符串。
  • 一个指定配置的字符串（要么是配置文件的路径，要么是可共享配置的名称，要么是 eslint:recommended，要么是 eslint:all，后两者是随着ESLint模块一起安装的，所以直接可用）。
  • 一个字符串数组，每个额外的配置都会扩展前面的配置。
1
2
3
4
5
6
module.exports = {
    "extends": [	// 注意：这里值是数组类型
        "aribnb"	// eslint-config-airbnb，前缀可以省略，配置文件需要npm install 
    ],
	...
}

更多内容：扩展配置文件 - ESLint

6.5 规则配置

规则是 ESLint 的核心构建模块。规则验证你的代码是否符合某个期望，以及如果不符合该期望该怎么做。规则还可以包含针对该规则的额外配置选项。

要在配置文件中配置规则，请使用 rules 键和一个错误级别以及任何你想使用的选项。

1
2
3
4
5
6
7
8
module.exports = {
    "rules": {
        "eqeqeq": "off",
        "curly": "error",
        "quotes": ["error", "double"]
    },
	...
}

除了使用「配置文件」配置规则之外，还可以使用「配置注释」的方式，具体请看：使用配置注释 - ESLint

还可以指定要禁用的规则，具体请看：禁用规则 - ESLint

7. 使用插件

你可以用插件以各种不同的方式扩展 ESLint。插件可以包括：

  • 自定义规则，以验证你的代码是否符合某个期望，以及如果不符合该期望该怎么做。
  • 自定义配置。
  • 自定义环境。
  • 自定义处理器，从其他类型的文件中提取 JavaScript 代码，或在提示前对代码进行预处理。

详情：配置插件与解析器 - ESLint - 插件化的 JavaScript 代码检查工具

8. 常见的rules

完整的rules列表，请查看：规则 - ESLint 中文文档 (nodejs.cn)

正常的rule采用的键值对的配置方式，这一类属性只需要开启或关闭即可，如下

1
2
3
4
5
6
7
8
module.exports = {
    "rules": {
        "eqeqeq": "off",		// 关闭对eqeqeq的检查，eqeqeq表示需要使用 === 和 !== （而不是==和!=）
        "curly": "error",		// 开启curly规则，并使用error级别的错误，curly表示对所有控制语句强制使用大括号
        "no-console": "warn",	// 开启no-console规则，并使用warn级别的错误，no-console表示禁止使用console
    },
	...
}

以上rules等价于

1
2
3
4
5
6
7
8
module.exports = {
    "rules": {
        "eqeqeq": 0,		
        "curly": 2,		
        "no-console": 1,	
    },
	...
}

对于基本的rule的取值：

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2 - 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)

但是除了基本的rule之外，还有一些rule还拥有自己的属性，即在控制开关的同时还需要配置属性，如下

1
2
3
4
5
6
7
8
module.exports = {
    "rules": {
        'quotes': ['error', 'single'],  
        // quotes表示强制一致使用单引号、双引号、或反引号；第一个选项error表示开启规则并使用error级别
        // 第二个选项single表示，强制一致使用单引号
    },
	...
}

下面列举一些可能会经常用到的规则

rule 说明 推荐配置
comma-dangle 是否允许对象中出现结尾逗号 [“error”, ”only-multiline“]
no-console 不允许出现console语句 2
no-dupe-keys 对象中不允许出现重复的键 2
no-duplicate-case switch语句中不允许出现重复的case标签 2
no-redeclare 不允许变量重复声明 2
camelcase 强制驼峰命名规则 [2, {“properties”: “never”}]
no-inline-comments 不允许行内注释 0
no-mixed-spaces-and-tabs 不允许混用tab和空格 [2, “smart-tabs”]
no-multiple-empty-lines 空行最多不能超过两行 [2, {“max”: 2}]
no-trailing-spaces 一行最后不允许有空格 2
no-var 使用let和const代替var 0

以上都是一些单独的规则，实际上可能很少被直接自己组合这些rule来完成配置，一般都是使用现成的规则，如ESLint内置的eslint:recommended或eslint:all、ESLint标准规则eslint-config-standard（需要下载）、第三方配置eslint-config-airbnb（需要下载）。单独的rule更多时候是用来修正规则集来达到自己的需求。

9. 热门开源配置

10. 规则的优先级

如果 extends 配置的是一个数组，那么最终会将所有规则项进行合并，出现冲突的时候，后面的会覆盖前面的；

通过 rules 单独配置的规则优先级比 extends 高；

二、ESLint常用实践

（有待补充）

参考链接

ESLint 使用教程 - 掘金 (juejin.cn)

ESLint - 基本入门篇 - 掘金 (juejin.cn)

ESLint 入门 - ESLint - 插件化的 JavaScript 代码检查工具

可能需要回头看：Eslint使用入门指南 - 掘金 (juejin.cn)

规则 - ESLint 中文文档 (nodejs.cn)

效率 > 规范化
ESLint
http://timegogo.top/2023/06/17/效率/规范化：ESLint/
作者
丘智聪
发布于
2023年6月17日
更新于
2026年6月10日
许可协议