🚀 在 VS Code 中

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

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

借助 VS Code 中的 GitHub Copilot,您可以获得提交消息、拉取请求的建议,并在提交代码更改之前对其进行审查。了解有关 VS Code 中的 GitHub Copilot 的更多信息。

提示

如果您还没有 Copilot 订阅,请注册 Copilot 免费计划,即可免费使用 Copilot。您将获得每月的补全和聊天互动次数限制。

提示

如果您刚开始使用 Git,git-scm 网站是一个不错的起点,其中包含流行的在线书籍、入门视频速查表。VS Code 文档假定您已熟悉 Git。

在 Git 存储库中工作

当您打开一个 Git 存储库文件夹时,VS Code 会识别出来。“源代码控制”视图使您无需使用命令行即可执行大多数 Git 操作。

重要提示

确保您的机器上已安装 Git。 VS Code 使用您机器上的 Git 安装(至少版本 2.0.0),因此您需要先安装 Git,然后才能获得这些功能。

您可以通过选择活动栏中的 源代码控制 图标,或使用 ⌃⇧G (Windows, Linux Ctrl+Shift+G) 键盘快捷键来访问“源代码控制”视图。如果您有更改,“源代码控制”图标会指示您当前在存储库中有多少更改

“源代码控制”视图显示当前存储库更改的详细信息:更改暂存更改合并更改。您还可以查看 源代码控制图,以了解您的更改与存储库历史记录的关系。

Overview of Git

当您在“源代码控制”视图中选择一个文件时,您将在差异编辑器中看到您对该文件所做的更改。

提示

对于未暂存的更改,右侧的编辑器仍然允许您编辑文件:请随意使用它!

您还可以在 VS Code 状态栏的左下方找到 存储库状态 的指示器:当前分支未保存指示器以及当前分支的 传入和传出提交 的数量。要 检出 存储库中的任何分支,请选择状态指示器并从列表中选择 Git 引用。

提示

您可以在 Git 存储库的子目录中打开 VS Code。VS Code 的 Git 服务仍将像往常一样工作,显示存储库内的所有更改,但范围目录之外的文件更改将以工具提示阴影显示,指示它们位于当前工作区之外。

克隆存储库

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

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 Repositories 扩展,以直接在 GitHub 上浏览和编辑。您可以在 GitHub Repositories 扩展 部分中了解更多信息。

初始化存储库

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

Git initialize repository

您还可以从 命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 运行 Git:初始化存储库发布到 GitHub 命令。

  • 初始化存储库:创建必要的 Git 存储库元数据文件,并将您的工作区文件显示为未跟踪的更改,准备好进行暂存。
  • 发布到 GitHub:直接将您的工作区文件夹发布到 GitHub 存储库,允许您在私有和公共存储库之间进行选择。查看我们的 发布存储库 视频,以获取有关发布到 GitHub 的更多信息。

提交

暂存 (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:撤消上次提交 命令撤消您的提交。

使用 AI 生成提交消息

VS Code 中的 GitHub Copilot 可以根据您所做的代码更改为您生成提交消息。在“源代码控制”视图中,选择提交消息输入框中的 使用 Copilot 生成提交消息 按钮 ()。

Screenshot that shows the Generate Commit Message with Copilot button in the commit message input box.

如果您的组织或项目对提交消息有特定要求,您可以使用 Copilot 自定义指令来生成提交消息。例如,提交消息的最大长度为 60 个字符,并且应以现在时动词开头。获取有关 Copilot 自定义指令生成提交消息 的更多详细信息。

使用编辑器编写提交消息

如果您在提交更改时未输入提交消息,VS Code 将打开一个编辑器用于 COMMIT_EDITMSG 文件,您可以在编辑器中编写提交消息。在您提供提交消息后,关闭编辑器选项卡,或选择编辑器工具栏中的 接受提交消息 按钮以提交更改。

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

Author commit message in a full text editor

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

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

Git blame 信息

VS Code 可以在编辑器中和状态栏中内联显示 git blame 信息。将鼠标悬停在状态栏项目或内联提示上,以查看详细的 git blame 信息。

要启用或禁用 git blame 信息,请使用 Git:切换 Git Blame 编辑器装饰Git:切换 Git Blame 状态栏项目 命令,或配置这些设置

  • git.blame.statusBarItem.enabled(默认启用)
  • git.blame.editorDecoration.enabled

您可以使用 git.blame.editorDecoration.templategit.blame.statusBarItem.template 设置自定义在编辑器和状态栏中显示的消息格式。您可以使用变量来表示最常见的信息。

例如,以下模板显示提交的主题、作者姓名和作者日期(相对于现在)

{
  "git.blame.editorDecoration.template": "${subject}, ${authorName} (${authorDateAgo})"
}

要调整编辑器装饰的颜色,请使用 git.blame.editorDecorationForeground 主题颜色。

使用 AI 审查未提交的代码更改

VS Code 中的 GitHub Copilot 可以帮助您审查未提交的代码更改。

  1. 在“源代码控制”视图中,选择 Copilot 代码审查 按钮以启动对未提交更改的代码审查

    Screenshot that shows the Copilot Code Review button in the Source Control view.

  2. Copilot 生成代码审查注释和建议,作为编辑器中的覆盖层

    Screenshot that shows the code review comments generated by Copilot.

    您还可以在 注释 面板中查看所有代码审查注释的列表。

  3. 您可以使用相应的按钮或“注释”面板中的上下文菜单操作来应用或放弃建议

在 GitHub 文档中,获取有关 使用 Copilot 审查代码更改 的更多详细信息。

分支和标签

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

如果您运行 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

Gutter 指示器

如果您打开一个 Git 存储库文件夹并开始进行更改,VS Code 将向 gutter 和概览标尺添加有用的注释。

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

Gutter indicators

合并冲突

Git merge

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

三向合并编辑器

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

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

3-way merge editor

解决冲突

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

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

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

完成合并

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

备用布局和更多功能

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

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

了解冲突

如果您想了解有关三向合并编辑器工作原理的更多详细信息,我们推荐以下视频

查看差异

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

A File Diff in VS Code

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

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)

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

这使用了 --diff 选项,该选项可以传递给 VS Code 以并排比较两个文件。合并工具将在 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 拉取请求和议题

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

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

后续步骤