changelog是每个开源项目的标配，每个版本的发布都有对应的提交记录，并且做到了有迹可循。 另外，在多人协作开发的项目中，约束提交规范也是一个必须要做的事情，不然，一个功能的提交，如果描述不准确的话，很难做代码review。

你是否遇到过这样的情况：

• 一个小功能的开发，连续提交了十几二十条，并且commit提交记录分散，commit描述不清楚
• 经常出现一些提交记录杂乱或者用于测试的记录

那么是时候约束下协作开发人员的提交规范了，做到每个功能、每个bug的修复有迹可循。

Commit Message 的标准格式

举个🌰：

git add .
git commit -m 'fix: 解决bug'
// 或者
git commit -m 'feat: 添加xxx功能'

注意：冒号为英文字符，并与描述之间有一个空格；或者直接使用git cz命令代替git commit -m自动帮你格式化

值	描述
feat	新增一个功能
fix	修复一个Bug
docs	文档变更
style	代码格式（不影响功能，例如空格、分号等格式修正）
refactor	代码重构
perf	改善性能
test	测试
build	变更项目构建或外部依赖（例如scopes: webpack、gulp、npm等）
ci	更改持续集成软件的配置文件和package中的scripts命令，例如scopes: Travis, Circle等
chore	变更构建流程或辅助工具
revert	代码回退

安装commitizen

全局安装

npm install -g commitizen
commitizen init cz-conventional-changelog --save-dev --save-exact
echo '{ "path": "cz-conventional-changelog" }' > ~/.czrc

项目内安装

yarn add commitizen cz-conventional-changelog -D

在package.json中添加如下配置：

"scripts": {
  "commit": "cz"
}
"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
}

为了方便用cz命令，选择全局和项目内都安装

commit message校验

安装husky&commitlint

npm i -D husky commitlint
// 或者
yarn add husky commitlint -D

在项目根目录下新增一个.commitlintrc.js文件，内容如下：

module.exports = {
  extends: ['@commitlint/config-conventional']
};

添加.husky/commit-msg文件，执行下面命令可自动添加

npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""

这时就可以执行下面命令进行测试

git add .
git commit -m 'test'

有时会提示“@commitlint/config-conventional找不到”，此时需要执行如下命令进行安装

yarn add @commitlint/config-conventional //安装之后.commitlintrc.js文件的内容才生效

此时如果执行git commit -m 'test'进行测试时，就会正常纠错。

为了保证书写正确，可以执行cz代替git commit操作，这样就会提示如下信息：

自定义提示信息并显示为中文

安装cz-customizable,这个是适配器用于自定义cz命令的，可以自定义提示信息

npm i -D cz-customizable
//或者
yarn add cz-customizable -D

在package.json修改配置如下：

"config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }

在根目录添加.cz-config.js 文件，用于自定义提示信息，下面仅列出我的配置，仅供参考

module.exports = {
  types: [
    {
      value: 'feat',
      name: 'feat: 新功能'
    },
    {
      value: 'fix',
      name: 'fix: 修复bug'
    },
    {
      value: 'init',
      name: 'init: 初始化'
    },
    {
      value: 'docs',
      name: 'docs: 文档变更'
    },
    {
      value: 'style',
      name: 'style: 代码的样式美化'
    },
    {
      value: 'refactor',
      name: 'refactor: 重构'
    },
    {
      value: 'perf',
      name: 'perf: 性能优化'
    },
    {
      value: 'test',
      name: 'test: 测试'
    },
    {
      value: 'revert',
      name: 'revert: 回退'
    },
    {
      value: 'build',
      name: 'build: 打包'
    },
    {
      value: 'chore',
      name: 'chore: 构建/工程依赖/工具'
    },
    {
      value: 'ci',
      name: 'ci: CI related changes'
    }
  ],
  messages: {
    type: '请选择提交类型(必填)',
    customScope: '请输入文件修改范围(可选)',
    subject: '请简要描述提交(必填)',
    body: '请输入详细描述(可选)',
    breaking: '列出任何BREAKING CHANGES(破坏性修改)(可选)',
    footer: '请输入要关闭的issue(可选)',
    confirmCommit: '确定提交此说明吗？'
  },
  allowCustomScopes: true,
  allowBreakingChanges: ['feat', 'fix'], // 当提交类型为feat、fix时才有破坏性修改选项
  subjectLimit: 72
}

之后执行cz提示如下：

自动生成changelog

安装standard-version

npm i -D standard-version
//或者
yarn add standard-version -D

在package.json添加如下配置：

{
  "scripts": {
    "release": "standard-version"
  }
}

在项目的根目录下添加配置文件 .versionrc，内容如下

{
  "header":"# 更新历史 \n\n",
  "types": [
      {"type": "feat", "section": "✨ Features | 新功能"},
      {"type": "fix", "section": "🐛 Bug Fixes | Bug 修复"},
      {"type": "perf", "section":"⚡ Performance Improvements | 性能优化"},
      {"type": "revert", "section":"⏪ Reverts | 回退"},
      {"type": "chore", "section":"📦 Chores | 其他更新"},
      {"type": "docs", "section":"📝 Documentation | 文档"},
      {"type": "style", "section":"💄 Styles | 风格", "hidden": true},
      {"type": "refactor", "section":"♻ Code Refactoring | 代码重构"},
      {"type": "test", "section":"✅ Tests | 测试"},
      {"type": "build", "section":"👷‍ Build System | 构建"},
      {"type": "ci", "section":"🔧 Continuous Integration | CI 配置"}
  ],
  "skip": {
    "bump": true, 
    "changelog": false, //是否跳过生成changelog
    "commit": true, //是否自动提交commit
    "tag": true //是否自动打tag
  }
}

然后执行如下命令，就能自动生成changelog

npm run release
//或者
yarn release

问题答疑

git commit -m 'test'提交时husky不生效

1、.husky/commit-msg文件是生成的，不是自己填的，执行下面命令可以自动生成，然后就会生效

npx husky add .husky/commit-msg "npx --no-install commitlint --edit "$1""

2、如果第一步执行完之后仍不生效，试试修改package.json文件添加commit-msg对应的hooks，配置如下：

 "husky": {
    "hooks": {
      "commit-msg": "commitlint -E HUSKY_GIT_PARAMS",
      "pre-commit": "lint-staged"
    }
  },

3、生效之后，提示@commitlint/config-conventional找不到，安装commitlint之后，还需要安装@commitlint/config-conventional

yarn add @commitlint/config-conventional //安装之后.commitlintrc.js文件的内容才生效

未来规划：

• 在package.json配置命令实现自动提交 + 校验规范

"scripts": {
    "commit": "git add . && git-cz",
},

• husky能否判断当前分支，如果是master 分支则自动执行 yarn release并且push到远程，这样就免去人工自动执行命令发布了。

yarn release
git push