git commit提交代码的规范

commitlint

type(scope?): subject
-----
feat(index): 新增了xxx

根据commitlint-config-conventional （基于 Angular 约定）的常见类型可以是：

类型	描述
build	编译相关的修改，例如发布版本、对项目构建或者依赖的改动
chore	其他修改, 比如改变构建流程、或者增加依赖库、工具等
ci	持续集成修改
docs	文档修改
feat	新特性、新功能
fix	修改bug
perf	优化相关，比如提升性能、体验
refactor	代码重构
revert	回滚到上一个版本
style	代码格式修改, 注意不是 css 修改
test	测试用例修改

安装commitlint

在windows系统下安装的命令:

npm install --save-dev @commitlint/config-conventional @commitlint/cli

添加 commit-msg 钩子

前提是已经安装并初始化过husky，如果未初始化过请看第四章

npx husky add .husky/commit-msg

.husky/commit-msg：将undefined替换成npx --no -- commitlint --edit ${1}

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

npx --no -- commitlint --edit ${1}

创建.commitlintrc.js：

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

当git commit提交到本地仓库的时候，如果commit message不符合规范，终端会有类似提示：

比如：

git commit -m "123123"

input: 表示你输入的git message信息;

subject may not be empty：subject不能为空;

type may not be empty：type不能为空;

修改成：

git commit -m "feat(init): 添加了commitlint,git提交规范校验"

显示这个就说明已经成功提交到本地缓存区啦！

值得注意的是，在 type(scope?): 里的 : 是英文半角的，并且与subject描述之间有一个空格。

commit可视化

虽然git commit的规范是有了，但是每一次都需要手动的去敲，并且header也不是很好记，所以决定使用commit可视化工具：cz-git。

安装

全局安装commitizen:
```
npm install -g commitizen
```
全局安装 commitizen,如此一来可以快速使用 cz 或 git cz 命令进行启动。
在项目中安装cz-git:
```
npm install -D cz-git
```

修改 package.json 添加 config 指定使用的适配器:

{ .
    "scripts": {...}, 
    "config": { 
        "commitizen": { 
            "path": "node_modules/cz-git" 
        } 
    } 
}

添加自定义配置(可选，使用默认)

cz-git 与 commitlint 进行联动给予校验信息，所以可以编写于 commitlint 配置文件之中。

// .commitlintrc.js


/** @type {import('cz-git').UserConfig} */

export default {
  extends: ['@commitlint/config-conventional'],
  prompt: {
    alias: { fd: 'docs: fix typos' },
    messages: {
      type: '选择你要提交的类型 :',
      scope: '选择一个提交范围（可选）:',
      customScope: '请输入自定义的提交范围 :',
      subject: '填写简短精炼的变更描述 :\n',
      body: '填写更加详细的变更描述（可选）。使用 "|" 换行 :\n',
      breaking: '列举非兼容性重大的变更（可选）。使用 "|" 换行 :\n',
      footerPrefixesSelect: '选择关联issue前缀（可选）:',
      customFooterPrefix: '输入自定义issue前缀 :',
      footer: '列举关联issue (可选) 例如: #31, #I3244 :\n',
      confirmCommit: '是否提交或修改commit ?'
    },
    // type
    types: [
      { value: 'feat', name: 'feat:     新增功能 ✨ A new feature' },
      { value: 'fix', name: 'fix:      修复缺陷 🐛 A bug fix' },
      { value: 'docs', name: 'docs:     文档更新 ✏️ Documentation only changes' },
      { value: 'style', name: 'style:    代码格式 🎨 Changes that do not affect the meaning of the code' },
      {
        value: 'refactor',
        name: 'refactor: 代码重构 ♻ A code change that neither fixes a bug nor adds a feature'
      },
      { value: 'perf', name: 'perf:     性能提升 ⚡ A code change that improves performance' },
      { value: 'test', name: 'test:     测试相关 🧪 Adding missing tests or correcting existing tests' },
      {
        value: 'build',
        name: 'build:    打包构建 📦️ Changes that affect the build system or external dependencies'
      },
      { value: 'ci', name: 'ci:       持续集成 💚 Changes to our CI configuration files and scripts' },
      { value: 'revert', name: 'revert:   回退代码 ⏪️ Revert to a commit' },
      { value: 'chore', name: 'chore:    构建/工程依赖/工具 🎉 Other changes that do not modify src or test files' }
    ],
    useEmoji: true,
    emojiAlign: 'center'
  }
}

更多配置以及配置模板可以到cz-git官网查看：配置模板。

还可以在paceage.json的script脚本中添加commit脚本，这样会比较方便一些，只需要运行一下这个命令即可实现添加到缓存区并提交到本地仓库中：

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

效果

提交信息开头添加emoji

具体效果如下：

实现步骤：

安装commitlint-config-gitmoji和commitlint

commitlint-config-gitmoji
```
npm install --save-dev commitlint-config-gitmoji
```
添加配置项

在.commitlintrc.js文件中将extends配置项中的 @commitlint/config-conventional 换成 gitmoji：
```
module.exports = {
  extends: ['gitmoji'],
}
```
如果不修改的话会报错：

