简介
ESLint 是由 Nicholas C. Zakas 编写的一个可扩展、每条规则独立、不内置编码风格为理念的 Lint 工具。
在团队协作中，为避免低级 Bug、产出风格统一的代码，会预先制定编码规范。使用 Lint 工具和代码风格检测工具，则可以辅助编码规范执行，有效控制代码质量。
准备
ESLint 详细使用可参见官方文档
这里主要使用的Airbnb JavaScript Style Guide；
JS版本为ECMAScript6(阮一峰老师的ECMAScript 6入门)
Node.js和NPM必须的哟
安装
首先，安装ESLint。
$ npm i -g eslint然后，安装Airbnb语法规则。
$ npm i -g eslint-config-airbnb最后，在项目的根目录下新建一个.eslintrc文件，配置ESLint。
{
"extends": "airbnb/base",
}在安装的时候得注意一点，eslint与eslint-config-airbnb要么都执行全局安装，要么都本地安装，必须相同哟。
使用
配置完相关信息后，就可以切到项目目录内然后执行检测啦：
我们新建一个test.js进行检测
import './libraries/helper';
let path_name = location.pathname;
if (/^\/(home)?\/?$/.test(path_name)) {
let flexSlider = _id('flexSlider');
if (flexSlider) {
let flexControlNav = _id('flexControlNav').children;
new Swipe(flexSlider, {
autoRestart: true,
callback: (index) => {
Array.prototype.slice.call(flexControlNav).map((item) => {
item.className = '';
});
flexControlNav[index].className = 'active';
}
});
}
}执行检测
$ eslint test.js
test.js
4:5 error Identifier 'path_name' is not in camel case camelcase
4:5 error 'path_name' is never reassigned, use 'const' instead prefer-const
7:7 error 'flexSlider' is never reassigned, use 'const' instead prefer-const
7:20 error '_id' is not defined no-undef
9:9 error 'flexControlNav' is never reassigned, use 'const' instead prefer-const
9:26 error '_id' is not defined no-undef
10:5 error Do not use 'new' for side effects no-new
10:9 error 'Swipe' is not defined no-undef
13:63 error Expected to return a value in this function array-callback-return
14:11 error Assignment to property of function parameter 'item' no-param-reassign
17:8 error Missing trailing comma comma-dangle
✖ 11 problems (11 errors, 0 warnings)检测结果信息可以知道，出错的行号，错误类型，错误描述以及违反的规则
针对上面的错误信息，我们修改一下test.js文件：
import './libraries/helper';
const pathName = location.pathname;
if (/^\/(home)?\/?$/.test(patName)) {
const flexSlider = _id('flexSlider');
if (flexSlider) {
const flexControlNav = _id('flexControlNav').children;
/* eslint-disable no-new */
new Swipe(flexSlider, {
autoRestart: true,
callback: (index) => {
/* eslint-disable */
Array.prototype.slice.call(flexControlNav).map((item) => {
item.className = '';
});
flexControlNav[index].className = 'active';
/* eslint-enable */
},
});
/* eslint-enable no-new */
}
}
修改说明:
/* eslint-disable no-new */
...
/* eslint-enable no-new */
使用 eslint-disable + 规则名 的作用是不检测这条规则，注意要使用 eslint-enable 结束哟
/* eslint-disable */
...
/* eslint-enable */
直接 eslint-disable 的作用是完全禁用ESLint进行检测好了，再次运行ESLint进行检测：
$ eslint test.js
test.js
6:22 error '_id' is not defined no-undef
8:28 error '_id' is not defined no-undef
10:9 error 'Swipe' is not defined no-undef
✖ 3 problems (3 errors, 0 warnings)结果显示还有3处错误，_id和Swipe是我们定义的两个全局变量，在另一个模块中，所以我们还需要修改.eslintrc将这两个变量加入到globals中：
.eslintrc
{
"extends": "airbnb/base",
"globals": {
"_id": true,
"Swipe": true,
},
}再次执行检测，OK啦，全部通过；
