记一次 ESlint 的经历

背景

准备重构 tingle 这个项目，首先就是进行了 Button 这个组件的重构以便熟悉熟悉项目。

tingle采用gulp+webpack对代码进行实时编译开发和构建，在目前这个项目中，现有工具不具备代码质量的校验，这样非常不利于项目日后的社区化贡献代码和标准化，因此在这次重构中，决定将 js 的代码质量检查加进去，本来想使用 jshint 的，但由于 tingle 是走 es6 风格的 react 组件集，而我发现 jshint 对 es6 及 react 的支持不如 eslint 优雅，所以在最后决定使用 eslint。

设计原则

优雅简单

在决定使用eslint之后，第一件事就是思考如何将 eslint 用起来，一定要对用户优雅简单。首先就是改造工具，tingle 的构建和开发工具是基于 gulp 做的，在开发的时候我们只需要使用

gulp d

就可以启动一个带有实时编译 stylus 和 jsx 的 browser-sync server，非常方便，我想 ESLint 的验证应当与这条命令结合，直接写入 gulp 的任务中去。

那么 eslint 的代码质量检查应该放在哪一步好呢？我得出了以下两个答案：

代码修改后实时进行质量检查
代码压缩前进行质量检查

两者都应该做，因为无论是在修改 es6 代码之后，还是压缩打包 es6 代码之前这两步都需要对代码的质量进行验证。

人性化的错误通知

紧接着就是发现错误后的通知，这个非常重要，关乎用户体验。原来使用过 grunt + jshint，当发现错误时会让 terminal 不停得跳，然后在terminal打开之前图标的右上角还有红色的气泡，非常的人性化，这次我也想使用这个设计，在 eslint 发现错误的时候进行这种交互的提示，但查找了一些资料，无从下手，最后改成了使用 node-notifier 这个包来进行 Mac 原生的信息提示，也算是可以接受的，代码质量校验失败时如下图：

记录下过程

配置 .eslintrc.json 的配置文件并添加进项目根目录，可以考虑抽离出公共的 eslint-config-tingle ,让脚手架中的 eslintrc.json 继承它，日后专门维护这个 config 来进行迭代
编写 eslint 的 gulp task
将此 gulp task 添加到在每次打包之前执行
当 eslint 发现代码校验不通过时不进行接下来的 jsx 的编译，并且给用户提示代码质量检查错误，同时要阻碍 eslint 之后的 gulp 执行，而且不能中断 watch 的任务

遇到的问题：

1.进行 es6 和 react 代码质量检查需要使用 babel-eslint 和 eslint-plugin-react，然后如果你是全局或项目中使用 eslint 你分别要全局或着项目中安装这两个包

{
  "parser": "babel-eslint",
  // ...... 其他配置省略
  "plugins": [
    "react"
  ]
  // ...... 其他配置省略
}

2.gulp 任务执行失败后不执行后续任务，并且不能中断当前的 watch 任务，具体实现机制如下：

gulp.task('前置任务', function(callback){
  if (eslint任务执行成功) {
    callback();
  } else {
    callback('错误描述')
  }
})

gulp.task('后置任务', ['前置任务'], function(){
  // 继续执行后置任务
}).on('error', (e) => {console.log(e)})

总结一下package:

node-notifier
eslint
eslint-config-tingle (未来会把 .eslintrc.json 配置单独抽离出来，形成这个配置文件)
babel-eslint
eslint-plugin-react

待优化

不用每次保存都去检查每一个js文件，需要做一下缓存
优化 terminal 的提示方式
抽离公共 eslintrc 文件，让脚手架中的 .eslintrc.json 继承公共文件，类似 airbnb

参考资料

eslint nodejs-api : http://eslint.org/docs/developer-guide/n...
node-notifier: https://github.com/mikaelbr/node-notifie...