这是因为 @commitlint/config-conventional 默认的预设是 angular ，像这种自定义表情的commmit，规范和angular不一样，它读不到对应的type生成的更改日志是没法分类就会报错，所以我们要换成使用gitmoji，并且在后面的changelog中添加emoji也是需要使用到gitmoji的，不然emoji表情不会显示。。

为.commitlintrc.js中的prompt.types配置项的每一个数组元素的value值的开头添加emoji：

prompt: {
    // types
    types: [
      { value: ':sparkles: feat', name: 'feat:     新增功能 ✨ A new feature' },
      { value: ':bug: fix', name: 'fix:      修复缺陷 🐛 A bug fix' },
      { value: ':pencil2: docs', name: 'docs:     文档更新 ✏️ Documentation only changes' },
      { value: ':art: style', name: 'style:    代码格式 🎨 Changes that do not affect the meaning of the code' },
      {
        value: ':recycle: refactor',
        name: 'refactor: 代码重构 ♻ A code change that neither fixes a bug nor adds a feature'
      },
      { value: ':zap: perf', name: 'perf:     性能提升 ⚡ A code change that improves performance' },
      { value: ':test_tube: test', name: 'test:     测试相关 🧪 Adding missing tests or correcting existing tests' },
      {
        value: ':package: build',
        name: 'build:    打包构建 📦️ Changes that affect the build system or external dependencies'
      },
      { value: ':green_heart: ci', name: 'ci:       持续集成 💚 Changes to our CI configuration files and scripts' },
      { value: ':rewind: revert', name: 'revert:   回退代码 ⏪️ Revert to a commit' },
      {
        value: ':tada: chore',
        name: 'chore:    构建/工程依赖/工具 🎉 Other changes that do not modify src or test files'
      }
    ],
}

emoji引用官方给的这个网站里面的：gitmoji

changelog

为什么需要 CHANGELOG ？它记录你项目所有的commit信息并归类版本，可以快速跳转到该条commit记录，甚至可以显示修改人信息一眼发现bug的创建者😂。它能让你方便知道项目里哪个版本做了哪些功能有哪些bug等信息。也方便排查bug，对于提交记录一目了然，不用一个一个去翻去查。

安装

安装standard-version

npm install standard-version --save-dev

在package.json中添加：

{ 
    "scripts": { 
        "commit": "git add -A && cz && standard-version"
    } 
}

执行npm run standard-version，就会根据你的commit信息自动生成 CHANGELOG.md 文件，当你的commit type是 feat和fix的时候执行这个命令，它会自增版本号。。

standard-version 提供自定义配置不同类型对应显示文案，在根目录新建 .versionrc.cjs 文件，然后添加如下内容：

module.exports = { 
    "types": 
        [ 
            { "type": "feat", "section": "Features | 新功能" }, 
            { "type": "fix", "section": "Bug Fixes | Bug 修复" }, 
            { "type": "init", "section": "Init | 初始化" }, 
            { "type": "docs", "section": "Documentation | 文档" }, 
            { "type": "style", "section": "Styles | 风格" }, 
            { "type": "refactor", "section": "Code Refactoring | 代码重构" }, 
            { "type": "perf", "section": "Performance Improvements | 性能优化" }, 
            { "type": "test", "section": "Tests | 测试" }, 
            { "type": "revert", "section": "Revert | 回退" }, 
            { "type": "build", "section": "Build System | 打包构建" }, 
            { "type": "chore", "section": "Chore | 构建/工程依赖/工具" }, 
            { "type": "ci", "section": "Continuous Integration | CI 配置" } 
        ] 
}

效果图：

changelog添加emoji表情

安装conventional-changelog-gitmoji-config

conventional-changelog-gitmoji-config
```
npm install --save-dev conventional-changelog-gitmoji-config
```
修改package.json中的配置：
```
{
    "scripts": {
        "commit": "git add -A && cz && standard-version --preset gitmoji-config"
    }
}
```
standard-version 通过 --preset 命令另外指定预设，所以在standard-version后面添加 --preset gitmoji-config来指定预设为gitmoji-config。

修改.versionrc.cjs文件的内容：

module.exports = {
  types: [
    { type: 'feat', section: '✨ Features | 新功能' },
    { type: 'fix', section: '🐛 Bug Fixes | Bug 修复' },
    { type: 'init', section: '🎉 Init | 初始化' },
    { type: 'docs', section: '✏️ Documentation | 文档' },
    { type: 'style', section: '💄 Styles | 风格' },
    { type: 'refactor', section: '♻️ Code Refactoring | 代码重构' },
    { type: 'perf', section: '⚡ Performance Improvements | 性能优化' },
    { type: 'test', section: '✅ Tests | 测试' },
    { type: 'revert', section: '⏪ Revert | 回退' },
    { type: 'build', section: '📦‍ Build System | 打包构建' },
    { type: 'chore', section: '🚀 Chore | 构建/工程依赖/工具' },
    { type: 'ci', section: '👷 Continuous Integration | CI 配置' }
  ]
}

效果：

第六章-git commit的提交规范+commit-message+changlog