我的前端配置之代码质量检查 eslint

Question

ESLint

代码质量检查与代码风格无关，它的作用是静态检测代码语法是否有可预见性的错误。这里的代码质量着重说明的是 JavaScript，而前端的 HTML、CSS 也可以通过工具进程检查。

前端代码检查工具，主流的有 JSLint、JSHint、Closure Linter、JSCS、ESLint 等。

其中要属 ESLint 最为耀眼和主流，我的前端配置就用到了 ESLint。ESLint 的所有检查规则都是可插拔的，没有重要之分，并且可以自定义检测结果的级别，对团队项目来说非常的灵活，当然也有已经配置好的规则提供使用。

实例

从一个最简单的例子开始说起，新建 js2.js：

'use strict';

var a = 1;var       b=2;

alert(
b
);

console.log(  /* eslint不关心代码风格 */ b+c )

上面的代码块，代码风格肯定都是大家不能所接受的，但 ESLint 不关心这些，它只检查代码质量。我们在项目根目录安装 ESLint。

yarn add eslint

安装完成之后我们新建一个配置文件 .eslintrc.js：

module.exports = {
    "env": {
        "browser": true,
        "node": true
    },
    "extends": "eslint:recommended"
};

配置文件中，最主要的一行 extends 配置是 eslint:recommended 表述的是，ESLint 检查规则使用 ESLint 推荐规则来进行，其中 ESLint 的推荐规则可以在这里看。

然后再项目根目录执行：

 ./node_modules/.bin/eslint js2.js


/path/to/js2.js
  3:5   error  'a' is assigned a value but never used  no-unused-vars
  9:37  error  'c' is not defined                      no-undef

✖ 2 problems (2 errors, 0 warnings)

从上述错误可知，第 3、9 行的代码质量有问题，并且已经将问题描述出来了。既然发现了问题，也可以修正问题，这一点和前文介绍的 prettier 是一样的。

在配置文件同目录执行：

./node_modules/.bin/eslint js2.js --fix

当然，上文的代码是无法修复的，因为我们无法预知 a 变量是否会在其他文件被使用，并且也无法预知 c 变量从哪来。

编辑器

ESLint 已经被部分编辑器很好的支持了，这里以 WebStorm 为例。在配置好的 ESLint 规则之后，默认 WebStorm 会自动读取配置并进行可视化校验。