在Visual Studio Code使用 GitHub

在 VS Code 中使用 GitHub

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

安装 GitHub 拉取请求和问题扩展

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

如果您不熟悉源代码控制或想要了解有关 VS Code 的基本 Git 支持的更多信息,您可以从版本控制主题开始。

GitHub 拉取请求和问题入门#

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

在Visual Studio Code使用 GitHub

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

设置存储库#

克隆一个仓库#

您可以使用命令面板中的Git: Clone命令 ( Ctrl+Shift+P ) 或使用源代码管理视图中的克隆存储库按钮(当您没有打开文件夹时可用)从 GitHub 搜索和克隆存储库。

在Visual Studio Code使用 GitHub

从 GitHub 存储库下拉列表中,您可以过滤并选择要在本地克隆的存储库。

在Visual Studio Code使用 GitHub

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

当您在 VS Code 中运行任何需要 GitHub 身份验证的 Git 操作(例如推送到您所属的存储库或克隆私有存储库)时,就会通过 GitHub 启用身份验证。您不需要为身份验证安装任何特殊的扩展;它内置于 VS Code 中,因此您可以有效地管理您的存储库。

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

在Visual Studio Code使用 GitHub

按照步骤登录 GitHub 并返回 VS Code。如果对现有存储库的身份验证无法自动进行,您可能需要手动提供个人访问令牌。有关详细信息,请参阅个人访问令牌身份验证

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

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

编辑器集成#

悬停#

当您打开了一个存储库并且一个用户被 @ 提及时,您可以将鼠标悬停在该用户名上并看到一个 GitHub 风格的悬停。

在Visual Studio Code使用 GitHub

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

在Visual Studio Code使用 GitHub

建议#

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

在Visual Studio Code使用 GitHub

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

您还可以使用设置GitHub 问题:忽略完成触发器githubIssues.ignoreCompletionTrigger) 和GitHub 问题:忽略用户完成触发器githubIssues.ignoreUserCompletionTrigger)来配置哪些文件显示这些建议。这些设置采用一组语言标识符来指定文件类型。

<span style="color:#333333"><span style="background-color:#ffffff"><code><span style="color:#008000">// Languages that the '#' character should not be used to trigger issue completion suggestions.</span>
<span style="color:#a31515">"githubIssues.ignoreCompletionTrigger"</span><span style="color:#000000">: [</span>
  <span style="color:#a31515">"python"</span>
<span style="color:#000000">]</span></code></span></span>

拉取请求#

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

在Visual Studio Code使用 GitHub

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

<span style="color:#333333"><span style="background-color:#ffffff"><code><span style="color:#a31515">"githubPullRequests.queries"</span><span style="color:#000000">: [</span>
<span style="color:#000000">    {</span>
        <span style="color:#0451a5">"label"</span><span style="color:#000000">: </span><span style="color:#a31515">"Assigned To Me"</span><span style="color:#000000">,</span>
        <span style="color:#0451a5">"query"</span><span style="color:#000000">: </span><span style="color:#a31515">"is:open assignee:${user}"</span>
<span style="color:#000000">    },</span></code></span></span>

创建拉取请求#

提交对分支或分支的更改后,您可以使用GitHub 拉取请求:创建拉取请求命令或拉取请求视图中的创建拉取请求按钮来创建拉取请求。

在Visual Studio Code使用 GitHub

将显示一个新的Create Pull Request视图,您可以在其中选择您希望拉取请求针对的存储库和分支,并填写详细信息,例如标题、描述以及它是否是 PR 草案。如果您的存储库有拉取请求模板,这将自动用于描述。

在Visual Studio Code使用 GitHub

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

创建拉出请求视图现在进入查看模式,在这里你可以查看PR的细节,添加注释,审阅和标签,并合并PR一旦它准备好了。

合并 PR 后,您可以选择删除远程和本地分支。

回顾#

可以从“拉取请求”视图中查看拉取请求。您可以从拉取请求描述分配审阅者和标签、添加评论、批准、关闭和合并所有内容。

在Visual Studio Code使用 GitHub

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

在Visual Studio Code使用 GitHub

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

当您完成对拉取请求更改的审查后,您可以合并 PR 或选择退出审查模式以返回您正在处理的上一个分支。

问题#

创建问题#

可以从问题视图中的+按钮创建问题,并使用GitHub 问题:从选择创建问题GitHub 问题:从剪贴板创建问题命令。它们也可以使用“TODO”注释的代码操作来创建。创建问题时,您可以采用默认描述或选择右上角的编辑描述铅笔图标以显示问题正文的编辑器。

在Visual Studio Code使用 GitHub

您可以使用GitHub 问题:创建问题触发器githubIssues.createIssueTriggers) 设置为代码操作配置触发器

