现已推出！阅读有关 11 月份的新功能和修复的信息。

在 VS Code 中使用 Git 源代码控制

Visual Studio Code 具有集成的源代码管理 (SCM)，并且开箱即用地包含 Git 支持。许多其他源代码控制提供程序可通过 VS Code Marketplace 上的扩展获得。

在 Git 存储库中工作

刚开始使用 Git？git-scm 网站是一个很好的起点，其中包含热门的在线书籍，入门视频和速查表。VS Code 文档假定您已经熟悉 Git。

Overview of Git

请确保已安装 Git。VS Code 将使用您计算机上的 Git 安装（至少版本 2.0.0），因此您需要先安装 Git，然后才能使用这些功能。

左侧活动栏中的“源代码控制”图标将始终指示您的存储库中当前有多少更改的概览。选择该图标将向您显示当前存储库更改的详细信息：更改、暂存的更改和合并更改。

单击每个项目将详细显示每个文件内的文本更改。请注意，对于未暂存的更改，右侧的编辑器仍然允许您编辑文件：请随意使用它！

您还可以在 VS Code 的左下角找到存储库状态的指示器：当前分支、脏指示器以及当前分支的传入和传出提交数量。您可以通过单击该状态指示器并从列表中选择 Git 引用来检出存储库中的任何分支。

提示：您可以在 Git 存储库的子目录中打开 VS Code。VS Code 的 Git 服务仍将照常工作，显示存储库中的所有更改，但范围目录之外的文件更改将以工具提示进行阴影处理，指示它们位于当前工作区之外。

提交

可以通过文件中的上下文操作或拖放来完成暂存 (git add) 和取消暂存 (git reset)。

配置您的 Git 用户名和电子邮件。当您提交时，请注意，如果您的用户名和/或电子邮件未在 Git 配置中设置，Git 将回退为使用您本地计算机上的信息。您可以在Git 提交信息中找到详细信息。

Stage all changes button

您可以在更改上方键入提交消息，然后按 Ctrl+Enter (macOS: ⌘+Enter) 来提交它们。如果有任何暂存的更改，则只会提交这些更改。否则，您将收到一个提示，要求您选择要提交的更改，并可以选择更改您的提交设置。

我们发现这是一个很棒的工作流程。例如，在前面的屏幕截图中，只有对 overview.png 的暂存更改才会包含在提交中。稍后的暂存和提交操作可以将对 versioncontrol.md 和另外两个 .png 图像的更改作为单独的提交包括在内。

可以在“源代码控制”视图顶部的“视图和更多操作”... 菜单中找到更具体的提交操作。

views and more actions button

