GitHub Codespaces 快速入门

快速入门 GitHub Codespaces。

本文内容

简介

在本指南中，您将从模板仓库创建一个代码空间，并探索代码空间中可用的一些核心功能。您将在浏览器版 Visual Studio Code 中工作，这也是 GitHub Codespaces 的默认编辑器。体验完本快速入门后，您可以在其他编辑器中使用 Codespaces，并且可以更改默认编辑器。文档末尾提供了相关链接。

通过本快速入门，您将学习如何创建代码空间、连接已转发的端口以查看运行中的应用程序、将代码空间发布到新仓库，以及使用扩展对环境进行个性化设置。

如需了解 GitHub Codespaces 的工作原理，请参阅配套指南 深入了解 GitHub Codespaces。

创建您的代码空间

  1. 前往 github/haikus-for-codespaces 模板仓库。

  2. 点击 Use this template（使用此模板），然后点击 Open in a codespace（在代码空间中打开）。

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

运行应用程序

代码空间创建完成后，模板仓库会自动克隆到其中。现在您可以运行应用程序并在浏览器中打开。

  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. 当您的应用程序启动时，代码空间会识别应用运行的端口，并弹出提示消息告知该端口已被转发。

    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. 切回代码空间，通过在资源管理器中点击 haikus.json 文件将其打开。

  2. 编辑首个 haiku 的 text 字段，以您自己的 haiku 对应用进行个性化。

  3. 返回浏览器中的运行应用标签页，刷新页面即可看到您所做的更改。

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

    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 文件旁的图标，或如果您修改了多个文件并希望一次性暂存全部，更改列表旁的 Changes 图标。

    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. 要提交暂存的更改，请输入描述本次修改的提交信息，然后单击 Commit。

    Screenshot of the "Source control" side bar. The commit message, "Change haiku text and styles," and the "Commit" button are outlined in orange.

  4. 单击 Publish Branch。

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

  5. 在 “Repository Name” 下拉框中输入新仓库的名称，然后选择 Publish to GitHub private repository（发布到 GitHub 私有仓库）或 Publish to GitHub public repository（发布到 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. 当编辑器右下角弹出提示时，单击 Open on GitHub，即可在 GitHub 上查看新仓库。进入新仓库后，打开 haikus.json 文件，检查您在代码空间所做的更改已成功推送至仓库。

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

使用扩展进行个性化

当您通过浏览器或 Visual Studio Code 桌面应用连接到代码空间时，可直接在编辑器中访问 Visual Studio Code Marketplace。本示例将安装一个更改主题的 VS Code 扩展，您也可以安装任何对工作流有帮助的扩展。

  1. 在活动栏中，单击扩展图标。

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

  2. 在搜索框中输入 fairyfloss，然后单击 Install（安装）。

    Screenshot of "Extensions: Marketplace". The search box shows "fairyfloss." The results show the "fairyfloss" extension with an "Install" button.

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

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

关于设置同步

您可以启用 Settings Sync 将扩展和其他设置在多设备及 VS Code 实例之间同步。同步的设置会缓存于云端。如果在代码空间中开启 Settings Sync，您在代码空间所做的设置更新会推送至云端，而您在其他地方推送到云端的更新也会拉取到代码空间中。更多信息请参见 个人化 GitHub Codespaces（针对您的账户）。

后续步骤

您已成功创建、个性化并运行了代码空间中的第一个应用程序，但仍有大量功能值得探索！以下资源可帮助您在 GitHub Codespaces 中迈出下一步。

延伸阅读

© . This site is unofficial and not affiliated with GitHub, Inc.