前言

在我们的Vue项目日常开发过程中，通常都会使用git（分布式版本控制工具）去管理我们的项目，便于多人随时随地进行协同工作。

我们需要向代码库中通过git commit -m 'xxx'提交代码，提交的message应该尽量的清晰简洁，能清楚地看懂本次提交的内容。

此文我们将重点介绍gitHooks钩子代码提交前的检查(pre-commit)和检测commit message是否符合规范(commit-msg)，来帮助我们更优雅地去提交我们的代码！

gitHooks钩子

简介

git hooks是一些自定义的脚本，用于控制git工作的流程，分为客户端钩子和服务端钩子。

客户端钩子：pre-commit、prepare-commit-msg、commit-msg、post-commit等，主要用于控制客户端git的提交工作流。
服务端钩子：pre-receive、post-receive、update，主要在服务端接收提交对象时、推送到服务器之前调用。

git hooks被存储在Git目录下的.hooks子目录中，即绝大部分项目中的.git/hooks。

当你用git init初始化一个新版本库时，Git 默认会在这个目录中放置一些示例脚本，进入.git/hooks后会看到一些hooks的官方示例，他们都是以.sample结尾的文件名。

注意这些以.sample结尾的示例脚本默认是不会执行的，只有重命名后去掉后缀后才会生效。

git init后生成的示例脚本，如下图

vue项目添加gitHooks钩子

参考：

vue-cli安装yorkie，方便指定gitHooks

使用vue-cli创建的项目，@vue/cli-service 也会安装 yorkieyorkie，它会让你在 package.json 的 gitHooks 字段中方便地指定 Git hook：

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
   "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}
复制代码

lint-staged介绍

参考：

在代码提交之前，进行代码规则检查能够确保进入git库的代码都是符合代码规则的。但是整个项目上运行lint速度会很慢，lint-staged能够让lint只检测暂存区的文件，所以速度很快。

项目中安装lint-staged

npm install lint-staged --save-dev
复制代码

如上vue-cli示例配置，git commit时触发pre-commit钩子，运行lint-staged命令，对*.js,*.vue执行vue-cli-service lint命令。

常用gitHooks钩子

pre-commit

介绍

在键入提交信息前运行(git add 之后，执行git commit时执行)。它用于检查即将提交的快照，例如，检查是否有所遗漏，确保测试运行，以及核查代码。如果该钩子以非零值退出，Git 将放弃此次提交，不过你可以用git commit --no-verify来绕过这个环节。你可以利用该钩子，来检查代码风格是否一致（运行类似 lint 的程序）、尾随空白字符是否存在（自带的钩子就是这么做的），或新方法的文档是否适当。

使用

{
  "gitHooks": {
    "pre-commit": "lint-staged"
  },
   "lint-staged": {
    "*.{js,vue}": [
      "vue-cli-service lint",
      "git add"
    ]
  }
}
复制代码

commit-msg

介绍

钩子接收一个参数，此参数即上文提到的，存有当前提交信息的临时文件的路径。如果该钩子脚本以非零值退出，Git 将放弃提交，因此，可以用来在提交通过前验证项目状态或提交信息。

使用

在package.json文件中加入gitHooks commit-msg钩子进行提交message的校验。

"gitHooks": {
    "commit-msg": "node build/verify-commit-msg.js"
}
复制代码

verify-commit-msg.js

const chalk = require("chalk");
const msgPath = process.env.GIT_PARAMS;
const msg = require("fs")
    .readFileSync(msgPath, "utf-8")
    .trim();
const commitRE = /^(build|chore|ci|docs|feat|fix|wip|perf|refactor|revert|style|test|temp|)(\(.+\))?: .{1,50}/;
// 根据正则表达式校验提交的message是否符合团队规范
if (!(commitRE.test(msg) || msg.indexOf("Merge") === 0)) {
    console.error(
        `  ${chalk.bgRed.white(" ERROR ")}
  [${chalk.red(msg)}] 是 ${chalk.red("无效的提交消息格式")}
  ${chalk.red("自动生成更新日志需要正确的提交消息格式 例如:")}

  ${chalk.green("issue-1 feat(模块): 预发布环境增加 A 模块")}
  ${chalk.green("issue-2 fix(文案): 修复错误文案")}`
    );
    // 以非0值退出，放弃提交
    process.exit(1);
}
复制代码