提示：如果您将更改提交到错误的分支，请使用命令面板中的“Git: 撤消上次提交”命令撤消您的提交 (⇧⌘P（Windows、Linux Ctrl+Shift+P））。

使用编辑器编写提交消息

如果您在提交更改时没有输入提交消息，VS Code 会为 COMMIT_EDITMSG 文件打开一个编辑器，您可以在该编辑器中编写提交消息。在您提供提交消息后，关闭编辑器选项卡，或者选择编辑器工具栏中的“接受提交消息”按钮来提交更改。

要取消提交操作，您可以清除文本编辑器的内容并关闭编辑器选项卡，或选择编辑器工具栏中的“放弃提交消息”按钮。

Author commit message in a full text editor

您可以通过切换git.useEditorAsCommitInput设置来禁用此功能。更改设置后，您必须重新启动 VS Code 才能使更改生效。

要对在集成终端中执行的 git commit 命令使用相同的流程，请启用git.terminalGitEditor设置。

克隆存储库

如果您尚未打开文件夹，“源代码控制”视图将为您提供从本地计算机打开文件夹或克隆存储库的选项。

First run Source Control experience

如果您选择克隆仓库，系统会要求您提供远程仓库的 URL（例如，在 GitHub 上的仓库）以及本地仓库的父目录。

对于 GitHub 仓库，您可以从 GitHub 的 Code 对话框中找到 URL。

clone repository dialog

然后，您需要将该 URL 粘贴到 Git: 克隆 提示符中。

set repository URL

您还会看到从 GitHub 克隆的选项。在 VS Code 中使用您的 GitHub 帐户进行身份验证后，您可以通过名称搜索仓库，并选择任何仓库进行克隆。您还可以通过命令面板中的 Git: 克隆 命令（⇧⌘P (Windows, Linux Ctrl+Shift+P)）启动克隆 Git 仓库的流程。要查看逐步演练，请查看我们的 从 VS Code 克隆仓库 视频。

注意：如果您想在不将内容克隆到本地计算机的情况下处理仓库，您可以安装 GitHub 仓库 扩展，以便直接在 GitHub 上浏览和编辑。您可以在 GitHub 仓库扩展 部分了解更多信息。

分支和标签

您可以通过命令面板中的 Git: 创建分支 和 Git: 切换到 命令直接在 VS Code 中创建和检出分支（⇧⌘P (Windows, Linux Ctrl+Shift+P)）。

如果您运行 Git: 切换到，您将看到一个下拉列表，其中包含当前仓库中的所有分支或标签。它还会为您提供创建新分支的选项（如果您认为这是更好的选择），或以分离模式检出一个分支。

Git checkout

Git: 创建分支 命令允许您快速创建一个新分支。只需提供新分支的名称，VS Code 将创建该分支并切换到该分支。如果您选择从...创建新分支，您将获得一个额外的提示，允许您指定新分支应指向哪个提交。

提示：当您切换到另一个分支时，VS Code 可以自动保存和恢复打开的编辑器。使用 scm.workingSets.enabled 设置启用此功能。要控制首次切换到分支时打开的编辑器，您可以使用 scm.workingSets.default 设置。

远程仓库

假设您的仓库已连接到某个远程仓库，并且您检出的分支具有指向该远程仓库中分支的上游链接，VS Code 为您提供了有用的操作，用于推送、拉取和同步该分支（后者将运行 pull 命令，然后运行 push 命令）。您可以在视图和更多操作 ... 菜单中找到这些操作，以及添加或删除远程仓库的选项。

VS Code 能够定期从您的远程仓库获取更改。这使 VS Code 可以显示您的本地仓库比远程仓库提前或落后多少更改。此功能默认禁用，您可以使用 git.autofetch 设置 启用它。

提示： 您应该设置凭据助手，以避免每次 VS Code 与您的 Git 远程仓库通信时都被要求提供凭据。如果您不这样做，您可能需要考虑通过 git.autofetch 设置禁用自动获取，以减少您收到的提示次数。

源代码控制图

当您配置了远程仓库时，您可以看到您的提交比远程仓库提前或落后多少。源代码管理视图的源代码管理图部分显示了传入和传出的提交的图形表示。

该图包含当前分支、当前分支的上游分支和一个可选的基础分支。该图的根是这些分支的公共祖先。

Source control view showing a graph visualization of the incoming and outgoing changes.

该图提供以下功能

  • 选择一个条目以查看提交中相应的更改。
  • 将鼠标悬停在传入/传出标题上以执行获取、拉取和推送操作。

Git 状态栏操作

当当前检出的分支配置了上游分支时，在状态栏中的分支指示器旁边有一个同步更改操作。同步更改会将远程更改拉取到您的本地仓库，然后将本地提交推送到上游分支。

git status bar sync

如果没有配置上游分支，并且 Git 仓库设置了远程仓库，则会启用 发布 操作。这将允许您将当前分支发布到远程仓库。

git status bar publish

装订线指示器

如果您打开一个 Git 仓库的文件夹并开始进行更改，VS Code 将在装订线和概览标尺中添加有用的注释。

  • 红色三角形表示已删除行的位置
  • 绿色条表示新添加的行
  • 蓝色条表示已修改的行

Gutter indicators

合并冲突

Git merge

VS Code 可以识别合并冲突。差异会突出显示，并且有内联操作来接受一个或两个更改。解决冲突后，暂存冲突文件，以便您可以提交这些更改。

三向合并编辑器

为了帮助您解决合并冲突，VS Code 提供了一个三向合并编辑器，您可以在其中交互式地接受传入和当前更改，并查看和编辑合并后的文件。通过选择带有 Git 合并冲突的文件的右下角的在合并编辑器中解决按钮，可以打开三向合并编辑器。

三向合并编辑器为 传入 更改（在左侧）、当前 更改（在右侧）和合并的 结果（在底部）显示单独的视图。冲突会突出显示，并且可以使用 CodeLens 按钮解决。

3-way merge editor

解决冲突

三向合并编辑器允许您通过接受一个或两个更改来解决冲突。您还可以手动编辑合并结果。

对于某些冲突，合并编辑器会显示接受组合按钮。接受组合通过智能合并两个更改来解决当前冲突。这对于在同一行中不触及相同字符的更改特别有用。

使用忽略按钮来接受传入和当前更改，但将冲突标记为已解决。这会将冲突区域重置为进行任何更改之前的状态。

完成合并

您可以使用结果编辑器右侧的冲突计数器来跟踪还剩下多少未解决的冲突。单击计数器会跳转到下一个未解决的冲突。解决所有冲突后，您可以选择右下角的完成合并来完成合并。这会暂存文件并关闭合并编辑器。

其他布局和更多

选择合并编辑器右上角的三个点 (···) 会打开一个上下文菜单，其中包含其他选项。您可以切换到垂直布局并显示基本视图，该视图显示进行任何更改之前的文件状态。

传入、当前和 结果 旁边的三个点为每个视图提供选项，例如显示与基本视图的并排差异、接受所有更改或重置结果。

理解冲突

如果您想了解有关三向合并编辑器如何工作的详细信息，我们可以推荐以下视频

查看差异

我们的 Git 工具支持在 VS Code 中查看差异。

A File Diff in VS Code

差异编辑器在中间有一个单独的装订线，可让您暂存或还原更改代码块。如果您选择一段文本，您可以还原或暂存所选内容中包含的更改。

Screenshot of the Diff editor, showing the Stage and Revert controls in the gutter

提示：您可以通过先在资源管理器视图中右键单击一个文件并选择选择以进行比较，然后右键单击要比较的第二个文件并选择与所选内容进行比较来比较任意两个文件。或者，打开命令面板（⇧⌘P (Windows, Linux Ctrl+Shift+P)），并选择任何 文件：比较 命令。了解有关在 VS Code 中比较文件的不同选项的更多信息。

可访问的差异查看器

差异编辑器中有一个可访问的差异查看器，以统一的补丁格式呈现更改。您可以使用转到下一个差异（F7）和转到上一个差异（⇧F7 (Windows, Linux Shift+F7)）在更改之间导航。可以使用箭头键导航行，按 Enter 将跳回到差异编辑器和所选行。

diff-review-pane

注意： 此体验对于屏幕阅读器用户尤其有帮助。

时间线视图

时间线视图（默认情况下可在文件资源管理器的底部访问）是用于可视化文件的时间序列事件（例如，Git 提交）的统一视图。

Timeline view

VS Code 内置的 Git 支持提供了指定文件的 Git 提交历史。选择一个提交会打开一个差异视图，显示该提交引入的更改。当您右键单击一个提交时，您将获得复制提交 ID 和复制提交消息的选项。

Visual Studio Code 通过 VS Code Marketplace 上提供的扩展支持更多 Git 历史工作流程。

提示： 单击扩展磁贴以阅读 Marketplace 中的描述和评论。

Git 输出窗口

您可以随时查看底层使用的 Git 命令。如果发生奇怪的事情，或者您只是好奇，这会很有帮助。 :)

