ESLint简单操作

简介

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啦，全部通过；

参考链接

• ESLint 使用入门

• ESLint 配置参数介绍

• ESLint 官方文档