您当前的位置:首页 > 电脑百科 > 程序开发 > 编程百科

手把手教你在VS Code中使用 Git

时间:2023-09-22 11:30:15  来源:  作者:前端充电宝

将 Git 和 VS Code 结合使用,以可视化方式更加轻松地进行代码管理、协作和追踪变更。不必依赖繁琐的命令行操作,VS Code 提供了直观的图形界面和扩展来简化 Git 的使用。本文来一起学习如何在 VS Code 中进行常见的 Git 可视化操作!

前置工作

在介绍如何在 VS Code 中使用 Git 之前,先来介绍一个强悍的 VS Code 插件:Git Extension Pack,它旨在提供一组常用的 Git 工具和功能,以便更方便地进行版本控制和协作开发。该插件包含了多个与 Git 相关的扩展:

  • Git History (git log):可以查看 Git 提交记录、文件或行的历史。通过该扩展,可以快速浏览项目的版本历史,查看每个提交包含的修改内容和作者信息,以及文件和行的详细变更情况。

  • Project Manager:可以方便地在不同项目之间进行切换。这个扩展提供了一个项目管理器,可以轻松地保存和加载不同的项目配置,快速切换工作环境。

  • GitLens:增强了 Visual Studio Code 内置的 Git 功能。它通过行内的 Git 责任注解和代码镜头,更好地了解代码的历史和作者信息。您可以方便地查看每行代码的最后修改者、最近的提交信息,甚至可以直接查看远程仓库上的相关代码片段。

  • gitignore:提供了对 .gitignore 文件的语言支持,让您能够更简单地管理和生成这个文件。同时,还可以从 Github 的存储库中获取常见的 .gitignore 文件模板,以便快速忽略项目中不需要跟踪的文件和文件夹。

  • Open in GitHub / Bitbucket / VisualStudio.com:提供了在 GitHub、Bitbucket 或 VisualStudio.com 中直接跳转到代码的功能。通过单击相应的链接,可以快速打开相关代码仓库,并跳转到指定的行号或文件位置。

一个插件囊括了五个热门插件的全部功能!

 
安装完成之后,就来看看如何在 VS Code 中可视化使用 Git。

当新打开一个 VS  Code 窗口时,需要打开一个项目,可以在本地文件打开项目,也可以直接从远程仓库克隆项目:

 
当选择从远程克隆仓库时,输入远程仓库地址,按下回车即可:
 
这里可以输入 Git 链接来克隆,可以是 Github、Gitlab、GItee,或者私有部署的 Git 仓库链接。也可以选择从 Github 远程仓库克隆,只需登录 Github,输入查找自己的仓库,然后进行克隆即可。

克隆完成之后,会将文件存储在本地,直接打开即可。

git clone

在 Git 中,分支允许同时处理代码库的多个版本。可以在源代码管理边栏的最下面看到当前所在的分支:

 

git branch

如果这个分支没有变动,只会显示一个分支名,如果有修改,分支名的右上角会有一个 *,就像这样:

 
要想切换分支,需要点击这个分支名称,就会出现所有分支的列表:
 
可以看到,这里面有两类分支,一类是带分支图标的,另一类是带云图标的。前者表示本地分支,后者表示远程分支。点击本地分支,就会切换到对应的分支,点击远程分支,就会远程分支同步到本地,并在本地创建一个同名的分支。

如果想重命名分支,可以执行以下操作:

 
点击之后,输入新的分支名即可。

如果分支不需要了,也可以删除分支,不过需要注意,如果想删除某个分支,需要先切换到别的分支。

 
点击删除分支,然后选择要删除的分支即可。

git rebase

可以按照以下步骤来执行变基操作:

 

git checkout

最上面有两个分支创建操作,第一个是从当前分支创建一个新分支,输入新分支名即可创建。第二个是从指定分支创建一个新分支,需要先选取从哪个分支创建,然后输入新分支名即可:

 
如果是使用第一种方式来创建新分支,那当前分支的更改也会带到新分支上。

