husky 和 lint-staged 构建代码项目规范

目录

前言

最简单的方法

过 scripts 来解决如果检测工具多，需要多次处理

通过 husky(哈士奇)来解决容易遗忘的问题

1. 安装

2. husky init 

3. 试一试​

lint-stadge 只 lint 改动的

1. 安装

2. 修改 package.json 配置

3. 添加 npm 脚本:

4.使用 Husky 触发 lint-staged:

参考配置

总结 

附：npx 查找规则

前言

一个项目如果涉及到多人协作，由于每个人代码的书写习惯和风格不太一样，如果没有统一的规范，那就会很乱，这对代码的可维护性大大降低。

所以现代工程有个一环节就是代码风格检查(Code Linting，下面以 Lint 简称)，来保障代码规范一致性

现在也有很多保障代码规范一致性，比如：ESLint、prettier、SCSSLint、JSONLint 等。比较全的可以见 github 官方的 Lint 工具列表[1]

本文不会介绍每一个工具怎么用，而是介绍怎么把这些工具串起来，构建一个代码检查的工作流。

最简单的方法

最简单的方法就是自己每次在 commit 代码之前先处理一下，以 eslint 举例：

eslint src/**/*.jsgit add .git commit -m 'feat: 一个新 feature'

这种方法有两个致命的缺点：

  1. 如果检测工具多，需要多次处理。
  2. 很容易遗忘。

过 scripts 来解决如果检测工具多，需要多次处理

scripts 就是 package.json 里的 scripts。

比如你同时需要用到 prettier 和 eslint，可以定制一个脚本，然后运行这个脚本之后再提交代码：

{"scripts": {"lint": "prettier --write & eslint src/**/*.js"}
}

然后每次提交代码前就只需要：

pm run lintgit add .git commit -m 'feat: 一个新 feature'

通过 husky(哈士奇)来解决容易遗忘的问题

虽然咱们通过 scripts 来解决检查工具多的问题，但是还有一个容易遗忘怎么解呢？

解决方案就是通过 husky，原理实际上是通过 git hooks[2] 来解决，husky 就是让 git hooks 用起来更容易的工具。

“You can use it to lint your commit messages , run tests , lint code , etc... when you commit or push. Husky supports all Git hooks[3].”

这个是 husky 官网的一句话，用来描述 husky 可以做什么。

那到底怎么解决呢？接下来介绍一下 husky 的使用方式：

1. 安装
  • 安装 husky
npm install --save-dev husky
2. husky init 

  • husky init 推荐​

    init 命令简化了项目中的 husky 设置。它会在 .husky/ 中创建 pre-commit 脚本，并更新 package.json 中的 prepare 脚本。随后可根据你的工作流进行修改。

npx husky init

执行完之后文件根目录会多一个 .husky 文件夹：

3. 试一试​

恭喜你！你已经成功地用一个命令设置了你的第一个 Git 钩子 🎉。让我们测试一下：

  • 修改 .husky/pre-commit 文件
  •  脚本会在每次提交时运行
pnpm lint

**问题：**默认进行的是全量检查，耗时问题，历史问题。

这个时候 commit 就会先自动执行 npm run lint 了，然后才会 commit。

但是这样解决了以上的问题，当项目大的时候会遇到一些问题，比如每次 lint 是整个项目的文件，文件太多导致跑的时间过久，另外如果这个 lint 是在项目后期接入的话，可能 lint 命令会报很多错误，全量去改可能会有问题。

lint-stadge 只 lint 改动的

基于上面的痛点，lint-stadge 就出现了，它的解决方案就是只检查本次提交所修改(指 git 暂存区[5]里的东西)的问题，这样每次 lint 量就比较小，而且是符合我们的需求的。

“如果不知道暂存区的需要去复习一下 git 知识，简单来说就是 git add 或者 git commit -a 的那部分代码会先放到暂存区。”

1. 安装
npm install -D lint-staged
2. 修改 package.json 配置

这段配置是 lint-staged 的配置项，它定义了当运行 lint-staged 时，对于特定文件类型应该执行哪些命令。下面是对这段配置的详细解释：

  • lint-staged: 这是 lint-staged 的配置对象，用于定义不同的文件模式和对应的命令。

  • "*.{js,ts,vue}": 这是一个 glob 模式，表示匹配所有扩展名为 .js、.ts 或 .vue 的文件。Glob 模式是一种文件路径模式，用于匹配文件系统中的文件名。

  • "eslint --fix": 这是一个命令，当 lint-staged 运行时，它会对所有匹配上述文件模式的文件执行这个命令。这里使用的是 ESLint，一个流行的 JavaScript 和 TypeScript 的代码质量和代码风格检查工具。

    • eslint 是命令本身，用于检查 JavaScript 或 TypeScript 代码中的问题。
    • --fix 是一个选项，它告诉 ESLint 尝试自动修复那些可以自动修复的问题。

