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

前言

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

它就是husky地址

安装

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 "提交信息"

最后

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

相关推荐
你的人类朋友2 小时前
【Node&Vue】JS是编译型语言还是解释型语言?
javascript·node.js·编程语言
烛阴2 小时前
TypeScript高手密技:解密类型断言、非空断言与 `const` 断言
前端·javascript·typescript
样子20183 小时前
Uniapp 之renderjs解决swiper+多个video卡顿问题
前端·javascript·css·uni-app·html
黑客飓风4 小时前
JavaScript 性能优化实战大纲
前端·javascript·性能优化
YeeWang6 小时前
🎉 Eficy 让你的 Cherry Studio 直接生成可预览的 React 页面
前端·javascript
gnip6 小时前
Jenkins部署前端项目实战方案
前端·javascript·架构
Orange3015116 小时前
《深入源码理解webpack构建流程》
前端·javascript·webpack·typescript·node.js·es6
李明卫杭州8 小时前
CSS `clamp()` 函数详解
javascript
奶丝兔蜜柚8 小时前
栈溢出优化
javascript
小高0078 小时前
📈前端图片压缩实战:体积直降 80%,LCP 提升 2 倍
前端·javascript·面试