菜园前端

Appearance

好玩的 git commit emoji 🎨 ​

彩蛋

git 集成的 emoji 表情：https://gitmoji.dev/

例如提交时输入，:art: commit message 提交信息，会自动生成 🎨 表情。

接下来将会介绍如何对 commit 提交的信息进行规范化，以及根据提交类型自动生成可爱的 emoji 表情。

为什么要有代码提交规范 ​

你要知道 git 的作用不仅是代码的在线托管，而是当你的项目发生错误的时候，可以通过历史提交记录来快速排查是谁提交的代码出了问题。

之前的文章有提到通过 git commit -m <myMessage> 的方式进行代码提交。在一个多人进行的项目开发中，git 代码提交是一件非常频繁的事情，可能每 30 分钟就会有一次提交。如果不对其进行规范管理，那你将很难知道其他小伙伴对项目做了哪些改动。

案例 1

例如我昨天的登录功能是好好的，怎么今天拉取了代码之后，登录的按钮不见了。其中一种的排查方式就是去看提交记录，刚好被我看到小明的代码提交 git commit -m "修改登录页，隐藏登录按钮"。这种提交信息还是比较直观的。

案例 2

项目是正常运行的，但是我就是想看一下大家最近都对项目做了哪些改动。然后发现提交记录是这样的：

  • xiaoming: "update login" ——5 分钟之前
  • libai: "阿巴阿巴" ——10 分钟之前
  • anqila: "update register" ——20 分钟之前
  • libai: "阿巴阿巴" ——30 分钟之前
  • libai: "ok" ——40 分钟之前
  • libai: "update" ——50 分钟之前

当你看完后，有何感想 💩

根本就看不出来改了什么，除非对每一次提交记录展开去一行行代码查看。

总结：commit message 应该清晰明了，说明本次提交的目的。

Angular Commit 规范 ​

这个是由 Angular 框架提出的 Git Commit 规范，也是目前比较主流的一种。

格式：git commit -m "<type>(<scope>?): <subject>"

案例：git commit -m "feat(login): add login page"

优秀案例

  • xiaoming: "refactor: 重构登录页代码" ——5 分钟之前
  • libai: "fix: 修复登录按钮消失问题" ——10 分钟之前
  • anqila: "feat: 新增注册功能" ——20 分钟之前
  • libai: "feat: 新增登录功能" ——30 分钟之前
  • libai: "feat: 新增个人中心模块" ——40 分钟之前
  • libai: "feat: 新增首页模块" ——50 分钟之前

提交格式

正常来说，一个完整的提交应该是由头部 Head、正文 Body、结尾 Footer 组成。

头部则是前面提到的 <type>(<scope>?): <subject>"

正文则是对本次提交的详细描述，可以由多行组成。

尾部则是一些额外的信息，如关闭的 issue，或者与上个版本不兼容的信息。

但是加上正文和尾部的话，提交流程会过于复杂， 如果有需要可在自行了解。本文将不作过多的介绍。

类型 Type ​

必须是以下类型之一

  • build: 影响构建系统或外部依赖项的更改

  • ci: 对 CI 配置文件和脚本的更改

  • docs: 仅文档更改

  • feat: 新功能

  • fix: 修复 bug

  • perf: 提高性能的代码更改

  • refactor: 代码重构，既不修复 bug 也不添加新功能的代码更改

  • test: 添加缺失的测试或修正现有测试

范围 Scope（可选） ​

用于说明提交影响的范围（如模块、组件等）

主题 Subject ​

是简短的描述，说明本次提交的主要目的。

Individuation Commit 规范 🎨 ​

个性化代码提交规范，由博主根据项目实际情况自行制定的一套规范。例如添加新页面/组件、对接后端接口、代码合并等等都是比较常用。当然你可以根据实际的需求自行调整。

比较有意思的是，它可以根据你的 <type> 自动生成对应的 emoji 表情。这样查看提交记录的时候会更加的直观。

例如 git commit -m "api: 登录页已完成接口对接" 提交后，效果如下：

