web项目规范配置(husky、eslint、lint-staged、commit)

背景:

团队开发为了保证提交代码格式统一,通常在进行代码提交的时候对暂存区代码进行校验,如没有通过eslint(本例使用eslint)校验,则不能提交到远端。

安装依赖

husky 、eslint 、prettier 、lint-staged

npm install husky eslint prettier lint-staged --save-dev

安装lint-staged

  1. 参考官网:https://github.com/okonet/lint-staged
  2. install
npm install --save-dev lint-staged

设置lint-staged,在package.json或者新增一个配置文件(本例是在package.json,其他方式参考lint-staged官网)

npm run lint 是进行eslint 校验和–fix修改,通过后重新git add

设置pre-commitgit hook 来运行lint-staged

  1. 前置知识:

git hook是常说的 git 钩子,而pre-commit,该钩子在键入提交信息前运行。 它用于检查即将提交的快照(暂存区内容)。
钩子存储在项目的 .git/hooks。

  1. 参考官网: https://github.com/typicode/husky
  2. install
npm install husky -D
  1. package.json 增加配置
npm pkg set scripts.prepare="husky install"
//创建.husky目录,运行安装脚本来确保 Husky 安装
npm run prepare
  1. 增加完成后package.json会增加一条prepare
"scripts": {"dev": "vite","build": "vue-tsc && vite build","preview": "vite preview","lint": "eslint  './src/**/*.{js,jsx,vue,ts,tsx}' --fix","prepare": "husky install"},
  1. 初始化 Husky
    初始化 Husky 并创建必要的 Git hooks:
npx husky-init
  1. 自动配置:
npx husky add .husky/pre-commit "npx lint-staged"

如果:add command is deprecated,则表明已经弃用add

  • 手动配置:
  • 由于 add 命令被弃用,你可以手动创建钩子文件并添加内容。首先,创建 pre-commit 文件
mkdir -p .husky
touch .husky/pre-commit
chmod +x .husky/pre-commit

-然后编辑 .husky/pre-commit 文件并添加以下内容::

#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
npx --no-install lint-staged
  • 确保文件有执行权限:
cd .husky      ./pre-commit  chmod +x .husky/pre-commit     

输出没有报错

  1. 检查文件结构
    确保你的项目目录结构类似如下:
my-project
│
├── .husky/
│   └── pre-commit
│
├── .eslintrc.json
├── .prettierrc
├── package.json
└── src/└── index.js
  1. 效果:
    在这里插入图片描述

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

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

相关文章

计算机网络——在地址栏输入网址(URL)之后都发生了什么

网址,也叫域名,域名就像一个 IP 地址的可读版本,比如,百度的域名 www.baidu.com,他的 ip 是 110.242.68.3,输入 IP 一样可以跳转到百度搜索的页面,我想没有一个人没去记百度的 IP 吧。其实我们真…

数据挖掘实战-基于长短期记忆网络(LSTM)的黄金价格预测模型 | 97% 准确度

🤵‍♂️ 个人主页:艾派森的个人主页 ✍🏻作者简介:Python学习者 🐋 希望大家多多支持,我们一起进步!😄 如果文章对你有帮助的话, 欢迎评论 💬点赞&#x1f4…

网络安全等级保护相关标准及发展

目录 等保标准 等保定级 发展 等保标准 2016年11月发布的《网络安全法》第二十一条提出“国家实行网络安全等级保护制度”。 等级保护标准体系: (1)安全等级类标准 主要包括GB/T 22240-2008《信息安全技术 信息系统安全保护等级保护定…

汽车IVI中控开发入门及进阶(二十五):CVBS视频流

前言: AHD和CVBS是两种视频格式,在车载摄像头中,有支持传统CVBS模拟视频的摄像头,也有支持新的高分辨率AHD格式的摄像头。 CVBS视频是经典的模拟视频格式,在视频经常显示在小型监视器上的车辆上仍然最受欢迎。如果想要车辆的最大分辨率,可选择AHD格式,即高分辨率模拟视…

启智CV机器人,ROS,ubuntu 20.04 【最后一步有问题】

资料: https://wiki.ros.org/kinetic/Installation/Ubuntu https://blog.csdn.net/qq_44339029/article/details/120579608 装VM。 装ubuntu20.04 desktop.iso系统。 装vm工具: sudo apt update sudo dpkg --configure -a sudo apt-get autoremove o…

守护任务用来防止资源冲突

背景:有三个任务,他们都需要操作数码管。每个任务对应三个数码管,共9个数码管。硬件上9个数码管的控制使用一套硬件完成。 策略:每个任务都往自己的队列里面发数据,单独建立一个监听任务:处理所有队列的数…

网络编程(七)

网络编程(七) UNIX域套接字(本地间进程间通信的技术)(S文件)基于TCP传输基于UDP传输 UNIX域套接字(本地间进程间通信的技术)(S文件) socket同样也可以用于本…

