如何用 pre-commit 来检测代码

我们都知道接手一个项目是有多么的痛苦,没有文档,代码分格等等问题都不说了。今天说的 pre-commit 就是来帮助大家来检测代码的。

为什么要检测代码

code review是一个很费事,费时的事情,尤其在项目紧张期根本没有时间去做,而且说别人代码咋样咋样,但是被别人说自己的代码的时候,都不是太好!除非让老大来做code review。但是老大一般都没时间的!所以写个脚本来检测代码,符合规范,开(zhuang)心(bi)敲代码。

pre-commit

顾名思义’pre-commit‘,就是在代码提交之前做些东西,比如代码打包,代码检测,称之为钩子(hook)。可以理解为回调好了,在commit之前执行一个函数(callback)。这个函数成功执行完之后,再继续commit,但是失败之后就阻止commit了。

在.git->hooks->下面有个pre-commit.sample*,这个里面就是默认的函数(脚本)样本。

这里面应该是一段shell脚本,博主不懂shell脚本。这可怎么办呢?

npm script

之前看到一篇《Run npm scripts in a git pre-commit Hook》, 可以利用npm script来做脚本。

安装pre-commit

修改package.json

问题

按照之前的那篇文章,接下来更改某个文件,应该是可以执行check脚本了,但是博主window并没有pre-commit。

github上找到了原因, 因为在window下pre-commit npm,由于权限问题,导致无法在hooks文件下生成文件。

需要以管理员打开cmd,执行node ./node_modules/pre-commit/install.js就可以了。o(╯□╰)o

检测脚本check

隐患检测

博主一开始的思路就是使用eslint检测潜在的错误,由于eslint比较严格,一下子会有很多的error,可以在项目里面新建.eslintrc文件, 用来覆盖默认的严格的eslint rules。

但是博主又有个问题了!就是检测代码的时候,由于引用是第3方的库,比如框架、组件、ui库等等。这些应该不需要检测的,不要影响项目本身的代码。这里就需要在项目里新建个.eslintignore文件,用来忽略检测的文件夹。

这个时候执行eslint ./ --cache,会有很多warnings,巴拉巴拉一大推,o(╯□╰)o。参考ESLint配置,执行eslint ./ --cache --quiet,就可以只报出error的信息了。到项目后期,可以慢慢将eslint越来越严格,甚至warn也不允许。

规范检测

除了一些隐患要检测,还可能要检测一些代码规范,tab键和空格键乱用等等,这个适合各个团队不同的情况。

但是现在一下子接手个项目,一下子全部去改造有点不现实。试想能不能只对修改的文件进行检查?其实是可以的。

通过git diff HEAD --name-only --diff-filter=ACMR命令能够拿到修改过的代码的文件列表,同时我们新增了一个第三方的库,也可以再添加参数,过滤不需要的文件夹。

核心代码

实例检测函数

博主有些点点洁癖,由于每个人的代码编辑器不一样!最简单的分格就是tab键和空格键混用。所以就写个很简单的检测tab键和空格的函数。

将extraTab加入taskList任务队列里面就可以了!

总结

如果项目实在没时间去改的话,可以git commit -m 'XXX' --no-verify强制提交。也欢迎大家在https://github.com/xiaoqiang730730/pre-commit-check 提交一些规范类的代码测试!↖(^ω^)↗

原文地址 http://xiaoqiang730730.github.io/2016/11/04/pre-commit

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

1 2 收藏 1 评论

关于作者:前端-小强

前端-小强,前端工程师(微博 http://weibo.com/smallwall520),现就职于杭州光云科技。http://xiaoqiang730730.github.io博客内容包括:解决日常问题的小技巧、对一些问题的思考、以及对某些事或者某些活动的思考。 个人主页 · 我的文章 · 9 ·      

可能感兴趣的话题



直接登录
最新评论
  • 赞,已经为我们的项目添加pre-commit了,之前也找过类似的东西,但是不如博主介绍的简单好用。

跳到底部
返回顶部