使用 husky 配置git hooks 提交前校验

前言

有时候我们会希望让开发者们在提交之前，按照我们的要求处理好代码问题，例如：执行 eslint 代码，错误就不能提交，或提醒开发者执行某些操作，这时就需要一个的 git hooks插件了

安装

js 复制代码

//使用npm yarn pnpm 都行
pnpm add husky -D

配置

然后设置 script 预执行脚本 prepare，在 install 三方库的时候会执行配置的指令，设置为 husky init

js 复制代码

"prepare": "husky init"

上面配置完毕后，直接 pnpm install 一下即可（yarn都行），也可以手动执行 pnpm prepare，当这个指令完成后，我们的 prepare 指令会发生改变，init消失了，也就会不初始化

js 复制代码

"prepare": "husky init"
//执行完成之后变成
"prepare": "husky"

npx husky init 会生成下面目录情况，比起 npx husky 会额外覆盖生成一个 pre-commit 文件，这个 pre-commit文件就是我们编写钩子脚本的地方，所以脚本才会将我们的 init 去掉，为了就是避免后续执行 prepare指令时，清理掉我们的脚本

ps：简单来说，设置好 "prepare": "husky init"，后并执行，只需要担心.pre-commit文件有没有上传到我们的仓库即可，保证其他人也可以用到该指令(其他人运行 pnpm install 或者直接运行 pnpm prepare也可以生成上面的_目录的husky基础文件)

设置 pre-commit 脚本

一般使用脚本的时候需要 chmod +x 我们的文件路径，这里是其他脚本执行的，可以直接运行，直接写我们的脚本就行了，记得明确使用sh（husky 这样使用的，兼容好），例如sh的： #!/usr/bin/env sh

js 复制代码

#!/usr/bin/env sh

echo "执行我们的脚本"

# 下面两个是我们的 eslint prettier的执行指令，配置在script中
npm run lint
npm run format

echo "执行完毕了我们脚本"

这样就可以完成我们的脚本指令了，如果有错误，就会提交失败

js 复制代码

//lint format 实际上就是这些东西
"lint": "eslint . --fix",
"format": "prettier --write src/",

sourcetree的问题

有人说终端用着挺好，sourcetree工具一用就完蛋咋办呢，他告诉我们npm不识别，配置有时候也不行(我也没配置成功，可能跟电脑环境有问题，乱配置出问题了)

除了配置问题，我们可以让开发者每次提交前自己养成执行lint的习惯，可以给 lint 指令后面添加一个执行成功后的标记，执行成功后就会生成校验成功后的文件，要是没执行sourcetree提交就会有警告

js 复制代码

"lint": "eslint . --fix && echo \"1\" >> .husky/check"

pre-commit 中查看是有有校验过的痕迹，有的话就不拦截，并且删除本次校验痕迹😂

js 复制代码

#!/usr/bin/env sh

if [ -e "$(dirname "$0")/check" ]
then
    echo 'lint已校验!'
	rm -f $(dirname "$0")/check
	exit 0
else
    echo 'lint未校验，请使用 npm run lint校验!'
	exit 1
fi

当然这只是一种方案，可以设置复杂一些，熟悉流程的人，可以直接绕过，并且也是可以直接使用命令忽略，或者 sourcetree 输入框右上角提交选项，直接忽略钩子就行了

js 复制代码

//通过指令直接忽略钩子
git commit --no-verify -m "提交信息"

最后

这只是一种约束手段，想绕过规则的人，怎么都能绕过，根本没辙，具体还是要看开发者自身的素质了，这些约束也许能够减少我们的代码质量问题🤣