跳至主要内容

github.dev 基于 Web 的编辑器

您可以使用 github.dev 基于 Web 的编辑器来编辑文件并提交更改。

注意:github.dev 编辑器目前处于测试版预览阶段。您可以在 我们的讨论区 中提供反馈。

关于 github.dev 编辑器

github.dev 编辑器提供了一种轻量级的编辑体验,完全在您的浏览器中运行。使用 github.dev 编辑器,您可以从 GitHub 导航文件和源代码存储库,并进行代码更改和提交。您可以在编辑器中打开任何存储库、分支或拉取请求。

github.dev 编辑器在 GitHub.com 上免费提供给所有人。

github.dev 编辑器提供了 Visual Studio Code 的许多优势,例如搜索、语法高亮和源代码管理视图。您还可以使用设置同步将您自己的 VS Code 设置与编辑器共享。有关更多信息,请参阅 VS Code 文档中的“设置同步”。

github.dev 编辑器完全在您的浏览器沙箱中运行。编辑器不会克隆存储库,而是使用 GitHub 存储库扩展 来执行您将使用的大部分功能。您的工作保存在浏览器的本地存储中,直到您提交它。您应该定期提交更改,以确保它们始终可访问。

您必须登录 GitHub.com 才能使用 github.dev 编辑器。

打开 github.dev 编辑器

您可以通过以下两种方式之一在 github.dev 中打开任何 GitHub 存储库

  • 要在同一个浏览器选项卡中打开存储库,请在 GitHub 上浏览任何存储库或拉取请求时按 .

    要在新浏览器选项卡中打开存储库,请按 >

  • 将 URL 从“github.com”更改为“github.dev”。

  • 查看文件时,选择 下拉菜单,然后单击 **github.dev**。

    Screenshot of the dropdown menu for the edit icon. The option "github.dev" is highlighted with a dark orange outline.

Codespaces 和 github.dev

github.dev 和 GitHub Codespaces 都允许您直接从存储库编辑代码。但是,根据您的用例,两者都有略微不同的优势。

github.devGitHub Codespaces
成本免费。个人帐户每月免费使用配额。有关定价信息,请参阅“关于 GitHub Codespaces 的计费”。
可用性适用于 GitHub.com 上的每个人。适用于 GitHub.com 上的每个人。
启动github.dev 通过按键立即打开,您可以立即开始使用它,无需等待额外的配置或安装。创建或恢复 codespace 时,codespace 会分配一个 VM,并且容器会根据 devcontainer.json 文件的内容进行配置。此设置可能需要几分钟才能创建环境。有关更多信息,请参阅“为存储库创建 codespace”。
计算没有关联的计算,因此您将无法构建和运行代码或使用集成终端。使用 GitHub Codespaces,您可以获得专用 VM 的强大功能,您可以在其中运行和调试应用程序。
终端访问无。GitHub Codespaces 默认提供一组通用的工具,这意味着您可以像在本地环境中一样使用终端。
扩展只有可以在 Web 上运行的扩展子集才会出现在“扩展视图”中,并且可以安装。有关更多信息,请参阅“使用扩展”。使用 GitHub Codespaces,您可以使用 Visual Studio Code Marketplace 中的大多数扩展。

继续在 Codespaces 上工作

您可以在 github.dev 中开始工作流程,并在 codespace 上继续工作。如果您尝试访问“运行和调试视图”或“终端”,您将收到通知,说明它们在 github.dev 中不可用。

要在 codespace 中继续工作,请单击“继续工作…”并选择“创建新 Codespace”以在当前分支上创建 codespace。在选择此选项之前,您必须提交所有更改。

Screenshot of the "Run and Debug" side bar with a message saying that this feature is not available, and a "Continue Working On" button.

使用源代码管理

当您使用 github.dev 时,所有操作都通过“源代码管理”视图进行管理,该视图位于左侧的活动栏中。有关“源代码管理”视图的更多信息,请参阅 VS Code 文档中的“版本控制”。

由于 github.dev 使用 GitHub 存储库扩展来提供其功能,因此您可以在无需存储更改的情况下切换分支。有关更多信息,请参阅 VS Code 文档中的“GitHub 存储库”。

创建新分支

  1. 如果当前分支未显示在状态栏中(位于 codespace 底部),请右键单击状态栏并选择“源代码管理”。

  2. 单击状态栏中的分支名称。

    Screenshot of the branch name displayed in the status bar of VS Code.

  3. 在下拉菜单中,单击要切换到的分支,或输入新分支的名称,然后单击“创建新分支”。

    Screenshot of the dropdown for creating a new branch in VS Code.
    您在旧分支中所做的任何未提交的更改都将在新分支中可用。

