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

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

复制 1> git commit -m 'feat: hello'
 2✨ feat: hello
 3
 4> git commit -m 'fix: server crash'
 5🐛 fix: server crash

• 支持用任何工具提交

  • 命令行
  • GUI图形化

• 自定义emoji映射

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

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

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

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

配置好后可以试一下

复制 1npx commitlint --from

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

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

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

复制 1npx husky

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

package.json

复制 1"scripts": {
 2  "prepare": "husky"
 3},

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

.husky/commit-msg-emoji.js

复制 1import { readFileSync, writeFileSync } from "fs";
 2
 3const typeToEmojiMap = {
 4  chore: "🎨",
 5  feat: "✨",
 6  fix: "🐛",
 7};
 8
 9const COMMIT_EDITING_FILEPATH = process.argv.at(-1);
10
11const inputMsg = readFileSync(COMMIT_EDITING_FILEPATH, "utf8");
12
13writeFileSync(COMMIT_EDITING_FILEPATH, transform(inputMsg, typeToEmojiMap), "utf8");
14
15function transform(inputMsg, typeToEmojiMap) {
16  const [type, emoji] =
17    Object.entries(typeToEmojiMap).find(([type]) =>
18      inputMsg.startsWith(type),
19    ) ?? [];
20
21  if (type) {
22    return inputMsg.replace(new RegExp(`^${type}`), `${emoji} $&`);
23  }
24
25  throw new Error('Invalid type')
26}
27

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

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

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

复制 1const typeToEmojiMap = {
 2  chore: "🎨",
 3  feat: "✨",
 4  fix: "🐛",
 5  'feat(core)': 🥇
 6};

.husky/commit-msg

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

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

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

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

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

复制 1git add .
 2git commit -m 'feat: auto add emoji'
 3...
 4[main 6b0efac] ✨ feat: auto add emoji