ESlint 使用总结

在编写 Js 代码时, 下面是两种常见的编程风格

const foo = 'Foo'
复制代码

const foo = "Foo";
复制代码

关于使用单引号仍是双引号、 行末加不加 ; 可使用 ESlint 在开发时统一编程风格。

ESlint 工具不只能够统一这种风格, 还能够在编写时就检查代码是否符合语法规范。

eslint 使用

1. 安装

npm install eslint -g  ## 为了使用 eslint cli 功能， 这里使用了全局安装
复制代码

2. 在项目的根目录下新建 .eslintrc 文件

{
    "rules": {
      "indent": 2,
      "no-unused-vars": 2,
      "no-alert": 2
    }, 
    "env": {
       "browser": true
    }
}
复制代码

3. 新建 index.js 文件

var unused = 'I have no purpose!'

alert(unused)

function foo () {
    var message = 'Hello, World!';
        alert(message);
}

foo()
复制代码

4. 使用 eslint index.js 检查代码。

在命令行中输出了三条错误， 并显示了错误出现的 行:列 错误等级 错误说明 对应的 eslint rule

7:1  error  Expected indentation of 4 spaces but found 8  indent
复制代码

5. 使用 --fix 参数， 修复问题。

eslint index.js --fix
复制代码

--fix 该选项指示 ESLint 试图修复尽量多的问题。修复只针对实际文件自己，并且剩下的未修复的问题才会输出。不是全部的问题都能使用这个选项进行修复。

ESlint 配置方式

1. 使用 eslintrc.js、 eslintrc.json、 eslintrc.yml、 .eslintrc 文件配置。

2. 除了使用配置文件, 也能够在文件内部以行内的形式来配置 eslint 规则。

// index.js

var unused = 'I have no purpose!'

// eslint-disable-next-line no-alert 
alert(unused)

function foo () {
    var message = 'Hello, World!';
    // eslint-disable-next-line indent
        console.log(message);
}

foo()

复制代码

3. 在 package.json 中使用 eslintConfig 字段进行配置

{
    "eslintConfig": {
        "rules": {
            ...
        }, 
        "extends": []
    }
}
复制代码

指定 JavaScript 支持版本

当在代码中使用 const let 等 ES6 语法时, ESlint 会报错。

这是由于 ESlint 默认支持 JavaScript 三、5 版本。 对更高 ES 语法的支持须要手动配置。

ESlint 的解析器选项能够在配置文件中使用 parserOptions 属性设置。可用的选项有：

1. ecmaVersion 默认设置为3，5（默认）， 可使用 六、七、8 或 9 来指定你想要使用的 ECMAScript 版本。你也能够用使用年份命名的版本号指定为 2015（同 6），2016（同 7），或 2017（同 8）或 2018（同 9）

2. sourceType 设置为 "script" (默认) 或 "module"（若是你的代码是 ECMAScript 模块)。

3. ecmaFeatures 这是个对象，表示你想使用的额外的语言特性:

   • globalReturn 容许在全局做用域下使用 return 语句
   • impliedStrict 启用全局 strict mode
   • jsx 启用 JSX
   • experimentalObjectRestSpread 启用实验性的 object rest/spread properties 支持

{
    "paarserOptions": {
        "ecmaVersion": 6,
        "sourceType": "module",
        "ecmaFeatures": {
            "jsx": true
        }
    }
}
复制代码

::: tip

1. ，对 JSX 语法的支持不用于对 React 的支持。React 使用了一些特定的 ESLint 没法识别的 JSX 语法。若是你正在使用 React 而且想要 React 语义支持，使用 eslint-plugin-react。
2. 支持 ES6 语法并不意味着同时支持新的 ES6 全局变量或类型(好比 Set 等新类型), 这时候除了须要使用 { "parserOptions": { "ecmaVersion": 6 } } 来开启 ES6 语法支持, 还须要 {"env": {"es6": true}} (当开启了这个配置后会自动开启对 ES6 语法的支持) :::

配置运行环境

一个环境定义了一组预约义的全局变量。 Js 运行在不一样的环境, 会有不一样的全局变量, 例如在 Node 环境中会存在 global 变量, 当运行在 browser 中会存在 window 变量。 ESlint 会根据当前的运行环境来识别代码中的全局变量, 若是执行环境与全局变量不符合时, 将会报错。