案例升级

  • xiaoming: "🚸 api: 登录页已完成接口对接" ——5 分钟之前
  • libai: "🔨 bug: 修复登录按钮消失问题" ——10 分钟之前
  • anqila: "♻️ clean: 清理项目中没有使用到的文件" ——20 分钟之前
  • libai: "🎨 update: 根据最新设计稿更新登录页" ——30 分钟之前
  • libai: "🎉 add: 添加注册页面" ——40 分钟之前
  • libai: "🎉 add: 添加登录页面" ——50 分钟之前

类型 Type ​

必须是以下类型之一

  • 🎉 add: 添加新的文件/页面/组件

  • 🎨 update: 更新页面/组件 UI 样式

  • 🔥 replace: 替换文案/修正错别字

  • 🔨 bug: 修复 bug

  • 🚀 refactor: 重构/优化代码

  • 🚑 revert: 撤销代码

  • ♻️ clean: 清理多余的文件/代码

  • 💩 bad: 修改别人编写的代码

  • 🔀 merge: 代码合并

  • 🚸 api: 对接后端接口/模拟接口

  • 🚧 working: 该文件正在维护中，请勿修改

Individuation Commit 配置 🏗️ ​

1. 通过 YARN 安装插件 ​

sh
$ yarn add husky shx @commitlint/cli
$ yarn add husky shx @commitlint/cli

husky 是一个 Git Hooks 管理工具，目前用于在 Git 提交的时候执行自定义脚本。

shx 是一个兼容多平台的命令行工具，可以执行 shell 命令，目前用于拷贝文件。

@commitlint/cli 是一个用于校验提交信息的工具，可以按照指定的规则校验提交信息。

2. 项目跟目录创建 commit-msg 和 commitlint.config.js 文件 ​

sh
#!/bin/sh
# 此文件更新后，必须要更新 commitlint.config.js 然后重新执行 npm run husky

# 读取提交信息文件的路径
COMMIT_MSG_FILE=$1

# 使用 commitlint 校验提交信息
npx commitlint --edit $COMMIT_MSG_FILE
if [ $? -ne 0 ]; then
  echo "Commit message linting failed."
  exit 1
fi

# 定义 emoji 和 type 的映射关系
add="🎉"      # 添加新的文件/页面/组件
update="🎨"   # 更新页面/组件 UI 样式
replace="🔥"  # 替换文案/修正错别字
bug="🔨"      # 修复 bug
refactor="🚀" # 重构/优化代码
revert="🚑"   # 撤销代码
clean="♻️"    # 清理多余的文件/代码
bad="💩"      # 修改别人编写的代码
merge="🔀"    # 代码合并
api="🚸"      # 对接后端接口/模拟接口
working="🚧"  # 该文件正在维护中，请勿修改
docs="📄"     # 更新文档

# 从提交信息中提取类型（假设格式为 "type(scope): description"）
TYPE=$(grep -oE '^[a-z]+' $COMMIT_MSG_FILE)

# 根据类型匹配 emoji 表情
case "$TYPE" in
  add)      EMOJI=$add ;;
  update)   EMOJI=$update ;;
  replace)  EMOJI=$replace ;;
  bug)      EMOJI=$bug ;;
  refactor) EMOJI=$refactor ;;
  revert)   EMOJI=$revert ;;
  clean)    EMOJI=$clean ;;
  bad)      EMOJI=$bad ;;
  merge)    EMOJI=$merge ;;
  api)      EMOJI=$api ;;
  working)  EMOJI=$working ;;
  docs)  EMOJI=$docs ;;
esac

# 读取原始提交信息
COMMIT_MSG=$(cat $COMMIT_MSG_FILE)

# 添加 emoji 到提交信息前面
NEW_COMMIT_MSG="$EMOJI $COMMIT_MSG"

# 将更新后的提交信息写回文件
echo "$NEW_COMMIT_MSG" > $COMMIT_MSG_FILE
#!/bin/sh
# 此文件更新后，必须要更新 commitlint.config.js 然后重新执行 npm run husky

# 读取提交信息文件的路径
COMMIT_MSG_FILE=$1

# 使用 commitlint 校验提交信息
npx commitlint --edit $COMMIT_MSG_FILE
if [ $? -ne 0 ]; then
  echo "Commit message linting failed."
  exit 1
