前端环境要求

node：> 16.x
npm：> 8.x

Tip：npm版本须大于等于 7.24.2，过低的话可能会导致下面有的命令无法使用，需要手动在 package.json 中自行设置。

工具

1.husky

操作 git 钩子的工具

2.commitlint

commit 信息校验工具

3.commitizen

commit自动化提示工具，简称 cz

4.cz-customizable

可自定义的 cz 适配器

5.commitlint-config-git-commit-emoji

emoji插件

前置条件

git 项目中通过命令

$ git init

将项目设置成 git 仓库

步骤

1. husky安装

使用命令 husky-init 初始化 husky

# 初始化 husky
$ npx husky-init
# 添加husky依赖
$ npm i

此时，项目中多了一个.husky文件夹

2. 添加 commit-msg 钩子,执行信息校验

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

3. 安装commitlint

3.1 安装 commit 校验工具

添加 @commitlint/config-conventional 和 commitlint

$ npm i commitlint @commitlint/config-conventional -D

@commitlint/config-conventional 这是一个规范配置,标识采用什么规范来执行消息校验, 这个默认是Angular的提交规范

3.2 创建 `commitlint.config.js` 配置文件

$ echo "module.exports = {extends: ['@commitlint/config-conventional']}" > commitlint.config.js

4. 安装commitizen

4.1 安装自动化提示工具

$ npm i commitizen cz-conventional-changelog -D

4.2 初始化命令行的选项信息

$ npx commitizen init cz-conventional-changelog --save-dev --save-exact

5. 安装可自定义的cz适配器

因为commitizen只支持英文，如果我想要支持中文指令和emoji，那么就必须安装可自定义的cz适配器了

5.1 安装cz适配器

$ npm i -D commitlint-config-cz  cz-customizable

5.2 在根目录创建 `.cz-config.js` 文件

为避免文件位置错误直接使用命令创建

$ echo > .cz-config.js

5.3 将以下配置内容复制到 `.cz-config.js` 文件中

下面的内容是后面 git 命令的提示，可以根据个人爱好，自行修改

module.exports = {
  types: [
    {
      value: ':sparkles: feat',
      name: '✨ feat:     新功能'
    },
    {
      value: ':bug: fix',
      name: '🐛 fix:      修复bug'
    },
    {
      value: ':package: build',
      name: '📦️ build:    打包'
    },
    {
      value: ':zap: perf',
      name: '⚡️ perf:     性能优化'
    },
    {
      value: ':tada: release',
      name: '🎉 release:  发布正式版'
    },
    {
      value: ':lipstick: style',
      name: '💄 style:    代码的样式美化'
    },
    {
      value: ':recycle: refactor',
      name: '♻️  refactor: 重构'
    },
    {
      value: ':pencil2: docs',
      name: '✏️  docs:     文档变更'
    },
    {
      value: ':white_check_mark: test',
      name: '✅ test:     测试'
    },
    {
      value: ':rewind: revert',
      name: '⏪️ revert:   回退'
    },
    {
      value: ':rocket: chore',
      name: '🚀 chore:    构建/工程依赖/工具'
    },
    {
      value: ':construction_worker: ci',
      name: '👷 ci:       CI related changes'
    }
  ],
  messages: {
    type: '请选择提交类型(必填)',
    customScope: '请输入文件修改范围(可选)',
    subject: '请简要描述提交(必填)',
    body: '请输入详细描述(可选)',
    breaking: '列出任何BREAKING CHANGES(可选)',
    footer: '请输入要关闭的issue(可选)',
    confirmCommit: '确定提交此说明吗？'
  },
  allowCustomScopes: true,
  // 跳过问题
  skipQuestions: ['body', 'footer'],
  subjectLimit: 72
}

5.4 将 `cz-customizable` 脚本添加到您的 `package.json`

{
    "script": {
        // ... 之前的内容
        // 我自己的文件 没添加 git add 命令
        // 也不是所有的文件都想上传
        // 所以，我的commit命令是 cz-customizable
        "commit": "git add . && cz-customizable"
    }
}

6. 安装git-commit-emoji

6.1 安装emoji插件

$ npm i -D  commitlint-config-git-commit-emoji

6.2 更新 `commitlint.config.js`

移除extends中原来的 @commitlint/config-conventional，加入'git-commit-emoji', 'cz'

module.exports = { 
    extends: ['git-commit-emoji', 'cz']
}

6.3 含emoji的自动化提示选项列表

使用 npm run commit 代替 git commit
在命令行中输入 npm run commit ，即可通过键盘上下键选择需要要的commit type了。当然我自己的项目中，会自行git add xxxx文件

Git husky + commit校验工具commitlint的配置与使用