前端优化之路:git commit 校验拦截

简介: 前面在git分支规范那篇文章里,介绍了commit提交规范,但是想要做到高效落地执行,就需要做些别的功课。

【前言】

前面在git分支规范那篇文章里,介绍了commit提交规范,如下图

1821793-20231207104109626-907813171.png

但是想要做到高效落地执行,就需要做些别的功课,先展示下成果图

1821793-20231207104131623-776421334.png

没错,对不符合规范的commit进行了拦截,符合才可以成功提交。

【前期准备】

需要了解git hooks,它是git的钩子,就像vue拥有自己的钩子一样。

官方文档:https://git-scm.com/docs/githooks

本次优化中,只需要使用 commit-msg 钩子,它不仅可以实现 commit拦截,还能实现merge拦截。

1821793-20231207104504032-1406238908.png

项目安装 husky,建议稳定版本4.3.8

【项目配置】

在项目package.json中,与scripts同级层配置钩子,npm run xxx,xxx为自定义的脚本执行命令

1821793-20231207104619730-606860797.png

在scripts中配置脚本命令。xxx 为自定义的脚本名,会使node打开并执行指定目录下的js脚本文件,所以node后跟着的是自定义的脚本存放地址。

1821793-20231207104631523-1822102165.png

【自定义脚本】

在上述脚本执行路径创建commit-msg.js,文件名自定义,对应上面的路径就行。

先引入fs工具包,不用安装,它是node的工具包。

1821793-20231207104700819-1165442668.png

自定义提交类型(type)

1821793-20231207104725384-1950751329.png

为了提示信息能够醒目,自定义颜色(如果无需醒目,这步可省略)

1821793-20231207104742022-1723101296.png

自定义基本提示语

1821793-20231207104755969-1290638451.png

获取commit相关对象

1821793-20231207104809208-606733170.png

对三种情况进行校验,提示并拦截

1821793-20231207104825147-1421981631.png

另外,还可配置merge的拦截

1821793-20231207104840741-274418618.png

到这里,就配置完成了,达到了预期效果。

相关文章
|
10月前
|
运维 前端开发 JavaScript
前端埋点校验工具:数据驱动的最后一道防线
数据埋点是企业决策的关键基础,但常面临覆盖率低、数据不准和故障难排查三大难题。本文深入剖析了这些问题的成因与影响,并提出“三维校验矩阵”解决方案:提升覆盖率至99.8%、降低错误率至0.3%、提速故障定位5倍。同时对比Split.io、Tealium、Sentry、板栗看板等工具优劣,为企业选型提供参考。迈向高质量数据治理,从精准埋点开始。
|
10月前
|
API 开发工具 git
使用git pull遇到Automatic merge failed; fix conflicts and then commit the result.解决方案卓伊凡
使用git pull遇到Automatic merge failed; fix conflicts and then commit the result.解决方案卓伊凡
600 0
使用git pull遇到Automatic merge failed; fix conflicts and then commit the result.解决方案卓伊凡
|
11月前
|
存储 人工智能 缓存
Git Commit规范:为什么有些公司要求变更行数限制?·优雅草卓伊凡
Git Commit规范:为什么有些公司要求变更行数限制?·优雅草卓伊凡
464 3
Git Commit规范:为什么有些公司要求变更行数限制?·优雅草卓伊凡
|
10月前
|
开发工具 git
使用Git下载指定版本或指定commit
使用Git下载指定版本或指定commit
|
人工智能 前端开发 Java
用git rebase命令合并开发阶段中多条commit提交记录
通过 `git rebase`,可以合并多个提交记录,使开发历史更简洁清晰。操作分为 6 步:查看提交历史 (`git log --oneline`)、设置需合并的提交数 (`git rebase -i HEAD~N`)、修改动作标识为 `s`(squash)、保存退出编辑、调整提交信息、强制推送至远程仓库 (`git push -f`)。此方法适合清理本地无关提交,但若有团队协作或冲突风险,需谨慎使用以避免问题。
2483 60
|
12月前
|
JavaScript 前端开发 持续交付
实际工作中 Git Commit 代码提交规范是什么样的?
实际工作中 Git Commit 代码提交规范是什么样的?
1131 7
|
前端开发 开发工具 git
Git报错处理:解决git commit时的lint-staged错误提示。
极好的,你对Git的lint-staged出了一个令人头疼的问题。让我们一起钻研一下,找到一种方法来解决一切。 首先,我们要确定你是在做什么操作时候遇到了问题。lint-staged通常在我们运行 git commit 时启动,它做的工作是在你提交之前运行一些指定的命令检查你的代码。当lint-staged报错,多半是因为检查未通过,或者它试图运行的命令存在问题。 让我们以一种图解的方式来描绘一下这个过程,就像canvas上的画面那样。git正在温柔的将你的修改捆绑起来,准备提交。突然,lint-staged走了出来,并开始盘问着Git,寻找可能的错误。如果lint-staged找到了什么
1197 24
|
前端开发 持续交付 开发工具
理解前端开发中的 Git - Rebase
Git Rebase 是前端开发中常用的一种版本控制操作,用于将一个分支的更改整合到另一个分支。与合并(Merge)不同,Rebase 可以使提交历史更加线性整洁,有助于保持代码库的清晰和可维护性。通过 Rebase,开发者可以将特性分支的改动应用到主分支上,同时保留或重写提交记录。
|
前端开发 开发工具 git
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
如何清理 docker 磁盘空间+修改 Gitea 服务器的 Webhook 设置+前端一些好学好用的代码规范-git hook+husky + commitlint
366 5
|
开发工具 git
GIT:如何合并已commit的信息并进行push操作
通过上述步骤,您可以有效地合并已提交的信息,并保持项目的提交历史整洁。记得在执行这些操作之前备份当前工作状态,以防万一。这样的做法不仅有助于项目维护,也能提升团队协作的效率。
1206 5

热门文章

最新文章

  • 1
    前端如何存储数据:Cookie、LocalStorage 与 SessionStorage 全面解析
    1093
  • 2
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(九):强势分析Animation动画各类参数;从播放时间、播放方式、播放次数、播放方向、播放状态等多个方面,完全了解CSS3 Animation
    480
  • 3
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(八):学习transition过渡属性;本文学习property模拟、duration过渡时间指定、delay时间延迟 等多个参数
    368
  • 4
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(七):学习ransform属性;本文学习 rotate旋转、scale缩放、skew扭曲、tanslate移动、matrix矩阵 多个参数
    354
  • 5
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(六):全方面分析css的Flex布局,从纵、横两个坐标开始进行居中、两端等元素分布模式;刨析元素间隔、排序模式等
    473
  • 6
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(五):背景属性;float浮动和position定位;详细分析相对、绝对、固定三种定位方式;使用浮动并清除浮动副作用
    640
  • 7
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(四):元素盒子模型;详细分析边框属性、盒子外边距
    1064
  • 8
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(三):元素继承关系、层叠样式规则、字体属性、文本属性;针对字体和文本作样式修改
    255
  • 9
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(二):CSS伪类:UI伪类、结构化伪类;通过伪类获得子元素的第n个元素;创建一个伪元素展示在页面中;获得最后一个元素;处理聚焦元素的样式
    899
  • 10
    【CSS】前端三大件之一,如何学好?从基本用法开始吧!(一):CSS发展史;CSS样式表的引入;CSS选择器使用,附带案例介绍
    435