husky配置实现代码提交前校验与规范提交信息

husky是一个Git Hook管理工具，主要用于实现提交前eslint校验和commit信息的规范校验。

Husky 的原理是让我们在项目根目录中写一个配置文件，然后在安装 Husky的时候把配置文件和 Git Hook 关联起来，这样我们就能在团队中使用 Git Hook 了。

  1. 首先，确保已经安装了husky和commitlint。如果没有安装，可以使用以下命令进行安装：

    npm install -D husky commitlint

  2. 在项目中启用husky钩子，事实上是在项目根目录生成配置文件的文件夹（.husky）。查看.git/config，可以看到配置中修改了core.hooksPath指向为.husky。

    npx husky install

  3. 项目配置文件添加配置，实现跑命令前先安装husky

    "scripts": {"prepare": "husky install"
},

  4. 添加husky hook的pre-commit配置文件。执行之后会增加文件.husky/pre-commit（其中的注释是我另外添加的）。

    npx husky add .husky/pre-commit "npm run lint"
    #!/bin/sh
# . 指令为source，表示不产生新的shell，在当前shell下执行命令，共享上下文，类似将两个文件拼接到一起
# 执行 .husky/_/husky.sh
. "$(dirname "$0")/_/husky.sh"npm run lint

  5. 类似的，我们也可以添加commit-msg钩子，来规范我们的commit message信息

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

  6. 在package.json文件中，定义相关的指令。例如，以下是一个示例配置：

    "scripts": {"dev": "vite serve --mode development","build": "vite build --mode test","preview": "vite preview","test:unit": "vitest --environment jsdom --root src/","lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore","prepare": "husky install","commitlint": "commitlint --config commitlint.config.js -e -V"
},

需要确保在项目的根目录下有一个eslint.config.js文件也可以是.eslintrc.js文件（用于配置eslint）和一个commitlint.config.js文件也可以是.commitlintrc.js（用于配置commitlint）

.eslintrc.js

