神刀安全网

记一次 ESlint 的经历

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

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

记录下过程

  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

参考资料

转载本站任何文章请注明:转载至神刀安全网,谢谢神刀安全网 » 记一次 ESlint 的经历

分享到:更多 ()

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
分享按钮