要打开 Git 输出窗口，请运行查看 > 输出，并从下拉列表中选择 日志 (Git)。

初始化存储库

如果您的工作区在本地计算机上，您可以通过使用 初始化存储库 命令创建一个 Git 存储库来启用 Git 源代码控制。当 VS Code 未检测到现有 Git 存储库时，“源代码控制”视图将为您提供 初始化存储库 或 发布到 GitHub 的选项。

Git initialize repository

您也可以从 命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 运行 Git：初始化存储库 和 发布到 GitHub 命令。运行 初始化存储库 将创建必要的 Git 存储库元数据文件，并将您的工作区文件显示为未跟踪的更改，可以进行暂存。 发布到 GitHub 会将您的工作区文件夹直接发布到 GitHub 存储库，允许您选择私有或公共存储库。有关发布到 GitHub 的更多信息，请查看我们的发布存储库视频。

将 VS Code 用作 Git 编辑器

当您从命令行启动 VS Code 时，您可以传递 --wait 参数，使启动命令等待直到您关闭新的 VS Code 实例。当您将 VS Code 配置为 Git 的外部编辑器时，这会很有用，这样 Git 将等待直到您关闭启动的 VS Code 实例。

以下是执行此操作的步骤

  1. 请确保您可以从命令行运行 code --help 并获得帮助。
    • 如果您没有看到帮助，请按照以下步骤操作
      • macOS：从 命令面板 中选择 Shell 命令：在路径中安装“Code”命令。
      • Windows：请确保您在安装过程中选择了 添加到 PATH。
      • Linux：请确保您通过我们新的 .deb 或 .rpm 包安装了 Code。
  2. 从命令行，运行 git config --global core.editor "code --wait"