fi

# 定义 emoji 和 type 的映射关系
add="🎉"      # 添加新的文件/页面/组件
update="🎨"   # 更新页面/组件 UI 样式
replace="🔥"  # 替换文案/修正错别字
bug="🔨"      # 修复 bug
refactor="🚀" # 重构/优化代码
revert="🚑"   # 撤销代码
clean="♻️"    # 清理多余的文件/代码
bad="💩"      # 修改别人编写的代码
merge="🔀"    # 代码合并
api="🚸"      # 对接后端接口/模拟接口
working="🚧"  # 该文件正在维护中，请勿修改
docs="📄"     # 更新文档

# 从提交信息中提取类型（假设格式为 "type(scope): description"）
TYPE=$(grep -oE '^[a-z]+' $COMMIT_MSG_FILE)

# 根据类型匹配 emoji 表情
case "$TYPE" in
  add)      EMOJI=$add ;;
  update)   EMOJI=$update ;;
  replace)  EMOJI=$replace ;;
  bug)      EMOJI=$bug ;;
  refactor) EMOJI=$refactor ;;
  revert)   EMOJI=$revert ;;
  clean)    EMOJI=$clean ;;
  bad)      EMOJI=$bad ;;
  merge)    EMOJI=$merge ;;
  api)      EMOJI=$api ;;
  working)  EMOJI=$working ;;
  docs)  EMOJI=$docs ;;
esac

# 读取原始提交信息
COMMIT_MSG=$(cat $COMMIT_MSG_FILE)

# 添加 emoji 到提交信息前面
NEW_COMMIT_MSG="$EMOJI $COMMIT_MSG"

# 将更新后的提交信息写回文件
echo "$NEW_COMMIT_MSG" > $COMMIT_MSG_FILE
js
module.exports = {
    rules: {
        /**
         * 要求提交类型必须是以下类型之一
         */
        'type-enum': [
            2,
            'always',
            [
                'add',
                'update',
                'replace',
                'bug',
                'refactor',
                'revert',
                'clean',
                'bad',
                'merge',
                'api',
                'working',
                'docs'
            ]
        ],

        /**
         * 要求提交信息至少 2 个字符
         */
        'header-min-length': [2, 'always', 2],

        /**
         * 不允许提交信息缺少类型
         */
        'type-empty': [2, 'never'],

        /**
         * 不允许提交信息缺少主题
         */
        'subject-empty': [2, 'never'],

        /**
         * 要求主题为小写
         */
        'subject-case': [2, 'always', 'lower-case']
    }
}
module.exports = {
    rules: {
        /**
         * 要求提交类型必须是以下类型之一
         */
        'type-enum': [
            2,
            'always',
            [
                'add',
                'update',
                'replace',
                'bug',
                'refactor',
                'revert',
                'clean',
                'bad',
                'merge',
                'api',
                'working',
                'docs'
            ]
        ],

        /**
         * 要求提交信息至少 2 个字符
         */
        'header-min-length': [2, 'always', 2],

        /**
         * 不允许提交信息缺少类型
         */
        'type-empty': [2, 'never'],

        /**
         * 不允许提交信息缺少主题
         */
        'subject-empty': [2, 'never'],

        /**
         * 要求主题为小写
         */
        'subject-case': [2, 'always', 'lower-case']
    }
}

3. 配置 package.json ​

在 package.json 文件中的 scripts 添加以下内容：

json
{
    "scripts": {
        "commit-msg": "shx cp commit-msg .husky/_/commit-msg",
        "husky": "npx husky install && npm run commit-msg"
    },
}
{
    "scripts": {
        "commit-msg": "shx cp commit-msg .husky/_/commit-msg",
        "husky": "npx husky install && npm run commit-msg"
    },
}

完成以上的配置后，执行以下命令即可使用。

sh
npm run husky
npm run husky

4.提交测试 ​

注意

类型 <type>: 需要补一个空格，然后才写 <subject>

不通过的测试，因为没有写上类型 <type> ，而是直接写了主题 <subject>

通过的测试，可以看到提交后，emoji 图标是自动补上的。