前端代码提交前的最后防线:使用Husky确保代码质量

news2024/12/24 9:38:20

需求背景

我们通常会引入ESLintPrettier这样的工具来帮助我们规范本地代码的格式。然而,这种格式化过程仅在本地有效,并且依赖于我们在VSCode中手动设置自动保存功能。如果团队成员忘记进行这样的配置,或者在没有格式化的情况下提交了代码,我们该如何确保代码质量呢?

解决方案

为了解决这一潜在的风险,我们需要一种更为自动化的解决方案。这时,husky就派上了用场。

husky是一个强大的工具,它可以在代码提交之前自动执行一系列检查。通过配置husky来监听pre-commit钩子,我们可以在提交前自动运行npx eslint --ext .js,.vue src命令,对代码进行格式化和质量检查。

这样,无论何时,只要有人尝试提交代码,husky都会确保代码符合我们设定的标准,从而维护整个项目的代码质量。

操作步骤

1、确保你的项目中已经安装了ESLintPrettier。这些工具可以帮助你检查和自动修复代码风格问题。

npm install eslint prettier --save-dev

2、在项目根目录下创建或更新.eslintrc.js.prettierrc.js文件,配置你的ESLint规则和Prettier规则。
3、Husky是一个Git钩子管理工具,它可以在Git的特定事件(如commit)发生时运行脚本。

npm install husky --save-dev

4、在项目根目录下创建或修改.husky文件夹中的pre-commit钩子文件。这个钩子会在每次尝试提交代码之前运行。修改后的内容如下所示:

#!/bin/sh 

# 运行ESLint检查 
npx eslint --fix --ext .js,.vue src

5、关闭 VSCode 的自动保存操作,修改一下代码,使其不符合 ESLint 校验规则,提交一些不符合ESLint规则的代码,Husky应该会自动运行ESLint并阻止提交。

image-20240304141645637.png

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

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

相关文章

GIS地理信息+智慧巡检技术解决方案(Word原件)

1.系统概述 1.1.需求描述 1.2.需求分析 1.3.重难点分析 1.4.重难点解决措施 2.系统架构设计 2.1.系统架构图 2.2.关键技术 3.系统功能设计 3.1.功能清单列表 软件全套资料部分文档清单: 工作安排任务书,可行性分析报告,立项申请审批表&#x…

Datawhale X 李宏毅苹果书AI夏令营 Task1.2深度学习进阶详解

目录 一、批量梯度下降法(Batch Gradient Descent,BGD) 二、随机梯度下降法(Stochastic Gradient Descent,SGD) 三、动量法(Momentum Method) 四、自适应学习率的方法 五、并行…

微信小程序认证和备案

小程序备案的流程一般包括以下步骤‌: 准备备案所需材料‌:通常需要提供‌营业执照、法人的‌身份证、两个‌手机号和一个邮箱等资料。 ‌1 ‌登录‌微信公众平台‌:作为第一次开发微信小程序的服务商,需要通过微信公众平台申请…

JVM内存模型简述

JVM内存结构 虚拟机栈: 每个方法会在虚拟机栈中创建一个栈帧,存储这个方法的局部变量表,操作数栈,方法出口等信息。本地方法栈: 与虚拟机栈类似,只是虚拟机栈执行java方法,本地方法栈执行native…

工业园区智慧水务物联网平台建设方案

1. 项目背景与水资源现状 《工业园区智慧水务物联网平台建设方案》针对水资源分布不均、短缺严重的问题,提出了智慧水务物联网平台的建设方案,以应对漏损危害和提升水资源管理效率。 2. 水资源管理政策与目标 国家通过“水十条”和供水数据&#xff0…

基于yolov8的打架行为检测系统python源码+onnx模型+评估指标曲线+精美GUI界面

【算法介绍】 基于YOLOv8的打架行为检测系统,是当前公共安全领域的一项重要创新。YOLOv8作为最新的目标检测算法,以其高效、准确的性能,在各类图像和视频处理任务中表现出色。该系统利用YOLOv8的先进图像处理和机器学习算法框架,…

品牌知识产权维权的原因

在当今竞争激烈的商业环境中,品牌知识产权维权的重要性愈发凸显。品牌的价值不仅仅在于其产品或服务的质量,更在于其独特的标识、创新的技术以及丰富的文化内涵。而这些宝贵的资产,往往需要通过有效的知识产权保护来确保其安全。 品牌在发展的…

SI案例分享--考虑ESD保护二极管的差分线阻抗仿真

如下图所示&#xff0c;显示了利用CST电磁仿真软件构建的边沿耦合微带线的尺寸&#xff0c;按照 100 欧姆的差分线阻抗进行设计。由于差分线经常会通过连接器连接到电缆&#xff0c;因此极有可能发生 ESD 事件&#xff0c;该事件会在短时间内 &#xff08;< 1 ns&#xff09…

