UDN-企业互联网技术人气社区

板块导航

浏览  : 760
回复  : 0

[干货] 记一次 ESlint 的经历

[复制链接]
钻石女王的头像 楼主
发表于 2016-4-4 15:51:35 | 显示全部楼层 |阅读模式
QQ图片20160404155153.png

  背景

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

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

  设计原则

  优雅简单

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

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

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

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

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

  人性化的错误通知

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

  <img src="http://ww1.sinaimg.cn/large/8df27f17gw1f... style="display:block;float:none"/>

  记录下过程

  • 配置 .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 你分别要全局或着项目中安装这两个包
  1. {
  2.   "parser": "babel-eslint",
  3.   // ...... 其他配置省略
  4.   "plugins": [
  5.     "react"
  6.   ]
  7.   // ...... 其他配置省略
  8. }
复制代码

  2.gulp 任务执行失败后不执行后续任务,并且不能中断当前的 watch 任务,具体实现机制如下:
  1. gulp.task('前置任务', function(callback){
  2.   if (eslint任务执行成功) {
  3.     callback();
  4.   } else {
  5.     callback('错误描述')
  6.   }
  7. })

  8. gulp.task('后置任务', ['前置任务'], function(){
  9.   // 继续执行后置任务
  10. }).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...
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

关于我们
联系我们
  • 电话:010-86393388
  • 邮件:udn@yonyou.com
  • 地址:北京市海淀区北清路68号
移动客户端下载
关注我们
  • 微信公众号:yonyouudn
  • 扫描右侧二维码关注我们
  • 专注企业互联网的技术社区
版权所有:用友网络科技股份有限公司82041 京ICP备05007539号-11 京公网网备安1101080209224 Powered by Discuz!
快速回复 返回列表 返回顶部