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

Visual Studio Code 集成了源代码管理(SCM)并默认支持 Git。许多其他源代码管理提供者可以通过 VS Code 市场中的 扩展 获得。

在 Git 仓库中工作

刚刚开始使用Git吗? git-scm 网站是一个不错的起点,提供了流行的在线书籍、入门视频速查表。VS Code文档假设您已经熟悉Git。

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 提交信息 中找到详细信息。

暂存所有更改按钮

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

我们发现这是一个非常有效的工作流程。例如,在之前的截图中,只有对overview.png的暂存更改会被包含在提交中。随后的暂存和提交操作可以将对versioncontrol.md和另外两个.png图像的更改作为一个单独的提交。

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

视图和更多操作按钮

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

使用编辑器编写提交信息

如果您在提交更改时没有输入提交信息,VS Code 会打开一个编辑器用于 COMMIT_EDITMSG 文件,您可以在编辑器中编写提交信息。在您提供提交信息后,可以关闭编辑器标签页,或者在编辑器工具栏中选择 接受提交信息 按钮以提交更改。

要取消提交操作,您可以清除文本编辑器的内容并关闭编辑器标签,或者在编辑器工具栏中选择放弃提交消息按钮。

作者在全文编辑器中提交的提交信息

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

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

克隆仓库

如果您尚未打开文件夹,源代码管理视图将为您提供从本地机器打开文件夹克隆仓库的选项。

首次运行源代码控制体验

如果您选择克隆仓库,系统将要求您提供远程仓库的URL(例如在GitHub上)以及放置本地仓库的父目录。

对于一个GitHub仓库,你可以在GitHub的代码对话框中找到URL。

克隆仓库对话框

然后你会将该URL粘贴到Git: Clone提示中。

设置仓库URL

您还会看到从GitHub克隆的选项。一旦您在VS Code中使用GitHub账户进行身份验证,您将能够按名称搜索存储库,并选择任何存储库进行克隆。您还可以使用命令面板中的Git: Clone命令启动克隆Git存储库的流程(⇧⌘P (Windows, Linux Ctrl+Shift+P))。要查看逐步操作指南,请查看我们的从VS Code克隆存储库视频。

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

分支和标签

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

如果你运行Git: Checkout to,你会看到一个下拉列表,其中包含当前仓库中的所有分支或标签。如果你认为创建一个新分支是更好的选择,或者以分离模式检出分支,它也会给你这个选项。

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 设置禁用自动获取,以减少你收到的提示次数。

源代码控制图

当您配置了远程仓库时,您可以查看您领先或落后于远程仓库的提交次数。源代码管理视图中的源代码管理图部分显示了传入和传出提交的图形表示。

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

源代码控制视图显示传入和传出更改的图形可视化。

该图表提供以下功能:

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

Git 状态栏操作

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

git状态栏同步

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

git状态栏发布

边距指示器

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

  • 红色三角形表示已删除的行
  • 绿色条表示新增的行
  • 蓝色条表示已修改的行

Gutter indicators

合并冲突

Git合并

VS Code 能够识别合并冲突。差异会被高亮显示,并且有内联操作可以接受其中一个或两个更改。一旦冲突解决,暂存冲突文件以便提交这些更改。

三方合并编辑器

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

三向合并编辑器分别显示传入更改(在左侧)、当前更改(在右侧)和合并的结果(在底部)。冲突会被高亮显示,并且可以通过使用CodeLens按钮来解决。

三方合并编辑器

解决冲突

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

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

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

完成合并

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

替代布局及更多

选择合并编辑器右上角的三点(···)会打开一个带有额外选项的上下文菜单。您可以切换到垂直布局并显示基础视图,该视图显示文件在进行任何更改之前的状态。

IncomingCurrentResult 旁边的三个点提供了每个视图的选项,例如显示与基础的并排差异、接受所有更改或重置结果。

理解冲突

如果你想了解更多关于三方合并编辑器如何工作的细节,我们可以推荐以下视频:

查看差异

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

VS Code中的文件差异

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

差异编辑器的截图,显示在装订线中的Stage和Revert控件

提示: 你可以通过首先在资源管理器视图中右键点击一个文件并选择选择进行比较,然后右键点击第二个文件进行比较并选择与选定文件比较来比较任意两个文件。或者,打开命令面板(⇧⌘P (Windows, Linux Ctrl+Shift+P)),并选择任意一个文件: 比较命令。了解更多关于在VS Code中比较文件的不同选项。

可访问的差异查看器

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

差异审查面板

注意: 此体验对屏幕阅读器用户特别有帮助。

时间线视图

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

时间线视图

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

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

提示: 点击扩展磁贴以在市场中阅读描述和评论。

Git 输出窗口

你总是可以窥探一下我们正在使用的Git命令。如果发生了一些奇怪的事情,或者你只是好奇,这会很有帮助。:)

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

初始化一个仓库

如果你的工作区在本地机器上,你可以通过使用初始化仓库命令创建一个Git仓库来启用Git源代码控制。当VS Code没有检测到现有的Git仓库时,源代码控制视图将为你提供初始化仓库发布到GitHub的选项。

Git 初始化仓库

你也可以从命令面板运行Git: 初始化仓库发布到GitHub命令(⇧⌘P (Windows, Linux Ctrl+Shift+P))。运行初始化仓库将创建必要的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 的差异工具和合并工具

即使从命令行使用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 进行交互式 rebase
  • git commit 使用 VS Code 进行提交消息
  • git add -p 然后按 e 进行交互式添加
  • git difftool ^ 使用 VS Code 作为更改的差异编辑器

使用 GitHub Pull Requests 和 Issues

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

SCM 提供商

提示: 点击扩展磁贴以在市场中阅读描述和评论。

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

溢出菜单中的源代码控制仓库视图选项

SCM 提供者扩展

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

市场中的SCM提供商类别

下一步