跳至主要内容

GitHub Codespaces 快速入门

在 5 分钟内试用 GitHub Codespaces。

简介

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

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

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

创建您的 codespace

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

  2. 点击 使用此模板,然后点击 在 codespace 中打开

    Screenshot of the "Use this template" button and the dropdown menu expanded to show the "Open in a codespace" option.

运行应用程序

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

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

    Screenshot of the Terminal in VS Code with the "npm run dev" command entered.

    如果您正在使用其他类型的应用程序,请输入该项目的相应启动命令。

  2. 当您的应用程序启动时,codespace 会识别应用程序运行的端口,并显示一个弹出消息,让您知道端口已转发。

    Screenshot of the pop-up message: "Your application running on port 3000 is available." Below this is a green button, labeled "Open in Browser."

  3. 点击 在浏览器中打开,在新的标签页中查看正在运行的应用程序。

编辑应用程序并查看更改

  1. 切换回您的 codespace,并在资源管理器中点击 haikus.json 文件以打开它。

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

  3. 返回浏览器中正在运行的应用程序标签,并刷新以查看您的更改。

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

    Screenshot of the "Ports" panel. The "Ports" tab and a globe icon, which opens the forwarded port in a browser, are highlighted with orange outlines.

提交和推送您的更改

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

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

    Screenshot of the VS Code Activity Bar with the source control button highlighted with an orange outline.

  2. 要暂存您的更改,请点击 位于 haikus.json 文件旁边,或者位于 更改 旁边(如果您已更改多个文件,并且想要暂存所有文件)。

    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. A commit message, with "Change haiku text and styles" entered, and the "Commit" button are highlighted with an orange outline.

  4. 点击 发布分支

    Screenshot of the "Source control" side bar showing the "Publish Branch" button.

  5. 在“仓库名称”下拉菜单中,输入新仓库的名称,然后选择**发布到 GitHub 私有仓库**或**发布到 GitHub 公共仓库**。

    Screenshot of the repository name dropdown in VS Code. Two options are shown, for publishing to a private or a public repository.

    新仓库的所有者将是您创建代码空间的 GitHub 帐户。

  6. 在编辑器右下角弹出的窗口中,点击**在 GitHub 上打开**,在 GitHub.com 上查看新仓库。在新仓库中,查看 `haikus.json` 文件,并检查您在代码空间中所做的更改是否已成功推送到仓库。

    Screenshot of a confirmation message for a successfully published repository, showing the "Open on GitHub" button.

使用扩展进行个性化

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

  1. 在活动栏中,点击扩展图标。

    Screenshot of the Activity Bar. The Extensions icon is highlighted with an orange outline.

  2. 在搜索栏中,输入 `fairyfloss` 并点击**安装**。

    Screenshot of the "Extensions: Marketplace" side bar. "fairyfloss" is entered into the search box and, below it, the "fairyfloss" extension is displayed, with an "Install" button.

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

    Screenshot of the "Select Color Theme" dropdown, with the "fairyfloss" theme selected.

关于设置同步

您可以启用设置同步,以跨设备和 VS Code 实例同步扩展和其他设置。您的同步设置缓存在云中。如果在代码空间中打开了设置同步,您在代码空间中对设置所做的任何更新都会推送到云,而您从其他地方推送到云的任何更新都会拉取到您的代码空间。有关更多信息,请参阅“为您的帐户个性化 GitHub 代码空间”。

下一步

您已成功在代码空间中创建、个性化和运行您的第一个应用程序,但还有更多内容有待探索!以下是一些有助于您使用 GitHub 代码空间迈出下一步的资源。

进一步阅读