当前位置: 首页 > news >正文

前端项目集成husky + lint-staged + commitlint

简述

husky 提供git hooks(钩子)操作
lint-staged 针对git暂存区中的文件应用代码检查与格式化修复
commitlint 严格约束git commit的提交信息,保证统一规范

我下面的做的事情就是利用husky提供的钩子操作,在代码推送到本地git暂存区时,做代码风格格式化,并对commit时提交的描述信息进行规范约束

1. 安装husky

husky没有复杂的东西,简单来说就是单文件对应git hooks的钩子

pnpm add --save-dev husky

运行此命令会在本地生成.husky文件夹,和一些基础的文件

pnpm exec husky init

之后在这个文件夹中创建钩子文件,目前我只用到了两个,仅客户端侧的钩子 ,这两个文件建议还是手动创建吧,因为在通过
echo “npm run commitlint ${1}” > .husky/commit-msg 命令创建的文件,在实际执行的出问题了,是创建文件时的编码问题,它自动创建的是utf-16的编码,导致运行的时候失败了,我们默认自己创建的文件都是utf-8

pre-commit 在用户输入提交信息​​之前​​触发(执行 git commit 后立即运行)作用:提交的​​代码检查阶段​
commit-msg 在用户输入提交信息​​之后​​触发(提交信息已生成但未最终提交)作用: 提交的​​信息校验阶段​

在这里插入图片描述

2. 安装lint-staged

这些具体不写了,看这篇文章
前端项目集成lint-staged
安装完成后,在pre-commit文件中添加对应的命令,如果按照上面这篇文章下来的话,在package.json的scripts中是由lint-staged命令的,而且该功能是可以正常使用的,因为在上面的文章中已经做过测试,确保pnpm lint-staged命令是能生效的。

在这里插入图片描述
这里再来测试一次,看看使用 git commit -m “test” 有没有效果

准备三个测试文件

在这里插入图片描述
使用 git add . 将其添加入git暂存区

在这里插入图片描述
运行 git commit -m “test” ,可以看到代码运行完毕后,对应的测试文件都被成功的修复了错误,证明功能没问题

在这里插入图片描述

3. 安装commitlint

pnpm add -D @commitlint/cli @commitlint/config-conventional conventional-changelog-angular @commitlint/format @commitlint/cz-commitlint

@commitlint/cli 提供命令行接口(CLI),用于校验 Git 提交信息是否符合预设规则
@commitlint/config-conventional 定义提交信息的校验规则,确保每次提交符合约定格式(如 type(scope): subject)
conventional-changelog-angular 解析符合 Angular 规范的提交历史,自动生成版本变更日志(CHANGELOG.md)
@commitlint/format 格式化 commitlint 的校验结果输出,提升可读性。
@commitlint/cz-commitlint 基于 ​​Commitizen​​ 的交互式提交引导工具,通过问答生成规范提交消息。

提供配置文件 (commitlint.config.js)

提示词这部分的配置我直接在 ’@commitlint/config-conventional‘这个包里面复制出来的。给他改成中文了。这样在后面通过交互工具访问的时候更加直观

const Configuration = {/** 继承 `@commitlint/config-conventional` 的预设规则* 需确保已安装该依赖(通过 npm/yarn/pnpm)*/extends: ['@commitlint/config-conventional'], // 引用社区通用的提交规范/** 指定提交信息解析器,这个标准是最常用吧,开源库和中大项目都用这个,比如vue,那我也用这个* 需确保已安装对应依赖*/parserPreset: 'conventional-changelog-angular', // 用于解析提交消息的语法规则/** 指定输出格式化工具为 `@commitlint/format`* 需确保已安装该依赖*/formatter: '@commitlint/format', // 控制校验结果的显示格式[10](@ref)/** 自定义忽略条件(函数形式)* 此处忽略空提交消息(例如 `git commit -m ""`)*/ignores: [(commit) => commit === ''], // 返回 `true` 时跳过校验[10](@ref)/** 是否启用默认忽略规则* 默认忽略合并提交(Merge)、回滚提交(Revert)等[10](@ref)*/defaultIgnores: true,/** 校验失败时显示的帮助文档链接*/helpUrl: 'https://github.com/conventional-changelog/commitlint/#what-is-commitlint', // 引导用户查阅文档[6](@ref)/** 交互式提交提示的配置* 可自定义提示信息和问题描述* 我一定要给换成中文,这个是从@commitlint/config-conventional复制出来的,我把里面的英文改成中文了* 也可以给他删了,直接用@commitlint/config-conventional中的*/prompt: {questions: {type: {description: '选择您要提交的更改类型',enum: {feat: {description: '新增功能(如模块、组件、接口等)',title: '新功能',emoji: '✨'},fix: {description: '修复代码缺陷(如逻辑错误、边界条件问题等)',title: '缺陷修复',emoji: '🐛'},docs: {description: '仅文档变更(如 README、API 文档、注释等)',title: '文档',emoji: '📚'},style: {description: '代码格式调整(空格/缩进/分号等,**不改变运行逻辑**)\n⚠️ 注意:CSS 样式修改属于功能变更,请用 `feat`/`fix`',title: '代码格式调整',emoji: '💎'},refactor: {description: '代码重构(既非新功能也非缺陷修复,如优化结构、重命名等)',title: '代码重构',emoji: '📦'},perf: {description: '性能优化(如算法改进、缓存机制、渲染效率提升等)',title: '性能优化',emoji: '🚀'},test: {description: '测试相关(新增/修改单元测试、E2E 测试等)',title: '测试相关',emoji: '🚨'},build: {description: '构建系统变更(如 Webpack/Vite 配置、npm 依赖更新等)',title: '构建系统变更',emoji: '🛠'},ci: {description: '持续集成配置变更(如 GitHub Actions/Jenkins/Travis 脚本等)',title: '持续集成(CI)',emoji: '⚙️'},chore: {description: '其他杂项变更(如工具链调整、配置文件修改等,不涉及代码逻辑)',title: '其他杂项变更',emoji: '♻️'},revert: {description: '回滚某次错误提交(需注明被回滚的 Commit Hash)',title: '回滚提交',emoji: '🗑'}}},scope: {description: '影响范围(如模块名、组件名、文件名等,示例: `login`, `button`, `utils`)'},subject: {description: '简短描述变更内容(使用命令式语气,如『修复XX问题』而非『修复了XX问题』)'},body: {description: '详细说明变更原因与实现细节(可选,复杂变更建议填写)'},isBreaking: {description: '是否包含破坏性变更?(会导致其他代码不兼容的修改)'},breakingBody: {description: '请详细描述破坏性变更的影响及迁移方案(格式: `BREAKING CHANGE: <说明>`)'},breaking: {description: '破坏性变更摘要(示例: `移除旧API XX`)'},isIssueAffected: {description: '是否关联未关闭的 Issue?(如修复 Bug 或实现需求)'},issuesBody: {description: '请说明变更与 Issue 的关联性(可选)'},issues: {description: '关联的 Issue 编号(格式: `fix #123`, `close #456`)'}}}
}export default Configuration
增加pageage.json中scripts的脚本命令