默认的问题触发器是:

<span style="color:#333333"><span style="background-color:#ffffff"><code><span style="color:#a31515">"githubIssues.createIssueTriggers"</span><span style="color:#000000">: [</span>
  <span style="color:#a31515">"TODO"</span><span style="color:#000000">,</span>
  <span style="color:#a31515">"todo"</span><span style="color:#000000">,</span>
  <span style="color:#a31515">"BUG"</span><span style="color:#000000">,</span>
  <span style="color:#a31515">"FIXME"</span><span style="color:#000000">,</span>
  <span style="color:#a31515">"ISSUE"</span><span style="color:#000000">,</span>
  <span style="color:#a31515">"HACK"</span>
<span style="color:#000000">]</span></code></span></span>

处理问题#

从“问题”视图中,您可以查看您的问题并对其进行处理。

在Visual Studio Code使用 GitHub

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

在Visual Studio Code使用 GitHub

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

在Visual Studio Code使用 GitHub

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

一旦您完成了对问题的处理并想要提交更改,源代码控制视图中的提交消息输入框将填充一条消息,该消息可以使用GitHub 问题:工作问题格式 SCM ( githubIssues.workingIssueFormatScm)进行配置。

GitHub 存储库扩展#

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

在Visual Studio Code使用 GitHub

打开存储库#

安装 GitHub Repositories 扩展后,您可以使用GitHub Repositories: Open Repository...命令从命令面板 ( Ctrl+Shift+P ) 或通过单击状态栏左下方的远程指示器打开存储库.

在Visual Studio Code使用 GitHub

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

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

在Visual Studio Code使用 GitHub

您可以直接提供存储库 URL 或通过在文本框中键入来搜索 GitHub 以查找所需的存储库。

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

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

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

切换分支#

您可以通过单击状态栏中的分支指示器轻松地在分支之间切换。GitHub Repositories 扩展的一大特色是您可以切换分支而无需存储未提交的更改。该扩展程序会记住您的更改并在您切换分支时重新应用它们。

在Visual Studio Code使用 GitHub

远程资源管理器#

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

在Visual Studio Code使用 GitHub

创建拉取请求#

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

在Visual Studio Code使用 GitHub

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

虚拟文件系统#

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

在Visual Studio Code使用 GitHub

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

继续工作... #

有时,您希望切换到在支持本地文件系统以及完整语言和开发工具的开发环境中处理存储库。GitHub 存储库扩展使您可以轻松地将存储库克隆到本地或克隆到 Docker 容器(如果您安装了Docker和 Microsoft Docker 扩展),并使用GitHub 存储库:继续工作...命令可从命令面板 ( Ctrl +Shift+P ) 或通过单击状态栏中的远程指示器。

在Visual Studio Code使用 GitHub

如果您使用基于浏览器的编辑器“继续工作...”命令可以选择在本地或在GitHub 代码空间中的云托管环境中打开存储库。

在Visual Studio Code使用 GitHub

上一篇:Python再次摘得年度编程语言,TIOBE 1月编程语言排行榜出炉


下一篇:【开发工具】<Visual Studio Code>快捷键&常用操作