13-格式审查工具

选择背景色：黄橙洋红淡粉水蓝草绿白色选择字体：宋体黑体微软雅黑楷体选择字体大小：小中大特恢复默认

2.3.2　格式审查工具

在参加很时尚的朋友聚会或者重要的面试之前，大家会用除毛滚筒来去除衣服上多余的毛球吗？大部分人会这样做，因为都希望将自己最好的一面展现出来。同理，也可以整理代码，让它（也就让用户）更好看些。整理器会严格审查用户的代码，然后告诉用户其中有哪些常见的错误。即使像作者这样拥有25年开发经验的人，整理器还是能在代码里找到错误。对于初学者来说，使用这个工具带来的好处是无与伦比的，它可以避免开发人员纠结于常见的代码错误。

目前有不少常见的JavaScript整理器，不过作者更喜欢由Nicholas Zaka’s开发的ESLint。安装ESLint：

npm install -g eslint

在使用它之前，需要在项目中创建一个叫作.eslintrc的配置文件。不同的项目会使用风格迥异的技术栈和编程规范，而.eslintrc文件则可以在各种环境下都妥善处理代码。

创建.eslintrc文件最简单的方法是运行 eslint --init ，执行这个命令时需要回答一些问题，之后程序会自动创建一个默认文件。

在项目的根目录，运行 eslint --init 。需要回答的问题如下。

你一般使用空格键还是制表键缩进？近期在StackOverflow上的投票结果显示大部分程序员更倾向于用制表键，但是具有多年开发经验的程序员却更喜欢用空格键。这里选择自己喜欢的方式就好。
你喜欢用单引号还是双引号定义字符串？其实这里选哪个都没关系，因为通常两个都会用到。
你在使用哪个终端（Unix还是Windows）？如果在使用Linux或者OS X系统，那么选择Unix。如果在使用Windows系统，就选Windows。
你需要在代码中使用分号吗？当然要。
你在使用ECMAScript6（ES6）的特性吗？是的。
你会在哪里执行代码（在Node里还是浏览器）？通常情况下，在浏览器中运行的代码和在Node中运行的代码需要不同的配置，如果一定要选一个更高端的配置的话，那么就选Node。
你想用JSX吗？不（JSX是基于XML扩展的JavaScript，在Facebook开发的React UI库中使用。本书中不会涉及。）
你希望配置文件使用哪种格式（JSON还是YAML）？选JSON（YAML是一个很流行的数据序列化格式，就像JSON一样，不过JSON更适合JavaScript编程）。

所有问题回答完毕后，系统会生成一个.eslintrc文件，接下来就可以使用ESLint了。ESLint的运行方式有很多种。可以直接运行它（比如，运行 eslint es6/ test.js ），还可以把它集成到编辑器里，或者把它加到Gulpfile里。最好的方式莫过于跟编辑器集成，但是不同的编辑器和操作系统所需的操作是不一样的。如果你想这样做，可以谷歌一下将“eslint”添加到编辑器的具体操作。

不管是否会将ESlint集成到编辑器中，作者都建议把ESLint加到Gulpfile里。毕竟，在构建项目时会运行Gulp，而此时是一个检查代码的绝佳机会。首先运行：

npm install --save-dev gulp-eslint

然后修改gulpfile.js：

const gulp = require('gulp');
const babel = require('gulp-babel');
const eslint = require('gulp-eslint');
gulp.task('default', function() {
  // 运行 ESLint
  gulp.src(["es6/**/*.js", "public/es6/**/*.js"])
    .pipe(eslint())
    .pipe(eslint.format());
  // Node的资源
  gulp.src("es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("dist"));
  // 浏览器的资源
  gulp.src("public/es6/**/*.js")
    .pipe(babel())
    .pipe(gulp.dest("public/dist"));
});

现在来看看ESLint帮助找出了哪些错误。由于把ESLint加到了Gulpfile的默认任务里，所以可以直接运行Gulp：

$ gulp
[15:04:16] Using gulpfile ~/git/gulpfile.js
[15:04:16] Starting 'default'...
[15:04:16] Finished 'default' after 84 ms
[15:04:16]
/home/ethan/lj/es6/test.js
  4:59  error  Unexpected trailing comma     comma-dangle
  9:5   error  Unexpected console statement  no-console
✖ 2 problems (2 errors, 0 warnings)

很显然，Nicholas Zakas和作者一样都不喜欢行末的逗号。好在ESLint会让自己选择哪些是错误，哪些不是。默认行尾永远不能出现逗号，不过可以选择把这个功能整个关掉，或者改成“允许多个”（本人一般喜欢这样做）。编辑.eslintrc文件来修改一下设置（不过如果同意Nicholas的观点，可以继续使用默认的规则）。在.eslintrc中的每一条规则都用一个数组表示。数组的第一行是数字，0表示关闭规则，1表示警告，2表示错误：

<pre class="代码无行号"><code>{
   "<strong>rules</strong>": { 
      /* changed comma-dangle default...ironically,
          we can't use a dangling comma here because
          this is a JSON file. */
      "<strong>comma-dangle</strong>": [
          2,
          "always-multiline"
      ],
      "<strong>indent</strong>": [
         2,
         4 
      ],
      /* ... */ </code></pre>

再次运行gulp，逗号问题就不再是错误了。事实是，如果现在把逗号删掉，就会导致错误！

第二个错误与 console.log 的使用有关，如果该错误出现在产品代码上，通常会被当成“粗心大意”（如果使用传统浏览器甚至会埋下隐患）。然而出于学习的目的，可以禁用这个规则，因为本书中很多地方会使用到console.log。同时，可能会想关闭那个“括号”的规则。这个就留给读者去练习。

ESLint有很多配置选项；详情请查看ESlint官方网站。

现在可以编写ES6代码，并将其转换成ES5代码，然后对代码进行审查和优化，至此已经完成了ES6之旅的准备工作！

Previous 上一篇本节目录 Next 下一篇

13-格式审查工具

2.3.2 格式审查工具

2.3.2　格式审查工具