git merge

如果想要合并分支,可以执行以下操作:

 
点击之后,需要选择从哪个分支向当前分支进行合并,选择被合并的分分支即可。

git push

新创建的分支可以点击“发布 Branch”按钮来发布到远程仓库:

 
当我们进行代码的修改之后,在源代码管理边栏中可以看到更改的文件:
 
  • 如果是删除某个文件,那在更改中显示的文件名上会有一个删除线,并且最后会有一个 D 标志,表示已删除;

  • 如果是修改某个文件,那在更改中显示的文件名最后有个 M 标志,表示已修改,如果这个文件存在代码检查的错误,会在 M 前显示错误的数量,比如上面的 package.json 中就有 1 个错误。

  • 如果是新增一个文件,那在更改中显示的文件名最后有个 U 标志,表示未跟踪的,因为是新增的文件,所以是未跟踪。

git add

如果想暂存所有文件,可以鼠标悬浮在“更改”那一行,并点击后面的 ➕ 即可:

 
如果只是想暂存某些文件,可以鼠标悬浮在需要更改的文件名上,并点击后面的 ➕ 即可:
 
这个暂存操作就相当于执行 git add 命令。这里暂存其中两个,暂存完之后是这样的:
 

git reset

如果想取消更改,只需点击更改后面的撤销按钮(全部撤销)或者文件后面的撤销按钮(撤销单个)即可:

 

git commit

对于暂存的文件,可以进行commit 操作。只需在上面的输入框输入commit 信息,然后点击“提交”按钮即可:

 
对于未 commit 的文件,也是可以撤销的,只需点击暂存的更改那一行的➖或者需要撤销的文件后面的➖,点完之后,这些文件就会回到更改中,可以继续进行修改:
 

git stash

可以看到,无论是更改中,还是在暂存的更改中,都会有一个类似于撤回的按钮,比撤回按钮多了一个➕,这个按钮就是 stash 的意思,也就是把当前的修改暂存起来,然后在需要的时候取出来暂存的内容,以继续进行修改。当我们在开发一个需求过程中,需要紧急去别的分支进行操作,就可以先把已经更改的内容暂存起来,等再回来开发的时候,取出来这些内容,继续开发即可。

 
这里我们将暂存的更改和更改都先暂存起来。可以选择弹出最新的(最后一次暂存)暂存,也可以选择性弹出暂存:
 
可以看到,VS Code 支持储藏暂存、应用暂存、弹出暂存、删除暂存。这里不再一一介绍。

值的注意是,在源代码管理边栏中,也可以点击最下面的 STASHES 来查看已暂存的文件:

 
这里,可以进行应用暂存、删除暂存、修改暂存名称等操作:
 

git push

当我们修改完代码之后,就需要推送代码到远程了,可以点击蓝色的同步更改按钮,也可以点击下面分支的更改按钮,来同步更改。

 
可以看到蓝色按钮的↑箭头旁边有一个数字,它表示 commit 的数量。如果远程分支比本地分支领先,还有又一个↓箭头,旁边也会有一个数字,表示远程分支比本地分支领先的 commit 数量。

git pull

如果需要从远程分支向本地分支同步代码,可以点击拉取:

 

git tag

可以点击创建标记来创建标签:

 
当然,也可以在下面的 TAGS 中管理所有标签:
 

合并冲突

当合并代码出现冲突时,VS Code 中会显示当前的更改的和传入的更改,可以选择保留其中一个,也可以全部保留:

 

 

 



