前端环境要求

node： 16.x
npm： 8.x

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

工具

husky

操作 git 钩子的工具

commitlint

commit 信息校验工具

commitizen

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

cz-customizable

可自定义的cz适配器

commitlint-config-git-commit-emoji

emoji插件

安装

安装husky工具

安装 husky插件

npm i husky -D

在package.json中添加脚本

npm set-script prepare "husky install" 

根目录创建.husky文件夹,将 git hooks 钩子交由husky执行

npm run prepare 

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

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

安装commitlint

安装 commit 校验工具

npm i commitlint @commitlint/config-conventional -D

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

创建 commitlint.config.js 配置文件

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

安装commitizen

安装自动化提示工具

npm i commitizen cz-conventional-changelog -D

package.json 中添加 commit 指令, 执行 git-cz 指令

npm set-script commit "git-cz" 

初始化命令行的选项信息

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

就可以在命令行中选择需要提交的git commit type了。

安装可自定义的cz适配器

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

安装cz适配器

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

在根目录创建 .cz-config.js

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
}

将新脚本添加到您的 package.json

"scripts" : {
  ...
  "commit": "git add . && cz-customizable"
}

安装git-commit-emoji

安装emoji插件

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

更新 commitlint.config.js

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

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

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

使用 npm run commit 代替 git commit
在命令行中输入 npm run commit ，即可通过键盘上下键选择需要要的commit type了。

其他

1. 使用自动化工具后，还可以用 git commit - m ""提交代码吗？

可以。
配置自动化工具后，不仅支持npm run commit自动化提示选择提交，也可以继续使用 git commit - m ""提交,只是写type的时候前面还需要加上emoji的字符串。

示例：git commit -m ":sparkles: feat: 新增登录功能"

查看git日志记录，显示已经提交成功。

2. husky报错导致提交失败？

删除根目录下.husky文件夹，在命令行重新运行 npm run prepare 和npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'