使用husky实现git提交规范和代码格式规范

团队协作开发中，需要将一些规范强制执行，一般都是通过husky来使用git的hooks来验证信息，不符合规则的将被阻止提交

husky

npm i -D husky

首次安装husky包后需执行npx husky install，会在项目根目录生成一个.husky 目录，后续生成 hook 也会放在该文件夹中。

然后在 package.json 文件中新增一条 scirpt 命令：

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

这样别的开发人员使用该项目时 install 之后会自动安装 husky。

通过npx husky add <file> [cmd]指令来增加一条 hook，比如新增一个提交之前执行的 hook：

npx husky add .husky/pre-commit 'echo '即将进入commit阶段...'

执行完毕后，会在.husky 文件中生成一个 pre-commit 的 shell 文件：

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"

echo '即将进入commit阶段...'

npm i -D lint-staged

lint-staged 只对 git 暂存区的文件运行 linter，如果不适用 lint-staged，会对整个项目上运行 linter ，这个过程可能很慢并且没有意义。在 package.json 文件中加入：

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

数组中的 shell 命令会依次执行，因为eslint --fix和prettier --write可能会产生新的文件，所以需要git add .加入暂存区。

创建hook：npx husky add .husky/pre-commit 'npx lint-staged
执行完成后，再次 git commmit 时会先执行lint-staged中的脚本，如果发生错误将会阻止 commit。

npm i -D @commitlint/cli @commitlint/config-conventional

创建hook：npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"'
执行完成后，再次 git commmit 时会对 commit message 信息进行验证，符合相关规范才会通过。

手动输入 commit message 难免会出错，可以利用相关工具来自动生成 commit message。

安装依赖：npm i -D commitizen cz-conventional-changelog

commitizen 的作用主要是为了生成标准的 commit message，符合Angular 规范。一个标准的 commit message 应该包含三部分：Header、Body、Footer，Header 必须，其余两个可选。

<type>(<scope>): <subject>
// 空一行
<body>
// 空一行
<footer>

在 package.json 文件中加入：

"config": {
  "commitizen": {
    "path": "cz-conventional-changelog"
  }
},

即可通过 npx git-cz 命令来生成 message，可以在 package.json 中添加一条 script：

"scripts": {
  "commit": "git-cz",
}

后续通过 npm run commit 命令来代替 git commit。