尝试以扩展 VS Code 中的代理模式!

在 VS Code 中使用 GitHub

GitHub 是一个基于云的服务,用于存储和共享源代码。在 Visual Studio Code 中使用 GitHub 可以让您直接在编辑器中共享源代码并与他人协作。与 GitHub 交互的方式有很多,例如通过其网站 https://github.comGit 命令行界面 (CLI),但在 VS Code 中,丰富的 GitHub 集成由 GitHub Pull Requests and Issues 扩展提供。

安装 GitHub Pull Requests and Issues 扩展

要开始在 VS Code 中使用 GitHub,您需要安装 Git创建一个 GitHub 帐户并安装 GitHub Pull Requests and Issues 扩展。在本主题中,我们将演示如何在不离开 VS Code 的情况下使用 GitHub 的一些您喜欢的功能。

如果您是源代码管理的新手,或者想了解更多关于 VS Code 基本 Git 支持的信息,您可以从源代码管理主题开始。

开始使用 GitHub 拉取请求和问题

安装 GitHub Pull Requests and Issues 扩展后,您需要登录。按照提示在浏览器中通过 GitHub 进行身份验证,然后返回 VS Code。

Extension Sign In

如果您没有被重定向到 VS Code,您可以手动添加您的授权令牌。在浏览器窗口中,您将收到您的授权令牌。复制该令牌,然后切换回 VS Code。在状态栏中选择 正在登录 github.com...,粘贴令牌,然后按 Enter

设置仓库

克隆仓库

您可以使用命令面板中的 Git: Clone 命令(⇧⌘P (Windows、Linux Ctrl+Shift+P)),或使用源代码管理视图中的 克隆仓库 按钮(在未打开任何文件夹时可用),从 GitHub 搜索并克隆仓库。

Clone Repository button in the Source Control view

从 GitHub 仓库下拉菜单中,您可以筛选并选择要本地克隆的仓库。

GitHub repository dropdown filtered on microsoft/vscode

使用现有仓库进行身份验证

通过 GitHub 启用身份验证会在您在 VS Code 中运行任何需要 GitHub 身份验证的 Git 操作时发生,例如推送到您是成员的仓库或克隆私人仓库。您无需安装任何特殊的扩展即可进行身份验证;它已内置于 VS Code 中,以便您可以高效地管理您的仓库。

当您执行需要 GitHub 身份验证的操作时,您将看到登录提示。

Authentication Prompt

按照步骤登录 GitHub 并返回 VS Code。使用个人访问令牌 (PAT) 登录仅支持 GitHub Enterprise Server。如果您正在使用 GitHub Enterprise Server 并希望使用 PAT,则可以在登录提示中点击“取消”,直到系统提示您输入 PAT。

请注意,有多种方式可以对 GitHub 进行身份验证,包括使用用户名和密码配合双因素身份验证 (2FA)、个人访问令牌或 SSH 密钥。有关每个选项的更多信息和详细信息,请参阅关于 GitHub 身份验证

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

编辑器集成

悬停信息

当您打开一个仓库并 @ 提及用户时,您可以将鼠标悬停在该用户名上,查看 GitHub 风格的悬停提示。

User Hover

对于 # 提及的问题编号、完整的 GitHub 问题 URL 和仓库指定的问题,也有类似的悬停提示。

Issue Hover

建议

用户建议由“@”字符触发,问题建议由“#”字符触发。建议在编辑器和源代码管理视图的输入框中均可用。

User and Issue suggestions

建议中出现的问题可以通过 GitHub Issues: Queries (githubIssues.queries) 设置进行配置。这些查询使用GitHub 搜索语法

您还可以使用 GitHub Issues: Ignore Completion Trigger (githubIssues.ignoreCompletionTrigger) 和 GitHub Issues: Ignore User Completion Trigger (githubIssues.ignoreUserCompletionTrigger) 设置来配置哪些文件显示这些建议。这些设置接受一个语言标识符数组来指定文件类型。

// Languages that the '#' character should not be used to trigger issue completion suggestions.
"githubIssues.ignoreCompletionTrigger": [
  "python"
]

拉取请求

拉取请求 视图中,您可以查看、管理和创建拉取请求。

Pull Request View

用于显示拉取请求的查询可以通过 GitHub Pull Requests: Queries (githubPullRequests.queries) 设置进行配置,并使用GitHub 搜索语法

