从commit校验失效问题探究husky原理

news2024/10/12 3:01:52

一、背景

之前创建的项目，发现代码 commit 提交的时候没有了任何校验，具体表现：

  • 一是 feat fix 等主题格式校验没有了
  • 二是代码 lint 不通过也能提交

尝试解决这个问题，并深入了解husky的实现原理，将相关的一些知识点分享下。

二、lint配套工具

完整的一套代码规范工具，可能包含：husky + lint-staged + eslint + stylelint + prettier 等

1. git 钩子：

git 本身提供多个生命周期钩子，常见的例如 pre-commit、commit-msg、pre-push 等。

pre-commit 钩子：

在 git commit 命令执行之前触发，配合指定的脚本命令可用来执行代码 lint 校验、代码格式化、跑测试用例等任务，以确保在提交代码之前达到一定的质量标准。

commit-msg 钩子：

是在 git 编辑提交信息之后、提交之前触发，可用于 commit 信息的格式校验。

2. husky：

husky 是一个用来简化 Git 钩子管理的工具。它可以帮助你在 Git 的生命周期事件（如 pre-commit、pre-push 等）中轻松地添加脚本，并且与常用的 js 工具和任务管理器（npm、yarn）集成良好。

3. lint-staged：

lint-staged 用于结合 husky 和 pre-commit，能做到只对 Git 暂存区（git add . 之后）的文件 运行校验任务，从而实现只处理改动的文件，提升commit效率，在大型项目上效果更加明显。

4. eslint：

eslint 是用于对 js 和 jsx 做代码校验的工具，通过静态分析代码来快速地发现和修复一些代码语法问题，帮助前端开发规范代码、提高效率。

5. stylelint：

stylelint 是用于对 css 样式 做代码校验的工具，同上述 eslint 类似，帮助前端开发在编写 css 及 less等预处理器代码时避免犯错，提升开发效率。

6. prettier：

prettier 是目前最常用的前端代码格式化工具，支持多项规则配置，帮助统一代码风格。适当的配置后可以与上述 eslint 和 stylelint 兼容。

三、husky原理

疑问：

  • git 是全局命令，而 husky 只是项目里引入的一个插件，它是怎么和全局的 git 命令产生联系的？
  • 我们通过 git commit -m “xxx” 提交代码时，husky 做了什么？

（以下以 mac os 下 husky v9 版本示例）

1. husky初始化：

1）配置方式：
  • 一般会在项目 package.json 的 scripts 里配置下 prepare 命令（“prepare”: “husky”），用于执行 husky 的初始化。prepare 是 npm 的钩子，在项目 npm i 时会自动执行 npm run prepare。
2）解析husky命令：
  • 执行 husky 命令 实际就是执行 node_modules/.bin/husky 文件，里面没啥东西，主要是三块，自动修改 husky init 命令、错误命令输出处理、执行 index.mjs，显然核心代码在 index.mjs 里。
  • 找到 node_modules/husky/index.mjs 文件，解析下里面的核心代码动作：
    • 执行命令 git config core.hooksPath .husky/_ ，创建目录 .husky/_
    • .husky/_ 里写入 .gitignore 内容为 *
    • 复制 node_modules/husky/husky 文件内容到 .husky/_ 的 h 文件
    • 遍历 l 数组，即支持的所有 git 钩子，复制到 .husky/_ 下同名文件，内容统一为 . “${0%/*}/h”
    • .husky/_ 里创建文件 husky.sh，内容为空。
3）解析说明：

  • 一般来说项目都是用 git 来作为代码版本控制工具，每个项目在 git init 初始化后，根目录都会生成一个 .git 隐藏文件夹，里面是 git 的配置文件 及 代码记录信息。

  • husky 在执行初始化命令后，会自动修改 git 的 hooks 目录，具体表现为在项目 .git 文件夹下的 config 文件里新增了 core.hooksPath 配置，指向项目的 .husky/_ 目录，这样执行 git commit 命令时就会自动寻找项目 .husky/_ 下的钩子文件。

    • 未指定时，默认的 hooks 目录是 .git/hooks
    • 在这里插入图片描述

  • 然后在 .husky/_ 目录下自动生成 git 钩子文件 和 一些执行脚本。
    *

2. husky执行流程：

（以项目 pre-commit 钩子为例）

1）开始运行 commit
  • 修改项目文件，运行 git add .
  • 运行 git commit -m “xxx”，开始流程。
2）读取 hooks 目录配置
  • git工具会去项目的 .git 目录 config 文件里读取 core.hooksPath 目录配置，指向了.husky/_ 目录
3）寻找 pre-commit 业务脚本
  • 首先在 .husky/_ 目录下找到 pre-commit 钩子文件，即 .husky//pre-commit，并执行，实际执行是指向了同目录下的 h 文件，即 .husky//h
    • ${0%/*}：0表示当前执行的脚本路径，%/* 表示从字符串末尾匹配 /*，保留前面部分
  • 执行 h 文件，里面基本是统一读取 husky 配置 以及 做了错误校验，然后实际执行是指向了上一级目录下的同名文件，即 .husky/pre-commit，这个就是我们要寻找的业务侧钩子脚本。
    • ${0##*/}：##/* 表示最大化匹配 */，保留后面部分
