现代前端工程化实践:Git、Husky、Commitlint与PNPM的协同作战

news/2024/7/22 14:13:39/文章来源:https://blog.csdn.net/pantouyuchiyu/article/details/139093094

引言

Git Husky 与 Commitlint 是两个在 Git 工作流程中非常实用的工具,它们可以帮助团队维护代码质量和提交规范。Husky 是一个 Git 钩子管理器,允许你在仓库级别方便地配置钩子脚本;而 Commitlint 则是用来规范 Git 提交信息的工具,确保每次提交都遵循一定的格式标准。下面是一个关于如何使用这两个工具的简明教程,以及如何进行基本配置。

使用 Husky 和 Commitlit 的版本

"husky": "^9.0.11",
"@commitlint/cli": "^19.3.0",
"@commitlint/config-conventional": "^19.2.2",

安装 Husky 和 Commitlint

首先,你需要在项目中安装 Husky 和 Commitlint,以及 Commitlint 的一个预设规则库(如 @commitlint/config-conventional)来定义提交信息的格式规范。

npm install --save-dev husky @commitlint/cli @commitlint/config-conventional

配置 Husky

接下来,配置 Husky 以便在 git commit 命令执行前自动运行 Commitlint 检查。

init 命令简化了项目中的 husky 设置。它会在 .husky/ 中创建 pre-commit 脚本,并更新 package.json 中的 prepare 脚本。随后可根据你的工作流进行修改。

pnpm exec husky init

执行后的效果如下:

package.json 文件中 script 新增一行脚本:

配置 Commitlint

Commitlint 需要一个配置文件来定义提交信息的规则。通常这个文件名为 commitlint.config.js 或 .commitlintrc.json,位于项目根目录。这里我们使用 JavaScript 配置文件作为示例:

// .commitlint.config.jsexport default {extends: ['@commitlint/config-conventional'],rules: {'type-enum': [2,'always',['bug',      // 此项特别针对bug号,用于向测试反馈bug列表的bug修改情况'feat',     // 新功能(feature)'fix',      // 修补bug'docs',     // 文档(documentation)'style',    // 格式(不影响代码运行的变动)'refactor', // 重构(即不是新增功能,也不是修改bug的代码变动)'test',     // 增加测试'chore',    // 构建过程或辅助工具的变动'revert',   // feat(pencil): add ‘graphiteWidth’ option (撤销之前的commit)'merge'     // 合并分支, 例如: merge(前端页面): feature-xxxx修改线程地址]]}
}

在这个配置中,我们继承了 @commitlint/config-conventional 的默认规则,并可以自定义一些规则来满足特定项目需求。

添加 commit-msg 钩子,提交时自动检测提交信息

在 .husky 目录下新建文件且没有后缀,名字是: commit-msg

pnpm dlx commitlint --edit $1# $1 表示传递的第一个参数

实践提交

现在,当你尝试执行 git commit 时,Husky 会触发 Commitlint 对你的提交信息进行检查。如果格式不正确,它会给出错误信息并要求你修改。

  • 正确的提交信息应该是这样的:
git commit -m "fix: 修复页面的样式问题"

其中,“fix”是提交类型的简短描述,冒号后紧跟空格和对本次提交的详细描述。

  • 错误的提交信息如下:
git commit -m "新增 husky commitlit"

不出意外的话,将会报如下错误,并且提交中断

> husky-vue3-template@0.0.0 format G:\wokespace\github\husky-vue3-template
> eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore.../packages/pnpm/store/v3/tmp/dlx-4288  | Progress: resolved 1, reused 0, downloaded 0, added 0
.../packages/pnpm/store/v3/tmp/dlx-4288  | Progress: resolved 114, reused 95, downloaded 0, added 0
.../packages/pnpm/store/v3/tmp/dlx-4288  | Progress: resolved 124, reused 124, downloaded 0, added 0
.../packages/pnpm/store/v3/tmp/dlx-4288  | +125 +++++++++++++
.../packages/pnpm/store/v3/tmp/dlx-4288  | Progress: resolved 125, reused 125, downloaded 0, added 29
.../packages/pnpm/store/v3/tmp/dlx-4288  | Progress: resolved 125, reused 125, downloaded 0, added 30
.../packages/pnpm/store/v3/tmp/dlx-4288  | Progress: resolved 125, reused 125, downloaded 0, added 115
.../packages/pnpm/store/v3/tmp/dlx-4288  | Progress: resolved 125, reused 125, downloaded 0, added 116
.../packages/pnpm/store/v3/tmp/dlx-4288  | Progress: resolved 125, reused 125, downloaded 0, added 125, done
⧗   input: 新增 husky commitlit
✖   subject may not be empty [subject-empty]
✖   type may not be empty [type-empty]✖   found 2 problems, 0 warnings
ⓘ   Get help: https://github.com/conventional-changelog/commitlint/#what-is-commitlint.......

