GitHub Codespaces
GitHub Codespaces 为任何活动提供云驱动的开发环境——无论是长期项目,还是像审查拉取请求这样的短期任务。您可以在 Visual Studio Code 或基于浏览器的编辑器中使用这些环境。
环境
环境是 GitHub Codespaces 的“后端”部分。所有与软件开发相关的计算都在这里进行:编译、调试、还原等。当您需要开始一个新项目、接受一个新任务或审查一个 PR 时,您只需启动一个云托管的环境,GitHub Codespaces 就会负责正确地配置它。它会自动配置您项目所需的一切:源代码、运行时、编译器、调试器、编辑器、自定义点文件配置、相关的编辑器扩展等。
自定义
GitHub Codespaces 可以基于每个项目进行完全自定义。这是通过在项目的仓库中包含一个 devcontainer.json
文件来实现的,类似于 VS Code 开发容器开发。
自定义示例包括:
- 设置要使用的基于 Linux 的操作系统。
- 自动安装各种工具、运行时和框架。
- 转发常用端口。
- 设置环境变量。
- 配置编辑器设置并安装偏好的扩展。
请参阅 配置 Codespaces 文档,了解特定于 Codespace 的 devcontainer.json
设置。
每个用户的点文件配置
点文件(Dotfiles)是文件名以点 (.) 开头的文件。它们通常包含应用程序的配置信息,可以控制终端、编辑器、源代码控制和各种其他工具的行为。.bashrc
、.gitignore
和 .editorconfig
是开发人员常用的点文件示例。
在创建 Codespace 时,您可以指定一个包含您的点文件的 GitHub 仓库、文件的目标位置以及安装命令。
请参阅 个性化 Codespaces 文档,了解如何将您的点文件配置添加到 Codespace。
入门
我们为两种 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
。
限制:如果您在浏览器的无痕模式下运行或启用了广告拦截器,您可能无法使用基于 Web 的编辑器。
注意:此编辑器目前处于技术预览阶段。您可以立即试用,并在 https://github.co/browser-editor-feedback 提供反馈。
已知的限制和适配
在使用 Codespaces,特别是网页版 VS Code 时,需要注意一些限制。其中一些限制有变通方法或适配措施,以提供一致的开发体验。
对于一些问题(特别是键盘快捷键或那些列出了桌面版变通方法的问题),您可以将 Codespace 安装并用作渐进式 Web 应用 (PWA)。
问题 | 原因 | 变通方法 |
---|---|---|
在 Firefox 中,Ctrl+Shift+P 无法启动命令面板。 | Ctrl+Shift+P 在 Firefox 中已被预留。 | 使用 F1 来启动命令面板。 |
某些默认的键盘快捷键(用于调试)在网页版中有所不同。 | 由于浏览器可能已经为这些键盘快捷键注册了操作,我们调整了网页版 VS Code 的默认设置。 | 使用调整后的默认值。当鼠标悬停在调试操作上时,它们会显示在工具提示中。
|
在 macOS 的网页版或桌面版中,用于调试的 F11 无法工作。 | 这是一个已知的、非浏览器特定的限制。更多信息可以在 问题 #5102 中找到。 | 在 macOS 上禁用 F11 显示桌面的功能。
|
在网页版中,Ctrl+N 创建新文件的快捷键无效。 | Ctrl+N 会打开一个新窗口。 | 在桌面版中,Ctrl+N 创建新文件的快捷键可以正常工作。 |
在网页版中,Ctrl+W 关闭编辑器的快捷键无效。 | Ctrl+W 会关闭浏览器的当前标签页。 | Ctrl+W 在桌面版中可以正常工作。 |
Ctrl+Shift+B 不会在浏览器中切换收藏夹栏。 | Codespaces 会覆盖此快捷键并重定向到命令面板中的“构建”菜单。 | 当前没有变通方法。 |
从 VS Code 拖放文件到 Codespace(反之亦然)无法工作。 | 您可以在 问题 #115535 中看到更多相关信息。 | 有几个选项:
|
网页版不支持 Angular 应用调试。 | 出于安全原因,在浏览器中运行的代码无法以调试模式启动另一个浏览器实例。 | 您有几个选项:
|
从浏览器下载没有扩展名的文件会自动添加“.txt”后缀。 | 这是 Chrome 和 Edge 的行为方式。 | 相关背景和未来可能的解决方案请见 问题 #118436。 |
当您从远程(包括 Codespaces)下载文件时,诸如可执行位之类的属性会被移除。 | 相关背景和未来可能的解决方案可以在 问题 #112099 中找到。 | 当前没有变通方法。 |
当尝试从 Codespace 下载某些文件夹时,您可能会看到提示:“`Your_codespace_name` 无法打开此文件夹,因为它包含系统文件”。 | 用户代理可以自由地对敏感目录施加限制级别。更多信息请见此规范和 Chromium 的黑名单。 | 除了规范和黑名单之外,没有其他变通方法。 |
在网页版中,手动访问 https://:forwarded_port 无法从 Codespace 访问转发的端口。 |
这是基于 Codespaces 处理端口转发并为网页生成正确 URL 的方式。 | 点击端口转发通知中的链接来打开您的应用,或者点击“端口”视图中的地球图标,这两者都将提供正确生成的链接。更多信息请参阅 Codespaces 文档。 |
一些扩展在网页版中的行为不同
扩展 | 问题 / 原因 | 变通方法 |
---|---|---|
键盘快捷键与浏览器快捷键冲突的扩展,例如 Git Graph,它使用 Ctrl+R 进行刷新。 | 键盘快捷键可能与现有的浏览器快捷键冲突,例如在 Safari 中 Ctrl+R 会刷新窗口。 | 您可以使用基于桌面的 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 Runner 和 Browser Preview。 | Codespace 中不包含 Chrome。 | 尝试寻找替代体验,或者您可以在本地 VS Code(未连接到 Codespaces)的项目中使用这些扩展。 |
Flutter(以及整个 Flutter 开发) | 由于 Docker 容器和 Codespaces 的特性,Flutter 工作流程的几个方面受到了限制。
|
您可以使用本地 VS Code 进行 Flutter 开发。 |
LaTeX Workshop | 该扩展提供了三种功能来帮助 LaTeX 创作:1) 一组展示常用命令的视图,2) 一个 PDF 预览器,以及 3) 像代码片段和 IntelliSense 这样的语言功能。该扩展可以相当全面地使用,但存在一些网页或安全限制。 | 以下变通方法解决了视图和预览器功能方面的限制:
|
Git Graph | 一些 Git Graph Webview 功能在 Codespaces 中可能会受限。例如,在提交的文件和 Git Graph Webview 之间切换可能会使 Webview 变为空白。 | 您可以在 VS Code 桌面版中完整使用 Git Graph。 |
其他远程开发扩展(WSL、Dev Containers、Remote - SSH)无法安装在 Codespace 中。 | Codespace 本身已经是一个远程上下文。 | 如果您想在另一个远程上下文(例如 WSL 或远程 SSH 计算机)中运行,请打开 VS Code 桌面版(未连接到 Codespace)并启动其他远程扩展之一。如果您想使用自定义开发容器,您可以在 Codespaces 和 Dev Containers 中使用相同的 .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 讨论区中提交问题。