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