module.exports = {root: true,/**环境提供预定义的全局变量 */env: {/**Node.js全局变量和Node.js范围 */node: true,/**浏览器全局变量 */browser: true,},/**定义ESLint的解析器 */parser: 'vue-eslint-parser',parserOptions: {ecmaVersion: 'latest',sourceType: 'module',parser: '@typescript-eslint/parser',},/**定义文件继承的子规范 */extends: ['eslint:recommended', 'plugin:vue/vue3-essential', 'plugin:@typescript-eslint/recommended', './.eslintrc-auto-import.json'],plugins: ['vue', '@typescript-eslint'],rules: {'no-var': 'error', //要求使用 let 或 const 而不是 varcamelcase: 'off', // 双峰驼命名格式indent: ['error', 4, { SwitchCase: 1 }], //代码缩进2个空格semi: ['error', 'always'], //行尾需要有分号quotes: ['error', 'single'], //强制使用一致的反勾号、双引号或单引号'linebreak-style': ['error', 'windows'], //强制使用一致的换行风格,"unix"：\n 表示 LF , "windows"：\r\n 表示 CRLF// eqeqeq: ['error', 'always', { null: 'ignore' }], //比较时强制使用 === 或者 !==,但对null作比较时可以不用全等'no-unused-vars': 'off','@typescript-eslint/no-unused-vars': ['warn',{argsIgnorePattern: '^_',varsIgnorePattern: '^_',},], //不允许使用未使用的变量'@typescript-eslint/no-explicit-any': 'off', //不允许任何类型'@typescript-eslint/no-empty-function': 'off', //不允许空函数'vue/html-indent': ['error', 4], //在<template>中强制一致缩进'vue/singleline-html-element-content-newline': 'off', //要求在单行元素的内容之前和之后有一个换行符'vue/max-attributes-per-line': 'off', //执行每行的最大属性数(被 prettier 最大单行控制了暂off)'vue/multi-word-component-names': 'off', //要求组件名称始终为多字'vue/html-self-closing': 'off', //执行自我封闭式'no-undef': 'off', //禁用未声明的变量，除非它们在 /*global */ 注释中被提到'@typescript-eslint/ban-ts-comment': 'off', // 不允许@ts-<指令>评论或要求指令后的描述'@typescript-eslint/ban-types': 'off', // 不允许某些类型'@typescript-eslint/no-non-null-assertion': 'off', // 不允许使用！后缀操作符的非空断言},globals: {//可以定义全局中的变量的权限（只读，可读可写）defineProps: 'readonly',defineEmits: 'readonly',defineExpose: 'readonly',withDefaults: 'readonly',uni: 'readonly',},ignorePatterns: [// # 忽略目录'/dist','/public','/src/public','/src/static','/node_modules',// # 忽略文件'**/*-min.js','**/*.min.js','**/*-min.css','**/*.min.css','**/*.tsbuildinfo','**/*.config.js','**/*.config.ts','/src/manifest.json',],
};

commitlint.config.js

module.exports = {extends: ["@commitlint/config-conventional"],rules: {'type-enum': [2, 'always', ['upd', 'feat', 'fix', 'refactor', 'docs', 'chore', 'style', 'revert']],'type-case': [0],'type-empty': [0],'scope-empty': [0],'scope-case': [0],'subject-full-stop': [0, 'never'],'subject-case': [0, 'never'],'header-max-length': [0, 'always', 72]}
};

rule配置说明:：rule由name和配置数组组成，如：'name:[0, 'always', 72]'，数组中第一位为level，可选0,1,2，0为disable，1为warning，2为error，第二位为应用与否，可选always|never，第三位该rule的值。

commitlint 的默认格式为

# 注意：冒号前面是需要一个空格的, 带 ？ 表示非必填信息，也可以根据自己项目需要自定义配置
type(scope?): subject
body?
footer?

scope 指 commit 的范围（哪些模块进行了修改）
subject 指 commit 的简短描述
body 指 commit 主体内容（长描述）
footer 指 commit footer 信息
type 指当前 commit 类型，一般有下面几种可选类型：

  • upd：更新某功能（不是 feat, 不是 fix）
  • feat：新功能（feature）
  • fix：修补bug
  • docs：文档（documentation）
  • style： 格式（不影响代码运行的变动）
  • refactor：重构（即不是新增功能，也不是修改bug的代码变动）
  • test：增加测试
  • chore：构建过程或辅助工具的变动

使用示例

控制台报错：Cannot find module "@commitlint/config-conventional" ，是因为缺少依赖，执行下面的命令

npm i -D @commitlint/config-conventional @commitlint/cli

husky给出了commit-msg的input为xxx，触发了subject-empty，type-empty两个规则，提交不符合规范，被拦了下来。 

 正确的例子：type后面要有空格

git commit -m 'feat: 增加 xxx 功能'
git commit -m 'bug: 修复 xxx 功能'

完成以上步骤后，husky就已经配置好了。在提交代码时，husky会自动执行eslint校验和commit信息的规范检查，如果存在不符合规范的情况，husky会阻止提交并给出相应的提示信息。

Git 支持的所有钩子见下表（加粗的为常用钩子）

Git Hook调用时机说明
pre-applypatchgit am执行前
applypatch-msggit am执行前
post-applypatchgit am执行后不影响git am的结果
pre-commitgit commit执行前可以用git commit --no-verify绕过
commit-msggit commit执行前可以用git commit --no-verify绕过
post-commitgit commit执行后不影响git commit的结果
pre-merge-commitgit merge执行前可以用git merge --no-verify绕过。
prepare-commit-msggit commit执行后，编辑器打开之前
pre-rebasegit rebase执行前
post-checkoutgit checkout或git switch执行后如果不使用--no-checkout参数，则在git clone之后也会执行。
post-mergegit commit执行后在执行git pull时也会被调用
pre-pushgit push执行前
pre-receivegit-receive-pack执行前
update
post-receivegit-receive-pack执行后不影响git-receive-pack的结果
post-update当 git-receive-pack对 git push 作出反应并更新仓库中的引用时
push-to-checkout当``git-receive-pack对git push做出反应并更新仓库中的引用时，以及当推送试图更新当前被签出的分支且receive.denyCurrentBranch配置被设置为updateInstead`时
pre-auto-gcgit gc --auto执行前
post-rewrite执行git commit --amend或git rebase时
sendemail-validategit send-email执行前
fsmonitor-watchman配置core.fsmonitor被设置为.git/hooks/fsmonitor-watchman或.git/hooks/fsmonitor-watchmanv2时
p4-pre-submitgit-p4 submit执行前可以用git-p4 submit --no-verify绕过
p4-prepare-changelistgit-p4 submit执行后，编辑器启动前可以用git-p4 submit --no-verify绕过
p4-changelistgit-p4 submit执行并编辑完changelist message后可以用git-p4 submit --no-verify绕过
p4-post-changelistgit-p4 submit执行后
post-index-change索引被写入到read-cache.c do_write_locked_index后

可以参考下这篇文章  滑动验证页面

详细说明使用husky规范前端项目搭建_husky使用-CSDN博客

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

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

相关文章

Matplotlib数据可视化实战-2绘制折线图（2）

Matplotlib数据可视化实战-2绘制折线图（2）

2.11营业额可视化 已知某学校附近一个烧烤店2022年每个月的营业额如下图所示。编写程序绘制折线图对该烧烤店全年营业额进行可视化&#xff0c;使用红色点画线连接每个月的数据&#xff0c;并在每个月的数据处使用三角形进行标记。 烧烤店营业额 月份123456789101112营业额/万…
阅读更多...
Redis - 5k star! 一款简洁美观的 Redis 客户端工具~

Redis - 5k star! 一款简洁美观的 Redis 客户端工具~

项目简介 Tiny RDM 是一款现代化、轻量级的跨平台 Redis 桌面客户端&#xff0c;可在 Mac、Windows 和 Linux 系统上运行。初次打开 Tiny RDM&#xff0c;你会被它舒适的风格和配色所吸引&#xff0c;界面简约而不简单&#xff0c;功能齐全。 Tiny RDM 有着如下的功能特性 项…
阅读更多...
男生t恤什么牌子好？男士T恤品牌推荐？

男生t恤什么牌子好？男士T恤品牌推荐？

很多男士朋友最近都打算准备一套春夏季穿的短袖&#xff0c;但奈何当前的市场上充斥着大量低劣质的衣裤。这些产品的质量普遍不耐穿、耐洗&#xff0c;并且版型不好等情况。为此我特意为大家整理五个质量好且价格不贵的五个男装品牌。希望能够帮助到大家挑选到合适的短袖。 因为…
阅读更多...
保研线性代数机器学习基础复习1

保研线性代数机器学习基础复习1

1.什么是代数&#xff08;algebra&#xff09;? 为了形式化一个概念&#xff0c;构建出有关这个概念的符号以及操作符号的公式。 2.什么是线性代数&#xff08;linear algebra&#xff09;&#xff1f; 一项关于向量以及操作向量的公式的研究。 3.举一些向量的例子&#x…
阅读更多...
【opencv】教程代码 —ImgProc (7)使用维纳滤波器来恢复失焦的图像

【opencv】教程代码 —ImgProc (7)使用维纳滤波器来恢复失焦的图像

7. out_of_focus_deblur_filter.cpp使用维纳滤波器来恢复失焦的图像 代码的主要功能是通过使用维纳滤波器来恢复失焦的图像&#xff0c;它读取一个灰度图像文件&#xff0c;对其进行滤波操作&#xff0c;并将结果保存为新文件。这个过程包括计算点扩散函数(PSF)&#xff0c;执行…
阅读更多...
机器学习模型——KNN

机器学习模型——KNN

KNN的基本概念&#xff1a; KNN(K-Nearest Neighbor)就是k个最近的邻居的意思&#xff0c;即每个样本都可以用它最接近的k个邻居来代表。KNN常用来处理分类问题&#xff0c;但也可以用来处理回归问题。 核心思想是如果一个样本在特征空间中的k个最相邻的样本中的大多数属于某…
阅读更多...
python实现在线 ChatGLM调用

python实现在线 ChatGLM调用

python实现在线 ChatGLM调用 1. 申请调用权限&#xff1a; 收钱进入到质谱AI开放平台&#xff0c;点击“开始使用”或者“开发者工具台”进行注册&#xff1a; 对于需要使用 API key 来搭建应用的话&#xff0c;需要点击右边红框中的查看 API key&#xff0c;就会进入到我们…
阅读更多...
yolov8 pose keypoint解读

yolov8 pose keypoint解读

yolov8进行关键点检测的代码如下&#xff1a; from ultralytics import YOLO# Load a model model YOLO(yolov8n.pt) # pretrained YOLOv8n model# Run batched inference on a list of images results model([im1.jpg, im2.jpg]) # return a list of Results objects# Pr…
阅读更多...
读所罗门的密码笔记04_社会信用

读所罗门的密码笔记04_社会信用

1. 人工智能 1.1. 人工智能可以帮助人们处理复杂的大气问题&#xff0c;完善现有的气候变化模拟&#xff0c;帮助我们更好地了解人类活动对环境造成的危害&#xff0c;以及如何减少这种危害 1.2. 人工智能也有助于减少森林退化和非法砍伐 1.3. 人工智能甚至可以将我们从枯燥…
阅读更多...
RISC-V特权架构 - 中断定义

RISC-V特权架构 - 中断定义

RISC-V特权架构 - 中断定义 1 中断类型1.1 外部中断1.2 计时器中断1.3 软件中断1.4 调试中断 2 中断屏蔽3 中断等待4 中断优先级与仲裁5 中断嵌套6 异常相关寄存器 本文属于《 RISC-V指令集基础系列教程》之一&#xff0c;欢迎查看其它文章。 1 中断类型 RISC-V 架构定义的中…
阅读更多...
idea打开文件乱码，设置编码

idea打开文件乱码，设置编码

idea整个项目都设置了utf-8了&#xff0c;但是还是有一个文件是其他编码_(ཀ」 ∠)__ 。 配置项目编码 在设置中设置编码 配置具体目录的编码 上面的设置之后&#xff0c;还是有几个文件一直是乱码&#xff0c;需要单独配置。 偶尔引入的依赖中的文件也会乱码&#xff0c;需…
阅读更多...
题目：摆花（蓝桥OJ 0389）

题目：摆花（蓝桥OJ 0389）

问题描述&#xff1a; 题解&#xff1a; #include <bits/stdc.h> using namespace std; using ll long long; const int N 105; const ll p 1e6 7; ll a[N], dp[N][N];int main() {int n, m; cin >> n >> m;for(int i 1; i < n; i)cin >> a[i…
阅读更多...
【科研基础】VAE: Auto-encoding Variational Bayes

【科研基础】VAE: Auto-encoding Variational Bayes

[1]Kingma, Diederik P., and Max Welling. “Auto-encoding variational bayes.” arXiv preprint arXiv:1312.6114 (2013). [2] [论文简析]VAE: Auto-encoding Variational Bayes[1312.6114] [3] The Reparameterization Trick [4] 变分法的基本原理是什么？ 文章目录 1-…
阅读更多...
我的编程之路：从非计算机专业到Java开发工程师的成长之路 | 学习路线 | Java | 零基础 | 学习资源 | 自学

我的编程之路：从非计算机专业到Java开发工程师的成长之路 | 学习路线 | Java | 零基础 | 学习资源 | 自学

小伙伴们好&#xff0c;我是「 行走的程序喵」&#xff0c;感谢您阅读本文&#xff0c;欢迎三连~ &#x1f63b; 【Java基础】专栏&#xff0c;Java基础知识全面详解&#xff1a;&#x1f449;点击直达 &#x1f431; 【Mybatis框架】专栏&#xff0c;入门到基于XML的配置、以…
阅读更多...
负荷频率控制LFC，自抗扰ADRC控制，麻雀SSA算法优化自抗扰参数，两区域二次调频simulink/matlab

负荷频率控制LFC，自抗扰ADRC控制，麻雀SSA算法优化自抗扰参数，两区域二次调频simulink/matlab

红色曲线为优化结果&#xff0c;蓝色曲线为没有自抗扰和没有优化的结果&#xff01;
阅读更多...
基于springboot实现蜗牛兼职网平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现蜗牛兼职网平台系统项目【项目源码+论文说明】计算机毕业设计

基于springboot实现蜗牛兼职网平台系统演示 摘要 随着科学技术的飞速发展&#xff0c;社会的方方面面、各行各业都在努力与现代的先进技术接轨&#xff0c;通过科技手段来提高自身的优势&#xff0c;蜗牛兼职网当然也不能排除在外。蜗牛兼职网是以实际运用为开发背景&#xff…
阅读更多...
【C语言】多文件编程以及static关键字

【C语言】多文件编程以及static关键字

1、多文件编程 把函数声明放在头文件xxx.h中&#xff0c;在主函数中包含相应头文件在头文件对应的xxx.c中实现xxx.h声明的函数 a、主文件 #include<stdio.h> #include "MyMain.h"//需要包含头文件&#xff0c;头文件包含我们自定义的函数int main(){int num…
阅读更多...
6、鸿蒙学习-Stage模型应用程序包结构

6、鸿蒙学习-Stage模型应用程序包结构

基于Stage模型开发的应用&#xff0c;经编译打包后&#xff0c;其应用程序的结构如下图应用程序包结构&#xff08;Stage模型&#xff09;所示。开发者需要熟悉应用程序包结构相关的基本概念。 一、在开发态&#xff0c;一个应用包含一个或者多个Module&#xff0c;可以在DevE…
阅读更多...
【管理咨询宝藏60】顶级咨询公司对医药行业的研究报告

【管理咨询宝藏60】顶级咨询公司对医药行业的研究报告

【管理咨询宝藏60】顶级咨询公司对医药行业的研究报告 【格式】PDF 【关键词】医疗行业、战略咨询、行业洞察 【核心观点】 - 195页精品内容&#xff0c;让你彻底透视医疗行业的发展现状和未来趋势 - 前20大交易约占医疗交易总额的65%&#xff1b;医疗行业大部分为制药业投资交…
阅读更多...
c++的学习之路：5、类和对象（1）

c++的学习之路：5、类和对象（1）

一、面向对象和面向过程 在说这个定义时&#xff0c;我就拿c语言举例&#xff0c;在c语言写程序的时候&#xff0c;基本上就是缺什么函数&#xff0c;就去手搓一个函数&#xff0c;写的程序也只是调用函数的&#xff0c;而c就是基于面向对象的开发&#xff0c;他关注的不再是单…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023