从0搭建Vue3组件库(十三):引入Husky规范git提交|天天滚动

来源: 博客园 时间:2023-06-03 14:27:31
为什么要引入 husky?

虽然我们项目中引入了prettiereslint对代码格式进行了校验,但是多人开发的时候难免依然会有人提交不符合规范的代码到仓库中,如果我们拉取到这种代码还得慢慢对其进行修改,这是一件很麻烦的事情,同时也为了避免团队成员提交五花八门message,因此我们可以引入 husky 来从源头上解决此类问题。简单来说,husky 可以在我们提交代码之前校验我们的代码是否符合我们配置的规范。接下来就让我们看一下 husky 的具体使用吧!

husky 的使用

首先安装


(资料图)

pnpm i husky -D -w

在 package.json 中 scripts 中设置 prepare 钩子:husky install,在使用pnpm install的时候就会自动执行husky,以便于别人拉取完我们代码进行pnpm insall的时候直接进行husky install。我们可以使用命令

pnpm pkg set scripts.prepare="husky install"

或者你也可以手动添加

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

因为我们没有执行pnpm install,所以要先执行一下

npx husky install

然后添加一个 commit 钩子文件

npx husky add .husky/pre-commit "npm run xxx"

然后我们就会发现根目录出现了.husky/pre-commit 文件,我们修改一下 commit 之前的命令,让其提交之前先进行 lint 校验

#!/usr/bin/env sh. "$(dirname -- "$0")/_/husky.sh"pnpm run lint:scriptpnpm run lint:style

修改一个不符合 eslint 的规范文件,然后进行提交之后你会发现它会先自动给你修复之后再进行提交,如果无法修复则抛出一个错误

commitlint 的安装与使用

我们看开源项目的时候会看到他们代码提交信息会有诸如feat: 添加xxx,fix: 修复xxxbug之类的信息,其实这些也是有一个规范的,下面列举一些常用的 git 提交规范

build: 编译相关的修改,例如发布版本、对项目构建或者依赖的改动chore: 其他修改, 比如改变构建流程、或者增加依赖库、工具等ci: 持续集成修改docs: 文档修改feat: 新特性、新功能fix: 修改 bugperf: 优化相关,比如提升性能、体验refactor: 代码重构revert: 回滚到上一个版本style: 代码格式修改, 注意不是 css 修改test: 测试用例修改

为了让我们团队都使用这些提交规范我们就需要用到commitlint,首先我们需要安装几个工具

pnpm install --save-dev @commitlint/config-conventional @commitlint/cli -w

其中@commitlint/config-conventional是一个规范配置,标识采用什么规范来执行消息校验, 这个默认是 Angular 的提交规范,@commitlint/cli是一个使用 lint 规则来校验提交记录的命令行工具

新建commitlint.config.cjs,这里可以自定义配置 git 提交的 message 规范

module.exports = {  extends: ["@commitlint/config-conventional"]};

然后在.husky/commit-msg 中添加npx --no -- commitlint --edit "$1"

#!/bin/sh. "$(dirname "$0")/_/husky.sh"npx --no -- commitlint --edit "$1"

然后提交一个不符合规范的 type,就会发现报错了

正确提交方式应为(): ,例如

feat(global): 添加commitlint规范
配置 lint-staged

我们根据上面的配置是可以实现我们想要的效果的,但是我们会发现每次提交代码的时候 ESlint 或 Stylelint 都会检查所有文件,而我们需要的是只让它们检测新增的文件,因此我们可以使用lint-staged来解决这个问题

首先安装lint-staged

pnpm add lint-staged -D -w

然后再 package.json 中进行配置

{  "lint-staged": {    "src/**/*.{js,jsx,ts,tsx,vue}": [      "eslint --ext .js,.jsx,.vue,.ts,.tsx --fix --quiet ./",      "stylelint --fix \"packages/components/src/**/*.{css,less}\""    ]  },    "scripts": {    "lint-staged": "lint-staged"  },}

最后修改一下``.husky/pre-commit

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

ok,现在它只会检测我们添加到暂存区的文件了

完整代码已经提交到easyest上了,需要的小伙伴可以自取~

最后

如果你对组件库开发感兴趣的话可以扫码关注公众号web前端进阶,里面有详细的搭建过程,记得点赞哦~~

X 关闭

热门推荐

说服读音是_说服读音

2023-06-03   互联网

兔子的养殖_做好这几点

2023-06-03   万能网

篮坛全能王_篮球全能王

2023-06-03   互联网

西瓜什么时候会降价

2023-06-03   互联网

少年志|六一云队课主题曲《少年乘风》来啦

2023-06-03   全国少工委微信公众号

瑜伽教练的工资是多少

2023-06-03   互联网

南方电网 人才和机制“双峰并立”

2023-06-03   中国产业经济信息网

白花蛇草水_花蛇

2023-06-03   互联网

5条生态导览路线带您探索“身边的美”

2023-06-03   北京青年报官网

地铁17号线昌平段预计8月底完工

2023-06-03   北京青年报官网

东北大黄米是什么米

2023-06-02   互联网

天天热推荐:找到了000

2023-06-02   万能网

避免吃脏虾线的小技巧

2023-06-02   科技工作者之家

2023“婴幼儿照护周”举行 环球聚看点

2023-06-02   光明日报客户端

窝小芽助力社区基金 守护孩子健康童年_新消息

2023-06-02   中国产业经济信息网

华昌化工股票前景

2023-06-02   互联网

全国50强,江大28!_今日快讯

2023-06-02   江苏大学

汽水鸡翅做法?

2023-06-02   南方养生网

【原】正面强化,胜过任何的批评教育

2023-06-02   个人图书馆-若水123

“新手”对“老将”,这两台紧凑型SUV谁能更胜一筹?

2023-06-02   汽车之家通过图片,我们可以看到两车在整车实用性配置,以及手机远程功能方面,赛图斯相比途铠拥有更丰富的功能,途铠则多提供了Car Play;值得一提的是,赛图斯车机系统还支持OTA升级,对于使用智能手机的年轻一代来说,这一功能的存在相当有必要。用智能武装驾驶,安全时刻在线除了车载智能科技,面对当下愈发复杂的道路情况,更高级别的智能驾驶辅助系统也是非常必要的存在。不管你是经验老道的老司机,还是战战兢兢的新手上路,更丰富的智能驾驶辅助系统,意味着更安全的驾驶体验以及对整车驾驶的游刃有余。在驾驶辅助系统方面,赛图

2023年高考举报电话公布!

2023-06-02   智慧海都

发帖子怎么发_发帖子

2023-06-02   万能网

超高清视频产业链关键环节取得突破

2023-06-02   人民网-人民日报

Copyright   2015-2022 中国行业信息网版权所有 关于我们 备案号:   联系邮箱:29 59 11 57 8@qq.com