0. 前言

在本节来集成对 commit message 提交信息的规范工具链。

1. 步骤清单

1. 安装 哈士奇： pnpm i husky -D

2. 使用 husky v8 初始化方案：npx husky install

3. 添加 bash 脚本钩子： 可选操作如下：

   • npx husky add .husky/pre-commit "xxxxx"：提交代码前做一些事
   • npx husky add .husky/pre-push "xxxxx": 推代码前做一些事
   • npx husky add .husky/pre-merge "xxxxx": 合并代码前做一些事
   • npx husky add .husky/pre-rebase "xxxxx": rebase 前做一些事
   • npx husky add .husky/commit-msg "xxxxx" : 校验 commit message

   当执行完指令后，会对应生成 .husky 文件夹，修改 commit-msg 脚本：

   #!/usr/bin/env sh
   . "$(dirname -- "$0")/_/husky.sh"
   
   env HUSKY_GIT_PARAMS=$1 node ./scripts/verifyCommit.mjs
   

4. 拷贝 verifyCommit.mjs 文件

   安装依赖：

    pnpm i chalk -D
    pnpm i os-locale
   

   verfiyCommit.mjs 脚本如下：

   import chalk from "chalk"; // 最新版 chalk 包为 module 规范
   import { osLocale } from "os-locale"; // 最新版 os-locale 包为 module 规范
   import { readFileSync } from "fs";
   
   /* 获取路径地址：.git/COMMIT_EDITMSG */
   const msgPath = process.env.HUSKY_GIT_PARAMS;
   
   const msg = readFileSync(msgPath, "utf-8").trim();
   
   const commitRE =
     /^(((\ud83c[\udf00-\udfff])|(\ud83d[\udc00-\ude4f\ude80-\udeff])|[\u2600-\u2B55]) )?(revert: )?(feat|fix|docs|UI|refactor|perf|workflow|build|CI|typos|chore|tests|types|wip|release|dep|locale)(\(.+\))?: .{1,50}/;
   
   if (!commitRE.test(msg)) {
     console.log();
     osLocale().then(locale => {
       if (locale === "zh-CN") {
         console.error(
           `  ${chalk.bgRed.white(" ERROR ")} ${chalk.red(
             `提交日志不符合规范`,
           )}\n\n${chalk.red(
             `  合法的提交日志格式如下(emoji 和 模块可选填)：\n\n`,
           )}    
           ${chalk.green(`[<emoji>] [revert: ?]<type>[(scope)?]: <message>\n`)}
           ${chalk.green(`💥 feat: 添加了个很棒的功能`)}
           ${chalk.green(`🐛 fix: 修复了一些 bug`)}
           ${chalk.green(`📝 docs: 更新了一下文档`)}
           ${chalk.green(`🌷 UI: 修改了一下样式`)}
           ${chalk.green(`🏰 chore: 对脚手架做了些更改`)}
           ${chalk.green(`🌐 locale: 为国际化做了微小的贡献\n`)}
           ${chalk.green(
             `其他提交类型: refactor, perf, workflow, build, CI, typos, tests, types, wip, release, dep\n`,
           )}
           ${chalk.red(
             `See https://github.com/vuejs/core/blob/main/.github/commit-convention.md\n`,
           )}`,
         );
       } else {
         console.error(
           `  ${chalk.bgRed.white(" ERROR ")} ${chalk.red(
             `invalid commit message format.`,
           )}\n\n${chalk.red(
             `  Proper commit message format is required for automated changelog generation. Examples:\n\n`,
           )}    
           ${chalk.green(`[<emoji>] [revert: ?]<type>[(scope)?]: <message>\n`)}
           ${chalk.green(`💥 feat(compiler): add 'comments' option`)}
           ${chalk.green(`🐛 fix(compiler): fix some bug`)}
           ${chalk.green(`📝 docs(compiler): add some docs`)}
           ${chalk.green(`🌷 UI(compiler): better styles`)}
           ${chalk.green(
             `🏰 chore(compiler) : Made some changes to the scaffolding`,
           )}
           ${chalk.green(
             `🌐 locale(compiler): Made a small contribution to internationalization\n`,
           )}
           ${chalk.green(
             `Other commit types: refactor, perf, workflow, build, CI, typos, tests, types, wip, release, dep\n`,
           )}
           ${chalk.red(
             `See https://github.com/vuejs/core/blob/main/.github/commit-convention.md\n`,
           )}`,
         );
       }
   
       process.exit(1);
     });
   }
   
   export default () => {};
   

5. 添加 pacakge.json 文件

   "scripts": {
     "prepare": "husky install",
   },
   /* 设置当前工程 ESM 格式*/
   "type": "module",
   

2. 说明

• verfiyCommit.mjs 这个脚本来源于 umi.js/fabric 这个包，而这个包又来源于 vue 文件。

  这里没有使用 commitlint 社区解决方案，因为这种写法自由度较高，整体也比较好控制。

• 传统 commitlint 方案：

  1. 安装依赖：

     pnpm i commitlint @commitlint/cli @commitlint/config-conventional -D
     

  2. 创建 .commitlintrc.cjs ，内容如下：

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

  3. 对应的 bash 脚本，如下：

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