✨ feat: 自动给git提交添加emoji 无需手动输入很多人都用过GCW，或者类似的工具，但这些工具都需要靠手动书

很多人都用过GCW，或者类似的工具，但这些工具都需要靠手动书写、命令行工具、vscode插件来添加emoji，不太方便，本身emoji意义不大只是锦上添花的东西，本文通过几行简单的自定义脚本来自动添加emoji, 锦上添花的同时没有任何额外负担

预期效果

• 不用手动输入:gitmojicode: ，根据type自动添加，也可以根据type scope组合

> git commit -m 'feat: hello'
✨ feat: hello

> git commit -m 'fix: server crash'
🐛 fix: server crash

• 支持用任何工具提交

  • 命令行
  • GUI图形化

• 自定义emoji映射

  • feat(core): 🥇
  • feat(ui): 🥈
  • feat(utils): 🥉

实现思路

1. 使用commitlint校验格式，确保符合conventionalcommits规范
2. 使用husky来添加git hook，在提交时对commit message校验
3. 编写自定义脚本来给提交信息添加emoji (关键)

安装依赖

npm install --save-dev @commitlint/{cli,config-conventional} husky

配置commitlint

echo "export default { extends: ['@commitlint/config-conventional'] };" > commitlint.config.js

配置好后可以试一下

npx commitlint --from

执行后会对git log中的所有提交信息lint校验，如果你以前提交的符合规范则不会输出错误信息，这里只是尝试一下确保能正常生效。

配置Husky

这个工具的原理是注册git hook，让git提交的时候执行注册时的脚本，如果脚本报错则放弃提交。

基于这个原理，我们先执行以下脚本引导husky注册

npx husky

注意，以上是手动注册，意味着只会在你本机生效，因此我们添加一个npm脚本来确保其他开发同学能自动注册

package.json

"scripts": {
  "prepare": "husky"
},

这样只要执行了npm install就会自动引导husky从而注册git hook

编写自定义脚本来添加emoji

.husky/commit-msg-emoji.js

import { readFileSync, writeFileSync } from "fs";

const typeToEmojiMap = {
  chore: "🎨",
  feat: "✨",
  fix: "🐛",
};

const COMMIT_EDITING_FILEPATH = process.argv.at(-1);

const inputMsg = readFileSync(COMMIT_EDITING_FILEPATH, "utf8");

writeFileSync(COMMIT_EDITING_FILEPATH, transform(inputMsg, typeToEmojiMap), "utf8");

function transform(inputMsg, typeToEmojiMap) {
  const [type, emoji] =
    Object.entries(typeToEmojiMap).find(([type]) =>
      inputMsg.startsWith(type),
    ) ?? [];

  if (type) {
    return inputMsg.replace(new RegExp(`^${type}`), `${emoji} $&`);
  }

  throw new Error('Invalid type')
}

注意我是用esm写的，你也可以用commonjs

这段脚本很简单，读取用户输入的提交信息，修改提交信息添加emoji，保存提交信息。

只需要通过配置 typeToEmojiMap 变量中的映射即可，例如

const typeToEmojiMap = {
  chore: "🎨",
  feat: "✨",
  fix: "🐛",
  'feat(core)': 🥇
};

最后，注册commitlint和自定义脚本

.husky/commit-msg

npx --no -- commitlint --edit $1
node .husky/commit-msg-emoji.js $1

第一行注册commitlint，校验提交的格式

第二行注册我们自己的脚本，修改提交信息添加emoji

需要注意的是，自定义脚本要在commitlint后面执行，这样emoji就不会参与lint

体验

完成上面的所有配置后，现在可以提交体验一下了

git add .
git commit -m 'feat: auto add emoji'
...
[main 6b0efac] ✨ feat: auto add emoji