Vue3基于husky的代码检查工作流

 更新时间:2023年11月28日 14:29:52   作者:小沐°  
husky是一个git hooks工具(git的钩子工具,可以在特定时机执行特定的命令),这篇文章主要介绍了Vue3-基于husky的代码检查工作流,需要的朋友可以参考下

husky是一个git hooks工具(git的钩子工具,可以在特定时机执行特定的命令)

代码检查

背景:想要使代码上传到git仓库前进行代码检查,所以提前下载好git

打开项目终端,点击右上角选择进入Git Bash控制

1.如果当前项目没有被git进行管理,就需要先初始化git仓库,执行git init即可;如果不初始化直接进行husky处理肯定是不行的

git init

2.初始化husky工具配置

官网:https://typicode.github.io/husky/

pnpm dlx husky-init&&pnpm install

配置成功后,会出现.husky文件,可以点进pre-commit文件查看

3.修改.husky/pre-commit文件

将npm test修改为pnpm lint,只要一提交代码就会触发这个pnpm lint(代码校验)

如果项目中有代码不符合规范,在提交到仓库时就会有报错提示

问题:pnpm lint是全量检查,耗时问题(文件量大时),历史问题(前期代码并没有使用规范)

暂存区eslint校验(解决上面问题,企业级项目更常用)

只用对自己写的代码负责

1.安装lint-staged包

pnpm i lint-staged -D

2.package.json配置lint-staged命令

在图中红色区域里添加如下代码:

  "lint-staged": {
    "*.{js,ts,vue}": [
      "eslint --fix"
    ]
  }
"lint-staged": "lint-staged"

3..husky/pre-commit文件修改

将pnpm lint修改为pnpm lint-staged

到此这篇关于Vue3-基于husky的代码检查工作流的文章就介绍到这了,更多相关Vue3代码检查工作流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • vue 中的动态传参和query传参操作

    vue 中的动态传参和query传参操作

    这篇文章主要介绍了vue 中的动态传参和query传参操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 测试平台开发vue组件化重构前端代码

    测试平台开发vue组件化重构前端代码

    这篇文章主要为大家介绍了测试平台开发vue组件化重构前端代码,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-05-05
  • vue实现登录后页面跳转到之前页面

    vue实现登录后页面跳转到之前页面

    本文给大家分享了vue实现登录后页面跳转到之前页面的一个功能,有这方便需要的朋友学习参考下吧。
    2018-01-01
  • vue在自定义组件上使用v-model和.sync的方法实例

    vue在自定义组件上使用v-model和.sync的方法实例

    自定义组件的v-model和.sync修饰符其实本质上都是vue的语法糖,用于实现父子组件的"数据"双向绑定,下面这篇文章主要给大家介绍了关于vue在自定义组件上使用v-model和.sync的相关资料,需要的朋友可以参考下
    2022-07-07
  • 详解如何在你的Vue项目配置vux

    详解如何在你的Vue项目配置vux

    这篇文章主要介绍了详解如何在你的Vue项目配置vux,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-06-06
  • 详解vue中v-model的实现原理

    详解vue中v-model的实现原理

    v-model可以实现数据的双向绑定,也是vue的最突出的优势,其实 v-model 实际上是一个语法糖,本文将给大家介绍一下vue中v-model的实现原理,文中有相关的代码供大家参考,具有一定的参考价值,需要的朋友可以参考下
    2023-12-12
  • 如何手写简易的 Vue Router

    如何手写简易的 Vue Router

    这篇文章主要介绍了如何手写简易的 Vue Router,帮助大家更好的理解和使用vue,感兴趣的朋友可以了解下
    2020-10-10
  • 解决Vue的项目使用Element ui 走马灯无法实现的问题

    解决Vue的项目使用Element ui 走马灯无法实现的问题

    这篇文章主要介绍了解决Vue的项目使用Element ui 走马灯无法实现的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08
  • vue3集成electron的过程

    vue3集成electron的过程

    本文详细介绍了如何在Vue3项目中集成Electron,包括安装electron和electron-builder两个依赖,以及配置.npmrc文件和手动修改镜像源的方法,整个过程详细记录了从创建项目、安装依赖、修改配置、到最终打包部署的每一步
    2024-10-10
  • vue设置代理不起作用问题及解决

    vue设置代理不起作用问题及解决

    这篇文章主要介绍了vue设置代理不起作用问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-05-05

最新评论