在日常工作中，为了避免低级错误和规范代码格式，一般都会制定编码规范或者使用其他团队的编码规范。
一开始，我只是通过记住规范并尽量在编码过程中写出符合规范的代码。
后来，发现有 Lint 工具可以配合工作流工具（Gulp、Webpack 等）或者编辑器，在写代码的过程中，检查代码是否符合编码规范。

最初使用的 Lint 工具是 JSLint，因为简单，方便。
然而最近在用 ES6 的新语法写 JavaScript，并选择 Airbnb 的 JavaScript 编码规范，发现 JSLint 并不够灵活，而且 Airbnb 的团队也是使用 ESlint。所以也就换成 ESLint 来检查代码了。

ESLint 简介

ESLint 是由 《JavaScript 高级程序设计》的作者 Nicholas C. Zakas 编写于 2013 年的一个开源工具。
它的初衷是为了提供一个灵活的、可扩展的代码 JavaScript 代码检验工具。

安装 ESLint

1
npm install -g eslint

配置 ESLint

生成配置文件 .eslintrc

1
eslint --init

执行这条命令会在当前目录下生成一个 .eslintrc 文件，这是 ESLint 的配置文件

添加规则

因为我使用的是 Airbnb 的规则，所以这里先安装 Airbnb 的配置文件

1
2
3
4
npm install -g eslint-config-airbnb

// 这个是 Airbnb 的 ESLint 规则里面用到的插件
npm install -g eslint-plugin-import

安装完成之后，在 .eslintrc 文件中添加以下内容

1
2
3
{
  "extends": "airbnb/base"
}

这里用 airbnb/base 是因为我并不写 JSX，所有就没有用 airbnb。
这个配置文件可以根据具体的使用环境做对应的更改。
比如在 Node.js 环境中，会经常用到 console，那么可以在配置文件中添加规则，如下：

1
2
3
4
5
6
{
  "extends": "airbnb/base",
  "rules": {
      "no-console": 0
  }
}

也可以直接在 js 文件内添加规则，如下：

1
2
/* eslint-disable no-console */
console.log('doing something...');

js 文件内的规则优先级最高，如果在 js 文件中添加了规则，ESLint 则会无视配置文件中对应的规则。

编辑器集成

在 Sublime Text 中使用

先在 Package Control 安装 SublimeLinter，然后安装 SublimeLinter-contrib-eslint。
安装完之后，在 SublimeLinter 中配置

1
2
3
4
5
6
7
8
9
10
11
12
{
    "user": {
        "lint_mode": "save only", //每次保存文件时检查代码
        "paths": {
            "linux": [],
            "osx": [],
            "windows": [
                "C:\\Program Files\\nodejs\\node.exe"
            ]
        }
    }
}

上面的 node.js 路径配置，不同系统不一样，请根据你所使用的系统填入对应的 node.js 路径。
配置完成之后，可以先在 命令行 运行下面命令来检测你的 js 文件

1
eslint xxx.js

如果在 命令行 能正常检测，那在 Sublime Text 里面保存时也就可以正常检测了。
如果不能正常检测，请根据报错信息做对应处理。
一般情况都是没有安装对应的 ESLint 插件造成的，如上面的 eslint-plugin-import，如果没有安装且使用的是 airbnb 的 eslint 配置，就无法正常使用 ESLint。

构建系统集成

这里以 gulp 为例子

1
2
3
4
5
6
7
8
var gulp = require('gulp');  
var eslint = require('gulp-eslint');

gulp.task('lint', function() {  
  return gulp.src(['**/*.js','!node_modules/**'])
         .pipe(eslint())
         .pipe(eslint.format());
});

参考链接

[1] Jonathan Creamer, Setup ESLint with ES6 in Sublime Text