4）执行 pre-commit 脚本
  • 执行 .husky/pre-commit 文件，这个就是真正的业务侧钩子脚本，里面内容是就是跑 lint-staged。
5）执行 lint-staged 脚本
  • 运行 lint-staged 命令时，首先是要读取 lint-staged 配置，在 .lintstagedrc 文件里（部分项目可能在 package.json 里配置的），里面就是对不同类型的文件跑不同的命令
    • 在这里插入图片描述
6）执行成功 or 失败
  • 如果命令执行成功，pre-commit 钩子就顺利执行完成了，接着会往下走流程，走 commit-msg 钩子，做 提交信息的格式校验，大致流程类似。
  • 如果执行异常，钩子会中断，不会往下走，commit 失败。如异常命令有抛出信息会在命令行输出。

四、问题解决：

回到最初提到的 bigfish 项目 commit 失效问题。

1. 问题原因：

在代码提交时有warning提示，翻译下来就是 .husky 文件夹下的两个文件是不可执行的，

其实就是 .husky 里的这两个钩子文件没有被赋予可执行权限。

  • 如果这俩文件是在Windows下创建后上传的，在mac下把项目拉下来后就不可执行了。

2. 解决方式：

方式一：

  • 在项目根目录下运行命令，给钩子文件手动赋予可执行权限，
    • chmod +x .husky/commit-msg .husky/pre-commit

方式二：（推荐）

  • 升级 husky 版本到 v9，修改 package.json 里的 preare 命令为 “husky”，然后运行 npm run prepare
    • husky v9 版本更新日志里有一项变更，通过自动设置正确的文件权限，解决了 husky v8 中的这个权限问题。

3. 全局format：

解决完后，建议执行一次 npm run format 命令，即 prettier，对全局做一次代码格式化。
因为每次 commit 校验的时候项目虽然会自动执行 format，但只对修改的文件执行，建议提前对项目所有文件 format 处理下。

五、IDE自带git工具问题：

可能有些人会遇到使用 vscode 或 在线编辑器 等IDE时，自带的 git 管理工具无法 commit，执行时会立即报错。

1. 问题原因：

可能你使用了 nvm 等 node 管理工具，使用 git 工具可能会无法 commit，原因是执行 husky 命令时识别不出 node 环境，详见链接，需要补充环境配置。

2. 解决方式：

在 .husky/pre-commit 和 .husky/commit-msg 文件内容里的 npx执行命令 之前，添加环境配置代码：

待添加的环境配置代码内容：

  • 方式一：（个人搜寻并组合出来的）
if [ -s "$HOME/.nvm/nvm.sh" ]; then
  # First load nvm and provide access to the nvm command.
  export NVM_DIR="$HOME/.nvm/nvm.sh"
  . "$(dirname $NVM_DIR)/nvm.sh"

  # Use the nvm ls command to detect the version being used.
  export NVM_DIR="$HOME/.nvm"
  a=$(nvm ls | grep 'node')
  b=${a#*(-> }
  v=${b%%[)| ]*}

  # Export the current version in your path for husky to find.
  export PATH="$NVM_DIR/versions/node/$v/bin:$PATH"
fi
  • 方式二：（官方文档里的，待验证）
export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # 加载 nvm

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2206676.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Excalidraw：在线手绘风格白板、图表绘制工具

Excalidraw：在线手绘风格白板、图表绘制工具

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法 Excalidraw 是一个开源的虚拟白板，用于绘制手绘风格的图表、线框图等。它支持多人实时协作，并使用端到端加密，确保…
阅读更多...
钢铁行业3大改造方向 智能仪器亦起到重要作用！

