VS Code使用Git可视化管理源代码详细教程(推荐)

前言:

  随着VS Code的功能和插件的不断强大和完善,它已经成为了我们日常开发中一个必不可缺的伙伴了。在之前我曾经写过一篇SourceTree使用教程详解(一个git可视化管理神器,想要了解的话可以点击查看详情),这篇文章主要是对VS Code如何使用Git可视化管理我们的程序源代码。

VS Code简介:

官网下载地址:

https://code.visualstudio.com/

  Visual Studio Code是一个轻量级但功能强大的源代码编辑器,可在您的桌面上运行,并且可用于Windows,macOS和Linux。它具有对JavaScript,TypeScript和Node.js的内置支持,并具有丰富的其他语言(例如C ++,C#,Java,Python,PHP,Go)和运行时(例如.NET和Unity)扩展的生态系统。VS Code内置了对Git的支持,可以使用图形化界面方便的进行版本控制,比如添加暂存,提交更新,拉取远程代码,推送代码到远程代码库,创建合并分支,文件内容差异比较等这些常规操作。

环境准备:

1、首先需要现在安装Visual Studio Code。

下载地址:https://code.visualstudio.com/Download

选择对应的平台进行安装(我自己是安装的window平台):

2、Git环境安装:

Git安装详细教程:https://www.jb51.net/article/198002.htm

克隆GitHub中的存储库:

1、复制GitHub存储库的SSH链接地址:

2、打开VS Code点击克隆,粘贴SSH链接地址进行下载:

查看当前所在分支:

1、界面查看:

2、切换到终端,命令查看:

[*重要]实际工作开发四步曲(添,提,拉,推):首先要明白四步曲分别是哪四步,其作用分别是什么?

添:将修改的内容添加到本地暂存区 git add。
提:将本地暂存区中的内容提交到本地代码库 git commit -m 'description'。
拉:同步,拉取远程代码库中的内容,在多人协同开发中十分的重要,因为假如事先没有同步更新到最新版本有可能会覆盖别人修改的东西,假如拉取后有冲突直接使用VS Code解决冲突即可 git pull。
推:将本地代码库中的内容推送到远程代码仓库 git push。

添加暂存区:

新增Information.txt文本文件,添加至本地暂存区。

提交本地代码库:

拉取同步远程最新代码库:

推送至远程代码库:

验证是否推送成功,查看GitHub中的仓库内容:

冲突解决:

  接下来我们来自己模拟一下多人开发,如:我在本地修改Information.txt文本文件的内容,然后在到GitHub中修改一次这样本地在提交的时候就会产生冲突,然后我们可以借助VS Code智能的解决冲突的方式帮助我们来解决冲突。

本地修改:

GitHub中的修改:

本地提交后,拉取时提示冲突如下:

合并冲突提交到远程代码库中:

VS Code提供了四种智能合并的方式供给我们选择,我们可以按照实际情况进行代码冲突解决。当然也可以手动删除解决,不过要慎重,可能一不小心就把同事辛辛苦苦写了几天的代码给覆盖了哦,这里我选择了【保留双方更改】的方式进行冲突解决。

冲突完美解决:

创建分支并推送到远程代码库:1、切换到源代码管理视图:

2、选择需要创建子分支的主分支:

注意:我们这里为develop分支创建feature-20210218分支。

3、将新建分支推送到远程代码库:

子分支开发完成后合并到主分支中:

首先我们在feature-20210218子分支中创建一个文件夹和一个文本文件,然后将feature-20210218子分支合并到develop开发分支中合并提交到远程代码库。

1、feature-20210218子分支中创建一个文件夹和一个文件:

2、使用实际工作开发四步曲(添,提,拉,推)教程将新添加的内容推送到远程代码库:

切换到feature-20210218分支:

查看文件是否提交成功:

3、将feature-20210218子分支合并到develop开发分支:

a.首先切换到develop分支中:

b.选择需要合并过来的分支:

c.推送至远程仓库,查看合并是否成功:

VS Code Git提交修改历史记录查看(甩锅专用):

需要安装Git History拓展。

查看对应文件的修改历史记录:

查看文件修改时间线对比文件修改内容:

到此这篇关于VS Code使用Git可视化管理源代码详细教程(推荐)的文章就介绍到这了,更多相关VS Code可视化管理源代码内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • VSCode配置Git的方法步骤随记

    vscode中对git进行了集成,很多操作只需点击就能操作,无需写一些git指令. 不过这就需要你对vscode进行配置.下面我会讲到git的配置与免密码上传github. 一.安装Git管理工具,可上官网安装,安装路径https://git-scm.com/,安装路径默认C:\Program Files\Git,可自行修改,这里我是安装在D:\Program Files\Git. 二.安装完Git之后,如图配置好环境变量path路径的信息,一般会自动配置成功,配置完成后电脑就可以使用Git了.

  • vscode中利用git通过ssh连接github的方法

    vscode目前发展的很快,易用性方面也远远超过其他文本编辑器如nodepad,这次在使用中发现vscode继承的git功能十分强大和方便,这里将git于github连接的步骤简单描述一下,用以备忘. 1.首先已经安装了git的控制台版本 初始化 $ git config --global user.name author #将用户名设为author $ git config --global user.email author@corpmail.com #将用户邮箱设为author@corpm

  • Visual Studio Code(vscode) git的使用教程

    本文介绍了Visual Studio Code(vscode) git的使用,分享给大家,具体如下: 1.创建一个github账号 2.在vscode中执行命令 echo "# C-Tests" >> README.md git init git add README.md git commit -m "first commit" git remote add origin https://github.com/harryluo163/C-Tests.g

  • 详解vscode使用git所遇到的坑

    今天给vscode配置git的时候,差点没把我送走,我在配置git项目的时候会,看了一个博客文章的教学,其中配置路径的方法如下 1. 在git bash 中使用 命令 : where git 的路径 2.然后按照上面的路径配置到 vscode下的Git:path中,如下 然后当我使用vscode的push命令时 就出现如下错误 我百度了很多篇解决办法的文章,千姿百态,结果还是一个样报这个错误, 后来我突然发现别人的路径明显不是ming64下的git.exe,这一次我抱着最后的希望更改了路径 如下

  • 使用VSCode如何从github拉取项目的实现

    最近使用vscode进行前端编程,遇到一些问题网上说明的不是很明显,故记录一下 1.开vscode使用CTRL+`或者点击查看到集成终端打开控制终端 2. 在终端中cd到存放文件夹下面,然后git clone https://github.com/iview/iview-project.git就可以将项目拉取下来 到此这篇关于使用VSCode如何从github拉取项目的实现的文章就介绍到这了,更多相关VSCode github拉取项目内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多

  • 在vscode中使用Git的教程

    vscode简介 VSCode是微软推出的一款轻量编辑器,采取了和VS相同的UI界面,搭配合适的插件可以优化前端开发的体验. 布局:左侧是用于展示所要编辑的所有文件和文件夹的文件管理器,依次是资源管理器,搜索,GIT,调试,插件,右侧是打开文件的编辑区域,最多可同时打开三个编辑区域到侧边.在初次使用时如果本地没有安装git会提示先安装git,然后重启vscode. 用了git最方便的就是比如在公司写了很多代码后回到家打开vscode只需要点击一下pull就能全部同步过来.是不是很方便....毕竟

  • vscode添加GIT和SVN的方法示例

    一.添加SVN (1)添加svn插件 (2)安装的svn最好是默认路径安装的,不要问我为什么,因为很多软件都是按照默认路径找到bin的 表示安装正确,参考 vscode打开文件夹后右下角提示如下报错:SVN not found. Install it or configure it using the "svn.path" 同时输出窗口提信息:Svn installation not found. 错误原因: vscode找不到本地的svn.exe. 这个exe在默认安装Tortois

  • VS Code使用Git可视化管理源代码详细教程(推荐)

    前言: 随着VS Code的功能和插件的不断强大和完善,它已经成为了我们日常开发中一个必不可缺的伙伴了.在之前我曾经写过一篇SourceTree使用教程详解(一个git可视化管理神器,想要了解的话可以点击查看详情),这篇文章主要是对VS Code如何使用Git可视化管理我们的程序源代码. VS Code简介: 官网下载地址: https://code.visualstudio.com/ Visual Studio Code是一个轻量级但功能强大的源代码编辑器,可在您的桌面上运行,并且可用于Win

  • vs code 配置c/c++环境的详细教程(推荐)

    写在前面的一段话 我这个配置方法反正在win10上是可以用的,我自己的笔记本就是win10的系统.但是在实验室蹭的学长的主机却是win7的系统,按道理来说这个配置应该是不分系统的?但是我确实是折腾了好几天,看了很多博客的配置方法,也问过稍微会一些的人,没有一个能解决我问题的,也希望有人能评论解决我的问题,我的vscode问题是c++只能编译运行无法debug.每次按F5都是一闪而过,无法调试,再按就显示调试程序正在运行.-------2019.5.3 实验室我把系统换了,用了自己喜欢很久的ubu

  • Armbian5.9.0安装docker及部署可视化portainer的详细教程

    目录 安装 docker 如何查看 docker 是否安装成功? 如何启动docker? 如何安装可视化portainer 安装英文版本 安装中文版 什么是docker?Docker是一个开源的引擎,可以轻松的为任何应用创建一个轻量级的.可移植的.自给自足的容器.开发者在笔记本上编译测试通过的容器可以批量地在生产环境中部署,包括VMs(虚拟机). bare metal.OpenStack 集群和其他的基础应用平台. Docker通常用于如下场景: web应用的自动化打包和发布: 自动化测试和持续

  • BootstrapValidator超详细教程(推荐)

    一.引入必要文件 下载地址:(https://github.com/nghuuphuoc/bootstrapvalidator/archive/v0.4.5.zip) <link rel="stylesheet" href="/path/to/bootstrap/css/bootstrap.css"/> <link rel="stylesheet" href="/path/to/dist/css/bootstrapVa

  • IntelliJ IDEA 下载安装超详细教程(推荐)

    推荐激活教程 IntelliJ IDEA 2020最新激活码(亲测有效,可激活至 2089 年) 最新idea2021注册码永久激活(激活到2100年) IntelliJ IDEA号称当前Java开发效率最高的IDE工具. IntelliJ IDEA有两个版本:社区版(Community)和旗舰版(Ultimate). 社区版 是免费的.开源的,但功能较少; 旗舰版 提供了较多的功能 IntelliJ IDEA 官网:https://www.jetbrains.com/idea/ 1. 打开官网

  • Visual Studio Code 使用Git进行版本控制(图文教程)

    本来认为此类教程,肯定是满网飞了.今天首次使用VS Code的Git功能,翻遍了 所有中文教程,竟没有一个靠谱的.遂动笔写一篇. 请确保你安装了最新的VS Code.http://code.visualstudio.com/ 请确保安装了最新版的Git.https://git-scm.com/download.git安装到环境变量里, 确保任意路径可以访问. 参考链接:https://code.visualstudio.com/Docs/editor/versioncontrol VS Code

  • Java连接mysql数据库的详细教程(推荐)

    该教程是面向那些不知道如何通过java连接mysql数据库的新手,所以该教程用的方法不是最优的方法,但求是最好理解的方法. 需要的工具: eclipse.mysql.mysql的驱动 mysql驱动链接:mysql-connector-java-5.1.7.zip 如果该链接下载不了的话,可以私信我 1.在eclipse中创建一个工程:jdbc 2.在工程下创建lib文件夹 鼠标右键点击jdbc工程 --> New -->Folder. 文件夹命名为lib 3.导入mysql驱动 解压上述连接

  • 安装SQL Server2019详细教程(推荐!)

    安装SQL Server2019详细教程 1.官网下载SQL Server 2019 Developer: Developer下载地址  或者点击这里下载 下载完成后,打开安装程序,选择自定义安装: 选择安装路径(不推荐安装在C盘): 然后等待下载安装: 此过程较为缓慢,耐心等待即可. **在正式安装前,推荐关闭防火墙,以免安装失败.**关闭方法:桌面找到我的电脑(计算机),双击打开,左侧找到网络,右键选择属性,打开选择关闭防火墙.如图: 下载完成后,会到以下界面: 到此界面后,点击左侧的安装,

  • kangle web服务+easypanel主机控制面板快速搭建网站和数据库以及管理空间详细教程

    kangle web服务在win主机上面跑php个人感觉很不错,再配合easypanel主机控制面板开开设网站和数据库很方便实用,而且空间管理功能完全可以满足个人站长需求.我们这里帮助不少客户安装了这样的一个平台,但很多童鞋都不知道怎么用,这里就详细的介绍下来帮助菜鸟. 安装kangle web和easypanel主机面板这里就不做介绍了,很简单的.下面是开设网站和数据库的教程 1:开设网站和数据 easypanel主机面板的后台是http://你服务器ip:3312/admin  进入后台,点

  • R语言实现各种数据可视化的超详细教程

    目录 1 主成分分析可视化结果 1.1 查看莺尾花数据集(前五行,前四列) 1.2 使用莺尾花数据集进行主成分分析后可视化展示 2 圆环图绘制 3 马赛克图绘制 3.1 构造数据 3.2 ggplot2包的geom_rect()函数绘制马赛克图 3.3 vcd包的mosaic()函数绘制马赛克图 3.4 graphics包的mosaicplot()函数绘制马赛克图 4 棒棒糖图绘制 4.1 查看内置示例数据 4.2 绘制基础棒棒糖图(使用ggplot2) 4.2.1 更改点的大小,形状,颜色和透

随机推荐