# git 规范 & 辅助插件

# 使用的插件及说明

# husky 和 commitlint

安装 husky

npm install -D husky

修改 package.json 中的 script

{
  "scripts": {
    "prepare": "husky install"
  }
}

1
2
3
4
5

修改后，执行 npm run prepare，会在根目录生成文件夹 .husky;

执行 npx husky add .husky/commit-msg '';

此命令会在 .husky 文件夹创建文件 commit-msg，修改最后一行：

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

#--no-install 参数表示强制npx使用项目中node_modules目录中的commitlint包
npx --no-install commitlint --edit $1

1
2
3
4
5

安装 commitlint

npm install -D @commitlint/cli @commitlint/config-conventional

在根目录创建文件 commitlint.config.js 并添加配置，参考 commitlint 配置 (opens new window);

// commitlint.config.js
module.exports = {
  extents: ['@commitlint/config-conventional'],
  rules: {
    // Header
    'header-max-length': [2, 'always', 72],
    // <type>枚举
    'type-enum': [
      2,
      'always',
      [
        'feat',
        'bug',
        'fix',
        'ui',
        'docs',
        'style',
        'perf',
        'refactor',
        'release',
        'deploy',
        'test',
        'chore',
        'revert',
        'build',
      ],
    ],
    // <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'],
  },
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56

正常提交代码即可使用

git add .
git commit -m 'commit test'

# 终端会提示如下错误信息 -----------------
⧗   input: commit test
✖   type may not be empty [type-empty]
✖   subject may not be empty [subject-empty]

1
2
3
4
5
6
7

# customizable 交互式操作

安装 customizable

npm install -D commitizen cz-conventional-changelog commitlint-config-cz cz-customizable

修改 package.json 中的 scripts

{
  "scripts":{
    commit:"git-cz"
  }
}

1
2
3
4
5

修改 package.json 中的 config

// 使用自定义规范则使用
{
  "config": {
    "commitizen": {
      "path": "node_modules/cz-customizable"
    }
  }
  // 或者
  "config": {
    "cz-customizable": { // 可以对.cz-config.js 进行重命名
      "config": "config/config.js"
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14

在根目录创建文件 .cz-config.js 添加配置项，参考 customizable 配置 (opens new window)；

// .cz-config.js
module.exports = {
  types: [
    { value: 'feat',  name: 'feature: 增加新功能' },
    { value: 'bug', name: 'bug: 测试反馈bug列表中的bug号' },
    { value: 'fix', name: 'fix: 修复bug' },
    { value: 'ui', name: 'ui: 更新UI'},
    { value: 'docs', name: 'docs: 文档变更'},
    { value: 'style', name: 'style: 代码格式(不影响代码运行的变动)'},
    { value: 'perf', name: 'perf: 性能优化'},
    { value: 'refactor', name: 'refactor: 重构(既不是增加feature，也不是修复bug)'},
    { value: 'release', name: 'release: 发布' },
    { value: 'deploy', name: 'deploy: 部署' },
    { value: 'test', name: 'test: 增加测试' },
    { value: 'chore',  name: 'chore: 构建过程或辅助工具的变动(更改配置文件)' },
    { value: 'revert', name: 'revert: 回退' },
    { value: 'build', name: 'build: 打包' },
  ],
  // override the messages, defaults are as follows
  messages: {
    type: 'type 请选择提交类型:',
    customScope: 'scope 请输入您修改的范围(可选):',
    subject: 'subject 请简要描述提交 message (必填):',
    body: 'body 请输入详细描述(可选，enter 可跳过):',
    footer: 'footer 重大/不兼容 的变更理由(可选，enter 可跳过):',
    confirmCommit: '确认使用以上信息提交？(y/n/e/h)',
  },
  allowCustomScopes: true,
  // skipQuestions: ['body', 'footer'],
  subjectLimit: 72,
  footerPrefix : 'footer:'
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

修改 commitlint.config.js 的 extents，增加 'cz'；

// commitlint.config.js
module.exports = {
  extents: ['@commitlint/config-conventional', 'cz'],
  rules: {...}
};

1
2
3
4
5

提交代码
```
git add .
npm run commit
```
1
2
根据交互式提示填写内容，enter 可跳过

# commit message

# 说明

一个完整的 commit message 应该包含三个部分:

header
body
footer

# header
feat(dao): add db utils
# body
- describe for util1
- describe for util2
see trello 看板卡片
# footer
BREAKING CHANGE:...



<type>(<scope>):<subject>
<body>
<footer>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

header 只有一行,由三部分组成: <type>(<scope>):<subject>

# type

说明提交的类别,只允许使用下面的类型.

# type可选值

feat 新功能(feature)
fix 用于修复问题
docs 文档
style 修改格式(不影响代码运行的变动)
refactor 重构
perf 优化相关
test 增加测试用例
revert 回滚
merge 合并代码
chore 构建过程或辅助工具的变动如 CI CD

# scope(可选)

是可选的,用于说明此次提交影响范围

# subject

对提交的简短描述,不超过50字符规范动词使用第一人称现在时.如 fix 而不是 fixed,add 而不是 added. 首字母小写. 结尾不需要句号.

# body(可选)

body 是可选的,更详细的描述,对于简单的提交也可缺省规范动词使用第一人称现在时.如 fix 而不是 fixed,add 而不是 added. 用换行分割信息说明动机和修改前后对比

对于不兼容的变更,footer以 BREAKING CHANGE 开头. 后面是变动描述,理由等.

# 示例

vue 项目(同样使用AngularJS规范)里的 git commit message

feat(reactivity): `proxyRefs` method and `ShallowUnwrapRefs` type (#1682)
BREAKING CHANGE: template auto ref unwrapping are now applied shallowly,
i.e. only at the root level. See https://github.com/vuejs/vue-next/pull/1682 for more details.


fix(hmr): should update el for `HYDRATE_EVENTS` patchFlags node (#1707)
fix https://github.com/vitejs/vite/issues/613


refactor(runtime-core): adjust error handling behavior
- Crash in dev to make the errors more noticeable
- Recover in prod to reduce impact on end users

# 参考

← css改变dom排序

# git 规范 & 辅助插件

# 使用的插件及说明

# husky 和 commitlint

# customizable 交互式操作

# commit message

# 说明

# header

# type

# type可选值

# scope(可选)

# subject

# body(可选)

# footer(可选)

# 示例

# 参考