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 中打开”选项。

运行应用程序

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

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

    该屏幕截图显示了 VS Code 中的终端,其中输入了“npm run dev”命令。

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

  2. 当应用程序启动时,codespace 会识别运行应用程序的端口,并显示一条弹出消息,说明该端口已转发。

    该屏幕截图显示了弹出消息:“在端口 3000 上运行的应用程序现已可用。” 消息下面是一个绿色按钮,标记为“在浏览器中打开”。

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

编辑应用程序并查看更改

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

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

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

    如果已关闭浏览器标签页,请单击 VS Code 中的“端口”选项卡,将鼠标悬停在正在运行的端口的“本地地址”值上,然后单击“在浏览器中打开”图标 。

    “端口”面板的屏幕截图。 “端口”选项卡和地球图标(在浏览器中打开转发的端口)以橙色轮廓突出显示。

提交和推送更改

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

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

    屏幕截图显示 VS Code 活动栏,其中“源代码管理”按钮以橙色边框突出显示。

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

    “源代码管理”边栏的屏幕截图,其中位于“更改”右侧的暂存按钮(加号)以深橙色边框突出显示。

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

    “源代码管理”边栏的屏幕截图。 输入了“更改俳句文本和样式”的提交消息,“提交”按钮以橙色轮廓突出显示。

  4. 单击“发布分支”。

    “源代码管理”边栏的屏幕截图,其中显示了“发布分支”按钮。

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

    VS Code 中的存储库名称下拉列表的屏幕截图。 显示了两个选项,用于发布到专用或公共存储库。

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

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

    该屏幕截图显示了成功发布存储库的确认消息,其中显示了“在 GitHub 上打开”按钮。

使用扩展进行个性化设置

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

  1. 单击活动栏中的“扩展”图标。

    活动栏的屏幕截图。 “扩展”图标以橙色轮廓突出显示。

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

    “扩展: 市场”边栏的屏幕截图。 搜索框中输入了“fairyfloss”,其下方显示了“fairyfloss”扩展,并附带“安装”按钮。

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

    “选择颜色主题”下拉列表的屏幕截图,其中选择了“fairyfloss”主题。

关于设置同步

可以启用设置同步,以跨设备和 VS Code 的实例同步扩展和其他设置。 同步的设置缓存在云中。 如果在 codespace 中打开了“设置同步”,则会将你在 codespace 中对设置所做的更新推送到云中,并将你从其他位置推送到云的更新拉入 codespace。 有关详细信息,请参阅 个性化你帐户的 GitHub Codespaces

后续步骤

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

其他阅读材料