github.dev教程

github.dev 是一个基于浏览器的轻量级编辑器，允许用户直接在浏览器中编辑和提交 GitHub 仓库中的代码。

1- 打开github.dev

有两种方式可以打开 github.dev：

• 在 GitHub 仓库页面，按下键盘上的“.”键，即可自动打开 github.dev 编辑器。
• 将 GitHub 仓库的 URL 从 github.com 修改为 github.dev，然后按回车键。

2- 编辑和提交代码

在 github.dev 中，您可以进行以下操作：

• 导航文件和源代码仓库：使用左侧的文件资源管理器浏览和打开文件。
• 编辑文件：点击文件进行编辑，编辑器支持语法高亮和代码自动补全等功能。
• 提交更改：编辑完成后，点击页面顶部的“Source Control”图标，输入提交信息，然后点击“Commit”按钮提交更改。

3- 使用扩展和个性化设置

github.dev 支持多种扩展和个性化设置：

• 安装扩展：可以安装如 CodeTour 等扩展，帮助创建和播放代码库的指导演练。
• 同步设置：使用 Settings Sync 功能，可以将您的 VS Code 设置同步到 github.dev 编辑器中。

4- 运行和调试代码

在 github.dev 中，您可以运行和调试代码：

• 运行应用程序：在终端中输入相应的启动命令（如 npm run dev），启动应用程序。
• 端口转发：应用程序启动后，编辑器会识别运行应用程序的端口，并显示一条弹出消息，说明该端口已转发。点击“在浏览器中打开”即可在新选项卡中查看正在运行的应用程序。

5- 发布到新的存储库

编辑完成后，您可以将更改发布到新的 GitHub 存储库：

• 发布到 GitHub：在“存储库名称”下拉列表中，键入新存储库的名称，然后选择“发布到 GitHub 专用存储库”或“发布到 GitHub 公共存储库”。
• 查看更改：在编辑器右下角显示的弹出窗口中，点击“在 GitHub 上打开”，查看 GitHub.com 上的新存储库，并检查更改是否已成功推送。

6- 注意事项

• 登录要求：使用 github.dev 编辑器需要登录到 GitHub.com。
• 本地存储：编辑器不会克隆存储库，而是使用 GitHub 存储库扩展来执行大部分功能。您的工作将保存在浏览器的本地存储中，直到您提交为止。因此，您应定期提交更改，以确保它们始终可访问。

同类编辑器对比

• GitHub Codespaces：提供完整的开发环境，支持所有 VS Code 扩展和自定义设置，适合需要高性能和复杂开发环境的用户。
• Gitpod：与 GitHub 紧密集成，支持多种编程语言和框架，适合持续集成和测试。
• CodeSandbox：专注于前端开发，支持 React、Vue、Angular 等框架，适合快速原型设计和分享。
• StackBlitz：支持完整的前端和全栈开发，性能优越，适合快速启动和开发项目。

通过以上对比，您可以根据自己的需求选择最适合的在线编辑器。github.dev 适合需要快速编辑和提交代码的场景，而 GitHub Codespaces 和 Gitpod 则提供了更为强大的开发环境。