1.Git 规范

规范说明

git commit

type(范围?):[空格]更改主题  
// 范围是可选的，若此次更改涉及多个范围，可用分隔符"/", "" , ","说明

// 1. 常规提交格式
git commit -m ``'feat: add list'

// 2. 说明更改范围的格式
git commit -m ``'feat(列表页): add list'

使用 commitlint 工具，常用有以下几种类型：

Commit规范
- feat ：新功能
- fix ：修复 bug
- chore ：对构建或者辅助工具的更改
- refactor ：既不是修复 bug 也不是添加新功能的代码更改
- style ：不影响代码含义的更改 (例如空格、格式化、少了分号)
- docs ： 只是文档的更改
- perf ：提高性能的代码更改
- revert ：撤回提交
- test ：添加或修正测试

2. 接入流程

2.1 添加 Commitlint 工具

2.1.1 安装依赖及配置

# For npm
npm install @commitlint/{config-conventional,cli} husky commitizen --save-dev

# For yarn
yarn add @commitlint/{config-conventional,cli} husky commitizen

2.1.2 配置

# 引入commitlint配置文件config
echo "{extends: ['@commitlint/config-conventional']}" > .commitlintrc
 
 
# 激活插件hooks
# For npm
npx husky install
# For yarn
yarn husky install
# 添加hook
# For npm
npx husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'
# For yarn
yarn husky add .husky/commit-msg 'npx --no -- commitlint --edit "$1"'

2.1.3 修改package.json

在package.json的script里添加

// package.json
// 运行dev环境时，会自动激活husky插件
"scripts": {
   "dev": "npx husky install && [原来的dev环境运行代码]"
 },

2.2 引入工具后（其它同学操作）

（1）拉master （2）运行脚本激活husky钩子(在本地运行过一次dev环境后，就可正常使用啦)

yarn run dev

2.3 自定义提交类型（按需操作）

在commitlint.config.js文件中可配置允许提交的类型，如在commintlint提供的类型基础上增加表示功能优化的opt类型：

// commitlint.config.js
// 按照每个项目的需求可自定义配置
module.exports = {
  extends: ['@commitlint/config-conventional'],
  rules: {
    'type-enum': [
      2,
      'always',
      [
        'build', // 影响构建系统或外部依赖项的更改（gulp，npm等）
        'chore', // 对构建或者辅助工具的更改
        'docs', // 文档的更改
        'feat', // 增加新功能
        'fix', // 修复bug
        'perf', // 提高性能的代码更改
        'ref', // 既不是修复 bug 也不是添加新功能的代码更改
        'revert', // 撤回提交
        'style', // 不影响代码含义的更改 (例如空格、格式化、少了分号)
        'test', // 添加或修正测试
        'opt', // 功能优化
      ],
    ],
  },
};

3. 后续提交流程

提交流程发生变化的只有commit阶段

之前提交时

git add .
 
 
git commit -m "提交信息"
 
 
git push

按照规范接入之后，git add和git push都没有变化，唯一发生变化的是commit

git add .
 
git commit -m "type: 提交信息"
 
git push

到这里提交信息就已经生成好了，直接git push将代码推到远程就好了。

示例

不规范的提交会报错

4. 做个对比

	Ant Design	Vue	现状
对应代码	github.com/ant-design/…	github.com/vuejs/vue
截图对比

【规范】前端Commit提交规范