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.mzph.cn/web/19494.shtml

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

相关文章

Satellite Stereo Pipeline学习

1.在Anaconda某个环境中安装s2p pip install s2p 2.在Ubuntu系统中安装s2p源代码 git clone https://github.com/centreborelli/s2p.git --recursive cd s2p pip install -e ".[test]" 3.在s2p中进行make all处理 中间会有很多情况,基本上哪个包出问题…

基于网关的ip频繁访问web限制

一、前言 外部ip对某一个web进行频繁访问,有可能是对web进行攻击,现在提供一种基于网关的ip频繁访问web限制策略,犹如带刀侍卫,审查异常身份人员。如发现异常或者暴力闯关者,即可进行识别管制。 二、基于网关的ip频繁访…

【Python】 倒序遍历列表:Python中的简单技巧

基本原理 在Python中,列表是一种非常灵活的数据结构,它允许我们存储一系列的元素。有时,我们需要按照与元素添加顺序相反的顺序来遍历列表。这通常被称为“倒序遍历”。Python提供了几种不同的方法来实现这一功能。 代码示例 示例1&#x…

【vueCms】vueCms后台管理系统安装问题集合

开源项目地址: https://www.vuecms.cn/ 开源代码地址: https://gitee.com/derekgo/vue-cms_xg 问题一 如果出现提示少了个index.html。如下图 解决办法: 重新安装前端(vue3_vite)项目依赖 问题二 npm版本高无法解析依赖树导致依赖下载失败 解决方案: npm install --legacy…

【Flask-app.py运行】已解决Cannot run program “D:\APP\python\python.exe”

文章目录 一、问题描述二、解决方法 一、问题描述 Cannot run program “D:\APP\python\python.exe” (in directory “F:\Codes\竞赛\大计赛\group\code\web\web”): CreateProcess error2, 系统找不到指定的文件。 这段报错源于运行 flask 项目的 app.py 时报错找不到程序&…

C++ | Leetcode C++题解之第119题杨辉三角II

题目&#xff1a; 题解&#xff1a; class Solution { public:vector<int> getRow(int rowIndex) {vector<int> row(rowIndex 1);row[0] 1;for (int i 1; i < rowIndex; i) {row[i] 1LL * row[i - 1] * (rowIndex - i 1) / i;}return row;} };

SNCScan:针对SAP安全网络通信(SNC)的安全分析与评估工具

关于SNCScan SNCScan是一款针对SAP安全网络通信&#xff08;SNC&#xff09;的安全分析与评估工具&#xff0c;该工具旨在帮助广大研究人员分析SAP安全网络通信&#xff08;SNC&#xff09;&#xff0c;并分析和检测SNC配置与SAP组件中的潜在问题。 SNC系统参数 SNC基础 SAP协…

面向Java程序员的Go工程开发入门流程

对于一个像我这样没有go背景的java程序员来说&#xff0c;使用go开发一个可用的程序的速度是肉眼可见的缓慢。 其难点不在于go语言本身&#xff0c;而是搭建整个工程链路的过程&#xff0c;即所谓的“配环境”。 本文主要讲述如何配出一个适合go开发的环境&#xff0c;以免有同…

未来工厂新篇章:大型工厂3D可视化技术引领工业新潮流

在科技日新月异的今天&#xff0c;大型工厂不再是我们印象中机器轰鸣、尘土飞扬的钢铁丛林&#xff0c;而是变成了智慧与效率并存的现代化生产中心。这一切的改变&#xff0c;都离不开一项革命性的技术——3D可视化。 一、何为大型工厂3D可视化&#xff1f; 大型工厂3D可视化&…

MATLAB函数模块光显示zeros/poles怎么办?

出现下面这种图了怎么办&#xff1f;是做错了吗&#xff1f; 这种图就是它显示不完整了&#xff0c;把它拉大点就可以完全显示了。

K8s Ingress 详解

文章目录 K8s Ingress 详解Ingress 资源清单Ingress 基于URL 实现路由Ingress 基于名称虚拟主机Ingress 实现HTTPS创建TLS 证书创建Secrets配置ingress Ingress RewriteIngress 灰度发布Ingress 配置认证 K8s Ingress 详解 Ingress 资源清单 apiVersion: networking.k8s.io/v…

2024年人文发展与社会科学国际会议(ICHDSS 2024)

2024年人文发展与社会科学国际会议 2024 International Conference on Humanities Development and Social Sciences 【1】会议简介 2024年人文发展与社会科学国际会议是一个汇集全球人文科学和社会科学领域专家学者的盛会。本次会议旨在深入探讨人文发展的多元性、复杂性以及社…

如何查看本地sql server数据库的ip地址

程序连线SQL数据库&#xff0c;需要SQL Server实例的名称或网络地址。 1.查询语句 DECLARE ipAddress VARCHAR(100) SELECT ipAddress local_net_address FROM sys.dm_exec_connections WHERE SESSION_ID SPID SELECT ipAddress As [IP Address]SELECT CONNECTIONPROPERTY(…

SOLIDWORKS参数化开发 慧德敏学

传统的设计模式下大规模定制型产品结构设计周期长&#xff0c;问题多&#xff0c;以及大量重复性工作让工程师疲于应对&#xff0c;这些严重阻碍了公司订单承接能力和技术创新能力&#xff0c;难以响应市场需求。 什么是参数化设计&#xff1f; 1、它是一种设计的方式&#x…

华为设备RIP基础路由实验

华为设备RIP基础路由实验 实验拓扑&#xff1a; RIP&#xff1a;距离矢量的动态路由&#xff0c;路由通信有方向&#xff0c;度量值metric取值范围&#xff08;1-16&#xff09;16表示目标主机不可达。 路由的版本分为&#xff1a;RIPV1&#xff08;广播通信目标地址是255.255…

Mac下载docker

先安装homebrew Mac下载Homebrew-CSDN博客 然后输入以下命令安装docker brew install --cask --appdir/Applications docker 期间需要输入密码。输入完等待即可

刷机 iPhone 进入恢复模式

文章目录 第 1 步&#xff1a;确保你有一台电脑&#xff08;Mac 或 PC&#xff09;第 2 步&#xff1a;将 iPhone 关机第 3 步&#xff1a;将 iPhone 置于恢复模式第 4 步&#xff1a;使用 Mac 或 PC 恢复 iPhone需要更多协助&#xff1f; 本文转载自&#xff1a;如果你忘记了 …

【AI】llama-fs的 安装与运行

pip install -r .\requirements.txt Windows PowerShell Copyright (C) Microsoft Corporation. All rights reserved.Install the latest PowerShell for new features and improvements! https://aka.ms/PSWindows(venv) PS D:\XTRANS\pythonProject>

微服务 feign-gateway

早期微服务跨集群调用 使用的是Eureka 和RestTemplate&#xff0c;这种写法虽然可以解决服务之间的调用问题 ,但是随着服务的增多&#xff0c;实例变动&#xff0c;早期的写法相当于把请求方式&#xff0c;请求地址&#xff0c;参数写死了&#xff0c;耦合度太高&#xff0c;参…

HackTheBox-Machines--Nibbles

Nibbles 测试过程 1 信息收集 NMAP 80 端口 网站出了打印出“Hello world&#xff01;”外&#xff0c;无其他可利用信息&#xff0c;但是查看网页源代码时&#xff0c;发现存在一个 /nibbleblog 文件夹 检查了 http://10.129.140.63/nibbleblog/ &#xff0c;发现了 /index.p…