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代码检查工作流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
在本篇文章中我们给大家整理了2种关于VUE项目中使用百度地图的最简单的方法，非常实用，一起来学习下。2018-09-09
这篇文章主要给大家介绍了关于如何利用VUE创建视频流应用的相关资料,文中通过实例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2022-03-03
这篇文章主要为大家介绍了vue实现前端展示后端实时日志带颜色示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-11-11
这篇文章主要介绍了解决VUE动态加载图片在跨域时无法显示的问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-03-03
这篇文章主要为大家详细介绍了Vue实现点击时间获取时间段查询功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-04-04
这篇文章主要介绍了vue背景图片路径问题及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-07-07
这篇文章主要为大家介绍了Yarn与Lerna管理monorepo的使用详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
vue.js el-tooltip根据文字长度控制是否提示toolTip问题
这篇文章主要介绍了vue.js el-tooltip根据文字长度控制是否提示toolTip问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-02-02
这篇文章主要介绍了在vue中实现禁止回退上一步,路由不存历史记录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-07-07
这篇文章主要介绍了Vue插值、表达式、分隔符、指令的相关知识，文中给大家提到了去除vue插值表达式{{}}的方法,需要的朋友可以参考下2018-10-10
最新评论