type
status
date
slug
summary
tags
category
icon
password
Edited
Nov 9, 2024 02:42 PM
Created
Dec 6, 2023 11:12 AM
前言
简单讲一下需要使用到的一些工具库
husky
husky
typicode • Updated Nov 24, 2024
Modern native git hooks made easy
Husky improves your commits and more 🐶 woof!
也就是说,husky为我们提供了一系列的git hooks,用于在进行git操作时的一些预处理等等
lint-staged
lint-staged
lint-staged • Updated Nov 23, 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包,用于使用以上内容
以下是目录结构
首先我们先安装所需的库
接下来我们来依依说明每个文件
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库之后,我们就会看见如下界面
在pre-commit文件中,也能看到对应的hook
内容
后面,在你提交commit的时候,就会触发该钩子了
- 作者:JinSo
- 链接:https://jinso365.top/article/monorepo-lint
- 声明:本文采用 CC BY-NC-SA 4.0 许可协议,转载请注明出处。