JS设计模式之“分即是合” - 建造者模式

引言 当我们在进行软件编程时&#xff0c;常常会遇到需要创建复杂对象的情况。这些对象可能有多个属性&#xff0c;属性之间存在依赖关系&#xff0c;或需要按照特定的骤来创建。在这种情况下&#xff0c;使用建造者模式&#xff08;Builder Pattern&#xff09;可以提供一种活…

搭建IPsec VPN隧道解决PLC设备与主控上位机无法使用公网IP进行通信的问题

问题描述 按照初设规定&#xff0c;每个工程点位都要安装一条具有独立公网IP的光纤专线&#xff0c;供该点位的视频监控设备、水质监测设备及PLC设备与外界进行通信。而在项目开发前期并没有意识到&#xff0c;组态软件(上位机)无法通过公网IP地址连接PLC&#xff0c;导致在交…

【网络原理】Udp 的报文结构,保姆式教学,快速入门

本篇会加入个人的所谓鱼式疯言 ❤️❤️❤️鱼式疯言:❤️❤️❤️此疯言非彼疯言 而是理解过并总结出来通俗易懂的大白话, 小编会尽可能的在每个概念后插入鱼式疯言,帮助大家理解的. &#x1f92d;&#x1f92d;&#x1f92d;可能说的不是那么严谨.但小编初心是能让更多人…

Tomcat 配置SSL

1、生成SSL证书&#xff1b; 2、配置Tomcat文件&#xff1b; <Connector port"8080" protocol"HTTP/1.1"SSLEnabled"true"keystoreFile"D:/hk.jks"keystorePass"123456"clientAuth"false"sslProtocol"TL…

js字符串格式的数字比较大小

1300>37 为什么是false? 在 JavaScript 中&#xff0c;当比较两个字符串时&#xff0c;比较是基于字典顺序&#xff08;也就是按字符的 Unicode 编码值进行比较&#xff09;的&#xff0c;而不是数字的实际大小。因此&#xff0c;1300 > 37 的结果是 false&#xff0c;…

Halcon提取边缘线段lines_gauss 算子

Halcon提取边缘线段lines_gauss 算子 edges_color_sub_pix和edges_sub_pix两个算子使用边缘滤波器进行边缘检测。还有一个常用的算子lines_gauss算子&#xff0c;也可以用于提取边缘线段&#xff0c;它的鲁棒性非常好&#xff0c;提取出的线段类型是亚像素精度的XLD轮廓。其原…

【GD32】RT-Thread实时操作系统移植(GD32F470ZGT6)

1. 简介 最近几年可以发现国产的实时操作系统越来越受欢迎了&#xff0c;本篇要移植的就是当中的翘楚——RT-Thread。 RT-Thread诞生于2006年&#xff0c;是国内以开源中立、社区化发展起来的一款高可靠实时操作系统 &#xff0c;由睿赛德科技负责开发维护和运营 。并且在上一年…

机器学习面试:请介绍下LR的损失函数?

在机器学习中&#xff0c;逻辑回归&#xff08;Logistic Regression, LR&#xff09;是一种广泛使用的分类算法&#xff0c;尤其适用于二分类问题。逻辑回归的损失函数主要是用来衡量模型预测值与真实值之间的差距。以下是对逻辑回归损失函数的详细介绍&#xff1a; 1. 逻辑回…

【千帆AppBuilder】使用Python调用基于官方的API创建图片故事的应用,一起体验下全代码模式下是怎样的效果

欢迎来到《小5讲堂》 这是《千帆》系列文章&#xff0c;每篇文章将以博主理解的角度展开讲解。 温馨提示&#xff1a;博主能力有限&#xff0c;理解水平有限&#xff0c;若有不对之处望指正&#xff01; 目录 背景基本信息名称简介角色指令 能力扩展组件对话开场白推荐问 模型选…

Rust到底值不值得学,之二

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust到底值不值得学&#xff0c;之一 -CSDN博客 1.2.2 引用和借用 如果每次都发生所有权的转移&#xff0c;程序的编写就会变得异…

LVGL 控件之图表部件(lv_chart)

目录 一、图表1、组成2、类型3、显示数据3.1 lv_chart_set_ext_y_array/lv_chart_set_ext_x_array3.2 lv_chart_set_next_value3.3 lv_chart_set_all_value3.4 lv_chart_set_value_by_id3.5 在数组中手动设置 4、设置数据点数量5、辅助功能5.1 垂直范围5.2 分隔线5.3 设置默认起…

Mathematica如何进行公式推导和使用

目录 一、内容描述 二、如何打出公式[2] 三、具体操作 四、参考文献 一、内容描述 在Mathematica中通过几个简单命令可以将一大串的三角函数进行分解及简化&#xff0c;大大节省了推导时间&#xff0c;并保证了推导的正确性。 二、如何打出公式[2] 具体操作&#xff1a…