GitHub Codespaces
GitHub Codespaces 为任何活动(无论是长期项目还是评审拉取请求等短期任务)提供云端开发环境。你可以通过 Visual Studio Code 或基于浏览器的编辑器来使用这些环境。
环境
环境是 GitHub Codespaces 的“后端”部分。所有与软件开发相关的计算(编译、调试、还原等)都在此发生。当你需要处理新项目、开始新任务或评审 PR 时,只需启动一个云托管环境,GitHub Codespaces 就会负责正确配置它。它会自动配置你项目所需的一切:源代码、运行时、编译器、调试器、编辑器、自定义 dotfile 配置、相关的编辑器扩展等。
自定义
GitHub Codespaces 可以按项目完全自定义。这通过在项目仓库中包含一个 devcontainer.json
文件来实现,类似于 VS Code 开发容器 的开发方式。
自定义示例包括
- 设置要使用的基于 Linux 的操作系统。
- 自动安装各种工具、运行时和框架。
- 转发常用端口。
- 设置环境变量。
- 配置编辑器设置并安装首选扩展。
有关 codespace 特定的 devcontainer.json
设置,请参阅 配置 Codespaces 文档。
Dotfile 每用户配置
Dotfile 是文件名以点 (.) 开头的文件。它们通常包含应用程序的配置信息,并可以控制终端、编辑器、源代码管理和各种其他工具的行为。.bashrc
、.gitignore
和 .editorconfig
是开发人员常用 dotfile 的示例。
在创建 codespace 时,你可以指定一个包含你的 dotfile 的 GitHub 仓库、文件的目标位置以及安装命令。
要了解如何将你的 dotfile 配置添加到 codespace,请参阅 个性化 Codespaces 文档。
入门
GitHub Codespaces 客户端都有入门主题。这些主题将帮助你快速完成登录 GitHub Codespaces、创建第一个 codespace 以及使用首选客户端连接到它的过程。
- VS Code 中的 Codespaces - 使用 GitHub Codespaces 扩展连接并在你的环境中工作。
- 浏览器中的 Codespaces - 通过基于浏览器的编辑器连接到你的 codespace。
扩展作者
VS Code 扩展 API 隐藏了大部分远程运行的实现细节,因此许多扩展无需任何修改即可在 GitHub Codespaces 环境中正常工作。但是,我们建议你在 codespace 中测试你的扩展,以确保其所有功能都按预期工作。有关详细信息,请参阅关于支持远程开发和 GitHub Codespaces 的文章。
基于浏览器的编辑器
你还可以在浏览器中获得完全免费、轻量级的 Visual Studio Code 体验。基于 Web 的编辑器让你能够安全快速地浏览 GitHub 上的源代码仓库,并进行轻量级的代码更改。你可以在编辑器中打开任何仓库、分支或拉取请求,该编辑器拥有 VS Code 的许多功能,包括搜索和语法高亮。如果你想运行或调试代码,可以切换到云托管环境或 VS Code 桌面版。
要访问此基于浏览器的编辑器,你可以访问 github.com 上的仓库并按下 .(句号键),或者将仓库的 URL 从 github.com
更改为 github.dev/org/repo
,即用 github.dev
替换 github.com
。
限制:如果你的浏览器运行在无痕模式或启用了广告拦截器,你可能无法使用基于 Web 的编辑器。
注意:此编辑器目前处于技术预览阶段。你今天就可以试用它并在 https://github.co/browser-editor-feedback 提供反馈。
已知限制和适应方式
在使用 Codespaces 特别是 Web 版 VS Code 时,需要记住一些限制。其中一些限制有相应的解决方法或适应措施,以提供一致的开发体验。
对于一些问题(特别是键盘快捷键或那些列有桌面解决方法的问题),你可以将 Codespace 安装并用作渐进式 Web 应用程序 (PWA)。
问题 | 原因 | 解决方法 |
---|---|---|
Ctrl+Shift+P 在 Firefox 中无法启动命令面板。 | Ctrl+Shift+P 在 Firefox 中被保留。 | 使用 F1 启动命令面板。 |
某些默认键盘快捷键(用于调试)在 Web 中有所不同。 | 由于浏览器可能已为这些键盘快捷键注册了操作,因此我们调整了 Web 版 VS Code 的默认设置。 | 使用调整后的默认值。它们会在调试操作的工具提示悬停时显示。
|
在 macOS 中,F11 调试在 Web 或桌面版中均不起作用。 | 这是一个已知且非浏览器特有的限制。更多信息可在 问题 #5102 中找到。 | 禁用 macOS 上显示桌面的 F11。
|
新建文件的 Ctrl+N 在 Web 中不起作用。 | Ctrl+N 转而打开一个新窗口。 | 新建文件的 Ctrl+N 在桌面版中有效。 |
关闭编辑器的 Ctrl+W 在 Web 中不起作用。 | Ctrl+W 会关闭浏览器中的当前标签页。 | Ctrl+W 在桌面版中有效。 |
Ctrl+Shift+B 不会在浏览器中切换收藏夹栏。 | Codespaces 会覆盖此功能并重定向到命令面板中的“构建”菜单。 | 目前没有解决方法。 |
无法将文件从 VS Code 拖放到 Codespace(反之亦然)。 | 你可以在 问题 #115535 中查看更多上下文。 | 有几种选项
|
Web 中不支持 Angular 应用程序调试。 | 出于安全原因,在浏览器中运行的代码无法以调试模式启动另一个浏览器实例。 | 你有几个选项
|
从浏览器下载没有扩展名的文件会自动添加“.txt” | Chrome 和 Edge 的行为如此。 | 上下文和潜在的未来解决方案可在 问题 #118436 中找到。 |
当你从远程(包括 Codespaces)下载文件时,可执行位等属性会被移除。 | 上下文和潜在的未来解决方案可在 问题 #112099 中找到。 | 目前没有解决方法。 |
当你尝试从 Codespace 下载某些文件夹时,可能会看到提示:“Your_codespace_name 无法打开此文件夹,因为它包含系统文件”。 |
用户代理可以自由地对敏感目录施加限制级别。更多信息可在 此规范 和 Chromium 的黑名单 中找到。 | 除了规范和黑名单之外,没有其他解决方法。 |
在 Web 中,手动访问 https://:forwarded_port 无法从 Codespace 访问转发的端口。 |
这是基于 Codespaces 处理端口转发并为 Web 生成正确 URL 的方式。 | 点击端口转发通知中的链接或端口视图中的地球图标来打开你的应用程序,两者都会提供正确生成的链接。更多信息请参阅 Codespaces 文档。 |
某些扩展在 Web 中的行为不同
扩展 | 问题/原因 | 解决方法 |
---|---|---|
具有与浏览器快捷键重叠的键盘快捷键的扩展,例如 Git Graph,它使用 Ctrl+R 刷新。 | 键盘快捷键可能与现有的浏览器快捷键重叠,例如 Ctrl+R 在 Safari 中刷新窗口。 | 你可以使用基于桌面的 Codespace 而不是基于 Web 的 Codespace 来充分利用你的键盘快捷键。不同的浏览器也可能有不同的行为(你可以在 Chrome 中刷新 Git Graph)。 |
语言包,例如 Visual Studio Code 日语语言包 | Web 版 Codespaces 目前不支持语言包扩展。 | 你可以使用基于桌面的 Codespace 来使用语言包并配置显示语言。 |
Bracket Pair Colorizer 2 | 它无法在浏览器中工作,因为它引入了一个不容易修复的安装位置依赖。 | 使用 Bracket Pair Colorizer。 |
浏览器调试器,例如 Firefox 调试器。 | 需要 UI/桌面扩展主机的扩展无法在浏览器中加载。 | 你可以在本地 VS Code(未连接到 Codespaces)中使用这些扩展。或者,当你的应用程序在 Codespace 中运行时,你可以使用替代方案,例如 Chrome DevTools 来检查元素和设置断点。 |
用于打开浏览器的扩展,例如 在浏览器中打开。 | 需要 UI/桌面扩展主机的扩展无法在浏览器中加载。 | 如果可能,请使用替代扩展,例如 Live Server。 |
项目管理器 | 项目管理器依赖于同步自定义的 projects.json 文件,而这目前不受支持。 |
你可以在桌面版 Codespaces 或本地 VS Code 中使用此扩展来保存和管理你的项目,因为这些选项不需要同步自定义文件。 |
依赖 Chrome 的扩展,例如 Protractor Test Runner 和 Browser Preview。 | Codespace 中不包含 Chrome。 | 尝试寻找替代体验,或者你可以在本地 VS Code(未连接到 Codespaces)的项目中使用这些扩展。 |
Flutter(以及 Flutter 整体开发) | 由于 Docker 容器和 Codespaces 的特性,Flutter 工作流的几个方面受到限制。
|
你可以使用本地 VS Code 进行 Flutter 开发。 |
LaTeX Workshop | 此扩展提供三种功能来帮助 LaTeX 创作:1) 一组显示常用命令的视图,2) 一个 PDF 预览器,以及 3) 诸如代码片段和 IntelliSense 等语言功能。该扩展可以相当全面地使用,但存在一些 Web 或安全限制。 | 以下解决方法解决了视图和预览器功能区域中的限制
|
Git Graph | Codespaces 中某些 Git Graph webview 功能可能受到限制。例如,在提交文件和 Git Graph webview 之间切换可能会导致 webview 空白。 | 你可以在 VS Code 桌面版中完全使用 Git Graph。 |
其他远程开发扩展(WSL、开发容器、远程 - SSH)无法安装在 Codespace 中。 | Codespace 本身已经是一个远程环境。 | 如果你想在另一个远程环境中运行(例如 WSL 或远程 SSH 计算机),请打开 VS Code 桌面版(不连接到 Codespace)并启动其他远程扩展之一。如果你想使用自定义开发容器,你可以在 Codespaces 和开发容器中都使用相同的 .devcontainer 。 |
我最喜欢的扩展不起作用,并且未在上面列出。 | 还有其他一些问题可能会导致功能在远程环境中无法按预期工作。 | 在某些情况下,你可以使用其他命令来解决问题,但在其他情况下,可能需要修改扩展。查看远程扩展提示,了解常见的远程问题和解决方法。 |
常见问题
为什么有些扩展无法在浏览器中安装
少数扩展具有内置假设或需要在桌面版上运行。例如,当扩展访问桌面版 VS Code 安装中的文件,或者当扩展依赖于必须在桌面环境中运行的可执行文件时。当你尝试在浏览器中安装此类扩展时,会收到该扩展不可用的通知。
注意:当从桌面版 VS Code 连接到 Codespace 时,此类扩展仍可使用。
如何允许 VS Code 访问我的剪贴板进行读取?
在某些情况下,VS Code 在从剪贴板读取时可能会请求你访问剪贴板的权限。你应该能够通过浏览器设置(搜索“网站权限”)或通过在地址栏右侧查找此选项来授予剪贴板访问权限。
授予 VS Code 访问剪贴板的权限后,你可以重试该操作。
如何允许 VS Code 始终打开新标签页和窗口?
有时,作为安全预防措施,浏览器会阻止 VS Code 打开新标签页或窗口。如果发生这种情况,VS Code 会检测到阻止操作并明确提示用户。但是,你可以通过浏览器导航栏中的上下文菜单打开网站设置并允许弹出窗口,从而允许 VS Code 始终打开新窗口和标签页。
如何允许浏览器中的 VS Code 访问本地文件和文件夹?
从浏览器在 VS Code 中打开本地文件和文件夹需要浏览器支持文件系统访问 API。截至目前,Microsoft Edge 和 Google Chrome 都提供了这种级别的支持。如果你想在浏览器中使用 VS Code 时访问本地文件和文件夹,请考虑切换到这两个浏览器之一。
问题或反馈
如果你有疑问,可以查阅 GitHub Codespaces 的故障排除指南。如果你想提供反馈,可以在 GitHub Codespaces 的讨论区中提出问题。