Tags:Git   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作,风险自担。如有任何标注错误或版权侵犯请与我们联系,我们将及时更正、删除。
▌相关推荐
GitHub顶流"Web OS"——运行于浏览器的桌面操作系统、用户超100万、原生jQuery和JS编写
Puter 是近日在 GitHub 上最受欢迎的一款开源项目,正式开源还没到一周 ——star 数就已接近 7k。作者表示这个项目已开发 3 年,并获得了超过 100 万用户。根据介绍,P...【详细内容】
2024-03-10  Search: Git  点击:(17)  评论:(0)  加入收藏
解读那些令人困惑 Git 术语
我在 Mastodon 上进行了调查:你有觉得哪些 Git 术语很让人困惑吗?我计划写篇博客,来解读 Git 中一些奇怪的术语,如:“分离的 HEAD 状态”,“快速前移”,“索引/暂存区/已暂存”,“比...【详细内容】
2023-12-08  Search: Git  点击:(123)  评论:(0)  加入收藏
十个杀手级Git命令
Git是被广泛使用的分布式版本控制系统,开发人员可以跟踪代码库的变化,与团队成员合作,并管理项目的修订。本文整理了10个Git技巧,希望对读者有所帮助。1 Git 别名创建Git别名既...【详细内容】
2023-12-07  Search: Git  点击:(155)  评论:(0)  加入收藏
基于GitHub App 深度讲解Kotlin高级特性与框架设计
基于GitHub App 深度讲解Kotlin高级特性与框架设计GitHub App 是 GitHub 平台上的一种特殊类型的应用程序,它允许开发者通过 GitHub API 与 GitHub 上的仓库和组织进行交互...【详细内容】
2023-11-28  Search: Git  点击:(199)  评论:(0)  加入收藏
六个开发者必知必会的Git命令
Git是一种开源的分布式版本控制系统,在软件开发领域已经成为不可或缺的工具。开发人员掌握Git命令对于高效协作和版本控制有着重要的作用。本文介绍6个关键的Git命令,帮助开发...【详细内容】
2023-11-23  Search: Git  点击:(157)  评论:(0)  加入收藏
GitHub:程序员正积极使用 AI 编程、JavaScript 语言依然最流行
IT之家 11 月 20 日消息,GitHub 发布了 2023 年度 Octoverse 开源状态报告,其中主要强调了 AI 在开发过程中的作用,并围绕云和 Git 的开源活动展开。官方介绍称,今年的三大趋势...【详细内容】
2023-11-20  Search: Git  点击:(170)  评论:(0)  加入收藏
Git新手如何上传项目代码到GitHub并完成后续的代码更新?
国内对于个人站长的发展空间限制越来越多,首先是百度主推自家产品,现在权重最高的似乎就是百家号了,其次是腾讯云、阿里云这些提供IDC大厂提供的云端服务产品也很少有针对个人...【详细内容】
2023-11-15  Search: Git  点击:(240)  评论:(0)  加入收藏
如何在GitHub上存储源码并保持同步
GitHub是一个广泛使用的基于云的代码托管平台,它为开发者提供了一个便捷的方式来存储、管理和共享他们的源代码。通过GitHub,开发者可以轻松地与团队成员合作,跟踪代码更改,并保...【详细内容】
2023-11-15  Search: Git  点击:(231)  评论:(0)  加入收藏
GitHub在大会上发布的十大AI更新!
作者 | Tasmia 策划 | 言征出品 | 51CTO技术栈(微信号:blog51cto)GitHub的母公司微软在生成人工智能业务方面取得了巨大增长,该公司首席执行官萨蒂亚·纳德拉告诉华尔街,该...【详细内容】
2023-11-13  Search: Git  点击:(226)  评论:(0)  加入收藏
重塑 GitHub、颠覆程序开发:GitHub Universe 2023 发布重大更新
编译 | 核子可乐、TinaGitHub 的东家微软看到了生成式 AI 业务的大幅增长,其首席执行官萨蒂亚·纳德拉 (Satya Nadella) 告诉华尔街,GitHub Copilot 软件的付费客户在第...【详细内容】
2023-11-10  Search: Git  点击:(221)  评论:(0)  加入收藏
▌简易百科推荐
即将过时的 5 种软件开发技能!
作者 | Eran Yahav编译 | 言征出品 | 51CTO技术栈(微信号:blog51cto) 时至今日,AI编码工具已经进化到足够强大了吗?这未必好回答,但从2023 年 Stack Overflow 上的调查数据来看,44%...【详细内容】
2024-04-03    51CTO  Tags:软件开发   点击:(5)  评论:(0)  加入收藏
跳转链接代码怎么写?
在网页开发中,跳转链接是一项常见的功能。然而,对于非技术人员来说,编写跳转链接代码可能会显得有些困难。不用担心!我们可以借助外链平台来简化操作,即使没有编程经验,也能轻松实...【详细内容】
2024-03-27  蓝色天纪    Tags:跳转链接   点击:(12)  评论:(0)  加入收藏
中台亡了,问题到底出在哪里?
曾几何时,中台一度被当做“变革灵药”,嫁接在“前台作战单元”和“后台资源部门”之间,实现企业各业务线的“打通”和全域业务能力集成,提高开发和服务效率。但在中台如火如荼之...【详细内容】
2024-03-27  dbaplus社群    Tags:中台   点击:(8)  评论:(0)  加入收藏
员工写了个比删库更可怕的Bug!
想必大家都听说过删库跑路吧,我之前一直把它当一个段子来看。可万万没想到,就在昨天,我们公司的某位员工,竟然写了一个比删库更可怕的 Bug!给大家分享一下(不是公开处刑),希望朋友们...【详细内容】
2024-03-26  dbaplus社群    Tags:Bug   点击:(5)  评论:(0)  加入收藏
我们一起聊聊什么是正向代理和反向代理
从字面意思上看,代理就是代替处理的意思,一个对象有能力代替另一个对象处理某一件事。代理,这个词在我们的日常生活中也不陌生,比如在购物、旅游等场景中,我们经常会委托别人代替...【详细内容】
2024-03-26  萤火架构  微信公众号  Tags:正向代理   点击:(10)  评论:(0)  加入收藏
看一遍就理解:IO模型详解
前言大家好,我是程序员田螺。今天我们一起来学习IO模型。在本文开始前呢,先问问大家几个问题哈~什么是IO呢?什么是阻塞非阻塞IO?什么是同步异步IO?什么是IO多路复用?select/epoll...【详细内容】
2024-03-26  捡田螺的小男孩  微信公众号  Tags:IO模型   点击:(8)  评论:(0)  加入收藏
为什么都说 HashMap 是线程不安全的?
做Java开发的人,应该都用过 HashMap 这种集合。今天就和大家来聊聊,为什么 HashMap 是线程不安全的。1.HashMap 数据结构简单来说,HashMap 基于哈希表实现。它使用键的哈希码来...【详细内容】
2024-03-22  Java技术指北  微信公众号  Tags:HashMap   点击:(11)  评论:(0)  加入收藏
如何从头开始编写LoRA代码,这有一份教程
选自 lightning.ai作者:Sebastian Raschka机器之心编译编辑:陈萍作者表示:在各种有效的 LLM 微调方法中,LoRA 仍然是他的首选。LoRA(Low-Rank Adaptation)作为一种用于微调 LLM(大...【详细内容】
2024-03-21  机器之心Pro    Tags:LoRA   点击:(12)  评论:(0)  加入收藏
这样搭建日志中心,传统的ELK就扔了吧!
最近客户有个新需求,就是想查看网站的访问情况。由于网站没有做google的统计和百度的统计,所以访问情况,只能通过日志查看,通过脚本的形式给客户导出也不太实际,给客户写个简单的...【详细内容】
2024-03-20  dbaplus社群    Tags:日志   点击:(4)  评论:(0)  加入收藏
Kubernetes 究竟有没有 LTS?
从一个有趣的问题引出很多人都在关注的 Kubernetes LTS 的问题。有趣的问题2019 年,一个名为 apiserver LoopbackClient Server cert expired after 1 year[1] 的 issue 中提...【详细内容】
2024-03-15  云原生散修  微信公众号  Tags:Kubernetes   点击:(6)  评论:(0)  加入收藏
站内最新
站内热门
站内头条