当你在 Git 仓库中运行 git commit 命令时，如果 Husky 配置了 pre-commit 钩子来运行 lint-staged，那么 lint-staged 将会检查暂存区（staged）的文件。对于所有扩展名为 .js、.ts 或 .vue 的文件，它会执行 eslint --fix 命令。这将自动修复这些文件中的可修复问题，并将修复后的文件重新暂存，准备提交。

  "lint-staged": {"*.{js,ts,vue}": ["eslint --fix"]}
3. 添加 npm 脚本:

在 package.json 中添加你需要的 npm 脚本，

  "scripts": {"lint-staged": "lint-staged"},
4.使用 Husky 触发 lint-staged:

在完成上面的配置之后，可以手动通过 npx lint-staged 来检查暂存区里面的文件。

手动是永远不会手动的，自动的方法就是将 npx lint-staged 设置到 hook 里。

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

到现在我们的代码检查工作流就完成了。在 git commit 的时候就自动的回去帮我们跑检查脚本，而且还是只针对我们本次提交的代码进行检查。

参考配置

  1. 安装了插件 ESlint，开启保存自动修复
  2. 禁用了插件 Prettier，并关闭保存自动格式化
// ESlint插件 + Vscode配置 实现自动格式化修复
"editor.codeActionsOnSave": {"source.fixAll": true
},
"editor.formatOnSave": false,

