在 VS Code 中试用

GitHub Codespaces

GitHub Codespaces 为任何活动提供云驱动的开发环境 - 无论是长期项目还是像审查拉取请求这样的短期任务。您可以通过 Visual Studio Code 或基于浏览器的编辑器来使用这些环境。

GitHub Codespaces extension

环境

环境是 GitHub Codespaces 的“后端”部分。所有与软件开发相关的计算都在此进行:编译、调试、还原等。当您需要处理新项目、承担新任务或审查 PR 时,只需启动一个云托管环境,GitHub Codespaces 便会负责正确配置它。它会自动配置您处理项目所需的一切:源代码、运行时、编译器、调试器、编辑器、自定义 dotfile 配置、相关的编辑器扩展等。

自定义

GitHub Codespaces 可以按项目完全自定义。这通过在项目的仓库中包含一个 devcontainer.json 文件来实现,这与 VS Code 开发容器的开发类似。

自定义示例包括

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

有关 Codespaces 特定的 devcontainer.json 设置,请参阅配置 Codespaces 文档。

每用户 Dotfile 配置

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

创建 codespace 时,您可以指定包含您的 dotfile 的 GitHub 仓库、文件的目标位置以及安装命令。

要了解如何将您的 dotfile 配置添加到 codespace,请参阅个性化设置 Codespaces 文档。

入门

GitHub Codespaces 提供了两个客户端的入门主题。这些主题将帮助您快速完成登录 GitHub Codespaces、创建您的第一个 codespace 以及使用您首选的客户端连接到它的过程

扩展作者

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

基于浏览器的编辑器

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

要访问此基于浏览器的编辑器,您可以访问 github.com 上的仓库并按下 .(句号键),或者将仓库的 URL 从 github.com/org/repo 更改为 github.dev/org/repo,将 github.com 替换为 github.dev

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

注意:此编辑器目前处于技术预览阶段。您可以立即试用并在 https://github.co/browser-editor-feedback 提供反馈。

已知限制和适应方案

在使用 Codespaces,特别是 Web 版 VS Code 时,有一些限制需要注意。其中一些限制有相应的变通方法或适应方案,以提供一致的开发体验。

对于一些问题(尤其是键盘快捷方式或针对桌面版提供了变通方案的问题),您可以将 Codespace 安装并用作渐进式 Web 应用程序 (PWA)。

Installing Codespaces as PWA in Microsoft Edge

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

某些扩展在 Web 中行为不同

扩展 问题 / 原因 变通方法
带有与浏览器快捷方式重叠的键盘快捷方式的扩展,例如使用 Ctrl+R 进行刷新的 Git Graph 键盘快捷方式可能与现有的浏览器快捷方式重叠,例如在 Safari 中,Ctrl+R 会刷新窗口。 您可以使用基于桌面的 Codespace 而非基于 Web 的 Codespace,以充分利用您的键盘快捷方式。不同的浏览器行为也可能不同(您可以在 Chrome 中刷新 Git Graph)。
语言包,例如 Visual Studio Code 的日语语言包 基于 Web 的 Codespaces 当前不支持语言包扩展。 您可以使用基于桌面的 Codespace 来使用语言包并配置显示语言。
Bracket Pair Colorizer 2 它在浏览器中无法工作,因为它引入了不容易修复的安装位置依赖关系。 使用 Bracket Pair Colorizer
浏览器调试器,例如 Debugger for Firefox 需要 UI/桌面扩展主机的扩展不会在浏览器中加载。 您可以在本地 VS Code 中使用这些扩展(未连接到 Codespaces)。或者,在您的应用从 Codespace 运行时,您可以使用替代方案,例如 Chrome DevTools 来检查元素和设置断点。
打开浏览器的扩展,例如 open in browser 需要 UI/桌面扩展主机的扩展不会在浏览器中加载。 如果可能,使用替代扩展,例如 Live Server
Project Manager Project Manager 依赖于同步自定义的 projects.json 文件,目前尚不支持 您可以在桌面版 Codespaces 或本地 VS Code 中使用此扩展来保存和管理您的项目,因为这些选项不需要同步自定义文件。
依赖于 Chrome 的扩展,例如 Protractor Test RunnerBrowser Preview Codespace 中不包含 Chrome。 尝试寻找替代体验,或者您可以在本地 VS Code(未连接到 Codespaces)中使用这些扩展来处理您的项目。
Flutter(以及整体 Flutter 开发) 由于 Docker 容器和 Codespaces 的特性,Flutter 工作流的几个方面受到限制。
  • Flutter 建议从 snap 安装,但 snap 无法在 Codespaces 容器内安装。
  • Android 模拟器在容器内无法工作。
  • Codespaces 无法检测插入您机器的 USB 设备,这使得在物理设备上进行开发成为不可能。
  • Codespaces 与其他 Linux 环境一样,不支持 iOS 开发。
