{"meta":{"title":"GitHub Codespaces 快速入门","intro":"快速开始使用 GitHub Codespaces。","product":"Codespaces","breadcrumbs":[{"href":"/zh/codespaces","title":"Codespaces"},{"href":"/zh/codespaces/quickstart","title":"快速入门"}],"documentType":"article"},"body":"# GitHub Codespaces 快速入门\n\n快速开始使用 GitHub Codespaces。\n\n## 简介\n\n在本指南中，你将从模板存储库创建 codespace，并探索 codespace 中可用的一些基本功能。 你将使用 Visual Studio Code 的浏览器版本，该版本最初是 GitHub Codespaces 的默认编辑器。 尝试本快速入门后，可以在其他编辑器中使用 Codespaces，并且可以更改默认编辑器。 本指南末尾提供了相关链接。\n\n在本快速入门中，你将了解如何创建 codespace、连接到转发的端口以查看正在运行的应用程序、将 codespace 发布到一个新的存储库，以及通过扩展实现设置个性化。\n\n有关 GitHub Codespaces 如何工作的详细信息，请参阅配套指南 [深入了解 GitHub Codespaces](/zh/codespaces/about-codespaces/deep-dive)。\n\n## 创建代码空间\n\n1. 导航到 [github/haikus-for-codespaces](https://github.com/github/haikus-for-codespaces) 模板存储库。\n2. 单击“使用此模板”，然后单击“在 codespace 中打开”。\n\n \n\n## 运行应用程序\n\n创建 codespace 后，模板存储库将自动克隆到其中。 现在，您可以运行该应用程序并在浏览器中启动它。\n\n1. 当终端可用时，输入命令 `npm run dev`。 此示例使用 Node.js 项目，此命令运行 `package.json` 文件中标记为“dev”的脚本，该脚本启动示例存储库中定义的 Web 应用程序。\n\n \n\n 如果按照其他应用程序类型进行操作，请为该项目输入相应的启动命令。\n\n2. 当应用程序启动时，codespace 会识别运行应用程序的端口，并显示一条弹出消息，说明该端口已转发。\n\n \n\n3. 单击“在浏览器中打开”，在新选项卡中查看正在运行的应用程序。\n\n## 编辑应用程序并查看更改\n\n1. 切换回 codespace，并通过在文件资源管理器中单击 `haikus.json` 文件来打开该文件。\n\n2. 编辑第一个俳句中的 `text` 字段，以便用您自己的俳句个性化应用程序。\n\n3. 返回到浏览器中正在运行的应用程序选项卡，然后刷新以查看所做的更改。\n\n 如果已关闭浏览器标签页，请单击 VS Code 中的“Ports”选项卡，将鼠标悬停在正在运行的端口的“Local Address”值上，然后单击“Open in Browser”图标\\*\\*\\*\\*\\*\\*\\*\\*。\n\n \n\n## 提交和推送更改\n\n现在，你已经进行了一些更改，可以使用集成终端或源视图将工作发布到新的存储库。\n\n1. 在活动栏中，单击“源代码管理”视图。\n\n \n\n2. 若要暂存更改，请单击 `haikus.json` 文件旁边的 ，如果更改了多个文件并希望全部暂存，请单击“更改”旁边的按钮。\\*\\*\\*\\*\n\n \n\n3. 若要提交暂存更改，请键入描述所做更改的提交消息，然后单击“提交”。\n\n \n\n4. 单击“发布分支”。\n\n \n\n5. 在“存储库名称”下拉列表中，键入新存储库的名称，然后选择“发布到 GitHub 专用存储库”或“发布到 GitHub 公共存储库”。\n\n \n\n 新存储库的所有者将是创建 codespace 时所使用的 GitHub 帐户。\n\n6. 在编辑器右下角显示的弹出窗口中，单击“**在 GitHub 上打开**”，查看 GitHub 上的新存储库。 在新存储库中，查看 `haikus.json` 文件，并检查 codespace 中所做的更改是否已成功推送到存储库。\n\n \n\n## 使用扩展进行个性化设置\n\n使用浏览器或 Visual Studio Code 桌面应用程序连接到 codespace 时，可以直接从编辑器访问 Visual Studio Code 市场。 在本示例中，你将安装可更改主题的 VS Code 扩展，但也可以安装对工作流程有用的任何扩展。\n\n1. 单击活动栏中的“扩展”图标。\n\n \n\n2. 在搜索栏中，键入 `fairyfloss` 并单击“安装”。\n\n \n\n3. 从列表中选择 `fairyfloss` 主题。\n\n \n\n### 关于设置同步\n\n可以启用设置同步，以跨设备和 VS Code 的实例同步扩展和其他设置。 同步的设置缓存在云中。 如果在 codespace 中打开了“设置同步”，则会将你在 codespace 中对设置所做的更新推送到云中，并将你从其他位置推送到云的更新拉入 codespace。 有关详细信息，请参阅 [个性化你帐户的 GitHub Codespaces](/zh/codespaces/setting-your-user-preferences/personalizing-github-codespaces-for-your-account#settings-sync)。\n\n## 后续步骤\n\n您已经成功创建、个性化并在代码空间中运行了第一个应用程序，但还有很多需要探索的地方！ 以下是一些有用的资源，可以帮助你对 GitHub Codespaces 执行后续步骤。\n\n* [深入了解 GitHub Codespaces](/zh/codespaces/about-codespaces/deep-dive)：本快速入门介绍了 GitHub Codespaces 的一些功能。 从技术角度深入探讨这些领域。\n* [将开发容器配置添加到存储库](/zh/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration)：这些指南提供了有关如何设置您的仓库，以使用 GitHub Codespaces 处理特定语言的信息。\n* [开发容器简介](/zh/codespaces/setting-up-your-project-for-codespaces/adding-a-dev-container-configuration/introduction-to-dev-containers)：该指南提供有关创建用于项目的 Codespaces 的自定义配置的详细信息。\n\n## 其他阅读材料\n\n* [为组织启用或禁用 GitHub Codespaces](/zh/codespaces/managing-codespaces-for-your-organization/enabling-or-disabling-github-codespaces-for-your-organization)\n* [在 Visual Studio Code 中使用 GitHub Codespaces](/zh/codespaces/developing-in-a-codespace/using-github-codespaces-in-visual-studio-code)\n* [将 GitHub Codespaces 与 GitHub CLI 配合使用](/zh/codespaces/developing-in-a-codespace/using-github-codespaces-with-github-cli)\n* [为 GitHub Codespaces 设置默认编辑器](/zh/codespaces/setting-your-user-preferences/setting-your-default-editor-for-github-codespaces)。\n* [管理组织中的 GitHub Codespaces 成本](/zh/codespaces/managing-codespaces-for-your-organization/managing-the-cost-of-github-codespaces-in-your-organization)"}