在VUE项目中是如何生成gitHooks脚本文件的

最新推荐文章于 2023-05-07 23:07:27 发布
最新推荐文章于 2023-05-07 23:07:27 发布
阅读量769 收藏
点赞数 1
分类专栏： vue 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/li_dengke/article/details/114956347
版权

在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 脚本文件，如果出现这种情况，可以参考下面的问题汇总中的解决方案。

问题汇总

  1. 重新安装后在.git/hooks/文件夹下并没有生成hooks脚本文件

出现这种情况首先要检查所有的项目依赖包是否均已安装成功，如果都安装成功的话，还是没有在.git/hooks/文件夹下生成hooks脚本文件，则可以再执行下面的命令行来生成hooks脚本文件：

$ node ./node_modules/yorkie/bin/install.js
百里狂生
关注
专栏目录
如何在项目中使用git hook规范化代码
Whoopsina的博客
03-02 1030
什么是Git Hooks？ 参考资料：官方文档 简单的讲，所谓Hook，一般就是在特定时期提供一个可介入自定义的脚本； Husky 大多数前端程序员对编写shell脚本是不熟悉的，这个时候就有个神奇的工具Husky来帮助我们实现Git Hooks的使用需求； npm install husky -D // 旧版本 { ..., "husky": { "hooks": { "pre-commit": "npm run test" } } } // 新版本 { "s
巧用 gitHooks 提交前校验代码
Yvette Lau的专栏
12-08 2573
感谢bigAken投稿在每一个使用 git 进行版本管理的仓库，都有一个目录 .git/hooks，包含 commit 各个阶段 Hooks 的脚本。这些 Hooks 在 git 操作 c...
vue-cli创建的项目中的gitHooks原理解析
11-21
前言 在使用 vue create my-app 创建项目的时候，Vue 会自动帮我们做好一些预配置，你可以不使用它，但是一旦需要的时候，突然发现，咦~原来它已经帮我做好准备工作了，只需要按自己的需求配置一下就可以了，就会觉得 vue-cli 很贴心啊，帮我们节省了很多时间。 在 package.json 文件中会发现 gitHooks 、 lint-staged 等字段，不难看出它是在我们执行 git 命令的时候会自动执行的一些额外的操作，比如语法提示、错误提示等。 这个完整的过程是怎样的呢？ 流程解析 yorkie 包 执行 vue create 命令的时候，会安装一个包，叫： yorki
手写 git hooks 脚本（pre-commit、commit-msg）
分享我的编程经验和学习心得
07-18 1892
简介 Git 能在特定的重要动作发生时触发自定义脚本，其中比较常用的有：pre-commit、commit-msg、pre-push 等钩子（hooks）。我们可以在 pre-commit 触发时进行代码格式验证，在 commit-msg 触发时对 commit 消息和提交用户进行验证，在 pre-push 触发时进行单元测试、e2e 测试等操作。 Git 在执行 git init 进行初始化时，会在 .git/hooks 目录生成一系列的 hooks 脚本： 从上图可以看到每个脚本的后缀都是以 .sam
vue githooks配置
huangxiaonian的博客
08-23 636
------------------------------------分割线------------------------------------------------------>同时安装两个包@commitlint/cli，@commitlint/config-conventional。查看.git/hooks/pre-commit文件，会触发lint-staged。由于使用的vue2，没有找到合适的ts检测的包，vue3可以使用vue-tsc;配置git commit的钩子触发，
vue cli3项目添加githook，代码提交前eslint验证
Amos的博客
11-13 3079
vue cli3项目添加githook，代码提交前eslint验证 在package.json 的 gitHooks 字段中定义： "gitHooks": { "pre-commit": "lint-staged" } 安装lint-staged： yarn add lint-staged --dev 配置前端文件过滤的工具Lint-staged： "lint-staged": { ...
使用Git Hooks约束Vue代码提交
CUMTSYL的博客
11-08 552
每个前端项目都有属于自己的代码规范，然而有些人在开发时忽略对规范的重视，导致提交代码出现很多Warning甚至Error。使用Git Hook可以较好的避免这类问题发生。 Git 能在特定的重要动作发生时触发自定义脚本。Git钩子有很多，本文只用到pre-commit`提交前的回调。 husky 如果项目不是通过vue-cli@3及以上脚手架构建，可以使用husky或pre-commit向项目添加git hooks，实现在本地提交代码之前做一次lint校验。 首先安装husky npm inst
使用eslint和githooks统一前端风格的技巧
10-15
`githooks`是Git的一个功能，可以在执行某些操作（如提交）之前运行自定义脚本。我们可以在项目根目录的`.git/hooks`目录下创建一个`pre-commit`脚本来实现`eslint`的自动校验。这个脚本会在每次提交前检查并修复不...
如何在webpack中获取git版本和当前脚本的工作目录
qq_38402659的博客
11-11 684
仅针对vue项目，当然你如果能看懂也可以继续。 前言 前一阵子因为vue部署不上去错误没有解决，一直找不到原因，后来一看部署的git版本有问题，于是决定在页面中显示git版本。 要显示git版本，首先要知道它存在什么地方？这就导致我们需要知道git的目录中的信息，知道了信息我们怎么把它拿出来这也是个问题？。 准备工作 .git目录与git了解 当你创建一个仓库的时候，使用 git init 指令，...
VUE项目构建打包生成Git信息（VERSION和COMMITHASH文件）.docx
03-24
VUE项目构建打包生成Git信息（VERSION和COMMITHASH文件） Git版本Webpack插件(git-revision-webpack-plugin) 可在构建过程中生成VERSION和COMMITHASH文件的Webpack插件。 官网：http://npm.taobao.org/package/git-revision-webpack-plugin。
vue3+ts：约定式提交（git husky + gitHooks）
snowball的博客
03-06 758
之前实践过这个配置，本文在vue3 + ts 的项目中，再记录一次。GIT_PARAMS没有读到目录，本文使用静态目录，待后续研究。引入chalk、fs需要使用import，使用require报错。2.1.1、安装husky。
git的基本原理
Ivy9808的博客
04-20 2071
刚刚接触到git和github，整理一部分相关原理帮助自己理解git命令和本地-远程的操作。 我们将这部分学习分为三部分：（1）本地仓库相关操作（2）远程仓库相关操作（3）本地-远程交互操作 本地仓库相关操作： 1、当我们下载git 后，打开git bash，通过git clone将远端创建的仓库复制到本地，此时一个本地仓库创建完成。此时，在本地将有一个.git的文件夹形成，里面包含多个文件，其中查看几个文件中的内容可以帮助我们理解git的一些命令，如objects中为存储的blob对象，里面包含对应每次操
手把手教你如何创建自己的Git仓库
zoucanfa的博客
08-30 2万+
一、首先登陆Github账号如果没有账号就申请一个。 二、登陆成功之后三、鼠标移动到头像位置，选中“Your profile”进入四、然后选中五、 进入到六、创建成功进入到七、然后在磁盘里面创建一个文件夹保存相关代码八、 然后打开这个文件夹，鼠标右键九、鼠标右键选中Git Bash Here打开GIt终端输入： （注意：链接地址选择： ）十、回车，成功之后你会发现你的文件夹里面多了 十一、 接
【Vue工程】003-配置 husky、lint-staged、@commitlint/cli
訾博（ZiBo）的博客
05-07 1034
husky 的读音为 /ˈhʌski/Husky 是一个 Git Hook 工具，可以帮助我们在 Git 事件发生时自动运行脚本。Git Hook 是一种机制，它允许在 Git 执行操作时自动运行特定脚本，以执行自定义操作。使用 Husky，可以轻松地添加 Git Hooks，并在特定的 Git 事件（如提交代码）发生时执行自定义的脚本。例如，在提交代码之前自动运行代码格式化脚本或运行代码静态分析工具等。
vue开发之代码规范eslint
lihuanan123的博客
05-08 1883
ESLint  不管是多人合作还是个人项目，代码规范都是很重要的。这样做不仅可以很大程度地避免基本语法错误，也保证了代码的可读性。 准备工作 一、VSCode ESLint插件 ESLint插件用于根据工程目录的.eslintrc.js配置文件在编辑器中显示一些错误提示。 ESLint插件安装 二、基于vue-cli创建项目 具体步骤如下： 创建项目 创...
Git Hooks
理想主义
06-02 1725
我用 sourcetree clone 到本地的代码后 .git 目录下没有发现 hooks 文件夹，但是通过终端 git clone 完的仓库里就有，我想不明白，sourcetree 只不过是个 git 客户端而已，还能给我过滤掉了文件夹吗。后来看到别人写的 hooks 的应用才明白，原来对于任何 Git 仓库来说钩子（hooks）都是本地的，而且它不会随着 git clone 一起复制到新的仓...
Vue-hooks（钩子）
ifredom
11-05 1万+
vue-hooks 最近尤大发布了一个最新的npm包：vue-hooks 。 既喜且优，真是一个悲伤的故事。 这个npm包是关于hook（钩子）一个最新思路的探索，也是react团队前不久的首创… hooks 是什么 Hook是react中得一项新功能提案，可以让开发人员在不编写Class的情况下使用状态和其他React功能。 // react版本 import { useState } from...
【前端】vue项目 git提交失败 running pre-commit hook:lint-staged
热门推荐
冯浩月
02-16 2万+
前言      小编最近在vue项目升级过程中，遇到了git提交失败，根据错误提示，成功解决了问题。 错误提示    一、git提交失败    git:>running pre-commit hook:lint-staged                                              二、错误分析   这句话的意思，大概是有一个钩子，提交前检查项目...
在vue项目中生成vue.config.js文件的命令是什么？
最新发布
05-20
在Vue项目中，你可以使用以下命令生成`vue.config.js`文件： ```bash vue create your-project-name cd your-project-name touch vue.config.js ``` 这将创建一个新的Vue项目并在项目根目录下生成一个名为`vue....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值