总结

通过结合 Husky 和 Commitlint,你可以有效地提高代码仓库的管理效率,确保每个提交都遵循一致的格式和高质量标准。这不仅有利于团队成员之间的沟通,也有助于自动化工具更好地理解和处理提交历史。希望这篇教程能帮助你顺利地在项目中应用这两个强大的工具。

关于工作流工具的内容已经说完了,但是我还想说点别的,主要想说一下我们应该学习哪些技术才能让它更加保值。

在我看来,越偏向于业务的技术越不容易过时,为什么呢?需求在变,技术一直在变,业务也一直在迭代。前端技术的发展非常快,也涌现出很多的框架(例如 HTML4 到 HTML5 的升级,或者从jQuery 到前端三大框架的转变),但是总归就是两个字:效率。

作为开发者,我们需要保持好奇心和学习热情,不断探索新的技术,只有这样,我们才能在这个快速发展的时代中立于不败之地。介绍一款程序员都应该知道的软件JNPF快速开发平台,很多人都尝试用过它,它是功能的集大成者,任何信息化系统都可以基于它开发出来。

JNPF可以实现应用从创建、配置、开发、测试到发布、运维、升级等完整生命周期的管理。减少了传统应用程序的代码编写量,通过图形化、可视化的界面,以拖放组件的方式,即可快速生成应用程序的产品,大幅降低了开发企业管理类软件的难度。

当然,我更建议大家成为一个全栈,不要把自己的定位局限于前端。

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

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Bootstrap5

Bootstrap5-容器 容器是Bootstrap—个基本的构建块,它包含、填充和对齐给定设备或视口中的內容。 Bootstrap 需要一个容器元素来包裏网站的内容 我们可以使用以下两个容器类: .container 类用于固定宽度并支持响应式布局的容器。.container-fluid 类用…

左外连接和右外连接的区别?举例说明——以力扣sql 1378. 使用唯一标识码替换员工ID为例

左外连接(LEFT JOIN)和右外连接(RIGHT JOIN)的主要区别在于哪个表的所有行会保留在结果集中 1. 左外连接 (LEFT JOIN) 左外连接会返回左表中的所有行以及右表中符合连接条件的行。如果右表中没有匹配的行,结果集中右…

剖析【C++】——类与对象(上)超详解——小白篇

目录 1.面向过程和面向对象的初步认识 1.面向过程(Procedural Programming) 2.面向对象(Object-Oriented Programming) 概念: 特点: 总结 2.C 类的引入 1.从 C 语言的结构体到 C 的类 2.C 中的结构…

我的世界开服保姆级教程

前言 Minecraft开服教程 如果你要和朋友联机时,可以选择的方法有这样几种: 局域网联机:优点:简单方便,在MC客户端里自带。缺点:必须在同一局域网内。 有些工具会带有联机功能:优点:一…

【技术分享】Maven常用配置

一、Maven简介 (一)为什么使用 Maven 由于 Java 的生态非常丰富,无论你想实现什么功能,都能找到对应的工具类,这些工具类都是以 jar 包的形式出现的,例如 Spring,SpringMVC、MyBatis、数据库驱…

Autodl如何进行实例使用(同区)

一、首先找到之前保存的实例 二、点击更多然后选择克隆实例 三、选择是否要保存之前的数据盘 四、选择空余的GPU进行创建即可

LLaMa系列模型详解(原理介绍、代码解读):LLaMA 2

LLaMA 2 大型语言模型(LLMs)作为高度能力的人工智能助手,在需要跨多个领域专家知识的复杂推理任务中表现出巨大潜力,包括编程和创意写作等专业领域。它们通过直观的聊天界面与人类互动,这导致了快速和广泛的公众采用。…

Android Studio自带Profiler工具进行CPU资源及线程问题分析步骤

1、运行需要检测CPU资源问题与线程问题的程序 这里以“com.example.opengltest”程序为例。 2、点击Profiler按钮 3、点击SESIONS ""号按钮选择设备,选择对应设备下的应用或进程 4、双击CPU区块 5、选择Trace config选项,选择“Java/Kotli…

【LeetCode】力扣第 399 场周赛 优质数对的总数 II

