在VUE中生成git/hooks钩子脚本文件
在VUE脚手架中是如何生成 .git/hooks/ 钩子脚本文件的
在VUE脚手架中生成gitHooks钩子函数脚本文件所需的环境
- @vue/cli 4.5.11
- node v14.15.0
- npm 6.14.8
在此之前首先构建零基础构建一个vue脚手架生成的简单项目。
首先需要零基础生成一个简单VUE项目
第一步,全局安装vue脚手架
# 全局安装
$ npm install -g @vue/cli
# 检查版本号
$ vue -V
第二步,使用vue生成VUE项目
$ vue create vue-demo
第一步:手动配置项目,这样的话可以自己选择性的安装部分插件和依赖包
Default ([Vue2] babel, eslint)
默认配置,仅包含vue2
和babel
,eslint
Default ([Vue3 Preview])
默认配置,仅包含尝鲜版的Vue3
和babel
和eslint
Manually select features
手动配置
第二步:选择配置项
Choose Vue version
选择 Vue 版本Babel
转译TypeScript
开发语言Progressive Web App (PWA)Support
支持PWA渐进式框架Router
路由插件Vuex
状态管理插件CSS Pre-processors
CSS预编译语言Linter / Formatter
代码检查和格式化配置Unit Tesing
单元测试配置
第三步:选择vue 版本,这里选择2.x版本
第四步:选择路由是否使用history模式
第五步:选择需要使用的CSS预编译语言
第六步:选择编码规范的校验规则
ESlint with error preventin only
仅使用Eslint 来预检测编码规范ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
使用ESLint 和 编码格式化工具
第七步:选择编码预检测的配置
Lint on save
在保存变更的时候Lint and fix on commit
在提交和修复的时候检测
第八步:选择单元测试的组合方式
第九步:选择编码规范配置方式
In dedicated config file
在一个新的配置文件中配置,会生成一个.eslintrc.js
文件In package.json
在package.json
中配置
第十步: 是否保存预设的配置
第十一步:静等项目安装完成即可
经过以上步骤生成的项目不出意外的话,就可以启动以下命令,把整个项目启动起来了:
$ npm run serve
其实在项目安装完成后,在.git/hooks/
文件夹下就可以看到已经生成了若干hooks的钩子脚本文件,此时在变更git仓库下的文件或者commit文件时都会触发pre-commit钩子的脚本文件。
下面这些是没有git hooks钩子脚本的文件目录
这个下面时刚才项目生成的git hooks的钩子脚本文件目录
注意:若要在新项目中生成.git/hooks/下的钩子脚本,上面的第2步和第7步是关键。 如果在第二步不选择Linter + Formatter,则不会出现第七步的选项。
另外还要注意的是 .git/hooks/
文件夹下的脚本文件是无法提交到远程仓库的 ,即使本地已经拥有了若干hooks
脚本文件,依然是无法提交到远程仓库的。 这些文件是在安装项目依赖包的时候生成的,所以 只需要重新安装一下依赖包即可重新生成新的hooks
脚本文件。
然后分析Vue 项目中的 .git/hooks/ 中的脚本是如何生成的
其实非常简单,在vue项目中内置了一个这样的插件 yorkie 插件,这个插件是基于husky插件开发的。
而且 husky
和 eslint
是好搭档。
所以想要在 .git/hooks/
文件夹下生成 hooks
脚本文件,只需要重新安装一下依赖包就可以了。
注意:在 Windows
系统中有可能会出现 重新安装依赖包后仍然无法在.git/hooks/
文件夹下生成 hooks
脚本文件,如果出现这种情况,可以参考下面的问题汇总中的解决方案。
问题汇总
- 重新安装后在
.git/hooks/
文件夹下并没有生成hooks
脚本文件
出现这种情况首先要检查所有的项目依赖包是否均已安装成功,如果都安装成功的话,还是没有在.git/hooks/
文件夹下生成hooks
脚本文件,则可以再执行下面的命令行来生成hooks
脚本文件:
$ node ./node_modules/yorkie/bin/install.js