尝试以扩展 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 仓库中工作

VS Code 会识别你打开的文件夹是否为 Git 仓库。源代码管理视图使你无需使用命令行即可执行大多数 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.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.

该图提供以下功能

  • 选择一个条目以查看该提交中更改的文件。选择打开更改操作以在编辑器中查看该提交的差异。
  • 右键单击提交可执行检出、cherry-pick 等操作。使用 Copilot 操作来总结提交或将其作为上下文附加到你的聊天提示中。
  • 选择一个文件以在编辑器中查看该文件的差异。

使用图视图工具栏中的操作来选择分支、获取、拉取、推送和同步更改。

Git 状态栏操作

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

git status bar sync

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

git status bar publish

如果你的工作区包含多个 Git 仓库,状态栏将显示当前仓库。当你选择状态栏项目时,你可以选择哪个仓库应该处于活动状态的行为。

git status bar repo name

边栏指示器

如果你打开一个 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)

将 VS Code 用作 Git 编辑器

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

以下是操作步骤

  1. 确保你可以在命令行运行 code --help 并获得帮助。
    • 如果你没有看到帮助,请遵循以下步骤
      • macOS: 从命令面板中选择Shell 命令: 安装 'code' 命令到 PATH
      • 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 <commit>^ <commit> 使用 VS Code 作为更改的差异编辑器

使用 GitHub 拉取请求和问题

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

后续步骤