git代码审查以及log规范化的解决方案
前言
公司前端团队百废待兴,很多流程都没有完善起来,这不最近就接到了一个小任务:规范化大家代码提交的格式以及在提交前保证代码的质量。这里的质量并没有做到单元测试覆盖率100%,集成测试全部通过,而是简单地通过语法检查,单元测试的覆盖问题在后续的项目完善中会加进来,所以今天只是讲两点:
- log提交格式规范化
- Eslint检查100%通过
寻找解决方案
之前在上一家公司做过SVN的代码提交规范化,使用python在SVN服务器上做语法检查,并且在客户端提交log的时候可以自动化的填写格式到log框里然后只需要按照给定的格式来写就行了。
但是git的思想与SVN不一样,git的每次提交都是在本地完成的,只有最后的push才会和服务器交互,所以不可能在服务器这边写脚本来检查。
大家都知道git有hooks的概念,在每个仓库中都有.git/hooks/这个目录,hooks可以在git中指定的一些重要节点上调用对应的钩子函数(文件),一想到这个就觉得应该可以使用这个。
但是后来失望了,因为本地仓库的hooks的代码不能上传到服务器上,大家都共享不了这些配置,并且这些配置在git初始化的时候都是默认的,总不能每次下载代码之后还需要手工去修改这些hooks文件吧。
所以直接使用这个本地的hooks貌似不可行,于是谷歌搜一搜,终于找到一个神器:ghooks。
ghooks简单介绍
该软件包是为nodejs打造的,可以帮助我们实现本地的git hooks,支持的git hooks的所有节点,关键它有很简单的配置。其配置在package.json文件中,所以npm有的命令都可以使用
如何规范化log的提交格式
有了ghooks这个神器,那么我们知道只需要在commit-msg的阶段就可以检查提交日志的格式,不符合格式即刻驳回。那么有没有插件可以帮助我们检查代码格式呢?
万能的NPM圈中必然存在这么的,Angular代码提交指定了一套严格的流程,从而衍生出了一些插件来帮助开发者log的规范化,所以这时隆重介绍validate-commit-msg,这款插件正是针对Angular代码提交的规范做的一款检查的插件。
于是我们有了这两款神器,应该可以满足我们的要求了。开始配置:
package.json的配置
我们给出的配置是:(给出的是需要配置的一些需要改的字段)
"scripts": {
"lint": "eslint ./ --cache --fix --ignore-pattern .gitignore",
"precommit-msg": "echo Pre-commit checking...please wait && exit 0"
},
"config": {
"validate-commit-msg": {
"types": [
"feat",
"fix",
"docs",
"style",
"refactor",
"perf",
"test",
"chore",
"revert"
],
"warnOnFail": false,
"maxSubjectLength": 100,
"subjectPattern": ".+",
"subjectPatternErrorMsg": "subject does not match subject pattern!",
"helpMessage": ""
},
"ghooks": {
"pre-commit": "npm run precommit-msg && npm run lint",
"commit-msg": "validate-commit-msg"
}
更加详细的可以参考:demo-for-ghooks
哈哈,貌似大功告成了~~~~
进一步优化
查看Angular给的代码提交规范,可以发现貌似很长的一大段标准,有的时候我们总是记不住格式以及那些字段的含义,那么怎么办呢?
还好git hooks提供了一个重要的节点:prepare-commit-msg,这个节点可以提供给我们在打开git log编辑器之前生成一个默认的git log模板。于是NPM中又有另外一个神器来生成这些信息:prepare-commit-msg-angular。
该神器可以生成一个很标准的log模板,如下:
#⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴⎴
# Please enter the commit message for your changes. Lines starting
# with '#' will be ignored, and an empty message aborts the commit.
# On branch develop
# Your branch is up-to-date with 'origin/develop'.
#
# Changes to be committed:
# modified: package.json
#
# ------------------------ >8 ------------------------
# <type>(<scope>): <subject>
# <BLANK LINE>
# <body>
# <BLANK LINE>
# <footer>
#---
# TYPE must be one of the following:
# - feat: A new feature (will appear in CHANGELOG)
# - fix: A bug fix (will appear in CHANGELOG)
# - docs: Documentation only changes
# - style: Changes that do not affect the meaning of the code (white-space, formatting, missing semi-colons, etc)
# - refactor: A code change that neither fixes a bug nor adds a feature
# - perf: A code change that improves performance (will appear in CHANGELOG)
# - test: Adding missing tests
# - chore: Changes to the build process or auxiliary tools and libraries such as documentation generation
#
# SCOPE could be anything specifying place of the commit change.
# For example $location, $browser, $compile, $rootScope, ngHref, ngClick, ngView, etc...
#
# SUBJECT contains succinct description of the change:
# - use the imperative, present tense: "change" not "changed" nor "changes"
# - do not capitalize first letter
# - no dot (.) at the end
#---
# https://github.com/ajoslin/conventional-changelog/blob/master/conventions/angular.md
于是你在写日志的时候哪些字段忘记了可以参考下面的提示,如果这个你觉得太麻烦,还有一款可交互的日志填写神器:commitizen。
该神器可以交互地提示你填写git log,唯一一个我在应用中觉得缺点的是:每次都是先书写完git log信息后才执行ghooks那些检查,此时如果我的Eslint或者单元测试失败的话那么你刚才写的检查就全白写了。。。。
所以最后就没有集成该插件进去。
完整的配置可以参考:https://github.com/linxiaowu66/demo-for-ghooks
其中prepare-commit-msg-angular和validate-commit-msg有一个地方不匹配,所以后来自己更新了一下源码,参考:https://github.com/linxiaowu66/prepare-commit-msg-angular
缺点
该方案不支持使用Git UI工具,只能使用命令行来提交代码。所以想使用Git UI工具的请忽略~~~~
参考
公众号关注一波~
![微信公众号](https://blogimage.5udou.cn/homePage/%E5%85%AC%E4%BC%97%E5%8F%B7-%E7%99%BD%E8%89%B2%E7%89%88.png?x-oss-process=style/addWaterMarkBottom)
网站源码:linxiaowu66 · 豆米的博客
Follow:linxiaowu66 · Github
关于评论和留言
如果对本文 git代码审查以及log规范化的解决方案 的内容有疑问,请在下面的评论系统中留言,谢谢。