介绍
Visual Studio Code (VS Code) 已成为最流行的 Web 开发编辑器之一。由于其许多内置功能，例如与Git 的源代码控制集成，它获得了如此大的人气。在 VS Code 中利用 Git 的强大功能可以使您的工作流程更加高效和稳健。
在本教程中，您将探索在 VS Code 中使用 Git 的源代码控制集成。
先决条件
要完成本教程，您将需要以下内容：
- Git 安装在你的机器上。有关完成此操作的更多详细信息，请查看Git 入门教程。
- 你的机器上安装了最新版本的Visual Studio Code。
步骤 1 — 熟悉源代码控制选项卡
要利用源代码控制集成，您需要做的第一件事是将项目初始化为 Git 存储库。
打开 Visual Studio Code 并访问内置终端。您可以使用CTRL + `Linux、macOS 或 Windows 上的键盘快捷键打开它。
在您的终端中，为新项目创建一个目录并切换到该目录：
- mkdir git_test
- cd git_test
然后，创建一个 Git 存储库：
- git init
使用 Visual Studio Code 完成此操作的另一种方法是打开左侧面板中的“源代码管理”选项卡（图标看起来像道路上的裂口）：
接下来，选择打开文件夹：
这将打开您的文件资源管理器到当前目录。选择首选项目目录并单击Open。
然后，选择初始化存储库：
如果您现在检查您的文件系统，您将看到它包含一个.git目录。为此，请使用终端导航到您的项目目录并列出所有内容：
- ls -la
您将看到.git创建的目录：
Output- .
- ..
- .git
现在 repo 已经初始化，添加一个名为index.html.
执行此操作后，您将在源代码控制面板中看到您的新文件旁边显示有字母U。U代表untracked file，意思是一个新的或已更改的文件，但尚未添加到存储库中：
您现在可以单击文件列表旁边的加号( + ) 以index.html通过存储库跟踪文件。
添加后，文件旁边的字母将更改为A。A表示已添加到存储库中的新文件。
要提交更改，请在源代码控制面板顶部的输入框中键入提交消息。然后，单击复选图标以执行提交。
这样做之后，您会注意到没有待处理的更改。
接下来，向您的index.html文件添加一些内容。
您可以使用Emmet快捷方式在 VS Code 中通过按!键然后按Tab键来生成 HTML5 骨架。来吧，在添加一些<body>像一个<h1>标题和保存。
在源代码控制面板中，您将看到您的文件已被更改。它将在它旁边显示字母M，它代表已修改的文件：
对于练习，请继续并提交此更改。
现在您已经熟悉与源代码控制面板的交互，您将继续解释装订线指示器。
步骤 2 — 解释装订线指标
在这一步中，您将了解VS Code 中所谓的“ Gutter ”。装订线是行号右侧的细长区域。
如果您以前使用过代码折叠，则最大化和最小化图标位于装订线中。
让我们先对您的index.html文件进行一些小的更改，例如更改<h1>标记内的内容。这样做后，您会注意到您更改的行的装订线中有一个蓝色的垂直标记。垂直的蓝色标记表示相应的代码行已更改。
现在，尝试删除一行代码。您可以删除文件<body>部分中的其中一行index.html。现在请注意排水沟中有一个红色三角形。红色三角形表示已删除的一行或一组行。
最后，在您的<body>部分底部，添加一行新代码并注意绿色条。垂直的绿色条表示已添加的一行代码。
此示例描述了修改行、删除行和新行的装订线指示符：
第 3 步 – 区分文件
VS Code 还能够对文件执行差异。通常，您必须下载单独的差异工具来执行此操作，因此此内置功能可以帮助您更有效地工作。
要查看差异，请打开源代码控制面板并双击更改的文件。在这种情况下，请双击该index.html文件。您将进入典型的差异视图，左侧是文件的当前版本，右侧是文件的先前提交版本。
此示例显示在当前版本中添加了一行：
第 4 步 – 使用分支
移动到底部栏，您可以创建和切换分支。如果您查看编辑器的最左下角，您应该会看到源代码管理图标（看起来像道路上的裂口），后面很可能master是当前工作分支的名称。
要创建分支，请单击该分支名称。应该会弹出一个菜单，让您能够创建一个新分支：
继续创建一个名为 的新分支test。
现在，对您的index.html文件进行更改以表明您在新test分支中，例如添加文本this is the new test branch.
将这些更改提交到test分支。然后，再次单击左下角的分支名称以切换回master分支。
切换回master分支后，您会注意到this is the new test branch提交给test分支的文本不再存在。
第 5 步 – 使用远程存储库
本教程不会深入探讨它，但通过源代码控制面板，您可以访问远程存储库。如果您使用过远程存储库，那么您就会注意到诸如 pull、sync、publish、stash 等熟悉的命令。
步骤 6 — 安装有用的扩展
VS Code 不仅为 Git 提供了许多内置功能，还有几个非常流行的扩展来添加附加功能。
怪罪
此扩展提供了在当前选定行的状态栏中查看 Git Blame 信息的功能。
这听起来可能令人生畏，但不用担心，Git Blame 扩展更多的是实用性，而不是让某人感觉不好。将代码更改“归咎于”某人的想法与其说是羞辱他们，不如说是找出合适的人来向某些代码段提问。
正如您在屏幕截图中看到的那样，此扩展程序在底部工具栏中提供了一条与您正在处理的当前代码行相关的微妙消息，说明谁进行了更改以及他们何时进行了更改。
Git 历史
尽管您可以使用 VS Code 中的内置功能查看当前更改、执行差异和管理分支，但它无法深入了解您的 Git 历史记录。在Git的历史延伸解决了这个问题。
如下图所示，此扩展程序允许您彻底探索文件、给定作者、分支等的历史记录。要激活下面的 Git 历史记录窗口，请右键单击文件并选择Git：查看文件历史：
此外，您可以比较分支和提交，从提交创建分支等等。
Git 镜头
GitLens 增强了 Visual Studio Code 中内置的 Git 功能。它可以帮助您通过 Git 责备注释和代码镜头一目了然地可视化代码作者，无缝导航和探索 Git 存储库，通过强大的比较命令获得有价值的见解等等。
在Git的镜头扩展是在社会上最流行的一种，也是最强大的。在大多数情况下，它可以用其功能替换前两个扩展中的每一个。
对于“责备”信息，您当前正在处理的行右侧会出现一条微妙的消息，通知您更改的人、更改时间以及相关的提交消息。将鼠标悬停在此消息上时会弹出一些其他信息，例如代码更改本身、时间戳等。
对于 Git 历史信息，这个扩展提供了很多功能。您可以轻松访问大量选项，包括显示文件历史记录、执行与以前版本的差异、打开特定修订等。要打开这些选项，您可以单击底部状态栏中的文本，其中包含编辑代码行的作者以及编辑时间。
这将打开以下窗口：
此扩展程序具有丰富的功能，需要一段时间才能吸收它所提供的所有功能。
结论
在本教程中，您探索了如何将源代码管理与 VS Code 集成。VS Code 可以处理许多以前需要下载单独工具的功能。
