在Git项目中使用husky统一管理hooks，解决vite项目下gitHooks不生效问题

╰+哭是因爲堅強的太久メ 2022-09-09 12:56 415阅读 0赞

## 写在前面 ##

按例先贴参考贴：[在Git项目中使用husky统一管理hooks][Git_husky_hooks]  
最近使用了vue官方推荐的最新打包工具vite,而vite项目不支持在package.json中配置gitHooks，vue-cli项目能支持是因为在安装之后，@vue/cli-service 会安装 yorkie，让你在 package.json 的 gitHooks 字段中方便地指定 Git hook。

## husky使用步骤 ##

1.  确保npm版本7以上
2.  安装husky

npm i husky -D

1.  依次执行以下代码，一步也不能少

npx husky install
    npm set-script prepare "husky install"
    npx husky add .husky/pre-commit "npm test"

**说明**  
按上述步骤操作成功后，项目根目录下生成一个.husky文件夹，如何下图  
![在这里插入图片描述][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVzaUNvZGVyMzI_size_20_color_FFFFFF_t_70_g_se_x_16]  
找到其下的pre-commit，其中的npm test便是我们通过命令行写入的内容，至此husky就配置完成，在执行git commit时会先执行pre-commit内的命令

## 以prettier为例 ##

1.  在package.json的scripts下创建一条prettier命令

"prettier": "prettier --write --loglevel log src/**/*.{js,json,tsx,css,less,scss,vue,html,md,ts}"

1.  将pre-commit中的"npm test"改为下面的命令，实现代码提交时，自动对项目按prettier格式化

npm run prettier
    git add .

[Git_husky_hooks]: https://blog.csdn.net/DoneSpeak/article/details/118469233?utm_medium=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control&depth_1-utm_source=distribute.pc_relevant.none-task-blog-2~default~BlogCommendFromMachineLearnPai2~default-1.control
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBATXVzaUNvZGVyMzI_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220829/020d0c14397e4bab97e73f14a45df18d.png