GitHub Codespaces
GitHub Codespaces 为任何活动提供云驱动的开发环境 - 无论是长期项目,还是像审查拉取请求这样的短期任务。您可以从 Visual Studio Code 或基于浏览器的编辑器中使用这些环境。
环境
环境是GitHub Codespaces的“后端”部分。它是与软件开发相关的所有计算发生的地方:编译、调试、恢复等。当你需要处理一个新项目、接手一个新任务或审查一个PR时,你可以简单地启动一个云托管环境,GitHub Codespaces会负责正确配置它。它会自动配置你项目所需的一切:源代码、运行时、编译器、调试器、编辑器、自定义点文件配置、相关编辑器扩展等。
自定义
GitHub Codespaces 在每个项目的基础上都是完全可定制的。这是通过在项目的仓库中包含一个 devcontainer.json
文件来实现的,类似于 VS Code 的 Dev Containers 开发。
示例自定义包括:
- 设置要使用的基于Linux的操作系统。
- 自动安装各种工具、运行时和框架。
- 转发常用端口。
- 设置环境变量。
- 配置编辑器设置并安装首选扩展。
请参阅配置 Codespaces 文档以获取特定于 codespace 的 devcontainer.json
设置。
每个用户的Dotfile配置
点文件是以点(.)开头的文件。它们通常包含应用程序的配置信息,并可以控制终端、编辑器、源代码控制以及各种其他工具的行为。.bashrc
、.gitignore
和.editorconfig
是开发者常用的点文件示例。
在创建代码空间时,您可以指定一个包含您的dotfiles的GitHub仓库、文件的目标位置以及安装命令。
请参阅个性化Codespaces文档,了解如何将您的dotfile配置添加到codespace中。
入门指南
有适用于GitHub Codespaces客户端的入门主题。这些主题将帮助您快速完成登录GitHub Codespaces、创建您的第一个代码空间,并使用您偏好的客户端连接到它:
- VS Code 中的 Codespaces - 使用 GitHub Codespaces 扩展来连接并在您的环境中工作。
- 浏览器中的Codespaces - 通过基于浏览器的编辑器连接到您的codespace。
扩展作者
VS Code 扩展 API 隐藏了远程运行的大部分实现细节,因此许多扩展在 GitHub Codespaces 环境中无需任何修改即可正常工作。但是,我们建议您在代码空间中测试您的扩展,以确保其所有功能按预期工作。有关详细信息,请参阅文章 支持远程开发和 GitHub Codespaces。
基于浏览器的编辑器
您还可以在浏览器中完全免费体验轻量级的Visual Studio Code。基于网页的编辑器让您能够安全快速地浏览GitHub上的源代码库,并进行轻量级的代码更改。您可以在编辑器中打开任何代码库、分支或拉取请求,该编辑器具有VS Code的许多功能,包括搜索和语法高亮。如果您想运行或调试代码,可以切换到云托管环境或VS Code桌面版。
要访问这个基于浏览器的编辑器,你可以前往你在github.com上的仓库,然后按下.(句号键)或者将你的仓库URL更改为github.dev/org/repo
,将github.com
替换为github.dev
。
限制:如果您在隐身模式下运行浏览器或启用了广告拦截器,可能无法使用基于网络的编辑器。
注意: 此编辑器目前处于技术预览阶段。您今天就可以试用它,并在https://github.co/browser-editor-feedback提供反馈。
已知的限制和适应
在使用Codespaces特别是网页版的VS Code时,需要记住一些限制。其中一些限制有变通方法或调整措施,以提供一致的开发体验。
对于几个问题(特别是快捷键或那些在桌面上有解决方法的),你可以安装并使用Codespace作为一个渐进式网页应用(PWA)。
Issue | Reason | Workaround |
---|---|---|
Ctrl+Shift+P won't launch the Command Palette in Firefox. | Ctrl+Shift+P is reserved in Firefox. | Use F1 to launch the Command Palette. |
Certain default keybindings (for debugging) are different in the web. | Since the browser may already have an action registered for those keybindings, we adjust the default for VS Code in the web. | Use the adjusted defaults. They appear on tooltip hovers over the debug actions.
|
F11 for debugging does not work on macOS in web or desktop. | This is a known, non-browser specific limitation. More information can be found in issue #5102. | Disable F11 to show desktop on macOS.
|
Ctrl+N for new file doesn't work in web. | Ctrl+N opens a new window instead. | Ctrl+N for new file works in the desktop. |
Ctrl+W for closing an editor doesn't work in web. | Ctrl+W closes the current tab in browsers. | Ctrl+W works in the desktop. |
Ctrl+Shift+B will not toggle the favorites bar in the browser. | Codespaces overrides this and redirects to the "Build" menu in the Command Palette. | No current workarounds. |
Dragging and dropping files from VS Code to a Codespace (and vice versa) does not work. | You can see more context in issue #115535. | There are a couple of options:
|
Angular app debugging isn't supported in the web. | Code running in a browser cannot launch another browser instance in debug mode for security reasons. | You have a few options:
|
Downloading a file with no extension from the browser automatically adds ".txt" | This is how Chrome and Edge behave. | Context and potential future solutions in issue #118436. |
When you download a file from a remote (including Codespaces), attributes such as the executable bit are removed. | Context and potential future solutions can be found in issue #112099. | No current workarounds. |
You may see the prompt, "Your_codespace_name can't open this folder because it contains system files" when trying to download certain folders from a Codespace. |
A user agent is free to impose the level of restrictions on sensitive directories. More information in this spec and Chromium's blocklist. | No additional workarounds beyond the spec and blocklist. |
Manually visiting http://localhost:forwarded_port won't work to access a forwarded port from a Codespace in the web. |
This is based on how Codespaces handles port forwarding and generates the correct URL for the web. | Click the link from the port forwarding notification to open your app, or the globe icon in the Ports view, both of which will provide the properly generated link. More information in the Codespaces docs. |
某些扩展在网页中的行为有所不同
Extension | Issue / Reason | Workaround |
---|---|---|
Extensions with keyboard shortcuts that overlap with browser shortcuts, for example Git Graph, which uses Ctrl+R to refresh. | The keyboard shortcut may overlap with an existing browser shortcut, for example Ctrl+R refreshes the window in Safari. | You can use a desktop-based, rather than web-based, Codespace to fully leverage your keyboard shortcuts. Different browsers may also behave differently (you can refresh Git Graph in Chrome). |
Language packs, for example the Japanese Language Pack for Visual Studio Code | Language pack extensions are currently not supported in web-based Codespaces. | You can use a desktop-based Codespace to use language packs and configure the display language. |
Bracket Pair Colorizer 2 | It will not work in the browser as it introduces an install location dependency that is not easily fixable. | Use Bracket Pair Colorizer. |
Browser Debuggers, such as Debugger for Firefox. | Extensions that require a UI/Desktop extension host do not load in the browser. | You can use these extensions in local VS Code (not connected to Codespaces). Or, while your app is running from a Codespace, you can use an alternative, like Chrome DevTools to inspect elements and set breakpoints. |
Extensions to open a browser, for example open in browser. | Extensions that require a UI/Desktop extension host do not load in the browser. | Use a substitute extension if possible, like Live Server. |
Project Manager | Project Manager relies on syncing a custom projects.json file, which isn't currently supported. |
You can use the extension in desktop Codespaces or local VS Code to save and manage your projects, as these options won't require syncing a custom file. |
Extensions that rely on Chrome, such as Protractor Test Runner and Browser Preview. | Chrome is not included in a Codespace. | Try to find alternative experiences, or you can use these extensions on your project in local VS Code (not connected to Codespaces). |
Flutter (and Flutter development overall) | Several aspects of the Flutter workflow are limited due to the nature of Docker containers and Codespaces.
|
You can use local VS Code for Flutter development. |
LaTeX Workshop | The extension provides three kinds of features to help with LaTeX authoring: 1) a set of views that surface common commands, 2) a PDF previewer, and 3) language features like snippets and IntelliSense. The extension can be used fairly fully featured, but there are some web or security limitations. | The following workarounds address limitations in the view and previewer feature areas:
|
Git Graph | Some Git Graph webview functionality may be limited in Codespaces. For instance, switching between a file from a commit and the Git Graph webview may blank out the webview. | You can use Git Graph fully within VS Code desktop. |
Other Remote Development extensions (WSL, Dev Containers, Remote - SSH) cannot be installed in a Codespace. | The Codespace is already a remote context. | If you'd like to run in another remote context (for example WSL or a remote SSH computer), open VS Code desktop (not connected to a Codespace) and launch one of the other remote extensions. If you'd like to use a custom dev container, you can use the same .devcontainer in both Codespaces and Dev Containers. |
My_Favorite_Extension doesn't work and isn't listed above. | There are a few other issues that can prevent features from working as expected in remote contexts. | In some cases, you can use another command to work around the issue, but in others, the extension may need to be modified. Check out the remote extension tips for common remote issues and tips on resolving them. |
常见问题
为什么扩展程序无法在浏览器中安装
有一些扩展具有内置假设或需要在桌面上运行。例如,当扩展从桌面上的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的讨论区中提交问题。