简介
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啦,全部通过;