钢铁行业3大改造方向 智能仪器亦起到重要作用！

钢铁企业新的改造方向主要包括超低排放改造、能效改造和数字化转型。‌这些政策旨在提升钢铁行业的环保水平、能效和智能化水平。其中智能仪器的加入，为钢铁企业数字化智能化自动化改造带来新的活力。 具体来说，到2027年，钢铁行业将实现以下目…
阅读更多...
《Linux从小白到高手》综合应用篇：详解Linux系统调优之深入理解Huge Pages和Transparent Huge Pages

《Linux从小白到高手》综合应用篇：详解Linux系统调优之深入理解Huge Pages和Transparent Huge Pages

本篇深入介绍Linux Huge Pages和Transparent Huge Pages. 我在前一篇博文（《Linux从小白到高手》综合应用篇：详解Linux系统调优之内存优化）中说过，很多人可能对大页内存（Huge Pages）和透明大页（…
阅读更多...
[spring]spring事务和事务传播机制

[spring]spring事务和事务传播机制

文章目录 一. 事务Spring中的事务实现编程式事务声明式事务TransactionalTransactional作用 Transactional详解1. rollbackFor2. 事务隔离级别mysql事务隔离级别Spring事务隔离级别 3. 事务传播机制什么是事务传播机制事务传播机制有哪些Spring事务传播机制使用REQUIRED(加入事…
阅读更多...
【翻译】自定义 Qt Designer 窗体

【翻译】自定义 Qt Designer 窗体

原文地址：Customizing Qt Widgets Designer Forms 【翻译】Qt Designer 最新中文手册文档（Qt6） Qt Designer设计窗体保存为一个UI文件时，一些窗体设定参数，比如栅格、默认布局的边距（margin）和间…
阅读更多...
【cpp】模板函数 模板类 特化 书写格式备忘

【cpp】模板函数 模板类 特化 书写格式备忘

outline 收集的关于使用 模板函数 模板类 特化 偏特化的笔记 用以快速回忆 模板类 普通使用 类内定义成员函数 #include <iostream> using namespace std;template <typename T> class MyContainer { private:T element;public:MyContainer(T elem) : element(…
阅读更多...
低代码可视化-uniapp商城首页小程序-代码生成器

低代码可视化-uniapp商城首页小程序-代码生成器

在设计一个小程序的首页时&#xff0c;包含轮播图、通知栏和商品列表这三个元素是非常常见且有效的布局方式。这样的设计既能够吸引用户的注意力&#xff0c;又能够高效地展示信息和商品。 轮播组件 小程序首页幻灯片通常位于小程序的顶部或显著位置&#xff0c;通过滑动屏幕可…
阅读更多...
selenium自动化测试之Junit

selenium自动化测试之Junit

1. 常用的注解 将junit的索引添加到pom文件&#xff1a; <!-- https://mvnrepository.com/artifact/org.junit.jupiter/junit-jupiter-api --><dependency><groupId>org.junit.jupiter</groupId><artifactId>junit-jupiter-api</artifactId&…
阅读更多...
看镭速如何解决半导体行业跨国传输大文件效率低的难题

看镭速如何解决半导体行业跨国传输大文件效率低的难题

随着全球经济的融合&#xff0c;半导体行业迎来了迅猛的发展&#xff0c;跨国合作变得司空见惯。相应地&#xff0c;跨国大文件传输的需求也在持续增长。不过&#xff0c;半导体行业在跨国传输大文件时&#xff0c;常常遇到效率不高和安全难以保障的问题。因此&#xff0c;半导…
阅读更多...
H3C IPsec+IKE 野蛮模式配置实验

H3C IPsec+IKE 野蛮模式配置实验

H3C IPsecIKE 野蛮模式配置实验 实验拓扑 ​​ 实验需求 按照图示配置 IP 地址&#xff0c;R3出接口自动获取公网IP地址在 R1 上配置默认路由连通公网在 R1 和 R3 上配置 IPsec VPN&#xff0c;使两端私网可以互相访问 实验步骤 按照图示配置 IP 地址&#xff0c;R3出接口…
阅读更多...
上传图片到github上，生成链接在Typora中使用（解决Typora的md文件在分享时的丢失问题）

上传图片到github上，生成链接在Typora中使用（解决Typora的md文件在分享时的丢失问题）

上传图片到github上，生成链接在Typora中使用（解决Typora的md文件在分享时的丢失问题） 在GitHub上从操作 创建一个 GitHub 仓库： 登录 GitHub，创建一个新的仓库来存储图片。 生成 GitHub 令牌： 在 GitHub 中，前往“Settings” > “Developer settings” > “Pers…
阅读更多...
Rpc框架开发——客户端框架设计

Rpc框架开发——客户端框架设计

目录 一、Requestor 二、RpcCaller 三、Publish_Subscribe 四、Registry-Discovery 五、Client 在客户端的模块划分中&#xff0c;基于以上理解的功能&#xff0c;可以划分出这么几个模块 Protocol&#xff1a;应用层通信协议模块 Network&#xff1a;网络通信模块 Disp…
阅读更多...
前端vue部署网站

前端vue部署网站

这里讲解一下前端vue框架部署网站&#xff0c;使用工具是 xshell 和 xftp &#xff08;大家去官网安装免费版的就行了&#xff09; 服务器 我使用的阿里云服务器&#xff0c;买的是 99 一年的&#xff0c;淘宝有新手9.9 一个月服务器。可以去用&#xff0c;学生的话是有免费三…
阅读更多...
进程状态|进程优先级

进程状态|进程优先级

目录 一、进程状态 1.什么是进程状态 2.进程状态都包含什么&#xff1f; 3.进程状态的查看 4.进程退出 &#xff08;1&#xff09;进程退出的步骤 &#xff08;2&#xff09;僵尸进程 &#xff08;3&#xff09;孤儿进程 二、进程优先级 1.进程优先级是什么&#xff…
阅读更多...
二分查找一＞0~n-1中缺失的数字(点名)

二分查找一＞0~n-1中缺失的数字(点名)

1.题目&#xff1a; 2.解析&#xff1a;方法一&#xff1a;用哈希表&#xff1a;记录存在的数字&#xff0c;找到哈希表为空的数字输出 Set<Integer> set new HashSet<>();for(int x : records) set.add(x);for(int i 0; i < set.size(); i){if(!set.contain…
阅读更多...
重新学习Mysql数据库3：Mysql存储引擎与数据存储原理

重新学习Mysql数据库3：Mysql存储引擎与数据存储原理

本文转自互联网 本系列文章将整理到我在GitHub上的《Java面试指南》仓库&#xff0c;更多精彩内容请到我的仓库里查看 https://github.com/h2pl/Java-Tutorial 喜欢的话麻烦点下Star哈 文章首发于我的个人博客&#xff1a; www.how2playlife.com 本文是微信公众号【Java技术江湖…
阅读更多...
STM32与QT实现串口传输结构体含源码

STM32与QT实现串口传输结构体含源码

文章目录 一. 关于数据传输的方式1.1 基本数据类型传输1.2 结构体传输 二. STM32与QT实现串口传输结构体实例2.1 下位机的实现2.2 上位机的实现2.3 演示Demo 三. 注意事项3.1 关于字节对齐问题3.2 关于大小端问题 一. 关于数据传输的方式 在日常开发过程中&#xff0c;我们时常…
阅读更多...
使用aloam跑hesai Pandar-XT32激光雷达数据

使用aloam跑hesai Pandar-XT32激光雷达数据

参考自利用aloam跑数据集_aloam数据集-CSDN博客 第一步&#xff1a;查看bag的信息 输入rosbag info来查看bag包的信息&#xff1a; joeyjoey-Legion-Y7000P-IRX9:~$ rosbag info /home/joey/Downloads/data2022/indoor/LiDAR_IMU.bag path: /home/joey/Downloads/da…
阅读更多...
Java_EE 多线程技术(Thread)

Java_EE 多线程技术(Thread)

多线程与并发编程 多线程介绍什么是程序&#xff1f;程序&#xff08;Program&#xff09;是一个静态的概念&#xff0c;一般对应于操作系统中的一个可执行文件。什么是进程?执行中的程序叫做进程(Process)&#xff0c;是一个动态的概念。其实进程就是一个在内存中独立运行的程…
阅读更多...
2025秋招倒计时---招联金融

2025秋招倒计时---招联金融

【投递方式】 直接扫下方二维码&#xff0c;或点击内推官网https://wecruit.hotjob.cn/SU61025e262f9d247b98e0a2c2/mc/position/campus&#xff0c;使用内推码 igcefb 投递&#xff09; 【招聘岗位】 后台开发 前端开发 数据开发 数据运营 算法开发 技术运维 软件测试 产品策…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023