🚀 在 VS Code 中

在 VS Code 中使用 GitHub

GitHub 是一项基于云的服务,用于存储和共享源代码。将 GitHub 与 Visual Studio Code 结合使用,您可以在编辑器中直接共享源代码并与他人协作。与 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 拉取请求和 Issue 入门

安装 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

使用现有存储库进行身份验证

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

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

Authentication Prompt

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

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

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

编辑器集成

悬停

当您打开存储库并且 @-提及用户时,您可以将鼠标悬停在该用户名上,以查看 GitHub 样式的悬停。

User Hover

对于 #-提及的 Issue 编号、完整的 GitHub Issue URL 和存储库指定的 Issue,也有类似的悬停。

Issue Hover

建议

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

User and Issue suggestions

可以使用 GitHub Issues: Queries (githubIssues.queries) 设置配置建议中显示的 Issue。查询使用 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 Requests 视图中,您可以查看、管理和创建拉取请求。

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 命令或 Pull Requests 视图中的 Create Pull Request 按钮来创建拉取请求。

Create Pull Request button in the Pull Request view

将显示一个新的 Create 视图,您可以在其中选择您希望拉取请求针对的基础存储库和基础分支,并填写标题和描述。如果您的存储库有拉取请求模板,则将自动用于描述。

使用顶部操作栏中的按钮添加 AssigneesReviewersLabelsMilestone

Create Pull Request view

Create 按钮菜单允许您选择其他创建选项,例如 Create Draft 或启用 Auto-Merge 方法。

一旦您选择 Create,如果您尚未将分支推送到 GitHub 远程仓库,扩展将询问您是否要发布分支,并提供一个下拉列表以选择特定的远程仓库。

Create Pull Request 视图现在进入 Review Mode,您可以在其中查看 PR 的详细信息、添加评论,并在 PR 准备就绪后合并 PR。合并 PR 后,您可以选择删除远程和本地分支。

提示

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

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

审阅

可以从 Pull Requests 视图中审阅拉取请求。您可以从拉取请求的 Description 中分配审阅者和标签,添加评论,批准、关闭和合并所有内容。

Pull Request Description editor

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

Changes in Pull Request view

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

当您完成拉取请求更改的审阅后,您可以合并 PR 或选择 Exit Review Mode 返回到您之前正在处理的分支。

提示

您还可以在创建 PR 之前让 Copilot 执行 PR 的代码审阅。在 GitHub Pull Request 视图中选择 Copilot Code Review 按钮。

Issue

创建 Issue

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

Create Issue from TODO

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

默认 Issue 触发器为

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

处理 Issue

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

Issue view with hover

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

Work on Issue

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

Issue Status bar actions

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

一旦您完成 Issue 的处理并想要提交更改,源代码管理视图中的提交消息输入框将填充一条消息,该消息可以使用 GitHub Issues: Working Issue Format SCM (githubIssues.workingIssueFormatScm) 进行配置。

GitHub 存储库扩展

GitHub 存储库 扩展允许您直接从 Visual Studio Code 中快速浏览、搜索、编辑和提交到任何远程 GitHub 存储库,而无需在本地克隆存储库。对于许多只需要查看源代码或对文件或资产进行少量更改的场景,这可能既快速又方便。

GitHub Repositories extension

打开存储库

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

Remote indicator in the Status bar

当您运行 Open Repository 命令时,您可以选择是从 GitHub 打开存储库、从 GitHub 打开拉取请求,还是重新打开您之前连接到的存储库。

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

GitHub Repository extension open repository dropdown

您可以直接提供存储库 URL,也可以在文本框中键入以搜索 GitHub 上您想要的存储库。

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

与使用本地存储库的一个区别是,当您使用 GitHub 存储库扩展提交更改时,更改将直接推送到远程存储库,类似于您在 GitHub Web 界面中工作一样。

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

GitHub 存储库扩展支持查看甚至提交 LFS 跟踪的文件,而无需在本地安装 Git LFS (Large File System)。将您要使用 LFS 跟踪的文件类型添加到 .gitattributes 文件,然后使用源代码管理视图将您的更改直接提交到 GitHub。

切换分支

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

Branch indicator on the Status bar

远程资源管理器

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

Remote Explorer view

创建拉取请求

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

Create a Pull Request button in the Source Control view

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

虚拟文件系统

在本地计算机上没有存储库文件的情况下,GitHub 存储库扩展会在内存中创建一个虚拟文件系统,以便您可以查看文件内容并进行编辑。使用虚拟文件系统意味着某些假定本地文件的操作和扩展未启用或功能有限。任务、调试和集成终端等功能未启用,您可以通过远程指示器悬停中的 features are not available 链接了解对虚拟文件系统的支持级别。

Remote indicator hover with features are not available link

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

继续在...上工作

有时您会想切换到在开发环境中处理存储库,该环境支持本地文件系统以及完整的语言和开发工具。GitHub 存储库扩展使您可以轻松地

要切换开发环境,请使用 Continue Working On... 命令,该命令可从命令面板 (⇧⌘P (Windows, Linux Ctrl+Shift+P)) 或通过单击状态栏中的远程指示器获得。

Continue Working On command in Remote dropdown

如果您使用的是 基于浏览器的编辑器“Continue Working On...” 命令可以选择在本地或云托管环境中的 GitHub Codespaces 中打开存储库。

Continue Working On from web-based editor

首次将 Continue Working On 与未提交的更改一起使用时,您可以选择使用 Cloud Changes 将您的编辑带到您选择的开发环境,这会将您的待处理更改存储在用于设置同步的同一 VS Code 服务上。

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

如果您的待处理更改未自动应用到您的目标开发环境,您可以使用 Cloud Changes: Show Cloud Changes 命令查看、管理和删除您存储的更改。

后续步骤