本站点文档内容均翻译自code.visualstudio.com,仅供个人学习,如有差异请以官网为准。

GitHub 代码空间

GitHub Codespaces 提供了由云驱动的开发环境,适用于任何活动——无论是长期项目还是短期任务,例如审查拉取请求。您可以从Visual Studio Code或基于浏览器的编辑器中使用这些环境。

GitHub 代码空间扩展

环境

环境是 GitHub Codespaces 的 "后端" 部分。所有与软件开发相关的计算都在这里进行:编译、调试、恢复等。当你需要开始一个新项目、接一个新的任务或审查一个 PR 时,你可以简单地启动一个云端托管的环境,而 GitHub Codespaces 会负责正确地配置它。它会自动配置你完成项目所需的一切:源代码、运行时、编译器、调试器、编辑器、自定义 dotfile 配置、相关的编辑器扩展等。

定制

GitHub Codespaces 可以按项目进行完全自定义。这是通过包含一个devcontainer.json 项目代码库中的文件,类似于 VS Code 开发容器 开发。

示例定制包括:

  • 设置基于Linux的操作系统。
  • 自动安装各种工具、运行时和框架。
  • 转发常用端口。
  • 设置环境变量。
  • 配置编辑器设置并安装首选扩展。

请参阅配置Codespaces 文档,了解特定于Codespace的devcontainer.json设置。

用户配置的点文件

Dotfiles 是以点(.)开头的文件。它们通常包含应用程序的配置信息,并可以控制终端、编辑器、源代码控制和各种其他工具的行为。.bashrc.gitignore,和.editorconfig是开发人员常用点文件的例子。

在创建代码空间时,您可以指定包含您的 dotfiles 的 GitHub 仓库、文件的目标位置以及安装命令。

查看个性化Codespaces 文档,了解如何将您的点文件配置添加到Codespaces。

入门指南

对于 GitHub Codespaces 客户端,都有入门主题。这些主题将帮助您快速完成以下操作:登录 GitHub Codespaces、创建第一个 codespace 并使用您首选的客户端连接到它:

扩展作者

VS Code 扩展 API 隐藏了远程运行的大部分实现细节,因此许多扩展在 GitHub Codespaces 环境中无需任何修改即可正常工作。然而,我们建议您在 codespace 中测试您的扩展,以确保其所有功能都能按预期工作。请参阅 支持远程开发和 GitHub Codespaces 一文了解详情。

基于浏览器的编辑器

您还可以在浏览器中完全体验免费、轻量级的Visual Studio Code。基于网页的编辑器可以安全快速地浏览来自GitHub的源代码仓库,并进行轻量级的代码更改。您可以打开任何仓库、分支或拉取请求在编辑器中,该编辑器具有许多VS Code的功能,包括搜索和语法高亮。如果您想运行或调试代码,您可以切换到云托管环境或VS Code桌面。

要访问这个基于浏览器的编辑器,您可以前往 github.com 上的您的仓库,并按 . (句号键) 或更改您的仓库的 URL 为 github.dev/组织/仓库, 替换github.comgithub.dev输入:.

限制:如果您使用隐身模式运行浏览器或启用广告拦截器,可能无法使用基于网页的编辑器。

注意:此编辑器目前处于技术预览阶段。您可以今天就尝试一下,并在 https://github.co/browser-editor-feedback 提供反馈。

已知的限制和适应

在使用Codespaces和特别是网页版VS Code时,有一些特定的限制需要牢记。其中一些限制有工作arounds或现有的适应措施,以提供一致的开发体验。

对于多个问题(特别是键盘快捷键或那些列出有桌面解决方案的问题),您可以安装并使用一个渐进式网络应用(PWA)。

在 Microsoft Edge 中将 Codespaces 安装为 PWA

