前言
往往我们在公司中开发的前端项目都是多人协作进行开发的。与开源项目不同，公司的项目往往对时间的把控比较紧，往往我们在开发工程中会不在意很多东西，包括代码上（本章暂且不提）和git提交的信息也很随意。这可能会导致我们在回滚或者查看提交记录有很多麻烦。页面顶部的图片相信大家一定知道这是vue的，那么我们如何实现像vue这样的有条理的git message呢？
第一步：安装commitizen
可以局部安装npm install commitizen -D或者全局安装npm install -g commitizen，这里我推荐全局安装（可以用git cz代替git commit）。简单来说commitizen为我们提供一些cli命令比如：commitizen init、 git cz
第二步：安装cz-conventional-changelog
cz-conventional-changelog是一个commitizen的adapter，它实现的是conventional-changelog-angular一套业界公认和常用的convention。安装方法有两个：
- 手动安装
cz-conventional-changelog -D到项目下后,添加如下配置到package.json
"config": {
"commitizen": {
"path": "node_modules/cz-conventional-changelog"
}
}
- 自动安装通过
commitizen init cz-conventional-changelog --save-dev --save-exact
cz-conventional-changelogcommit message 格式如下：
这个 commit message 由header, body 和 footer组成。header包括type，scope，subject
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
注意：header是必须要填写的，但是header中的scope不是必须的
具体规则请查看：conventional-changelog-angular
第三步：安装commitlint
其实安装完前两个依赖基本可以了，但是我们自己往往是惰性的，就跟我们用
Eslint一样，规则摆在那了，用不用是自己的事，如果我们不在代码提交前来校验我们的代码是否符合Eslint标准，估计项目中的代码风格也不一定统一。
commitlint的实现方式和commitizen差不多也需要个adapter:@commitlint/config-conventional
所以我们要同时安装@commitlint/cli和@commitlint/config-conventional。
这里我推荐局部安装：
npm install --save-dev @commitlint/config-conventional @commitlint/cli
然后在package.json中添加如下配置：
"commitlint": {
"extends": [
"@commitlint/config-conventional"
]
}
第四步：安装husky
执行完第三步后，我们需要配置我们校验commit message的时机，这时我们用到了husky。
- 第一步我们执行
npm install husky --save-dev - 第二步添加以下配置到
package.json
{
"husky": {
"hooks": {
"commit-msg": "commitlint -E HUSKY_GIT_PARAMS"
}
}
}
这样我们在执行
git commit xxx或者执行git cz后，就可以校验我们的message是否符合规范了
结尾
- 你可以不使用
git cz提供的快捷方式来创建message，依然可以用git commit xxx的方式提交，或者在你的图形化git工具（sourcetree等）的message区域来写，只要你符合
<type>(<scope>): <subject>
<BLANK LINE>
<body>
<BLANK LINE>
<footer>
的格式风格即可，然后利用commitlint来最后的校验
- 你也可以自定义符合你自己风格的
adapter，参考adapter