使用 env 关键字在配置文件里指定想启用的环境，并设置它们为 true。

{
    "env": {
        "browser": true,
        "node": true
    }
}
复制代码

更多的 env 配置参照 Specifying Environments

定义特殊的全局变量

当访问源文件未定义的变量名时, no-undef 将会发出警告。 这是能够在 ESlint 配置文件中使用 globals 单独设置一个全局变量。

{
    "globals": {
        "var1": true,
        "var2": true
    }
}
复制代码

这样在代码中就能够不定义 var1 var2 这两个变量而直接使用了。

Rules 配置

在 ESlint 附带有大量的规则， 可使用上面提到的配置方式添加项目的 rules 规则。

以 indent 规则为例，默认时四个空格， 当须要更改这个规则时候， 能够有下面几种写法:

// 使用默认4个空格。 错误等级为 2 
"indent": 2

// 使用 2 个空格。 错误等级为 2
"indent": [2, 2]

// 使用 tab 缩进。 错误等级为 2
"indent": [2, "tab"]

// 缩进为2个空格, 同时，switch...case结构的case也必须缩进
"indent": [2, 2, {"SwitchCase": 2}]
复制代码

能够看到, Rules 的配置规则是一个能够包含三个参数的数组(只有第一个时能够为字符串)：

1. 第一个参数为错误级别， 可使用 0 或者 off(关闭规则)、 1 或者 warn(开启规则, 使用警告级别的错误, 不会致使程序退出)、 2 或者 error(开启规则, 使用错误级别的错误, 会致使程序退出)

2. 第二个参数为规则的选项， 在例子中分别配置了 indent 为默认4个空格、2个空格、tab缩进。

3. 第三个参数为额外参数, 例子中使用该参数开启了 switch...case 缩进验证。

Extend 配置

ESlint 提供了众多可配置的 Rules, 一个一个配置是很是麻烦的。 ESlint 支持从已有的配置中继承启动的规则。

eslint:recommended

ESlint 提供了 eslint:recommended 配置， 它提供了一系列核心规则， 可使用 extends 属性来继承这些规则。

"extends": "eslint:recommended"
复制代码

::: tip

1. eslint:recommended 描述了每一个规则的说明和默认配置。
2. extends 属性值当只有一个时能够是字符串, 多个时, 为字符串数组。 :::

其余规则集

除了继承默认的 eslint:recommended, 还能够继承一些优秀的开源规则集， 如 eslint-plugin-standard, 使用方法也比较简单。

1. 安装 npm 包

npm install -D eslint-plugin-standard
复制代码

2. 配置

{
    "extends": ["eslint:recommended", "standard"]
}
复制代码

::: tip

1. 在 ESlint 中, 使用外部 npm 包的时候， 省略前面 exlint-plugin-
2. 若是须要覆盖 extends 中的配置, 能够在 rules 字段中进行覆盖 :::

Plugin 插件使用

插件是一个 npm 包，一般输出一个或多个命名的规则配置。 上面说到能够 extends 属性来继承规则， 咱们可使用 plugins 属性来引入 一个 npm 包, 而后使用 extends 属性来继承这个 npm 包的某个规则集。

1. 安装一个 ESlint 的 npm 包。

npm install eslint-plugin-react --save-dev
复制代码

2. 使用 plugins 属性引入插件

{
    "plugins": "react"
}
复制代码

::: tip 在 ESlint 中, 使用外部 npm 包的时候， 省略前面 exlint-plugin- :::

3. 使用 extends 继承插件的某个规则

{
    "plugins": "react", 
    "extends": ["eslint:recommended", "plugin:react/recommended"]
}
复制代码

ignore 文件配置

在项目根目录建立一个 .eslintignore 文件告诉 ESLint 去忽略特定的文件和目录。.eslintignore 文件是一个纯文本文件，其中的每一行都是一个 glob 模式代表哪些路径应该忽略检测。例如，如下将忽略全部的 JavaScript 文件：

**/*.js
复制代码

或者也能够在 package.json 文件中配置 eslintIgnore 字段来指定忽略文件

{
    "eslintIgnore": ["hello.js", "world.js"]
}
复制代码