Lint 工具

目录

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。

参考链接

留言

comments powered by Disqus