"githubPullRequests.queries": [
    {
        "label": "Assigned To Me",
        "query": "is:open assignee:${user}"
    },

创建拉取请求

将更改提交到您的分支或派生后,您可以使用 GitHub Pull Requests: Create Pull Request 命令或 拉取请求 视图中的 创建拉取请求 按钮来创建拉取请求。

Create Pull Request button in the Pull Request view

将显示一个新的 创建 视图,您可以在其中选择拉取请求的目标基础仓库和基础分支,并填写标题和描述。如果您的仓库有拉取请求模板,该模板将自动用作描述。

使用顶部操作栏中的按钮添加 负责人审阅者标签里程碑

Create Pull Request view

创建 按钮菜单允许您选择其他创建选项,例如 创建草稿 或启用 自动合并 方法。

选择 创建 后,如果您尚未将分支推送到 GitHub 远程仓库,扩展将询问您是否要发布该分支,并提供一个下拉菜单供您选择特定的远程仓库。

创建拉取请求 视图现在进入 评审模式,您可以在其中评审拉取请求的详细信息、添加评论,并在准备就绪后合并拉取请求。拉取请求合并后,您将可以选择删除远程和本地分支。

提示

使用 GitHub Copilot 根据拉取请求中包含的提交生成拉取请求标题和描述。选择拉取请求标题字段旁边的闪烁图标以生成拉取请求标题和描述。

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

评审

拉取请求可以在 拉取请求 视图中进行评审。您可以从拉取请求的 描述 中分配审阅者和标签、添加评论、批准、关闭和合并。

Pull Request Description editor

描述 页面,您还可以使用 检出 按钮轻松地在本地检出拉取请求。这会将 VS Code 切换到以评审模式打开拉取请求的分支和派生(在状态栏中可见),并添加一个新的 拉取请求中的更改 视图,您可以在其中查看当前更改的差异以及所有提交和这些提交中的更改。已评论的文件会用菱形图标装饰。要在磁盘上查看文件,您可以使用 打开文件 内联操作。

Changes in Pull Request view

此视图中的差异编辑器使用本地文件,因此文件导航、IntelliSense 和编辑功能正常。您可以在编辑器中对这些差异添加评论。支持添加单个评论和创建完整的评审。

评审完拉取请求更改后,您可以合并拉取请求,或选择 退出评审模式 返回到您之前正在处理的分支。

提示

您还可以在创建拉取请求之前,让 Copilot 对拉取请求执行代码评审。在 GitHub 拉取请求视图中选择 Copilot 代码评审 按钮。

问题

创建问题

问题可以通过 问题 视图中的 + 按钮,以及使用 GitHub Issues: Create Issue from SelectionGitHub Issues: Create Issue from Clipboard 命令来创建。它们也可以使用“TODO”注释的代码操作来创建。创建问题时,您可以采用默认描述,或选择右上角的 编辑描述 铅笔图标以调出问题正文编辑器。

Create Issue from TODO

您可以使用 GitHub Issues: Create Issue Triggers (githubIssues.createIssueTriggers) 设置配置代码操作的触发器。

默认问题触发器是

"githubIssues.createIssueTriggers": [
  "TODO",
  "todo",
  "BUG",
  "FIXME",
  "ISSUE",
  "HACK"
]

处理问题

问题 视图中,您可以查看您的问题并处理它们。

Issue view with hover

默认情况下,当您开始处理一个问题(开始处理问题 上下文菜单项)时,将为您创建一个分支,如下图所示在状态栏中。

Work on Issue

状态栏还显示当前活动的问题,如果您选择该项,则会显示问题操作列表,例如在 GitHub 网站上打开问题或创建拉取请求。

Issue Status bar actions

您可以使用 GitHub Issues: Issue Branch Title (githubIssues.issueBranchTitle) 设置来配置分支的名称。如果您的工作流程不涉及创建分支,或者您希望每次都提示您输入分支名称,您可以通过关闭 GitHub Issues: Use Branch For Issues (githubIssues.useBranchForIssues) 设置来跳过该步骤。

完成问题处理并希望提交更改后,源代码管理视图中的提交消息输入框将填充一条消息,该消息可通过 GitHub Issues: Working Issue Format SCM (githubIssues.workingIssueFormatScm) 进行配置。

GitHub Repositories 扩展

GitHub Repositories 扩展让您可以直接在 Visual Studio Code 中快速浏览、搜索、编辑和提交到任何远程 GitHub 仓库,而无需在本地克隆仓库。这对于许多场景来说既快速又方便,例如您只需评审源代码或对文件或资产进行小幅更改。

GitHub Repositories extension

打开仓库

安装 GitHub Repositories 扩展后,您可以通过命令面板中的 GitHub Repositories: Open Repository... 命令(⇧⌘P (Windows、Linux Ctrl+Shift+P))或点击状态栏左下角的远程指示器来打开仓库。

Remote indicator in the Status bar

当您运行 打开仓库 命令时,您可以选择是从 GitHub 打开一个仓库,还是从 GitHub 打开一个拉取请求,或者重新打开您之前连接过的仓库。

如果您之前没有从 VS Code 登录 GitHub,系统将提示您使用 GitHub 帐户进行身份验证。

GitHub Repository extension open repository dropdown

您可以直接提供仓库 URL,或在文本框中输入以在 GitHub 上搜索您想要的仓库。

选择仓库或拉取请求后,VS Code 窗口将重新加载,您将在文件资源管理器中看到仓库内容。然后,您可以打开文件(具有完整的语法高亮和括号匹配)、进行编辑并提交更改,就像在本地克隆仓库一样。

与使用本地仓库不同的是,当您使用 GitHub Repository 扩展提交更改时,更改会直接推送到远程仓库,这类似于您在 GitHub 网页界面中进行操作。

GitHub Repositories 扩展的另一个功能是,每次您打开仓库或分支时,都会获得 GitHub 上可用的最新源代码。您无需像使用本地仓库那样记住拉取以刷新。

GitHub Repositories 扩展支持查看甚至提交 LFS 跟踪的文件,而无需在本地安装 Git LFS(大型文件系统)。将您希望通过 LFS 跟踪的文件类型添加到 .gitattributes 文件,然后使用源代码管理视图直接将您的更改提交到 GitHub。

切换分支

您可以通过点击状态栏中的分支指示器轻松地在分支之间切换。GitHub Repositories 扩展的一个重要功能是,您无需暂存未提交的更改即可切换分支。该扩展会记住您的更改并在您切换分支时重新应用它们。

Branch indicator on the Status bar

远程资源管理器

您可以使用活动栏上的远程资源管理器快速重新打开远程仓库。此视图显示您之前打开的仓库和分支。

Remote Explorer view

创建拉取请求

如果您的工作流程使用拉取请求而不是直接提交到仓库,您可以从源代码管理视图创建新的拉取请求。系统将提示您提供标题并创建新分支。

Create a Pull Request button in the Source Control view

创建拉取请求后,您可以使用 GitHub Pull Request and Issues 扩展来评审、编辑和合并您的拉取请求,如本主题前面所述。

虚拟文件系统

由于仓库文件不在本地计算机上,GitHub Repositories 扩展会在内存中创建一个虚拟文件系统,以便您可以查看文件内容并进行编辑。使用虚拟文件系统意味着一些假定本地文件的操作和扩展将无法启用或功能受限。任务、调试和集成终端等功能未启用,您可以通过远程指示器悬停提示中的 功能不可用 链接了解虚拟文件系统的支持级别。

Remote indicator hover with features are not available link

扩展作者可以在虚拟工作区扩展作者指南中了解更多关于在虚拟文件系统和工作区中运行的信息。

继续工作...

有时,您可能希望切换到在支持本地文件系统和完整语言及开发工具的开发环境中处理仓库。GitHub Repositories 扩展使您能够轻松地

要切换开发环境,请使用 继续工作... 命令,该命令可从命令面板(⇧⌘P (Windows、Linux Ctrl+Shift+P))或点击状态栏中的远程指示器获得。

Continue Working On command in Remote dropdown

如果您正在使用基于浏览器的编辑器“继续工作...” 命令提供了在本地或在 GitHub Codespaces 的云托管环境中打开仓库的选项。

Continue Working On from web-based editor

首次使用 继续工作 且存在未提交的更改时,您将可以选择使用 云更改 将您的编辑带到所选的开发环境,云更改将您的待定更改存储在与设置同步使用的相同 VS Code 服务上。

这些更改在应用于目标开发环境后将从我们的服务中删除。如果您选择在没有未提交更改的情况下继续,您可以稍后通过配置设置 "workbench.cloudChanges.continueOn": "prompt" 来更改此首选项。

如果您的待定更改未自动应用于目标开发环境,您可以使用 云更改: 显示云更改 命令查看、管理和删除您存储的更改。

后续步骤