现已推出!阅读有关 10 月份新功能和修复的介绍。

在 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

提示:如果您将更改提交到错误的分支,请使用命令面板⇧⌘P(Windows,Linux Ctrl+Shift+P))中的Git:撤销上次提交命令撤销您的提交。

使用编辑器撰写提交消息

如果您在提交更改时未输入提交消息,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 的代码对话框中找到 URL。

clone repository dialog

然后,您将把该 URL 粘贴到Git:克隆提示中。

set repository URL

您还会看到从 GitHub 克隆选项。在 VS Code 中使用您的 GitHub 帐户进行身份验证后,您将能够按名称搜索仓库,并选择要克隆的任何仓库。您还可以开始使用命令面板⇧⌘P(Windows,Linux Ctrl+Shift+P))中的Git:克隆命令来克隆 Git 仓库。要查看分步演练,请查看我们的 从 VS Code 克隆仓库 视频。

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

分支和标签

您可以直接在 VS Code 中创建和签出分支,方法是通过**命令面板**中的**Git: 创建分支**和**Git: 签出到**命令(⇧⌘P(Windows、Linux Ctrl+Shift+P)。

如果您运行**Git: 签出到**,您将看到一个下拉列表,其中包含当前存储库中的所有分支或标签。它还将为您提供创建新分支的选项(如果您认为这是一个更好的选择),或以分离模式签出分支。

Git checkout

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

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

远程仓库

鉴于您的存储库已连接到某个远程存储库,并且您签出的分支已建立与该远程存储库中分支的上游链接,VS Code 为您提供有用的操作来**推送**、**拉取**和**同步**该分支(后者将运行**拉取**命令,然后运行**推送**命令)。您可以在**视图和更多操作**...菜单中找到这些操作,以及**添加或删除远程存储库**的选项。

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 和 Issues

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。