文章目录 1. 优质数对的总数 II 1. 优质数对的总数 II 题目链接 🍎该题涉及的小技巧:🐥 🐧①一次可以统计这个数的 两个因子 但是要注意 25 5 * 5,这种情况 5 只能统计一次噢🆒 解题思路: &#x1f427…

前端项目使用docker编译发版和gitlab-cicd发版方式

项目目录 app/ ├── container/ │ ├── init.sh │ ├── nginx.conf.template ├── src/ ├── .gitlab-ci.yml └── deploy.sh └── Dockerfile └── Makefilecontainer目录是放nginx的配置文件,给nginx镜像使用 .gitlab-ci.yml和Makefile是c…

vue2的方法与监听

vue2的方法 不可以使用箭头函数 <template> <div><div>{{sum2()}}</div><button click"add">add</button> </div></template><script> export default {data(){return{name:"张三",num:20,num2:3…

kafka监控配置和告警配置——筑梦之路

kafka_exporter项目地址&#xff1a;https://github.com/danielqsj/kafka_exporter docker-compose部署kafka_exporter # docker-compose部署多个kafka_exporter&#xff0c;每个exporter对接一个kafka# cat docker-compose.ymlversion: 3.1 services:kafka-exporter-opslogs…

基于STM32实现智能空气净化系统

目录 引言环境准备智能空气净化系统基础代码示例&#xff1a;实现智能空气净化系统 空气质量传感器数据读取风扇和滤网控制显示系统用户输入和设置应用场景&#xff1a;家庭空气净化与健康管理问题解决方案与优化收尾与总结 1. 引言 本教程将详细介绍如何在STM32嵌入式系统中…

【三数之和】python,排序+双指针

暴力搜索3次方的时间复杂度&#xff0c;大抵超时 遇到不会先排序 排序双指针 上题解 照做 class Solution:def threeSum(self, nums: List[int]) -> List[List[int]]:res[]nlen(nums)#排序降低复杂度nums.sort()k0#留两个位置给双指针i,jfor k in range(n-2):if nums[k]…

【上】王树森《小红书推荐系统公开课》- 课程笔记(推荐系统基础、召回、排序)

写在前面 本文为王树森老师《小红书推荐系统公开课》的课程笔记 课程来源&#xff1a;ShusenWang的个人空间-ShusenWang个人主页-哔哩哔哩视频 (bilibili.com)课程资料&#xff1a;GitHub - wangshusen/RecommenderSystem 由于篇幅较长&#xff0c;分为【上】【下】两篇文章…

Autodesk Flame 2025 for Mac:视觉特效制作的终极利器

在数字时代&#xff0c;视觉特效已经成为电影、电视制作中不可或缺的一部分。Autodesk Flame 2025 for Mac&#xff0c;这款专为视觉特效师打造的终极工具&#xff0c;将为您的创作提供无尽的可能。 Autodesk Flame 2025 for Mac拥有强大的三维合成环境&#xff0c;能够支持您…

ROS for LabVIEW:实现LabVIEW与ROS的无缝集成

ROS for LabVIEW是由Tufts大学开发的一套VI集合&#xff0c;旨在实现LabVIEW与ROS&#xff08;Robot Operating System&#xff09;的无缝集成。ROS是一个灵活的机器人软件框架&#xff0c;而LabVIEW则是一种强大的图形化编程工具。这个工具包的推出使得LabVIEW用户能够直接与R…

【吊打面试官系列】Java高并发篇 - 线程的调度策略?

大家好&#xff0c;我是锋哥。今天分享关于 【线程的调度策略?】面试题&#xff0c;希望对大家有帮助&#xff1b; 线程的调度策略? 线程调度器选择优先级最高的线程运行&#xff0c;但是&#xff0c;如果发生以下情况&#xff0c;就会终止线程的运行&#xff1a; 1、线程体…

基于jeecgboot-vue3的Flowable增加流程支持组件与element-plus组件导入支持

因为这个项目license问题无法开源&#xff0c;更多技术支持与服务请加入我的知识星球。 1、package.json文件需要增加相关流程组件&#xff0c;如下 "dependencies": {"element-plus/icons-vue": "^2.3.1","highlightjs/vue-plugin":…

BEVFormer论文详细解读

文章目录 1. 前言1.1 3D VS 4D1.2 .特征融合过程中可能遇到的问题1.3 .BEV提出背景1.4 .BEV最终得到了什么1.5 .输入数据格式 2. 背景/Motivation2.1 为什么视觉感知要用BEV&#xff1f;2.2 生成BEV视角的方法有哪些&#xff1f;为何选用Transformer呢&#xff1f; 3. Method/S…