前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >关于 git hooks 的库 husky 源码竟如此简单,你也可以写一个!

关于 git hooks 的库 husky 源码竟如此简单,你也可以写一个!

作者头像
山月
发布2021-11-10 16:37:07
发布2021-11-10 16:37:07
1.2K00
代码可运行
举报
运行总次数:0
代码可运行

git hooks 是前端项目在本地通用的质量保障手段。

npm script hook 也可对前端工程做质量加强,可见往日文章。

它在 git commitgit push 等 git 操作之前与之后可设置自动执行的脚本,被称为 git hooks 脚本。

代码在提交之前 (pre-commit hook),可做以下诸多校验,如未通过检验,则无法成功提交。

  • pritter: html、css、js、md、yaml 等代码格式化校验
  • eslint: 代码质量规范检测
  • commit message lint: 结构化语义化的 Commit 信息,可参考 Conventional Commits 长按识别二维码查看原文 标题:Conventional Commits

  • test

Git Hooks

在每一个使用 git 进行版本管理的仓库,都有一个目录 .git/hooks,包含 commit 各个阶段 hook 的脚本。

官方文档详见: githooks 长按识别二维码查看原文 标题:githooks

代码语言:javascript
代码运行次数:0
运行
复制
$ ls -lah .git/hooks
applypatch-msg.sample     pre-merge-commit.sample
commit-msg.sample         pre-push.sample
fsmonitor-watchman.sample pre-rebase.sample
post-update.sample        pre-receive.sample
pre-applypatch.sample     prepare-commit-msg.sample
pre-commit.sample         update.sample
  • pre-commit: git commit 之前触发
  • pre-push: git push 之前触发

在 git 2.9 中引入了 core.hooksPath,可手动配置 git hooks 所在的目录。

代码语言:javascript
代码运行次数:0
运行
复制
# 可通过命令行配置 core.hooksPath
$ git config 'core.hooksPath' .husky

# 也可通过写入文件配置 core.hooksPath
$ cat .git/config
[core]
  ignorecase = true
  precomposeunicode = true
  hooksPath = .husky

Git Hooks 初试

编辑 .git/hooks/pre-commit,设定以下脚本,在每次提交之前输出 ok

代码语言:javascript
代码运行次数:0
运行
复制
#!/bin/sh

echo ok

并设置该脚本为可执行权限

代码语言:javascript
代码运行次数:0
运行
复制
$ chmod 777 .git/hooks/pre-commit

提交一次,看看结果如何吧。在第一行确实有一个 ok,测试成功。

代码语言:javascript
代码运行次数:0
运行
复制
$ git commit -m 'test'
ok
[master 24d8f91] update
 Date: Wed Nov 3 11:39:50 2021 +0800
 1 file changed, 2 insertions(+), 1 deletion(-)

「将 pre-commit 脚本中的命令改为 npm scripts,即可实现前端工程化的效果。」

在每次提交之前自动校验代码风格:

代码语言:javascript
代码运行次数:0
运行
复制
#!/bin/sh

npm run lint

跳过 Git Hooks

由于 git hooks 是在客户端进行的校验,在客户端禁掉也是非常简单的。

代码语言:javascript
代码运行次数:0
运行
复制
$ git commit --no-verify

# 或者使用它的缩写
$ git commit -n

Husky 是如何工作的?

husky

长按识别二维码查看原文

标题:husky

不同版本的 husky 工作原理略有不同,本文讲述 husky 6+ 的工作原理。

由于相邻版本的 husky 变更较大 (husky6 为分界线),如果你们项目中 husky 配置有问题,先确认 husky 版本号,再定位问题。

husky 做了两件事(需要 husky install 手动完成):

  1. 创建 ~/.husky 目录
  2. 设置 ~/.husky 目录为 git hooks 目录

而对于使用者而言,需要在 ~/.husky 目录下「手动创建 hook 脚本」。

代码语言:javascript
代码运行次数:0
运行
复制
# 手动创建 pre-commit hook
$ vim .husky/pre-commit

pre-commit 中进行代码风格校验

代码语言:javascript
代码运行次数:0
运行
复制
#!/bin/sh

npm run lint
npm run test

「此时,你有疑惑,husky 这么简单,这事儿我也能干!」

是了,确实如此。husky 的源码十分简单,建议阅读。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2021-11-03,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 全栈成长之路 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • Git Hooks
  • Git Hooks 初试
  • 跳过 Git Hooks
  • Husky 是如何工作的?
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档