五分钟定制自己的 Git commit tool

太长不看：编写 Git Commit Tool，请直接看本文最后一节或者下面的 github。

Github: Hacker-C/zx-scripts

背景

相信对于 git commit message 的规范化，大家都非常清楚了，现在都是用 Commitizen、commitlint、Husky hooks 等来规范提交。在我们自己只是简单提交 commit message 的时候，并没有必要上 husky 这些工具，这个时候就需要编写一个 commit tool，来定制自己的 commit message。

commitizen 也可以编写一个 commit tool，但它的自定义并不是很友好，至少我自己在用的时候，格式无法满足我的需求。

本文将推荐更加快捷方便且定制化程度高的方法：即使用 zx 和 inquirer。

• google/zx: A tool for writing better scripts
• SBoudrias/Inquirer.js: A collection of common interactive command line user interfaces

zx

zx 是谷歌出品的脚本编写库，使用 JS 即可编写能执行 shell 命令的脚本。

下载：

npm install zx -g

编写 commit.js：

#!/usr/bin/env zx
const commitMessage = '🎉 init: First commit'
await $`git commit -m ${commitMessage}`

执行脚本：

zx ./commit.js

我们需要从终端读取用户输入，zx 也有自己的 api question()，但是他不能列出一系列选项来供用户选择，交互式 UI 比较少，这个时候我们就需要 Inquirer 了。

inquirer

Inquirer 是一个终端交互式命令提示器，可以编写多项选择、文本输入等从用户读取数据的终端 UI 界面。

import inquirer from 'inquirer'

const questions = [
  {
    type: 'list',
    name: 'type',
    message: 'Type of commit:',
    choices: ['苹果', '香蕉', '橘子']
  }
]

inquirer.prompt(questions).then(async (answers) => {
  const { type } = answers
  await $`echo ${type}` 
})

执行 node a.js 或 zx a.js（npm install zx -g）：

编写 Git Commit Tool

对于这两大神器，zx 负责执行终端的命令（git、ls、cd、pwd 等等），Inquirer 负责终端交互式 UI——即从用户读取信息，这样我们就可以轻松编写脚本工具。

下面是一个 Git Commit Tool 的示例代码。

准备工作：

mkdir zx-scripts
cd zx-scripts
pnpm init
pnpm add inquirer
pnpm add zx -g
touch commit.js # 新建 commit.js

commit.js：

#!/usr/bin/env zx

import inquirer from 'inquirer'

const EMOJIS = {
  init: '🎉',
  feat: '✨',
  fix: '🐛',
  chore: '🔧',
  style: '💄',
  refactor: '🔨',
  docs: '📝',
  revert: '⏪️',
  perf: '🐎',
  test: '🧪',
}

const questions = [
  {
    type: 'list',
    name: 'type',
    message: 'Type of commit:',
    choices: Object.keys(EMOJIS).map((key) => `${EMOJIS[key]} ${key}`)
  },
  {
    tyoe: 'input',
    name: 'scope',
    message: 'Scope of commit:'
  },
  {
    type: 'input',
    name: 'message',
    message: 'Commit message:',
    validate: (value) => !!value.trim() || 'Message is required'
  },
]

inquirer.prompt(questions).then(async (answers) => {
  const { type, message, scope } = answers

  const formattedScope = scope ? `(${scope})` : ''
  const commitMessage = `${type}${formattedScope}: ${message}`

  try {
    await $`git commit -m ${commitMessage}`
  } catch {
    echo('Commit failed. Please add changes to stage and try again.')
  }
})

使用 zx 执行这段代码即可使用：

zx ./commit.js

为了在各处使用，我们可以将命名添加到全局环境变量中，具体方式取决于你的 Shell 类型。例如，添加我们编写的 commit tool 到 Powershell 里：

1. 终端输入 $PROFILE，找到配置文件 Microsoft.PowerShell_profile.ps1
2. 在文件中加以下代码：

   function cm {
     zx G:\dev\zx\scripts\commit.js
   }
   

3. 然后就可以愉快的使用了~

当然，有了这两个工具，我们可以根据自己的需要编写更多脚本工具，甚至是 cli（脚手架）工具 O(∩_∩)O~