在VS Code中使用GitHub

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

在本主题中,我们将演示如何在不离开VS Code的情况下使用GitHub中你喜欢的一些部分。

提示

如果你是源码控制新手,或者想了解更多VS Code的基本Git支持,可以从源代码控制主题开始。

前提条件

要开始使用 GitHub 的 VS Code,你需要:

  • Git 是安装在你的电脑上的。在你的电脑上安装 Git 2.0.0 或更高版本

  • 一个GitHub账号

  • GitHub 的拉取请求与问题扩展安装在 VS Code 中。

  • 提交更改时,Git 会使用你配置的用户名和邮箱。你可以用以下方式设置这些数值:

    git config --global user.name "Your Name"
    git config --global user.email "your.email@example.com"
    

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

安装 GitHub Pull Requests and Issues 扩展后,你需要登录。

  1. 在活动栏中选择GitHub图标

  2. 选择登录,按照提示在浏览器中与GitHub进行身份验证

    GitHub视图截图,显示登录按钮。

  3. 你应该会被重定向回VS Code。

如果你没有被重定向到 VS Code,你可以手动添加你的授权令牌:

  1. 在浏览器窗口中复制你的授权令牌
  2. 在VS代码中,选择状态栏中的“登录 github.com”
  3. 粘贴令牌并按回车完成登录流程

建立仓库

克隆存储库

你可以在 GitHub 上使用 Command 面板中的 Git: Clone 命令(Windows,Linux Ctrl+Shift+P⇧⌘P)或在源代码控制视图中的 Clone Repository 按钮(当没有打开文件夹时可用)搜索并克隆仓库。

在GitHub仓库下拉菜单中,你可以筛选并选择你想本地克隆的仓库。

截图显示了 GitHub 仓库 Quick Pick 在 microsoft/vscode 上被过滤。

了解更多关于克隆仓库和远程作的信息。

与现有仓库进行身份验证

通过 GitHub 启用认证是指你在 VS Code 中运行任何需要 GitHub 认证的 Git作,比如推送到你所属的仓库或克隆私有仓库。你不需要安装任何特殊的认证扩展;它内置于 VS Code 中,方便你高效管理仓库。

当你执行需要GitHub认证的作时,VS Code会提示你登录。按照步骤登录GitHub,返回VS Code。

显示GitHub认证对话框的截图。

仅支持GitHub Enterprise Server使用个人访问令牌(PAT)登录。如果你正在使用 GitHub Enterprise Server,并且想使用 PAT,可以在登录提示中选择取消,直到系统提示你进行 PAT。

请注意,登录 GitHub 有多种方式,包括使用带有双因素认证(2FA)的用户名和密码、个人访问令牌或 SSH 密钥。关于每个选项的更多信息和细节,请参见关于 GitHub 认证

注释

如果你想在不克隆内容到本地机器的情况下开发仓库,可以安装GitHub Repositories扩展,直接在GitHub上浏览和编辑。了解更多关于GitHub仓库扩展的信息。

编辑器集成

悬浮

当你打开一个仓库,且某个用户被@提及(例如代码评论中),你可以将鼠标悬停在该用户名上,看到类似GitHub的鼠标悬停显示用户信息。

截图显示用户在代码评论中悬停@提及的用户。

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

截图显示代码注释中#提及的问题编号悬停。

建议

用户建议通过输入“@”字符触发,问题建议通过输入“#”字符触发。建议可在编辑器和源控制器提交信息输入框中获得。

GIF 显示编辑器中的用户和问题建议。

建议中出现的问题可以通过GitHub的“问题:查询”来配置 (

githubIssues.queries
  • 在VS代码中打开
  • 在VS Code Insiders中开放
)查询使用GitHub的搜索语法

你也可以通过GitHub Issues: Ignore Completion Trigger设置来配置哪些文件类型显示这些建议 (

githubIssues.ignoreCompletionTrigger
  • 在VS代码中打开
  • 在VS Code Insiders中开放
)以及GitHub问题:忽略用户完成触发器 (
githubIssues.ignoreUserCompletionTrigger
  • 在VS代码中打开
  • 在VS Code Insiders中开放
).这些设置需要一个语言标识符数组来指定文件类型。

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

拉取请求

通过拉取请求视图,你可以查看、管理和创建拉取请求。

显示拉取请求视图的截图。

用于显示拉取请求的查询可以通过GitHub拉取请求配置:查询 (

githubPullRequests.queries
  • 在VS代码中打开
  • 在VS Code Insiders中开放
)设置并使用 GitHub 搜索语法

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

创建拉取请求

一旦你提交了对分支或分支的更改,可以使用GitHub的Pull Requests:创建拉取请求命令,或在Pull Request视图中的创建拉取请求按钮来创建拉取请求。

截图显示了在拉取请求视图中创建拉取请求按钮。

会显示一个新的“创建”视图,你可以选择你想让拉取请求定位的基础仓库和基础分支,同时填写标题和描述。如果你的仓库有拉取请求模板,它会自动用于描述。

使用顶部作栏中的按钮添加分配对象审核员Tab里程碑

显示创建拉取请求视图的截图。

创建按钮菜单允许你选择替代的创建选项,比如创建草稿或启用自动合并方法。

一旦你选择了“创建”,如果你还没有将分支推送到 GitHub 远程节点,扩展会询问你是否愿意发布该分支,并会有一个下拉菜单让你选择具体的远程节点。

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

提示

使用AI根据PR中包含的提交生成PR标题和描述。选择PR标题字段旁的闪亮图标,生成PR标题和描述。

截图显示提交信息输入框中的生成提交信息。

书评

