背景

参加完开源项目后接触到一些代码提交规范工具，由于自己之前没有用过，想着集成到自己的项目中。从0到1学习实践一下，本文将记录自己给vue3项目中添加git commit提交规范，同时也希望可以帮助到初次接触这方面的同学。

目的

实现git提交前 eslint 校验和 commit 信息的规范校验
提交记录一目了然，每次提交了做了哪些操作，便于后续维护和统一规范

husky是什么？

husky 是一个 Git Hook 工具。
husky继承了git下所有的 hooks（下面会讲到）。当我们 commit message 时，可以进行测试和lint操作，保证仓库里的代码是优雅的。
比如当我们进行 commit 操作时，会触发 pre-commit，在此阶段，可进行test和lint。其后，会触发commit-msg，对commit的message内容进行验证。

git hooks是什么？

git hooks 能让我们在git操作的特定命令发生时自动执行自定义的脚本，用来完成一些额外的事情。
而我们在日常git提交信息的规范中，一般常用的两个阶段是： pre-commit 和 commit-msg

pre-commit：在代码提交之前执行，可处理代码格式规范等。
commit-msg：处理代码提交的message信息，规范commit信息。

除此以外，git hooks 还有多个阶段，可以在需要的时候启用，如以下这些：

pre-receive：从本地版本完成一个推送后
prepare-commit-msg：信息准备完成后但编辑尚未启动
pre-push：push 之前执行
post-update：在工作区更新完成后执行
pre-rebase：在rebase操作之前执行

husky 使用

项目中直接安装： pnpm install husky -D

初始化 husky 配置

pnpm husky install
执行此命令后，会在当前目录下生成 .husky 目录，用于放置一些 husky hooks

配置自动初始化 husky配置

为了保证其他人下载项目代码以后，自动启用hook package.json文件中加入：

"scripts": { 
    "prepare": "npx husky install" 
}

当执行npm i 时会自动触发 perpare

ps: 自己首次在项目中集成时，可以先手动执行一下 npm run prepare 生成.husky配置。

添加自定义的git hook脚本

husky 安装完成，并配置好后，我们就可以进行 git hooks 的设置。

添加pre-commit脚本

项目根目录下使用指令生成：

npx husky add .husky/pre-commit "npx lint-staged --allow-empty"

执行后 .husky 目录下生成一个pre-commit的脚本，此脚本在git commit之前，就会被触发，也就是执行 npx lint-staged --allow-empty这行代码。

git commit 之前触发 lint-staged，具体的 lint-staged 我们后面配置在 package.json 中（下面会讲到）

这样自动执行 eslint 检查功能，并且后在校验失败时自动退出，这样可以确保本地的代码已经通过检查才能 push 到远程。

添加commit-msg脚本

git commit 时可以触发 commitlint 工具来检查 commit message，但是这里没有使用 commitlint工具，而是自定义了一个脚本。

根目录使用指令创建commit-msg文件

npx husky add .husky/commit-msg 'node ./.husky/script/verifyCommitMsg.mjs'

编写自定义commit规范在.husky目录下创建如下目录文件/script/verifyCommitMsg.mjs，并写入

import fs from 'fs'
const msgPath = '.git/COMMIT_EDITMSG'
const msg = fs.readFileSync(msgPath, 'utf-8').trim()
if (!msg.startsWith('Merge branch')) {
  const commitRE =
    /^(v\d+\.\d+\.\d+(-(alpha|beta|rc.\d+))?)|((revert: )?(feat|fix|docs|refactor|chore|style|test|revert)(\(.+\))?!?: .{1,50})/
  if (!commitRE.test(msg)) {
    console.error(
      `请使用正确的格式提交 commits. 例如:\n` +
      `feat(compiler): 增加了 commit 参数\n` +
      `fix(button): 修复 xxx 问题`
    )
    process.exit(1)
  }
}

lint-staged是什么？

lint-staged 是一个专门用于在通过 git 提交代码之前，对暂存区的代码执行一系列的格式化操作的工具。

当 lint-staged 配合 git hooks 使用时，可以在 git 提交前的 hook 中加入 lint-staged 命令，这样就能在提交代码之前，对即将提交的代码进行格式化，符合规范后就可以提交代码，否则进行拦截。这样就进一步保证我们的代码规范。

lint-stage使用

在项目根目录中安装： pnpm install lint-staged -D

package.json中配置

"scripts": { 
   "lint-staged": {
    "*.{ts,tsx,js,jsx,vue}": [
      "prettier --write",
      "eslint --fix"
    ],
    "*.{css,less,vue}": [
      "prettier --write"
    ]
  }
}