效仿Angular团队使用git提交代码规范

一、前言

1、一般我们使用git提交代码,一般常见的命令就是
- git add .
- git commit -m '这是什么代码'
- git push origin master
2、使用传统的方式进行git提交代码就是下面的结果
3、这种方式主要存在几个弊端
- 时间越久自己也不知道自己提交了什么
- 对提交的代码没进行分类管理
- 寻找某次的修改不方便
4、针对这些问题,现在业界用的最多的就是Angular团队使用的规范；通过git commit的时候弹出一个vim编辑器来编辑模板类型的一份提交信息，主要格式如下：
```
<type>(<scope>):<subject>
<BlLANK_LINE>
<?body>
<BLANK_LINE>
<?footer>
```
- 第一行为必填项：主要就是【提交类型(影响范围):简要描述】
- body为详细描述，个人没怎么用过
- 页脚为破坏性改变或者关闭了某个issues
5、使用规范后提交代码的格式

二、使用方式

1、安装包

npm i -D commitlint-config-cz  cz-customizable
npm i -D @commitlint/cli @commitlint/config-conventional
npm i -D commitizen commitlint-config-cz

2、在项目的根目录下创建.cz-config.js文件

module.exports = {
  types: [
    { value: 'init', name: 'init: 初始提交' },
    { value: 'feat', name: 'feat: 增加新功能' },
    { value: 'fix', name: 'fix: 修复bug' },
    { value: 'improvement', name: 'improvement: 对当前特性的改进' },
    { value: 'docs', name: 'docs:修改文档' },
    { value: 'style', name: 'style: 样式修改不影响逻辑' },
    { value: 'refactor', name: 'refactor: 代码重构(既不修复bug也不添加特性的代码更改)' },
    { value: 'perf', name: 'perf: 代码重构(改进性能的代码更改)' },
    { value: 'test', name: 'test: 添加缺失的测试或修改现有的测试' },
    { value: 'build', name: 'build: 影响构建系统或外部依赖项的更改(例如作用域:gulp、broccoli、npm)' },
    { value: 'ci', name: 'ci: 对CI配置文件和脚本的更改(示例范围:Travis、Circle、BrowserStack、SauceLabs)' },
    { value: 'chore', name: 'chore: 不修改src或测试文件的其他更改' },
    { value: 'revert', name: 'revert: 版本回退' },
    { value: 'ui', name: 'ui: 更新UI' },
    { value: 'release', name: 'release: 发布' },
    { value: 'deploy', name: 'deploy: 部署' },
    { value: 'chore', name: 'chore: 更改配置文件' },
    { value: 'add', name: 'add: 添加依赖' },
    { value: 'minus', name: 'minus: 版本回退' },
    { value: 'del', name: 'del: 删除代码/文件' }
  ],
  scopes: [],
  messages: {
    type: '选择更改类型:\n',
    scope: '更改的范围:\n',
    // 如果allowcustomscopes为true，则使用
    customScope: '此更改的范围(例如组件或文件名称)',
    subject: '简短描述:',
    body: '详细描述. 使用"|"换行:',
    breaking: '变化文件的列表:',
    footer: '关闭的issues列表. E.g.: #31, #34:',
    confirmCommit: '确认提交?'
  },
  allowCustomScopes: true,
  allowBreakingChanges: ["feat", "fix"]
};

3、在项目的根目录下创建commitlint.config.js

module.exports = {
  extends: [
    '@commitlint/config-conventional',
    'cz'
  ],
  rules: {
    // Header 
    'header-max-length': [2, 'always', 200],
    // <type>枚举
    'type-enum': [2, 'always', [
      'init',
      'feat',
      'fix',
      'improvement',
      'docs',
      'style',
      'refactor',
      'perf',
      'test',
      'build',
      'ci',
      'chore',
      'revert',
      'ui',
      'release',
      'deploy',
      'chore',
      'add',
      'minus',
      'del',
    ]],
    // <type> 不能为空
    'type-empty': [2, 'never'],
    // <type> 格式 小写 
    'type-case': [2, 'always', 'lower-case'],
    // <scope> 不能为空
    'scope-empty': [2, 'never'],
    // <scope> 格式 小写
    'scope-case': [2, 'always', 'lower-case'],
    // <subject> 不能为空
    'subject-empty': [2, 'never'],
    // <subject> 以.为结束标志
    'subject-full-stop': [2, 'never', '.'],
    // <subject> 格式
    // 可选值
    // 'lower-case' 小写 lowercase
    // 'upper-case' 大写 UPPERCASE
    // 'camel-case' 小驼峰 camelCase
    // 'kebab-case' 短横线 kebab-case
    // 'pascal-case' 大驼峰 PascalCase
    // 'sentence-case' 首字母大写 Sentence case
    // 'snake-case' 下划线 snake_case
    // 'start-case' 所有首字母大写 start-case
    'subject-case': [2, 'never', []],
    // <body> 以空行开头
    'body-leading-blank': [1, 'always'],
    // <footer> 以空行开头
    'footer-leading-blank': [1, 'always']
  }
}

4、package.json中添加

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

5、结合git hook来检验commit message这样当你提交代码不符合规范的时候阻止你提交
```
npm install husky -D
```

6、在package.json中配置git hook的钩子函数

{
  ...
  "husky": {
    "hooks": {
      "commit-msg": "commitlint -e $GIT_PARAMS"
    }
  },
}

7、直接在package.json中配置命令方式进行commit

{
  "scripts": {
    "commit": "./node_modules/cz-customizable/standalone.js"
  },
}

8、提交代码的方式

git add .
npm run commit
git push origin master