您可以使用本地 VS Code 进行 Flutter 开发。
LaTeX Workshop 此扩展提供了三种功能来帮助编写 LaTeX:1) 显示常用命令的视图集,2) PDF 预览器,以及 3) 语言功能,例如代码片段和 IntelliSense。此扩展功能相当齐全,但存在一些 Web 或安全限制。 以下变通方法解决了视图和预览器功能区域中的限制
  • 视图本身工作正常,但有一些命令试图启动本地应用程序,例如在 OS 文件资源管理器中显示输出文件夹。这些在 Web 中无效,因此使用桌面版是一种替代方案。
  • "latex-workshop.view.pdf.viewer" - 此设置提供类似于Markdown 预览的 PDF 预览器。您可以在浏览器选项卡、单独的 PDF 预览器或 VS Code 选项卡中进行预览。
    在基于 Web 的 Codespaces 中,只有浏览器选项卡可用。单独的 PDF 预览器会静默失败,而 VS Code 选项卡会遇到内容安全策略 (Content Security Policy) 问题。由于此限制,VS Code 选项卡预览器中的其他功能也无法使用。
Git Graph 在 Codespaces 中,某些 Git Graph Webview 功能可能受到限制。例如,在提交的文件与 Git Graph Webview 之间切换可能会导致 Webview 为空白。 您可以在 VS Code 桌面版中充分使用 Git Graph。
其他远程开发扩展(WSL、开发容器、Remote - SSH)无法在 Codespace 中安装。 Codespace 本身就是一个远程上下文。 如果您想在另一个远程上下文(例如 WSL 或远程 SSH 计算机)中运行,请打开 VS Code 桌面版(未连接到 Codespace)并启动其他远程扩展之一。如果您想使用自定义开发容器,可以在 Codespaces 和开发容器中都使用相同的 .devcontainer
我喜爱的扩展不起作用,且未在上表中列出。 还有一些其他问题可能会导致功能在远程上下文中无法按预期工作。 在某些情况下,您可以使用其他命令来解决问题,但在其他情况下,可能需要修改扩展。请查看远程扩展技巧,了解常见的远程问题以及解决它们的技巧。

常见问题

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

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

注意,当从桌面版 VS Code 连接到 Codespace 时,此类扩展仍然可以使用。

如何允许 VS Code 读取我的剪贴板?

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

Allow clipboard access in browser

授予 VS Code 访问剪贴板的权限后,您可以重试该操作。

如何允许 VS Code 始终打开新选项卡和窗口?

有时,出于安全考虑,浏览器会阻止 VS Code 打开新选项卡或窗口。如果发生这种情况,VS Code 将检测到阻止行为并明确提示用户。但是,您可以通过浏览器导航栏中的上下文菜单打开网站设置,并允许“弹窗”来让 VS Code 始终打开新窗口和选项卡。

Allow pop-up window in browser

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

在浏览器中从 VS Code 打开本地文件和文件夹需要浏览器支持文件系统访问 API (File System Access API)。目前,Microsoft Edge 和 Google Chrome 都支持此功能。如果您在使用浏览器中的 VS Code 时需要访问本地文件和文件夹,请考虑切换到这两个浏览器之一。

问题或反馈

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