三、理解ESLint的rules

发表于 | 分类于 |

关于eslint的配置文件中的rules，先来看一下官方文档，这里面详尽的记录了所有的规则。这些规则是怎么起作用的？遇到报错信息应该如何解决？

建立测试项目

老样子，先建立项目：

1
2
3
$ mkdir lesson04
$ cd lesson04
$ yarn init -y&&yarn add -D eslint

同样的进行初始化，npx eslint --init

这次的配置比之前两次的多了些。可以看到package.json多了好几个依赖，顺便配置一些script👇

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
{
  "name": "lesson04",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": {
    "eslint": "eslint ./src"
  },
  "devDependencies": {
    "eslint": "^6.8.0",
    "eslint-config-standard": "^14.1.0",
    "eslint-plugin-import": "^2.20.1",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.2.1",
    "eslint-plugin-standard": "^4.0.1"
  }
}

ESLint配置信息

eslint的配置信息在init的时候可以选择以什么格式保存，可以是js文件也可以是json文件还可以是yaml文件。这次我选了json文件，于是会生成.eslintrc.json。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
{
    "env": {
        "browser": true,
        "es6": true,
        "node": true
    },
    "extends": [
        "standard"
    ],
    "globals": {
        "Atomics": "readonly",
        "SharedArrayBuffer": "readonly"
    },
    "parserOptions": {
        "ecmaVersion": 2018,
        "sourceType": "module"
    },
    "rules": {
    }
}

官网配置有个大概的说明：

  • Environments - 指定脚本的运行环境。每种环境都有一组特定的预定义全局变量。
  • Globals - 脚本在执行期间访问的额外的全局变量。
  • Rules - 启用的规则及其各自的错误级别。比如”no-console”: “off”

建立测试代码

新建/src/test.js测试文件，代码如下：

1
console.log("hello world");

执行命令yarn eslint，发现一下子报了三个ERROR👇

  • 错误一：字符串必须使用单引号
  • 错误二：多余的分号 （这家伙走简洁风格的，不加分号）
  • 错误三：代码最后必须多出一行空行 （真的很严格）

遵循规则

行，那就改呗👇

1
console.log('hello world')

这样就不报错了，ESLint真的很严格。

这样手动去修改太麻烦了，可以使用命令行的 --fix 选项用来自动修复规则所报告的问题👇

命令行yarn eslint --fix，执行之后，ESLint会自动帮我们修改好代码，就不会报错了。

关闭规则

上面的代码例子报了三个错误，我们除了按照它的规则去修改代码，还可以关闭其规则，在eslint配置文件中的rules里进行配置。

在来看一遍报错信息👇

1
2
3
1:13  error  Strings must use singlequote                   quotes
1:27  error  Extra semicolon                                semi
1:28  error  Newline required at end of file but not found  eol-last

quotes、semi、eol-last都设置为off就可以关闭这些规则了：

1
2
3
4
5
6
"rules": {
    "space-before-function-paren": "off",
    "eol-last": "off",
    "quotes": "off",
    "semi": "off"
}

之后再运行代码就不会报错了。

以上就是rules的大致用法，更多的rules详见官网，如果想配置一个团队使用的rules，就一定要对其非常熟悉，否则的话使用recommended的rules就够用了。