记一次 ESlint 的经历
发布在一个前端小鸟的吟唱2016年4月2日view:2433ECMAScript 6自动化前端工具
在文章任何区域双击击即可给文章添加【评注】!浮到评注点上可以查看详情。

背景

准备重构 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 原生的信息提示,也算是可以接受的,代码质量校验失败时如下图:

记录下过程

  1. 配置 .eslintrc.json 的配置文件并添加进项目根目录,可以考虑抽离出公共的 eslint-config-tingle ,让脚手架中的 eslintrc.json 继承它,日后专门维护这个 config 来进行迭代
  2. 编写 eslint 的 gulp task
  3. 将此 gulp task 添加到在每次打包之前执行
  4. 当 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

待优化

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

参考资料

原文地址:http://lpgray.me/article/61

评论
发表评论
暂无评论
WRITTEN BY
叔叔张
前端老司机 / 理财爱好者
TA的新浪微博
PUBLISHED IN
一个前端小鸟的吟唱

本专栏主要关注下一代Web技术,诸如WebComponents、ES6、HTML5 WebApp、HTML5 Game Development、Node.js等技术。

我的收藏