现在您可以运行 git config --global -e 并使用 VS Code 作为编辑器来配置 Git。

VS Code 作为 Git difftool 和 mergetool

即使从命令行使用 Git，您也可以使用 VS Code 的差异和合并功能。将以下内容添加到您的 Git 配置中，以使用 VS Code 作为差异和合并工具

[diff]
    tool = default-difftool
[difftool "default-difftool"]
    cmd = code --wait --diff $LOCAL $REMOTE
[merge]
    tool = code
[mergetool "code"]
    cmd = code --wait --merge $REMOTE $LOCAL $BASE $MERGED

这使用了可以传递给 VS Code 的 --diff 选项来并排比较两个文件。合并工具将在 Git 下次发现合并冲突时使用。

总而言之，以下是一些您可以使用 VS Code 作为编辑器的示例

  • git rebase HEAD~3 -i 使用 VS Code 执行交互式变基
  • git commit 使用 VS Code 编写提交消息
  • git add -p 后跟 e 进行交互式添加
  • git difftool <commit>^ <commit> 使用 VS Code 作为更改的差异编辑器

使用 GitHub Pull Request 和 Issue

Visual Studio Code 还可以引入 GitHub 的拉取请求和问题。在 VS Code 中创建您的 PR，使用评论进行审查，并在不切换上下文的情况下批准它们。了解更多关于 VS Code 中的 GitHub PR 和问题。

SCM 提供程序

提示： 单击扩展磁贴以阅读 Marketplace 中的描述和评论。

VS Code 支持同时处理多个源代码控制提供程序。例如，您可以打开多个 Git 存储库以及您的 Azure DevOps Server 本地工作区，并在您的项目中无缝工作。要打开 源代码控制提供程序 视图，请选择 源代码控制 视图中的溢出菜单 (⌃⇧G (Windows, Linux Ctrl+Shift+G))，将鼠标悬停在 视图 上，并确保 源代码控制存储库 被标记为选中。 源代码控制提供程序 视图显示检测到的提供程序和存储库，您可以通过选择特定的提供程序来限定更改的显示范围。

Source Control Repositories view option in overflow menu

SCM 提供程序扩展

如果您想安装另一个 SCM 提供程序，您可以在 扩展 视图 (⇧⌘X (Windows, Linux Ctrl+Shift+X)) 中搜索 scm providers 扩展类别。开始输入“@ca”，您将看到调试器和 linter 等扩展类别的建议。选择 @category:"scm providers" 查看可用的 SCM 提供程序。

SCM Provider category in the marketplace

后续步骤

  • 入门视频 - Git 版本控制 - 介绍性视频，概述了 VS Code Git 支持。
  • 基本编辑 - 了解强大的 VS Code 编辑器。
  • 代码导航 - 在您的源代码中快速移动。
  • 调试 - 这是 VS Code 真正闪光的地方
  • 任务 - 使用 Gulp、Grunt 和 Jake 运行任务。显示错误和警告
  • 源代码控制 API - 如果您想将另一个源代码控制提供程序集成到 VS Code 中，请参阅我们的源代码控制 API。
12/11/2024