echarts-series的x,y轴的规则

series的data与x,y轴的匹配规则 如果series的data为[1,2,3,4,5,6] 1.如果x,y轴都是类目轴,且data没有与x,y轴的值匹配上,则无效。 2.如果x,y轴都为类目,data中能够跟类目轴上的字符串对应上,轴,有效。 3.如果都为value.,则按数值…

掌握Element UI:加速你的网页设计过程!

Element UI 是一套为开发者、UI/UX设计师和产品经理准备的采用Vue 2.0作为基础框架实现的组件库,提供配套的设计资源,可以帮助设计快速成型。即时设计也内置Element UI Kit资源,但有些小伙伴还是对此不太了解,接下来本文会详细带你…

“神经网络之父”和“深度学习鼻祖”Geoffrey Hinton

“神经网络之父”和“深度学习鼻祖”Geoffrey Hinton在神经网络领域数十年如一日的研究,对深度学习的推动和贡献显著。 一、早期贡献与突破 反向传播算法的引入:Hinton是将反向传播(Backpropagation)算法引入多层神经网络训练的…

室内外无缝定位技术:连接虚拟与现实的新桥梁

随着科技的快速发展,人们对于位置信息的精确度和实时性要求日益提高。在这样一个背景下,室内外无缝定位技术应运而生,成为连接虚拟与现实世界的关键桥梁。它不仅为人们提供了更加便捷、高效的生活体验,还推动了物联网、智能制造等…

Java面试八股之怎么降低锁竞争

怎么降低锁竞争 减少锁的持有时间: 尽量缩短线程持有锁的时间,只在必要时才获取锁,一旦操作完成立即释放锁。可以通过将同步代码块的范围缩小到最小必要程度来实现,避免在锁保护的代码块中执行耗时操作或等待操作,比如…

Java集合基础知识点系统性总结篇

目录 集合一、图解集合的继承体系?([图片来源](https://www.cnblogs.com/mrhgw/p/9728065.html))点击查看大图二、List,Set,Map三者的区别?三、List接口的实现3.1、Arraylist 、 LinkedList、Vector3.2、Arraylist 、 LinkedList、…

MacOS - 为什么 Mac 安装软件后安装包在桌面上无法删除?

只要你将这磁盘里面的软件放到应用程序里面去了,那么用鼠标选中这个跟磁盘一样的东西,然后按下键盘上的 Command E 即可移除桌面上的这个磁盘。

气压、湿度、震动开关、声音、红外火焰传感器 | 配合Arduino使用案例

BMP180 气压传感器 BMP180 是一种用于测量气压的科学仪器。可以获取到温度、气压、海拔。 先在 arduino ide 中安装依赖 /****** Arduino 接线 ***** Arduino 传感器* VCC 5v* GND GND* A4 SDA * A5 SCL ***********************/#include &l…

ubuntu使用oh my zsh美化终端

ubuntu使用oh my zsh美化终端 文章目录 ubuntu使用oh my zsh美化终端1. 安装zsh和oh my zsh2. 修改zsh主题3. 安装zsh插件4. 将.bashrc移植到.zshrcReference 1. 安装zsh和oh my zsh 首先安装zsh sudo apt install zsh然后查看本地有哪些shell可以使用 cat /etc/shells 将默…

③单细胞学习-pbmc的Seurat 流程

目录 1,数据读取 2,线粒体基因查看 3,数据标准化 4,识别高变基因 5,进行数据归一化 6,进行线性降维 7,确定细胞簇 8,UMAP/tSNE降维(保存pbmc_tutorial.rds&#…

如何用TCC方案轻松实现分布式事务一致性

本文作者:小米,一个热爱技术分享的29岁程序员。如果你喜欢我的文章,欢迎关注我的微信公众号“软件求生”,获取更多技术干货! 哈喽,大家好!我是小米,一个热爱技术的活力小青年,今天要和大家分享的是一种在分布式系统中实现事务的一种经典方案——TCC(Try Confirm Canc…

第一篇 逻辑门(与门、或门、非门、异或门)

一、实验目的 了解DE1-SOC开发板一些外设。 掌握常用组合逻辑门电路的基本原理。 学习Verilog HDL的基本语法。 学习使用ModelSim工具对设计的电路进行仿真,包括编写Testbench仿真代码,以及ModelSim工具的使用。 熟悉使用Quartus软件从创建Quartus工…

汽车MCU虚拟化--对中断虚拟化的思考(2)

目录 1.引入 2.TC4xx如何实现中断虚拟化 3.小结 1.引入 其实不管内核怎么变,针对中断虚拟化无非就是上面两种,要么透传给VM,要么由Hypervisor统一分发。汽车MCU虚拟化--对中断虚拟化的思考(1)-CSDN博客 那么,作为车规MCU龙头…