Skip to main content

GitHub Codespaces 快速入门

在 5 分钟内试用 GitHub Codespaces。

简介

在本指南中,你将从模板存储库创建 codespace,并探索 codespace 中可用的一些基本功能。 你将使用 Visual Studio Code 的浏览器版本,该版本最初是 GitHub Codespaces 的默认编辑器。 尝试本快速入门后,可以在其他编辑器中使用 Codespaces,并且可以更改默认编辑器。 本指南末尾提供了相关链接。

在本快速入门中,你将了解如何创建 codespace、连接到转发的端口以查看正在运行的应用程序、将 codespace 发布到一个新的存储库,以及通过扩展实现设置个性化。

有关 GitHub Codespaces 如何工作的详细信息,请参阅配套指南“深入了解 GitHub Codespaces”。

创建代码空间

  1. 导航到 github/haikus-for-codespaces 模板存储库。

  2. 在文件列表上方,单击“使用此模板”,然后选择“在 codespace 中打开” 。

    使用此模板按钮

运行应用程序

创建 codespace 后,模板存储库将自动克隆到其中。 现在,您可以运行该应用程序并在浏览器中启动它。

  1. 当终端可用时,输入命令 npm run dev。 此示例使用 Node.js 项目,此命令运行 package.json 文件中标记为“dev”的脚本,该脚本启动示例存储库中定义的 Web 应用程序。

    终端中的 npm run dev

    如果按照其他应用程序类型进行操作,请为该项目输入相应的启动命令。

  2. 当应用程序启动时,codespace 会识别运行应用程序的端口,并显示该端口已转发的提示。

    端口转发“toast”通知

  3. 单击“在浏览器中打开”,在新选项卡中查看正在运行的应用程序。

编辑应用程序并查看更改

  1. 切换回 codespace,并通过在文件资源管理器中单击 haikus.json 文件来打开该文件。

  2. 编辑第一个俳句的 text 字段,从而使用自己的俳句个性化应用程序。

  3. 返回到浏览器中正在运行的应用程序选项卡,然后刷新以查看所做的更改。

    如果已关闭选项卡,请打开“端口”面板,然后针对运行的端口单击“在浏览器中打开”图标。

    端口转发面板

提交和推送更改

现在,你已经进行了一些更改,可以使用集成终端或源视图将工作发布到新的存储库。

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

  2. 若要暂存更改,请单击 haikus.json 文件旁边的 +,如果你更改了多个文件并希望全部暂存,请单击“更改”旁边的按钮 。

    突出显示的暂存按钮的源代码管理侧栏

  3. 若要提交暂存更改,请键入描述所做更改的提交消息,然后单击“提交”。

    包含提交消息的源代码管理侧栏

  4. 单击“发布分支”。

    VS Code 中“发布分支”按钮的屏幕截图

  5. 在“存储库名称”下拉列表中,键入新存储库的名称,然后选择“发布到 GitHub 专用存储库”或“发布到 GitHub 公共存储库”。

    VS Code 中“存储库名称”下拉列表的屏幕截图

    新存储库的所有者将是创建 codespace 时所使用的 GitHub 帐户。

  6. 在编辑器右下角显示的弹出窗口中,单击“在 GitHub 上打开”,查看 GitHub.com 上的新存储库。 在新存储库中,查看 haikus.json 文件,并检查 codespace 中所做的更改是否已成功推送到存储库。

    VS Code 中“在 GitHub 中打开”弹出窗口的屏幕截图

使用扩展进行个性化设置

使用浏览器或 Visual Studio Code 桌面应用程序连接到 codespace 时,可以直接从编辑器访问 Visual Studio Code 市场。 在本示例中,你将安装可更改主题的 VS Code 扩展,但也可以安装对工作流程有用的任何扩展。

  1. 在左侧栏中,单击扩展图标。

  2. 在搜索栏中,键入 fairyfloss 并单击“安装”。

    添加扩展

  3. 从列表中选择 fairyfloss 主题。

    选择 fairyfloss 主题

如果你在浏览器或 Visual Studio Code 桌面应用程序中使用 codespace,并且已打开“设置同步”,则在当前 codespace 中对编辑器设置所做的任何更改(例如更改主题或键盘绑定),将自动同步到已登录到 GitHub 帐户的任何 Visual Studio Code 实例以及你创建的任何其他 codespace 中。

后续步骤

您已经成功创建、个性化并在代码空间中运行了第一个应用程序,但还有很多需要探索的地方! 以下是一些有用的资源,可以帮助你对 GitHub Codespaces 执行后续步骤。

  • 深入探讨”:本快速入门介绍了 GitHub Codespaces 的一些功能。 从技术角度深入探讨这些领域。
  • 将开发容器配置添加到存储库”:这些指南提供有关设置存储库以将 GitHub Codespaces 用于特定语言的信息。
  • 开发容器简介”:该指南提供有关创建用于项目的 Codespaces 的自定义配置的详细信息。

延伸阅读