从零开始使用eslint

RockyRen
786 阅读5分钟

我们先来看下面一段很简单的javascript代码：

a = 1;
var b = 2

这段代码是虽然可以正常地运行的，但是细心的同学会发现，这段代码有两个问题

  • 1、a 变量没有定义
  • 2、var b = 2 后面没有加分号

问题1属于语法错误，给没有定义的a变量赋值相当于给全局变量a赋值，这种做法很容易会出现问题。问题2属于代码风格的问题，在同一个团队维护的代码中如果即有人不加分号，又有人加分号，那代码会十分难看，互相之间维护代码也会十分困难。

ESLint就是为了解决上述问题而生的。ESLint是一个Javascript代码检测工具，能够让开发者在编码过程中发现问题而不是在执行过程中。Eslint还能统一代码风格，它自身内置一些编码规则，但不会捆绑规则，它的强大之处在于每个团队都可以自定义一套自己的编码规则。

一个简单的例子

首先安装 eslint

npm install -S eslint

然后创建一个 .eslintrc 文件

module.exports = {
    "rules": {
        "semi": 2,
        "no-undef": 2
    }
};

eslint是通过配置的方式来决定规则的。semi 表示需要在语句后面加分号，no-undef表示禁用使用未声明的变量。

下面是待检测的代码 index.js

a = 1;
var b = 2

然后运行

npx eslint index.js

注：npx用于快捷运行项目内部安装的工具。也可以使用 ./node_modules/.bin/eslint index.js 或 npm script 的方式来运行。

运行结果：

VSCode的ESLint插件

上述的例子中需要在终端上运行命令才能看出错误。vscode有一个ESLint检测工具，在编辑代码时如果出现ESLint错误，则会高亮这些错误，方便实时排查。

使用效果如下：

如果觉得手动修复ESLint的错误十分麻烦，可以打开 保存后ESLint自动修正ESLint错误 的开关。每次保存代码都会修正当前文件的ESLint错误。配置方式为：Code => Preferences => Settings，然后搜索 eslint

ESLint配置

上文有提到，eslint是通过配置的方式来决定语法规则的。下面通过一个例子来说明eslint的常用配置：

.eslintrc

module.exports = {
    "globals": {
        "Promise": true
    },
    // 预定义环境变量
    "env": {
        "browser": true
    },
    "rules": {
        "semi": 2,   // 分号
    },
    "extends": "eslint:recommended"
};

globals配置

当访问当前源文件内未定义的变量时，no-undef 规则将发出警告，如果想在一个源文件里使用全局变量，需要在ESLint上定义这些全局变量，否则ESLint会发出警告。如上例所示，ESLint配置中定义了 Promise 全局变量

module.exports = {
    "globals": {
        "Promise": true
    },
    /* ... */
};

当检测如下代码时，Promise 全局变量有定义，而 Set 全局变量没有定义，则会发出警告：

console.log(Promise);
console.log(Set);

env配置

env 配置定义一组预定义的环境全局变量。上述配置中”browser”设置为true，表示预定义浏览器的一些全局变量：

module.exports = {
    // 预定义环境变量
    "env": {
        "browser": true
    },
    /* ... */
};

检测如下代码：

console.log(window);
console.log(document);
console.log(global);

window 和 document 属于浏览器的全局变量，但是 global 不属于，所以会报如下警告：

rule配置

rules 配置用于设置语法规则，要改变一个规则设置，你必须将规则 ID 设置为下列值之一：

  • "off" 或 0 - 关闭规则
  • "warn" 或 1 - 开启规则，使用警告级别的错误：warn (不会导致程序退出)
  • "error" 或 2- 开启规则，使用错误级别的错误：error (当被触发的时候，程序会退出)
module.exports = {
    "rules": {
        "semi": 2,   // 分号
    },
    /* ... */
};

上例的ESLint配置表示开启使用分号的规则。

所有的规则项可以在 ESLint规则页面 查看。

extends配置

如果自己配置各个 rule配置， 那么工作量实在太大了，此时 extends配置就发挥作用了。extends 配置可以继承其他规则集。例如，可以使用airbnb团队的eslint规则集:

首先通过npm安装：

npx install --dev eslint-config-airbnb

然后在ESLint配置中扩展该规则集

module.exports = {
    “extends”: “airbnb”
}

上例中的extends配置值为 "eslint:recommended" ，这是ESLint官方推荐的一个规则子集，在 ESLint规则页面标记为勾号的规则项表示启用的规则。

其他配置

  • parserOptions：指定你想要支持的 JavaScript 语言选项
  • parser：配置文件中指定ESLint的解析器
  • plugins：使用第三方插件
  • overrides：禁用一组文件的配置文件中的规则
  • settings：在配置文件添加共享设置
  • root: 默认情况下，ESLint将在根目录下的所有父文件夹中查找配置文件。该属性的作用是一旦发现了配置文件就停止对父文件夹的查找

可以在ESLint配置中查看所有配置的详细用法。

总结

使用ESLint可以在编码期间即可发现部分语法问题，并且可以统一代码风格。ESLint是通过配置的方式来决定语法规则的，熟悉ESLint的配置是使用好ESLint的关键。ESLint的extends配置可以使用第三方的ESLint规则，也可以自定义一套自己团队使用的ESLint规则。

avatar
文章
阅读
粉丝