.eslintrc 配置可以参考：

 rules: {'prettier/prettier': ['warn',{singleQuote: true, // 单引号semi: false, // 无分号printWidth: 80, // 每行宽度至多80字符trailingComma: 'none', // 不加对象|数组最后逗号endOfLine: 'auto' // 换行符号不限制（win mac 不一致）}],// eslint 关注于规范，如果不符合规范报错'vue/multi-word-component-names': ['warn',{ignores: ['index'] // vue组件名称多单词组成（忽略index.vue）}],'vue/no-setup-props-destructure': ['off'], // 关闭 props 解构的校验// 💡 添加未定义变量错误提示，create-vue@3.6.3 关闭，这里加上是为了支持下一个章节演示。'no-undef': 'error'}

总结 

Husky 是一个用于管理 Git 钩子的工具，它可以让你在提交代码前自动运行脚本，比如代码格式化、代码检查等。它通过在 Git 仓库的 .husky 目录下创建钩子脚本来实现这个功能。

Husky使 Git hooks 变得简单icon-default.png?t=N7T8https://typicode.github.io/husky/zh/

lint-staged 是一个运行在 Git 钩子上的 Node.js 脚本，它允许你使用 npm 脚本对暂存区的文件进行 lint 检查。它通常与 Husky 结合使用，以确保每次提交的代码都符合代码质量标准。

lint-staged - npmLint files staged by git. Latest version: 15.2.7, last published: a month ago. Start using lint-staged in your project by running `npm i lint-staged`. There are 2202 other projects in the npm registry using lint-staged.icon-default.png?t=N7T8https://www.npmjs.com/package/lint-staged

使用 Husky 和 lint-staged 的好处是，它们可以帮助你自动化代码质量检查流程，确保每次提交的代码都符合团队的编码标准。这样不仅可以减少代码审查的工作量，还可以提高代码的整体质量

附：npx 查找规则

npx 是一个命令行工具，它随同 npm（Node Package Manager）一起提供，用于执行包中的程序。npx 允许你运行本地或全局安装的包中的命令，而无需单独安装每个包的可执行文件。

以下是 npx 的一些关键特性和查找规则：

  1. 执行本地或全局包：npx 首先检查当前项目中的 node_modules/.bin 目录，如果找到了要执行的命令，就会使用它。如果没有找到，它会尝试全局安装的包。

  2. 临时安装：如果你指定了一个包名但没有指定版本，npx 会临时安装该包的最新版本，然后执行它。

  3. 版本控制：如果指定了版本，npx 会根据版本号安装并执行正确的版本。

  4. 环境隔离：npx 会为每个执行创建一个干净的 node_modules 目录，这意味着不同的项目可以有不同的依赖版本，而不会相互干扰。

  5. 使用 npx 执行脚本：你可以使用 npx 来运行 package.json 中定义的脚本，例如 npx my-package start。

  6. 使用 npx 作为代理：你可以使用 npx 来代理全局安装的命令，例如 npx -p some-package some-command，这会先安装 some-package，然后执行 some-command。

  7. 查找规则：npx 首先在本地项目中查找命令，如果没有找到，它会在全局 node_modules 中查找。如果两者都没有找到，它会尝试从 npm 注册表下载并安装最新的包。

  8. 使用 --no-install：如果你不想让 npx 安装缺失的包，可以使用 --no-install 选项。

  9. 使用 --ignore-existing：如果你只想使用全局安装的包，可以使用 --ignore-existing 选项。

  10. 使用 --npm：如果你想要指定使用特定的 npm 版本，可以使用 --npm 选项。

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

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

相关文章

MAVSDK动态库与静态库及mavsdk_server程序macOS平台编译与安装

MAVSDK动态库与静态库及mavsdk_server程序macOS平台编译与安装

1.克隆mavsdk: git clone https://github.com/mavlink/MAVSDK.git --recursive 2.编译静态库 cmake -Bbuild/default -H. -DCMAKE_BUILD_TYPE=Release -DBUILD_SHARED_LIBS=OFF 生成makefile 生成成功,开始编译 cmake --build build/default -j8 成功生成libmavsdk.a 开…
阅读更多...
Java之Stream流的笔记--手写版

Java之Stream流的笔记--手写版

Stream流通过讲集合或数组转换成链状流式的结构，简化了集合和数组进行排序、筛选、遍历、去重、统计等操作。主要包括创建流、中间操作、终结操作。若流中无终结操作，则中间操作不会执行；流是一次性的，使用完就会失效，…
阅读更多...
vmware workstation 虚拟机安装

vmware workstation 虚拟机安装

vmware workstation 虚拟机安装 VMware Workstation Pro是VMware（威睿公司）发布的一代虚拟机软件，中文名称一般称 为"VMware 工作站".它的主要功能是可以给用户在单一的桌面上同时运行不同的操作系统，它也是可进 行开发…
阅读更多...
PDF公式转Latex

PDF公式转Latex

文章目录 摘要数据集 UniMER介绍下载链接 LaTeX-OCRUniMERNet安装UniMER 用的数据集介绍下载链接 PDF-Extract-Kit整体介绍效果展示评测指标布局检测公式检测公式识别 使用教程环境安装参考[模型下载](models/README.md)下载所需模型权重 在Windows上运行在macOS上运行运行提取…
阅读更多...
MySQL：库操作

MySQL：库操作

1. 创建数据库 create database [if not exists] name [create_specification], [create_specification]... []内为可选的选项 create_specification: character set charset_name -- 指定数据库采用的字符集 -- 数据库未来存储数据 collate collation_name -- 指定数据库字符…
阅读更多...
Hi3861 OpenHarmony嵌入式应用入门--华为 IoTDA 设备接入

Hi3861 OpenHarmony嵌入式应用入门--华为 IoTDA 设备接入

华为云物联网平台（IoT 设备接入云服务）提供海量设备的接入和管理能力，可以将自己的 IoT 设备 联接到华为云，支撑设备数据采集上云和云端下发命令给设备进行远程控制，配合华为云物联网平台的服 务实现设备与设备之间的控…
阅读更多...
vue3.0 项目h5，pc端实现扫描二维码 qrcode-reader-vue3

vue3.0 项目h5，pc端实现扫描二维码 qrcode-reader-vue3

qrcode-reader-vue3 插件简述 qrcode-reader-vue3插件，允许您在不离开浏览器的情况下检测和解码二维码。 🎥 访问设备摄像头并持续扫描传入帧。QrcodeStream🚮 渲染到一个空白区域，您可以在其中拖放要解码的图像。QrcodeDropZon…
阅读更多...
【vivado】 管脚约束（io constraints）

【vivado】 管脚约束（io constraints）

一、前言 在FPGA工程中，所有的输入输出端口最终都要与FPGA IO 引脚进行绑定，需要根据需求对输入输出端口进行位置、电平标准、端口变换速率等进行约束，本文对io相关约束语法含义进行记录以便查询。 二、IO constrain 在vivado语言模板下可以…
阅读更多...
MFC流的形式读取图片

MFC流的形式读取图片

1.基于对话框布置控件 2.给控件绑定变量 3.给按钮控件添加响应函数 void CMFC流的形式读取图片Dlg::OnBnClickedButton1() {// TODO: 在此添加控件通知处理程序代码//HDC mECGDC; // 设备描述表句柄//CPen mECGDrawPen; // ECG波形画笔//RECT mECGRect; // 在该矩形区域内画…
阅读更多...
香橙派AI Pro开发板与YOLOv5结合实战：打造高效图像识别解决方案

香橙派AI Pro开发板与YOLOv5结合实战：打造高效图像识别解决方案

引言 在人工智能和物联网快速发展的今天，图像识别技术已经成为众多应用场景中的关键组成部分。香橙派（Orange Pi）AI Pro开发板作为一款高性能、低功耗的嵌入式计算平台，为开发者提供了强大的硬件支持。而YOLOv5（You O…
阅读更多...
OpenCV图像处理——判断轮廓是否在圆环内

OpenCV图像处理——判断轮廓是否在圆环内

要判断一个轮廓是否在圆环内&#xff0c;可以将问题分解为两个步骤&#xff1a; 确保轮廓的所有点都在外圆内。确保轮廓的所有点都在内圆外。 下面是一个完整的示例代码&#xff0c;展示如何实现这一点&#xff1a; #include <opencv2/opencv.hpp> #include <iostr…
阅读更多...
人工智能是帮助开发人员还是取代他们？

人工智能是帮助开发人员还是取代他们？

最近&#xff0c;神经网络已经成为应用开发中不可或缺的工具。它们大大简化和加速了这一过程。 例如&#xff0c;使用GitHub Copilot&#xff0c;可以根据任务描述自动生成重复的代码部分。神经网络可以创建和运行测试&#xff0c;识别错误&#xff0c;甚至提出修复错误的方法…
阅读更多...
昇思25天学习打卡营第21天|ResNet50迁移学习

昇思25天学习打卡营第21天|ResNet50迁移学习

在实际应用场景中&#xff0c;由于训练数据集不足&#xff0c;所以很少有人会从头开始训练整个网络。普遍的做法是&#xff0c;在一个非常大的基础数据集上训练得到一个预训练模型&#xff0c;然后使用该模型来初始化网络的权重参数或作为固定特征提取器应用于特定的任务中。 …
阅读更多...
MySQL-ubuntu环境下安装配置mysql

MySQL-ubuntu环境下安装配置mysql

文章目录 什么是数据库&#xff1f;一、ubuntu环境下安装mysql二、配置mysql配置文件1.先登上root账号2.配置文件的修改show engines \G; mysql和mysqld数据库的基础操作登录mysql创建数据库显示当前数据库使用数据库创建表插入students表数据打印students表数据select * from …
阅读更多...
AcWing 671. DDD

AcWing 671. DDD

给定一个整数&#xff0c;请根据下表确定并输出其对应的城市名称&#xff1a; 如果输入数字不在上表中&#xff0c;则输出 DDD nao cadastrado。 输入格式 共一行&#xff0c;包含一个整数。 输出格式 输出对应城市名称&#xff0c;如果没有对应城市名称&#xff0c;则输出…
阅读更多...
postman macOS版安装包

postman macOS版安装包

链接: https://pan.baidu.com/s/1Y7j4mxB1Otmf3Ku41e7v7w?pwdfy99 提取码: fy99 安装后的效果
阅读更多...
udp协议模拟远程输入指令控制xshell

udp协议模拟远程输入指令控制xshell

不了解udp协议的可以先看一下udp协议下的socket函数_udp socket函数-CSDN博客 我之前还写过模拟实现xshell的模拟实现简单的shell-CSDN博客 如今我们要模拟的是让别人连网络连到我们主机&#xff0c;他可以执行命令&#xff1a; 1.接口 我们之前是用execl系列的函数来实现的…
阅读更多...
IEEE（常用）参考文献引用格式详解 | LaTeX参考文献规范（IEEE Trans、Conf、Arxiv）

IEEE（常用）参考文献引用格式详解 | LaTeX参考文献规范（IEEE Trans、Conf、Arxiv）

IEEE参考文献引用格式注意事项 期刊已正式出版&#xff08;有期卷号&#xff09;录用后在线访问即Early access&#xff08;无期卷号&#xff09; Arxiv论文会议论文IEEE缩写进阶其他 IEEE论文投稿前的参考文献格式检查&#xff01;&#xff08;如果一些细节你采用别的形式&…
阅读更多...
香橙派AIpro：体验强劲算力，运行ROS系统

香橙派AIpro：体验强劲算力，运行ROS系统

文章目录 前言一、香橙派AIpro开箱及功能介绍1.1香橙派AIpro开箱1.2香橙派AIpro功能介绍 二、香橙派AIpro资料下载及环境搭建2.1资料下载2.2环境搭建2.3使用串口启动进入开发板2.4使用HDMI线接入屏幕启动 三、部署ROS系统四、香橙派AIpro的使用和体验感受 前言 本篇文章将带体…
阅读更多...
在 SwiftUI 中实战使用 MapKit API

在 SwiftUI 中实战使用 MapKit API

文章目录 前言新 MapKit API 的引入控制初始地图位置相机位置的双向绑定总结 前言 SwiftUI 与 MapKit 的集成在今年发生了重大变化。在之前的 SwiftUI 版本中&#xff0c;我们将 MKMapView 的基本功能封装到名为 Map 的 SwiftUI 视图中。幸运的是&#xff0c;事情发生了变化&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023