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

这篇具有很好参考价值的文章主要介绍了从0搭建Vue3组件库(十三):引入Husky规范git提交。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

为什么要引入 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:script
pnpm run lint:style

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

commitlint 的安装与使用

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

  • build: 编译相关的修改,例如发布版本、对项目构建或者依赖的改动
  • chore: 其他修改, 比如改变构建流程、或者增加依赖库、工具等
  • ci: 持续集成修改
  • docs: 文档修改
  • feat: 新特性、新功能
  • fix: 修改 bug
  • perf: 优化相关,比如提升性能、体验
  • 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,就会发现报错了

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

正确提交方式应为<type>(<?scope>): <subject>,例如

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前端进阶,里面有详细的搭建过程,记得点赞哦~~

从0搭建Vue3组件库(十三):引入Husky规范git提交文章来源地址https://www.toymoban.com/news/detail-469546.html

到了这里,关于从0搭建Vue3组件库(十三):引入Husky规范git提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

原文地址:https://www.cnblogs.com/zdsdididi/p/17453936.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 从0搭建Vue3组件库(十一): 集成项目的编程规范工具链(ESlint+Prettier+Stylelint)

    欲先善其事,必先利其器。一个好的项目是必须要有一个统一的规范,比如代码规范,样式规范以及代码提交规范等。统一的代码规范旨在增强团队开发协作、提高代码质量和打造开发基石,所以每个人必须严格遵守。 本篇文章将引入 ESLint+Prettier+Stylelint 来对代码规范化。 ESLint

    2024年02月02日
    浏览(12)
  • uniapp+vue3+vite+ts搭建项目引入uni-ui和uviewPlus组件库

    一、创建项目架构 首先使用官方提供的脚手架创建一个项目 在这里插入代码片 ,这里我创建的 vue3 + vite + ts 的项目: (如命令行创建失败,请直接访问 gitee下载模板) 二、下载依赖 启动 三、下载安装包 引入uni-ui src/package.json 文件配置easycom模式 引入uview-plus main.ts配置 u

    2024年02月13日
    浏览(7)
  • 代码提交规范-ESLint+Prettier+husky+Commitlint

    先看下思维导图分析 装包配置.eslintrc.js 配置忽略文件 运行 详细讲解 以react 项目为例 配置文件 eslintrc文件 根目录/.eslintrc.js 设置忽略文件 .eslintignore 主要步骤 配置perttier 配置忽略文件 处理eslint的冲突 配置vscode的setting.json 配置.prettierrc.js文件 判断是否生效直接使用命令 n

    2024年02月04日
    浏览(9)
  • vue3项目+TypeScript前端项目—— vue3搭建项目+eslint+husky

    今天来带大家从0开始搭建一个vue3版本的后台管理系统。一个项目要有统一的规范,需要使用eslint+stylelint+prettier来对我们的代码质量做检测和修复,需要使用husky来做commit拦截,需要使用commitlint来统一提交规范,需要使用preinstall来统一包管理工具。 下面我们就用这一套规范

    2024年02月22日
    浏览(10)
  • Vite4+Pinia2+vue-router4+ElmentPlus搭建Vue3项目(组件、图标等按需引入)[保姆级]

    本文为快速搭建vite4项目,一些插件的详情就不做过多的解释,都放有官网链接,需要深入了解的小伙伴可自行查看。至于为什么选择使用vite,因为它具备着快速启动、按需编译、模块热更新的亮点。归根结底最大的特点就是 快 。vue的创始人是尤雨溪大佬,vite也是他。所以

    2023年04月19日
    浏览(9)
  • vue项目配置git提交规范

    项目中代码格式以及git message如果不加以约束,可能最终的格式会五花八门,这样很不利于我们的项目合作。所以我们需要使用工具来约束提交代码和信息的格式。 Husky 是一个 Git Hook 工具,可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制,它允许在 Git 执行

    2024年02月11日
    浏览(7)
  • 【git规范--husky的使用】

    在团队开发中,或者自己的项目中,我们都会用到git来管理我们的代码,但是当我们commit(git commit)的时候,是没有规范的,有的时我们偷懒甚至 git commit -m\\\'..\\\' ,这种提交虽然当时爽,但如果有一天我们需要回滚版本的时候, git relog ,妈耶,这都是啥啊,如果在团队开发中这

    2024年02月05日
    浏览(13)
  • git 提交vue代码时遇 代码检查 规范性 报错 导致提交不了

    git 提交vue代码时遇 代码检查 规范性 报错 导致提交不了, ​ 在代码提交之前,进行代码规则检查能够确保进入git库的代码都是符合代码规则的。但是整个项目上运行lint速度会很慢,lint-staged能够让lint只检测暂存区的文件,所以速度很快。 一般是eslint检查导致,在package.j

    2024年02月11日
    浏览(8)
  • vite+vue3+ts+eslint+prettier+husky+lint-stated 项目搭建

    项目搭建 创建初始项目 Node.js 版本 14.18+,16+ npm create vite@latest my-vue-app --template vue-ts 添加eslint eslint 初始化 npm init @eslint/config eslint初始化脚本,按自己的要求选择相应的eslint 配置,以下是我选择的配置项 ✔ How would you like to use ESLint? · style ✔ What type of modules does your project

    2024年02月08日
    浏览(19)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包