问题 原因 解决方法
Ctrl+Shift+P 无法在 Firefox 中启动命令面板。 Ctrl+Shift+P在Firefox中保留。 使用 F1 来启动命令面板。
某些默认键盘快捷键(用于调试)在网页中有所不同。 由于浏览器可能已经为这些键盘快捷键注册了操作,我们在网上调整了 VS Code 的默认设置。 使用调整后的默认值。它们显示在将鼠标悬停在调试操作上的工具提示中。
  • 跨过步骤是 Alt+F10 (而不是 F10)在所有浏览器上。
  • 在网页中按 Alt+F11 (而不是 F11
F11 在 web 或桌面版的 macOS 上无法用于调试。 这是一个已知的、非浏览器特定的限制。更多信息可以在问题 #5102中找到。 禁用F11在macOS上显示桌面。
  • 前往: 系统偏好设置 > 键盘 > 快捷键
  • 取消勾选 显示桌面 F11 选项
Ctrl+N 在网页中无法用于新建文件。 Ctrl+N 会打开一个新Windows。 Ctrl+N 在桌面创建新文件。
Ctrl+W 在网页中无法用于关闭编辑器。 Ctrl+W 在浏览器中关闭当前标签页。 Ctrl+W 在桌面工作。
Ctrl+Shift+B将不会在浏览器中切换收藏栏。 Codespaces 会覆盖此设置并重定向到命令面板中的“构建”菜单。 没有当前的解决方法。
从 VS Code 拖放文件到 Codespace(反之亦然)无法正常工作。 您可以在问题 #115535中查看更多上下文。 有几种选择:
  • 您可以在您的Codespace中右键单击文件以将其下载到您的本地机器。
  • 您可以将文件从文件资源管理器拖动到您的代码空间。
在网页中不支持Angular应用调试。 代码在浏览器中运行时,由于安全原因,无法在调试模式下启动另一个浏览器实例。 你有几种选择:
  • 调试Node.js/服务端js正常。
  • 在桌面中打开Codespace,伴侣应用将用于启动您本地的Edge或Chrome安装。
从浏览器下载没有扩展名的文件时,会自动添加".txt" 这就是Chrome和Edge的行为。 上下文和未来的潜在解决方案在问题 #118436中。
当您从远程(包括Codespaces)下载文件时,可执行位等属性会被移除。 背景和未来的潜在解决方案可以在 问题 #112099中找到。 没有当前的解决方法。
您可能会看到提示,"您的代码空间名称无法打开此文件夹,因为它包含系统文件,当尝试从Codespace下载某些文件夹时。 用户代理可以自由对敏感目录施加限制级别。更多信息请参见此规范Chromium的阻止列表 没有超出规范和阻止列表的额外工作解决方法。
手动访问http://localhost:forwarded_port无法从 web 中的 Codespace 访问转发的端口。 这是基于Codespaces如何处理端口转发并生成正确的网页URL。 点击端口转发通知中的链接以打开您的应用程序,或端口视图中的地球图标,两者都将提供正确生成的链接。更多信息请参阅Codespaces 文档

一些扩展在网页中表现不同

扩展 问题 / 原因 解决方法
与浏览器快捷键重叠的键盘快捷键的扩展,例如 Git Graph,它使用 Ctrl+R 来刷新。 键盘快捷键可能会与现有的浏览器快捷键重叠,例如 Ctrl+R 在Safari中刷新Windows。 您可以使用基于桌面的,而不是基于网页的Codespace,以充分利用您的键盘快捷键。不同的浏览器可能也会有不同的表现(您可以在Chrome中刷新Git Graph)。
语言包,例如 Visual Studio Code 的日语语言包 语言包扩展目前在基于网页的Codespaces中不被支持。 您可以使用基于桌面的Codespace来使用语言包并配置显示语言。
括号配对颜色器 2 这在浏览器中无法工作,因为它引入了安装位置的依赖性,这并不容易解决。 使用括号对颜色识别器.
浏览器调试器,例如 Firefox的调试器. 需要UI/桌面扩展主机的扩展无法在浏览器中加载。 您可以在本地 VS Code(未连接到 Codespaces)中使用这些扩展。或者,当您的应用程序在 Codespace 中运行时,您可以使用替代方法,例如 Chrome DevTools 来检查元素和设置断点。
扩展以在浏览器中打开,例如 在浏览器中打开. 需要UI/桌面扩展主机的扩展无法在浏览器中加载。 如果可能的话,使用替代扩展,例如Live Server.
项目经理 项目经理依赖于同步自定义projects.json 文件,目前不支持 您可以在桌面 Codespaces 或本地 VS Code 中使用此扩展来保存和管理您的项目,因为这些选项不需要同步自定义文件。
依赖于Chrome的扩展,例如Protractor测试运行器浏览器预览. Chrome 不包含在 Codespace 中。 尝试寻找替代体验,或者您可以在本地 VS Code(不连接到 Codespaces)上使用这些扩展。
Flutter(以及整体的Flutter开发) 由于Docker容器和Codespaces的特性,Flutter工作流程的几个方面受到限制。
  • Flutter 建议从 snap 安装,但 snap 无法安装在 Codespaces 容器内。
  • 在容器内无法运行 Android 模拟。
  • Codespaces无法检测插入您机器的USB设备,这使得在物理设备上进行开发成为不可能。
  • 像其他 Linux 环境一样,Codespaces 不支持 iOS 开发。
您可以使用本地 VS Code 进行 Flutter 开发。
LaTeX 工作室 该扩展提供了三种类型的特性来帮助LaTeX编写:1) 一组显示常用命令的视图,2) 一个PDF预览器,以及3) 像片段和IntelliSense这样的语言特性。该扩展可以相当完整地使用,但有一些网页或安全限制。 以下的解决方法解决了视图和预览器功能区域的限制:
  • 这些视图本身可以正常工作,但有几个命令试图启动本地应用程序,例如在操作系统文件资源管理器中显示输出文件夹。这些在网页中没有效果,因此使用桌面版是一个替代方案。
  • "latex-workshop.view.pdf.viewer" - 此设置提供一个类似于Markdown 预览的 PDF 预览器。您可以在浏览器标签页中、单独的 PDF 查看器中或 VS Code 标签页中预览。
    在基于网页的 Codespaces 中,仅浏览器标签页可用。单独的 PDF 查看器会静默失败,VS Code 标签页会遇到内容安全策略 问题。VS Code 标签页查看器有其他功能由于此限制而无法使用。
