简介
在本指南中,您将从模板存储库创建 Codespace,并探索 Codespace 中提供的一些基本功能。您将在 Visual Studio Code 的浏览器版本中工作,该版本最初是 GitHub Codespaces 的默认编辑器。在尝试完此快速入门后,您可以在其他编辑器中使用 Codespaces,并且可以更改默认编辑器。本指南末尾提供了链接。
从本快速入门中,您将了解如何创建 Codespace、连接到转发的端口以查看正在运行的应用程序、将您的 Codespace 发布到新的存储库以及使用扩展个性化您的设置。
有关 GitHub Codespaces 的工作原理的详细信息,请参阅配套指南 "深入了解 GitHub Codespaces”。
创建您的 codespace
-
导航到 github/haikus-for-codespaces 模板仓库。
-
点击 使用此模板,然后点击 在 codespace 中打开。
运行应用程序
创建 codespace 后,模板仓库将自动克隆到其中。现在您可以运行应用程序并在浏览器中启动它。
-
当终端可用时,输入命令
npm run dev
。此示例使用 Node.js 项目,此命令运行package.json
文件中标记为“dev”的脚本,该脚本启动样本仓库中定义的 Web 应用程序。如果您正在使用其他类型的应用程序,请输入该项目的相应启动命令。
-
当您的应用程序启动时,codespace 会识别应用程序运行的端口,并显示一个弹出消息,让您知道端口已转发。
-
点击 在浏览器中打开,在新的标签页中查看正在运行的应用程序。
编辑应用程序并查看更改
-
切换回您的 codespace,并在资源管理器中点击
haikus.json
文件以打开它。 -
编辑第一个俳句的
text
字段,使用您自己的俳句个性化应用程序。 -
返回浏览器中正在运行的应用程序标签,并刷新以查看您的更改。
如果您已关闭浏览器标签页,请点击 VS Code 中的端口标签,将鼠标悬停在正在运行的端口的 本地地址 值上,然后点击 在浏览器中打开 图标。
提交和推送您的更改
现在您已经进行了一些更改,可以使用集成终端或源代码视图将您的工作发布到新的仓库。
-
在活动栏中,点击 源代码管理 视图。
-
要暂存您的更改,请点击 位于
haikus.json
文件旁边,或者位于 更改 旁边(如果您已更改多个文件,并且想要暂存所有文件)。 -
要提交已暂存的更改,请键入描述您所做更改的提交消息,然后点击 提交。
-
点击 发布分支。
-
在“仓库名称”下拉菜单中,输入新仓库的名称,然后选择**发布到 GitHub 私有仓库**或**发布到 GitHub 公共仓库**。
新仓库的所有者将是您创建代码空间的 GitHub 帐户。
-
在编辑器右下角弹出的窗口中,点击**在 GitHub 上打开**,在 GitHub.com 上查看新仓库。在新仓库中,查看 `haikus.json` 文件,并检查您在代码空间中所做的更改是否已成功推送到仓库。
使用扩展进行个性化
当您使用浏览器或 Visual Studio Code 桌面应用程序连接到代码空间时,您可以直接从编辑器访问 Visual Studio Code 市场。在本例中,您将安装一个更改主题的 VS Code 扩展,但您可以安装任何对您的工作流程有用的扩展。
-
在活动栏中,点击扩展图标。
-
在搜索栏中,输入 `fairyfloss` 并点击**安装**。
-
从列表中选择 `fairyfloss` 主题。
关于设置同步
您可以启用设置同步,以跨设备和 VS Code 实例同步扩展和其他设置。您的同步设置缓存在云中。如果在代码空间中打开了设置同步,您在代码空间中对设置所做的任何更新都会推送到云,而您从其他地方推送到云的任何更新都会拉取到您的代码空间。有关更多信息,请参阅“为您的帐户个性化 GitHub 代码空间”。
下一步
您已成功在代码空间中创建、个性化和运行您的第一个应用程序,但还有更多内容有待探索!以下是一些有助于您使用 GitHub 代码空间迈出下一步的资源。
- "深入了解 GitHub 代码空间": 此快速入门介绍了 GitHub 代码空间的一些功能。深入探讨从技术角度分析了这些领域。
- "将开发容器配置添加到您的仓库": 这些指南提供了有关设置您的仓库以使用 GitHub 代码空间与特定语言的信息。
- "开发容器简介": 本指南详细介绍了为您的项目创建代码空间的自定义配置。