Skip to main content
We publish frequent updates to our documentation, and translation of this page may still be in progress. For the most current information, please visit the English documentation.
 

 

github.dev 基于 web 的编辑器

In this article

使用存储库或拉取请求中的 github.dev web-based editor 来创建和提交更改。

注意：github.dev web-based editor 目前为测试预览版。 你可以在我们的讨论中提供反馈。

关于 web-based editor

web-based editor 引入了完全在浏览器中运行的轻量级编辑体验。 使用 web-based editor，可以从 GitHub 中导航文件和源代码存储库，并创建和提交代码更改。 您可以在编辑器中打开任何存储库、复刻或拉取请求。

web-based editor 在 GitHub.com 上免费供所有人使用。

web-based editor 具有 Visual Studio Code 的诸多优点，如搜索、语法突出显示和源代码管理视图。 还可以使用 Settings Sync 与编辑器共享自己的 VS Code 设置。 有关详细信息，请参阅 VS Code 文档中的“设置同步”。

web-based editor 完全在浏览器的沙盒中运行。 编辑器不会克隆存储库，而是使用 GitHub 存储库扩展来执行你将要使用的大部分功能。 您的工作将保存在浏览器的本地存储中，直到您提交为止。 您应定期提交更改，以确保它们始终可访问。

必须登录才能使用基于 Web 的编辑器。

打开 web-based editor

可以通过以下任一方式打开 web-based editor 中的任何 GitHub 存储库：

  • 要在同一浏览器标签页中打开存储库，请按 . （在 GitHub 上浏览任何存储库或拉取请求时）。

    要在新的浏览器标签页中打开存储库，请按 >。

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

  • 查看文件时，请使用 旁边的下拉菜单，然后选择“在 github.dev 中打开”。

    “编辑文件”按钮下拉菜单

Codespaces 和 web-based editor

web-based editor 和 GitHub Codespaces 都允许你直接从存储库中编辑代码。 但两者的优点略有不同，具体取决于您的使用情况。

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

继续使用 Codespaces

可以在 web-based editor 中启动工作流并继续使用 codespace。 如果尝试访问运行和调试视图或终端，系统将通知你它们在 web-based editor 中不可用。

要在 codespace 中继续工作，请单击“继续处理...” 然后选择“新建 Codespace”，在当前分支上创建 codespace。 在选择此选项之前，必须提交任何更改。

显示 UI 中的“继续工作”按钮的屏幕截图

使用源控制

使用 web-based editor 时，所有操作都通过源代码管理视图进行管理，该视图位于左侧的活动栏中。 有关源代码管理视图的详细信息，请参阅 VS Code 文档中的“版本控制”。

由于基于 Web 的编辑器使用 GitHub 存储库扩展来增强其功能，因此您可以切换分支而无需隐藏更改。 有关详细信息，请参阅 VS Code 文档中的“GitHub 存储库”。

创建新分支

  1. 如果当前分支未显示在状态栏中，请在 codespace 的底部右键单击状态栏，然后选择“源代码管理”。
  2. 单击状态栏中的分支名称。 状态栏中的分支
  3. 在下拉菜单中，单击要切换到的分支或输入新分支的名称，然后单击“创建新分支”。 从分支菜单中选择 你在旧分支中所做的任何未提交的更改都将在新分支上可用。

提交更改

  1. 在活动栏中，单击“源代码管理”视图。 源控制视图
  2. 若要暂存更改，请单击已更改文件旁边的 +，如果你更改了多个文件并希望全部暂存，请单击“更改”旁边的按钮 。 突出显示“暂存”按钮的源代码管理侧边栏
  3. 输入提交消息，描述您所做的更改。 包含提交消息的源代码管理侧边栏
  4. 若要提交暂存更改，请单击源代码管理侧边栏顶部的复选标记。 单击复选标记图标
  5. 更改在提交后将自动推送到 GitHub 上的分支。

创建拉取请求

  1. 提交存储库本地副本的更改后，单击“创建拉取请求”图标。 突出显示“暂存”按钮的源代码管理边栏
  2. 检查作为合并来源的本地分支和仓库以及作为合并目标的远程分支和仓库是否正确。 然后为拉取请求提供标题和描述。 突出显示“暂存”按钮的源代码管理边栏
  3. 单击“创建”。

使用现有的拉取请求

可以使用 web-based editor 来处理现有的拉取请求。

  1. 浏览到要在 web-based editor 中打开的拉取请求。
  2. 按 . 以在 web-based editor 中打开拉取请求。
  3. 进行任何更改后，请使用提交更改中的步骤提交更改。 您的更改将直接提交到分支，无需推送更改。

使用扩展

web-based editor 支持专门创建或更新以在 Web 中运行的 VS Code 扩展。 这些扩展称为“Web 扩展”。 要了解如何创建 Web 扩展或更新现有扩展以适用于 Web，请参阅 VS Code 文档中的“Web 扩展”。

可以在 web-based editor 中运行的扩展将显示在扩展视图中，并且可以安装。 如果使用“设置同步”，则所有兼容的扩展也会自动安装。 有关信息，请参阅 VS Code 文档中的“设置同步”。

故障排除

如果在打开 web-based editor 时遇到问题，请尝试以下操作：

  • 确保您已登录到 GitHub。
  • 禁用任何广告拦截器。
  • 在浏览器中使用非隐身窗口打开 web-based editor。

已知的限制

  • web-based editor 目前在 Chrome（以及其他各种基于 Chromium 的浏览器）、Edge、Firefox 和 Safari 中受支持。 我们建议您使用这些浏览器的最新版本。
  • 某些按键绑定可能不起作用，具体取决于您使用的浏览器。 这些键绑定限制记录在 VS Code 文档的“已知限制和改编”部分中。
  • 根据本地键盘布局，. 可能无法打开 web-based editor。 在这种情况下，可以通过将 URL 从 github.com 更改为 github.dev 来打开 web-based editor 中的任何 GitHub 存储库。