Git 图表 某些Git Graph网页视图功能在Codespaces中可能会受到限制。例如,切换到提交中的文件和Git Graph网页视图可能会使网页视图变为空白。 你可以在 VS Code 桌面版中完全使用 Git Graph。
其他 远程开发扩展(WSL、开发容器、远程 - SSH)无法在代码空间中安装。 该代码空间已经是远程上下文。 如果您想在另一个远程上下文中运行(例如WSL或一个远程SSH计算机),请打开VS Code桌面(未连接到Codespace),然后启动其他远程扩展中的一个。如果您想使用自定义开发容器,您可以使用相同的.devcontainer在两种代码空间和开发容器中。
My_Favorite_Extension 无法工作且未列在上面。 在远程上下文中,有几个其他问题可能会导致功能无法按预期工作。 在某些情况下,您可以使用另一个命令来解决此问题,但在其他情况下,可能需要修改扩展。请查看远程扩展提示,了解常见远程问题及解决方法。

常见问题

为什么浏览器中无法安装扩展程序

有一些扩展具有内置假设或需要在桌面环境中运行。例如,当一个扩展访问桌面版 VS Code 安装的文件时,或者当一个扩展依赖于必须在桌面环境中运行的可执行文件时。当您在浏览器中尝试安装此类扩展时,系统会通知您该扩展不可用。

注意 即使从桌面运行的 VS Code 连接到代码空间,此扩展仍然可以使用。

如何允许 VS Code 访问我的剪贴板进行读取?

在某些情况下,VS Code 可能会在读取剪贴板时请求您的权限。您应该能够在浏览器中通过设置(搜索“网站权限”)或在右侧地址栏中查找此选项来授予剪贴板访问权限:

允许浏览器访问剪贴板

一旦你授予 VS Code 访问剪贴板的权限,你就可以重试该操作。

如何允许 VS Code 始终打开新标签页和Windows?

有时浏览器会出于安全考虑阻止 VS Code 打开新标签页或Windows。如果发生这种情况,VS Code 会检测到此阻止行为并明确提示用户。然而,您可以通过在浏览器导航栏的上下文菜单中打开网站设置并允许来始终允许 VS Code 打开新Windows和标签页弹出Windows

允许浏览器弹出Windows

如何在浏览器中允许 VS Code 访问本地文件和文件夹?

从浏览器中在 VS Code 中打开本地文件和文件夹需要浏览器支持 文件系统访问 API。截至今天,Microsoft Edge 和 Google Chrome 都提供了这种支持水平。如果您想在浏览器中使用 VS Code 访问本地文件和文件夹,请考虑切换到这两个浏览器之一。

问题或反馈

如果您有任何问题,可以查阅 GitHub Codespaces 故障排除指南。如果您想提供反馈,可以在 GitHub Codespaces 讨论区中提交问题。