🔨在 Monorepo 中对代码进行规范(husky + lint-staged)
00 分钟
2023-12-6
2023-12-6
type
status
date
slug
summary
tags
category
icon
password
Edited
Dec 6, 2023 12:14 PM
Created
Dec 6, 2023 11:12 AM

前言

简单讲一下需要使用到的一些工具库

husky

husky
typicodeUpdated Aug 11, 2024
Modern native git hooks made easy
Husky improves your commits and more 🐶 woof!
也就是说,husky为我们提供了一系列的git hooks,用于在进行git操作时的一些预处理等等
 

lint-staged

lint-staged
lint-stagedUpdated Aug 11, 2024
Run linters against staged git files and don't let 💩 slip into your code base!
专门用于在通过 git 提交代码之前,对暂存区的代码执行一系列的格式化
 

Biome

个人也非常推荐
不是很喜欢 eslint + prettier 那一套,麻烦,而且要装一堆插件
One toolchain for your web project
通过一个工具就可以完成包括 format、lint等等的工具链(速度也非常快,内部使用rust编写的)
顺便说一下,之前 prettier 也发起了一个 rust化的竞赛,biome也获得了最终的奖金🎉🎉🎉
 

monorepo

这边使用的是 pnpm + turbo 组合实现的
目录结构
目录结构
包含三个分区
 
接下来我们就直接进行主题
 

lint

在 packages 下创建一个lint包,用于使用以上内容
以下是目录结构
notion image
首先我们先安装所需的库
接下来我们来依依说明每个文件
biome.json
默认的一些配置,后续可以根据每个项目的不同去扩展,默认配置可以通过 extends 去导入
在其他项目中,通过如下方式引用(如果是npm安装,则是node_modules)
 
prepare.js
通过npm提供的hook,可以在安装该包的时候执行prepare指令,我们可以给prepare挂载一个指令去执行该文件
需要在 package.json 中添加这条指令
prepare.js文件的目的就是找到git仓库所在的目录,并为其添加上.husky文件夹
 
首先我们需要根据目录向上去递归遍历找到最终的git仓库文件夹,找不到的话则报错(注意:husky必须安装在git所在的目录,不然会报错)
通过以上方式,最终就能找到 git 所在的目录了
接下来,我们根据git目录去执行husky install指令,并添加pre-commit钩子
通过这种方式,我们就可以在安装lint包的同时,帮我们创建好.husky文件夹,以及pre-commit钩子,最后在钩子中添加 node lintStagedJs 来实现格式化
 
runLintStaged.mjs
同理,我们需要在该文件中也要找到git仓库所在目录,然后在根目录去执行lint来进行整体的格式化
注意,有一点不一样,因为使用的是mjs,所以需要手动设置一下__dirname
找到之后,就可以去执行格式化命令了
 

成效

最终,我们就可以在其他项目中去引用lint包了
或者也可以将库发送到npm仓库中,去直接下载
 
安装lint库之后,我们就会看见如下界面
notion image
在pre-commit文件中,也能看到对应的hook
notion image
内容
 
后面,在你提交commit的时候,就会触发该钩子了
notion image
 
上一篇
TurboLC-Web 小小部署一波
下一篇
前端实现PDF预览的几种选择(pdfjs-dist、react-pdf、pdf-viewer)

评论
Loading...