这里第一个是实现基本功能的,而第二个是用来使用交互工具的方式使用commitlint

   "commitlint": "commitlint --edit","commit": "git-cz"
编辑husky钩子

这个 \ 是windows中的写法,更多内容看commitlint的文档
在这里插入图片描述

4. 测试

两个方式都试一下,我还是喜欢交互工具的那种方式,一项一项选的直观且方便多了

1.普通提交方式

  1. 创建测试文件a.txt。没有内容,目前只是往缓存区提交一点内容,不然都无法commit
    在这里插入图片描述

  2. 尝试运行 git commit -m “错误提交” ,这是一定会失败的,因为提交信息格式不正确,比如未指定当前操作类型等。
    在这里插入图片描述

  3. 尝试运行 git commit -m “docs: 正确提交” ,可以看到指定了类型后,提交就通过了
    在这里插入图片描述

2.交互工具

直接运行刚才定义的脚本,往暂存区放文件的操作就不贴了

pnpm commit

可以看到非常方便,一项一项选,不可能选错的
在这里插入图片描述
在这里插入图片描述

http://www.dtcms.com/a/272249.html

相关文章:

  • Web-Bench:基于web标准和框架的benchmark
  • Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
  • 什么是强化学习(RL)--2
  • 如何在VMware里的飞牛OS访问主机里面图片文件夹
  • 【运维实战】解决 K8s 节点无法拉取 pause:3.6 镜像导致 API Server 启动失败的问题
  • 【EGSR2025】材质+扩散模型+神经网络相关论文整理随笔(三)
  • 华为昇腾NPU与NVIDIA CUDA生态兼容层开发实录:手写算子自动转换工具链(AST级代码迁移方案)
  • 缓存穿透与击穿多方案对比与实践指南
  • 设计模式的六大设计原则
  • AI问答之手机相机专业拍照模式的主要几个参数解释
  • 【笔记】使用 html 创建网址快捷方式
  • 达梦数据库DMDRS搭建单向dm8-dm8数据同步
  • 【工具教程】批量提取OCR图片中固定文字保存WPS表格,批量OCR识别图像中的文字保存到Excel表格的操作步骤和注意事项
  • 虚拟环境已安装该包,且已激活,但报错
  • 智能体的记忆系统:短期记忆、长期记忆与知识图谱
  • Spring for Apache Pulsar->Reactive Support->Quick Tour
  • 【LeetCode100】--- 1.两数之和【复习回滚】
  • 氢能源杂谈
  • 深入拆解Spring核心思想之一:IoC
  • 天津医大用网络药理学+分子对接发表中科院二区IF5
  • 【Python】基于Python提取图片验证码
  • SYM32第二十天 ESP8266-01S和电脑实现串口通信(3)
  • 羊肚菌自动采收车设计cad【7张】+三维图+设计说明书
  • 电脑息屏工具,一键黑屏超方便
  • 双esp8266-01之间UDP透传传输,自定义协议
  • LlamaFactory Demo
  • 使用langchain连接llama.cpp部署的本地deepseek大模型开发简单的LLM应用
  • CTFHub————Web{信息泄露[备份文件下载(vim缓存、.DS_Store)]}
  • turbopack打包机制
  • SQL的初步学习(一)(以MySQL为例)