Lint工具

概述

Lint工具用于检查代码的语法是否正确、风格是否符合要求。

JavaScript语言的最早的Lint工具,是Douglas Crockford开发的JSLint。由于该工具所有的语法规则,都是预设的,用户无法改变。所以,很快就有人抱怨,JSLint不是让你写成正确的JavaScript,而是让你像Douglas Crockford一样写JavaScript。

JSHint可以看作是JSLint的后继者,最大特定就是允许用户自定义自己的语法规则,写在项目根目录下面的.jshintrc文件。

JSLint和JSHint同时检查你的语法和风格。另一个工具JSCS则是只检查语法风格。

最新的工具ESLint不仅允许你自定义语法规则,还允许用户创造插件,改变默认的JavaScript语法,比如支持ES6和JSX的语法。

ESLint

基本用法

首先,安装ESLint。

$ npm i -g eslint

其次,在项目根目录下面新建一个.eslintrc文件,里面定义了你的语法规则。

{
  "rules": {
    "indent": 2,
    "no-unused-vars": 2,
    "no-alert": 1
  },
  "env": {
    "browser": true
  }
}

上面的.eslintrc文件是JSON格式,里面首先定义,这些规则只适用于浏览器环境。如果要定义,同时适用于浏览器环境和Node环境,可以写成下面这样。

{
  "env": {
    "browser": true,
    "node": true
  }
}

然后,上面的.eslintrc文件定义了三条语法规则。每个语法规则后面,表示这个规则的级别。

  • 0:关闭该条规则。
  • 1:违反这条规则,会抛出一个警告。
  • 2:违反这条规则,会抛出一个错误。

接下来,新建一个index.js文件。

var unusued = 'I have no purpose!';

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

greet();

然后,运行ESLint检查该文件,结果如下。

$ eslint index.js

index.js
  1:5  error    unusued is defined but never used  no-unused-vars
  5:5  warning  Unexpected alert                   no-alert

✖ 2 problems (1 error, 1 warning)

上面代码检查出两个问题,一个是定义了变量却没有使用,二是存在alert。

预置规则

自己设置所有语法规则,是非常麻烦的。所以,ESLint提供了预设的语法样式,比较常用的Airbnb的语法规则。由于这个规则集涉及ES6,所以还需要安装Babel插件。

$ npm i -g babel-eslint eslint-config-airbnb

安装完成后,在.eslintrc文件中注明,使用Airbnb语法规则。

{
  "extends": "eslint-config-airbnb"
}

你也可以用自己的规则,覆盖预设的语法规则。

{
  "extends": "eslint-config-airbnb",
  "rules": {
    "no-var": 0,
    "no-alert": 0
  }
}

语法规则

(1)indent

indent规则设定行首的缩进,默认是四个空格。下面的几种写法,可以改变这个设置。

// 缩进为4个空格(默认值)
"indent": 2

// 缩进为2个空格
"indent": [2, 2]

// 缩进为1个tab键
"indent": [2, "tab"]

// 缩进为2个空格,
// 同时,switch...case结构的case也必须缩进,默认是不打开的
 "indent": [2, 2, {"SwitchCase": 1}]

(2)no-unused-vars

不允许声明了变量,却不使用。

"no-unused-vars": [2, {"vars": "local", "args": "after-used"}]

上面代码中,vars字段表示只检查局部变量,允许全局变量声明了却不使用;args字段表示函数的参数,只要求使用最后一个参数,前面的参数可以不使用。

(3)no-alert

不得使用alert、confirm和prompt。

参考链接