提交更改

  1. 在活动栏中,单击“源代码管理”视图。

    Screenshot of the VS Code Activity Bar with the source control button, labeled with a branch icon, highlighted with an orange outline.

  2. 要暂存更改,请单击 位于您更改的文件旁边,或位于“更改”旁边(如果您更改了多个文件,并且您想暂存所有文件)。

    Screenshot of the "Source control" side bar with the staging button (a plus sign), to the right of "Changes," highlighted with a dark orange outline.

  3. 在文本框中,键入描述您所做更改的提交消息。

    Screenshot of the "Source control" side bar with a commit message entered into the text box above the "Commit" button.

  4. 单击“提交并推送”。

    您的更改将自动推送到您在 GitHub 上的分支。

创建拉取请求

  1. 在将更改提交到存储库的本地副本后,单击“源代码管理”侧边栏顶部的拉取请求图标。

    Screenshot of the top of the "Source Control" side bar. The pull request icon is highlighted with a dark orange outline.

  2. 检查您要从中合并的本地分支和存储库,以及您要合并到的远程分支和存储库是否正确。然后为拉取请求提供标题和描述。

    Screenshot of the "GitHub Pull Request" side bar with a form for creating a pull request, including "Title" and "Description" fields.

  3. 点击创建

使用现有拉取请求

您可以使用 github.dev 来处理现有的拉取请求。

  1. 浏览到您想在 github.dev 中打开的拉取请求。
  2. .键在 github.dev 中打开拉取请求。
  3. 完成任何更改后,请按照提交更改中的步骤进行提交。您的更改将直接提交到分支,无需推送更改。

使用扩展

github.dev 编辑器支持专门为在 Web 中运行而创建或更新的 VS Code 扩展。这些扩展被称为“Web 扩展”。要了解如何创建 Web 扩展或更新现有扩展以在 Web 中运行,请参阅 VS Code 文档中的“Web 扩展”。

可以在 github.dev 中运行的扩展将显示在扩展视图中,并且可以安装。如果您使用设置同步,任何兼容的扩展也会自动安装。有关信息,请参阅 VS Code 文档中的“设置同步”。

在防火墙后使用 github.dev

如果您在防火墙后工作,则需要将以下 URL 添加到防火墙的允许列表中。

URL用途
https://*.vscode-cdn.netgithub.dev 完全在浏览器中运行。为此,它需要从此 URL 的端点下载 VS Code 资产。
https://update.code.visualstudio.comgithub.dev 完全在浏览器中运行。为此,它需要从此 URL 的端点下载 VS Code 资产。
https://api.github.com用于从 GitHub 检索源文件
https://vscode-sync-insiders.trafficmanager.net可选。 允许通过设置同步同步设置。

在 github.dev 中安装的每个扩展都在独立的 Web 工作器下运行。这在同一浏览器中运行的多个扩展之间增加了一层安全性。因此,来自扩展的请求 URL 类似于:https://v--151hfiju3s93ktt2rqh65902gukb27osot905m4g52k40kaea3h6.vscode-cdn.net

运行时使用 GitHub 仓库 扩展从仓库中检索数据。 这些数据不会在 github.dev 会话之间存储在本地计算机上,但未保存的文件和当前显示的文件的浏览器存储除外(以允许页面重新加载)。 唯一在会话之间本地存储的非仓库数据是一些用户设置和 GitHub 身份验证流程发送的凭据。

故障排除

如果您在打开 github.dev 时遇到问题,请尝试以下操作

  • 确保您已登录 GitHub。
  • 禁用任何广告拦截器。
  • 使用浏览器中的非隐身窗口打开 github.dev。

已知限制

  • github.dev 编辑器目前支持 Chrome(以及各种其他基于 Chromium 的浏览器)、Edge、Firefox 和 Safari。 我们建议您使用这些浏览器的最新版本。
  • 某些键盘快捷键可能无法正常工作,具体取决于您使用的浏览器。 这些键盘快捷键限制在 VS Code 文档的“已知限制和调整”部分中进行了说明。
  • 根据您的本地键盘布局,. 可能无法打开 github.dev。 在这种情况下,您可以通过将 URL 从 github.com 更改为 github.dev 来在 github.dev 中打开任何 GitHub 仓库。
  • 在 Web 编辑器中大量编写文档或代码时,您可能会遇到推送某些提交的问题。 要解决此问题,请等待几分钟,让 API 速率限制重置。