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代码检查工作流内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！