如何优雅的管理你的`commit`？

我们有的时候去接盘别人的代码或者是团队协作的时候，有时候会根据同伴或者前者的commit来分析当次代码所产生的side effect。我们期望的是分明的、一眼可以抓住重点的commit信息，但是我们却经常会看到test、fix bugs....等等这样的信息。emmmmmm~~ 有的时候会无从下手，需要仔细看看这些代码究竟进行了一些什么样的改动。然而这种时候往往会由于后者不知道前者代码的结构而导致之前解决的bug或者实现的feature被后者覆盖或者是再现。
当然，上面的这些情况是我们不希望出现的。为了避免这些情况，我们需要分明的、清晰的、有结构的、语义化的、约定式的commit方式。
现在比较流行的是:

commitizen: Angluar团队的提交代码方式，后来被大家广泛的应用。
git template: 自定义git模版，这样的需要团队来制定一套大家都认可的提交模版，然后大家按照这套模版来进行提交。

`commitizen`

介绍

We have very precise rules over how our git commit messages can be formatted. This leads to more readable messages that are easy to follow when looking through the project history. But also, we use the git commit messages to generate the AngularJS change log.

上面的用渣渣翻译器翻译为：

对于如何格式化git提交消息，我们有非常精确的规则。这将导致在查看项目历史时更易于遵循的可读消息。此外，我们使用git提交消息来生成AngularJS更改日志。

安装

# 全局安装commitizen
npm install -g commitizen
# 全局安装模版
npm install -g cz-conventional-changelog 
# for macos
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc
# for anySysterm 手动创建.czrc，添加以下内容
{ "path": "cz-conventional-changelog" }
# 转到你的project下
cd your project
# 项目内安装
commitizen init cz-conventional-changelog --save --save-exact
# 运行以上命令之后会在package.json中生成下面内容
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

这里，就简单的配置了commitizen在我们的环境中了。我们只需要在每次执行git commit的时候替换为git cz即可，就会看到一下内容:

提交类型

feat: 新功能
fix: 修复bug
doc: 文档改变
style: 代码格式变更
refactor: 某个已有功能重构
perf: 性能优化
test: 增加测试
build: 改变build工具，比如webpack变成grunt
revert: 撤销上一次commit
ci: 更改ci configuration
chore: 一些不更改src或者test相关文件的提交

`scope`

说明此次修改的影响范围，可以根据自己的情况来进行填写，官方给出了几个:

all: 表示影响很大，如修改了整体依赖
location: 表示影响小，修改了某个小的功能
module: 表示会影响整个模块，如登录模块等

`subject`

用来简要描述本次变动，概述即可

`body`

具体的描述此次提交的修改内容，应尽量详细

`footer`

放置备注等。若为bug，可关联bug id。

最终样子:

这就是一次简单的提交。当然commitizen还不止如此，它还可以根据我们每次的commitizen来根据对应的版本来生成对应版本的changelog。

changelog

# command
conventional-changelog -p angular -i CHANGELOG.md -s -r 0

-i: 表示从CHANGELOG.MD中读取changelog
-s: 读写changelog为同一个文件
-r: 表示生成changelog的release版本数量，默认为1，全部则是0 由于我的示例的commit个数不够多，这里选取angular的一部分changelog来展示。

当然，如果你还想要尝试其他风格的commit的style，可以下载conventional-changelog-cli来更换不一样的风格，它包含了: atom, codemirror, ember, eslint, express, jquery等。只需要将上述的命令中的angular替换为你想要风格的名字即可。
我们可以方便的在我们的npm项目中的package.json中的script中增加这样一条命令方便生成changelog:

{
  "script": {
    "changelog": "conventional-changelog -p angular -i CHANGELOG.md -s -r 0 && git add CHANGELOG.MD"
  }
}

以上就是对commitizen的一个简单的介绍，上面的命令你也可以配置在githooks里用来对git个性化的定制。下面推荐几个另外的插件:

standard-version: Automate versioning and CHANGELOG generation, with semver.org and conventionalcommits.org
vscode-changelog-generator: vscode extension to generate changelog
commitlint: Lint commit messages（这个简单的说两句，自定义的话，但是又不想写模版，还想用commit的话，可以用这个来限制为commitizen格式的。下面放一个官方的图）

你也可以关注我的公众号

如何优雅的管理你的commit？

如何优雅的管理你的commit？

commitizen

介绍

安装

提交类型

scope

subject

body

footer