使用Git的Visual Studio Code中的版本控制[指南]

流行的Git存储库托管服务Github也使用它。

Git是一个分布式版本控制系统 ,它允许您跟踪工作,在版本之间来回移动以及同时在不同分支上工作。

集成的Git支持是Microsoft新的源代码编辑器 Visual Studio Code的最大功能之一。

侧边栏包含一个单独的Git视图,您可以通过单击视图栏中的Git图标( 请参见VS代码的各部分 ),或通过按Ctrl + Shift + G键绑定来快速打开。

默认情况下 ,Visual Studio Code 支持Git ,这意味着您无需安装任何软件包或扩展程序即可使用它。

安装Git

您需要至少安装version 2.0.0才能使VS Code的Git功能正常工作。

您可以从Git的官方网站上快速下载它。

由于Visual Studio Code 使用计算机的Git安装 ,因此首先需要安装Git。

使用Git的Visual Studio Code中的版本控制[指南]

尽管Visual Studio Code允许您直观管理Git ,但是如果您还想从命令行学习如何使用Git,则这里有一些有用的资源:

初始化您的存储库

为此,请在Git视图中单击Initialize git仓库按钮。

如果Git尚未跟踪您的工作区,则首先需要初始化一个新的存储库

使用Git的Visual Studio Code中的版本控制[指南]

VS Code将在工作区中创建一个.git文件夹 (您无法从VS Code中看到它,因为它是一个隐藏目录,但是您可以在项目的根文件夹中的文件管理器中找到它) 将未跟踪的文件添加到侧边栏

使用Git的Visual Studio Code中的版本控制[指南]

阶段变更

单击悬停在每个文件旁边的+按钮以暂存它们。

提交之前,您需要将要使用Git跟踪的文件添加到暂存区域 ,换句话说,您需要暂存 更改

设置完Git存储库之后,就该创建您的初始提交了 (提交是整个存储库的记录状态,您以后可以移回该状态)。

如果要一次暂存所有文件 ,则“ Changes字幕旁边也会有一个+按钮(它出现在悬停时),然后单击它。

单击要暂存的文件后,Visual Studio Code从“ Changes文件夹移至“暂存的 Staged Changes文件夹,这意味着它们现在位于暂存区域中

使用Git的Visual Studio Code中的版本控制[指南]

提交变更

为了提交分阶段的更改,您需要添加一条提交消息 ,以描述自上一次提交以来所做的更改。

分阶段的更改尚未记录,您还需要提交它们 ,以便稍后查看或移回存储库当前状态

现在您已准备好第一次提交,就记录了存储库的初始状态。

在侧边栏顶部的输入栏中键入您的提交消息,然后单击小勾图标

在我们的示例中,这将是初始提交,让我们使用醒目的“ Initial Commit”消息。

使用Git的Visual Studio Code中的版本控制[指南]

如果您在工作区中进行了新的更改,新的更改将再次出现在侧边栏中,并且一旦它们达到了值得提交的数量,就需要再次提交它们

您的Git工作目录是干净的,到目前为止,您所做的所有更改都会被跟踪,并且您的Git视图显示有0个更改(它总是与您的上一次提交进行比较)。

在下面的屏幕截图中,您可以看到提交后代码编辑器的外观如何。

使用Git的Visual Studio Code中的版本控制[指南]

跟随变化

在Git视图中,只需双击要分析的文件 ,VS Code就会并排显示当前版本和先前版本,因此您可以快速进行比较

在继续进行工作时,如果不确定当前版本与上一次提交的比较情况,可以快速检查差异。

使用Git的Visual Studio Code中的版本控制[指南]

VS Code使用3种装订线指示器

在谈论后续更改时,了解Visual Studio Code的装订线指示器也很重要,该指示器可以注释与上一次提交相比的更改,即使未打开并排视图。

  1. 删除每行一个红色三角形
  2. 每行添加一个绿色条
  3. 每行修改都有一个蓝色条
使用Git的Visual Studio Code中的版本控制[指南]

创建分支

这不仅有利于尝试新的解决方案,而且还可以极大地促进团队合作,使开发人员可以在不同的分支上工作(但是这不是必须的,因为他们也可以留在同一分支上)。

Git允许您同时在不同的分支工作

您还需要在命令末尾添加新分支的名称。

在Visual Studio Code中,您可以通过以下方法来创建新的分支:单击Ctrl + P (在Mac上为Cmd + P ),然后在输入栏中键入git branch命令,以打开“快速打开”面板。

在下面的屏幕截图中,您可以看到我当前在master分支上。

在状态栏的左侧(屏幕底部的蓝色栏),您始终可以快速查看当前正在处理的分支。

因为在我们的示例中,新分支的名称为test-branch ,所以我将使用git branch test-branch命令,但是您可以使用任何其他名称。

使用Git的Visual Studio Code中的版本控制[指南]

结帐分支

在下面的屏幕截图中,您可以从状态栏中看到我当前在名为test的分支上(我在test-branch之后创建了它),如果我想移至其他分支,现在可以从master菜单中进行选择。和test-branch分支机构。

在分支之间切换,请在 “快速打开”面板中输入git checkoutCtrl + P / Cmd + P ),然后可以从可用的分支中进行选择。

使用Git的Visual Studio Code中的版本控制[指南]

从命令面板使用Git命令

您无需执行任何其他操作,只需在“命令面板”中键入命令Git ,您就会获得一个可用命令的下拉列表,您可以从中快速选择。

您也可以从命令面板(在Windows和Linux上为F1 ,在Mac上为Shift + Cmd + P )访问Git命令。

使用Git的Visual Studio Code中的版本控制[指南]

高级Git操作

VS Studio Code还具有高级Git功能,例如管理远程存储库合并冲突 ,甚至可以将VS Code配置为外部Git编辑器

到目前为止,我们已经研究了如何在Visual Studio Code中使用基本的Git操作来跟踪我们的工作。

使用Git的Visual Studio Code中的版本控制[指南]

您也可以在我之前的文章中阅读Git History扩展有关面向前端开发人员的VS Code扩展。

我本人发现扩展Git History非常有用,因为它使得快速查看每个提交的细节以及并排比较任何两个先前的提交成为可能。


翻译自: https://www.hongkiat.com/blog/version-control-git-vs-code/