拉取请求可以通过拉取请求视图进行审核。你可以通过拉取请求的描述分配审核员和标签、添加评论、批准、关闭和合并所有作。

拉取请求描述编辑器

描述页面,你也可以通过“结账”按钮轻松本地借阅拉取请求。这样 VS Code 会在审核模式下打开拉取请求的分支和分支(在状态栏可见),并新增一个“拉取请求变更”视图,您可以查看当前更改的差异,以及所有提交和提交中的更改。被评论的文件会用菱形图标装饰。要查看磁盘上的文件,可以使用“打开文件”内联作。

拉取请求视图的变化

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

审核完拉取请求更改后,你可以合并PR或选择退出审核模式,返回你之前处理的分支。

提示

你也可以用AI在创建PR前对代码进行代码审查。在GitHub拉取请求视图中选择代码审查按钮。

议题

制造问题

问题可以通过问题视图中的+按钮创建,并使用GitHub Issues:从选择中创建议题和GitHub Issues:从剪贴板创建议题命令创建。它们也可以通过代码动作创建,用于“TODO”注释。创建期刊时,你可以使用默认描述,或者选择右上角的“编辑描述”铅笔图标,调出该期刊主体的编辑器。

从TODO创建问题

你可以用GitHub上的Issue: Create Issue Triggers来配置代码动作的触发器 (

githubIssues.createIssueTriggers
  • 在VS代码中打开
  • 在VS Code Insiders中开放

默认的问题触发条件是:

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

致力于议题

问题视图中,你可以看到自己的问题并加以解决。

悬停视角

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

议题研究

状态栏还会显示当前的议题,如果你选择该项目,会有一系列议题作列表,比如在 GitHub 网站上打开议题或创建拉取请求。

发布状态栏作

你可以使用 GitHub 的 Issues: Issue 分支标题来配置分支名称 (

githubIssues.issueBranchTitle
  • 在VS代码中打开
  • 在VS Code Insiders中开放
)如果你的工作流程不涉及创建分支,或者你希望每次都被提示输入分支名称,你可以关闭GitHub Issues:使用分支来跳过这一步 (
githubIssues.useBranchForIssues
  • 在VS代码中打开
  • 在VS Code Insiders中开放

提示

了解更多关于与分支合作、理解分支管理、分支切换以及组织开发工作的方法。

完成问题处理并准备提交变更后,源代码控制视图中的提交信息输入框将被填充一条消息,可用GitHub Issues: Working Issue Format SCM配置 (

githubIssues.workingIssueFormatScm(githubIssues.workingIssueFormatScm)
  • 在VS代码中打开
  • 在VS Code Insiders中开放
).

GitHub Repositories 扩展

GitHub Repositories 扩展让你可以直接在 Visual Studio Code 内快速浏览、搜索、编辑并提交任何远程 GitHub 仓库,无需本地克隆仓库。这在许多场景中既快速又方便,比如你只需要审查源代码或对文件或资源做小修改。

GitHub Repositories 扩展

打开仓库

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

状态栏中的远程指示器

当你运行“Open Repository”命令时,你可以选择是从GitHub打开仓库、从GitHub打开Pull Request,还是重新打开之前连接过的仓库。

如果你之前没有从 VS Code 登录过 GitHub,系统会提示你用 GitHub 账户进行身份验证。

GitHub 仓库扩展 开放仓库下拉菜单

你可以直接提供仓库网址,或者在 GitHub 上输入文本框搜索你想要的仓库。

一旦你选择了仓库或拉取请求,VS Code 窗口会重新加载,你会在文件资源管理器中看到仓库内容。然后你可以打开文件(带完整语法高亮和括号匹配)、编辑和提交修改,就像处理本地仓库克隆时一样。

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

GitHub Repositories 扩展的另一个功能是,每次打开仓库或分支时,都能获得 GitHub 上最新的源代码。你不需要像本地仓库那样记得拉取来刷新。

GitHub Repositories 扩展支持查看甚至提交 LFS 追踪的文件,无需本地安装 Git LFS(大型文件系统)。将你想用LFS追踪的文件类型添加到一个.gitattributes文件然后,通过源控制器视图直接提交你的更改。

切换分支

你可以通过点击状态栏中的分支指示器轻松切换分支。GitHub Repositories 扩展的一个很棒的功能是你可以切换分支,而不需要存储未提交的更改。扩展会记住你的更改,并在你切换分支时重新应用。

状态栏上的分支指示器

远程探测器

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

远程探测器视图

创建拉取请求

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

在源控制器视图中创建一个拉取请求按钮

创建拉取请求后,你可以使用GitHub的拉取请求和问题扩展来审查、编辑并合并你的PR,就像本话题之前描述的那样。

虚拟文件系统

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

带有功能的远程指示悬停链接不可用

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

继续努力

有时你会想转向开发环境中的仓库,支持本地文件系统和完整的语言和开发工具。GitHub Repositories 扩展让你可以轻松做到:

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

在远程下拉菜单中继续工作

如果你使用基于浏览器的编辑器“继续工作”命令可以选择本地打开仓库,也可以在 GitHub Codespaces 的云托管环境中打开。

继续工作,来自网页编辑

当你第一次使用“继续工作”并进行未承诺的更改时,你可以选择通过云变更将你的编辑带到所选的开发环境,该功能会将待处理的更改存储在与设置同步相同的VS Code服务上。

这些更改一旦应用到您的目标开发环境,将从我们的服务中删除。如果你选择不做未提交的更改继续,之后可以通过配置来更改这个偏好“workbench.cloudChanges.continueOn”: “prompt”.

如果你的待处理变更没有被自动应用到目标开发环境,你可以使用“云变更:显示云变更”命令查看、管理和删除存储的变更。

下一步