粘贴图片

ESLint

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

前端代码检查工具,主流的有 JSLintJSHintClosure LinterJSCSESLint 等。

其中要属 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 会自动读取配置并进行可视化校验。

粘贴图片

2 条评论
作者
状态
标签
二维码
目录