简介
在本指南中,您将从模板存储库创建代码空间,并探索代码空间中可用的一些基本功能。
在本快速入门中,您将了解如何创建代码空间、连接到转发的端口以查看正在运行的应用程序、在代码空间中使用版本控制以及使用扩展个性化设置。
有关 Codespaces 如何工作的更多信息,请参阅配套指南“深入了解 Codespaces”。
创建代码空间
-
导航到 template repository(模板存储库) 并选择 Use this template(使用此模板)。
-
命名存储库,选择首选隐私设置,然后单击 Create repository from template(从模板创建存储库)。
-
导航到新创建的存储库的主页。 在存储库名称下,使用 代码下拉菜单,然后在Codespaces(代码空间)选项卡中,单击 Create codespace on main(在主分支上创建代码空间)。
运行应用程序
创建代码空间后,您的存储库将自动克隆到其中。 现在,您可以运行该应用程序并在浏览器中启动它。
-
由于此示例使用 Node.js 项目,因此通过在终端中输入
npm run dev
来启动应用程序。 此命令执行 package.json 文件中的dev
脚本,并启动样本仓库中定义的 web 应用程序。如果按照其他应用程序类型进行操作,请为该项目输入相应的启动命令。
-
当应用程序启动时,代码空间会识别运行应用程序的端口,并显示提示,让您知道它已被转发。
-
单击 Open in Browser(在浏览器中打开),在新选项卡中查看正在运行的应用程序。
编辑应用程序并查看更改
-
切换回代码空间,并通过在文件资源管理器中双击
haikus.json
文件来打开该文件。 -
编辑第一个俳句的
文本
字段,以使用您自己的俳句个性化应用程序。 -
返回到浏览器中正在运行的应用程序选项卡,然后刷新以查看所做的更改。
如果已关闭选项卡,请打开“Ports(端口)”面板,然后对运行的端口单击 Open in browser(在浏览器中打开)图标。
提交和推送更改
现在,您已经进行了一些更改,可以使用集成终端或源视图提交更改并将其推送回远程数据库。
- 在活动栏中,单击 Source Control(源控制)视图。
- 要暂存更改,请单击已更改文件旁边的 +;如果您更改了多个文件并且要全部暂存,请单击 Changes(更改)旁边的该按钮。
- 输入提交消息,描述您所做的更改。
- 要提交暂存的更改,请单击源控制侧栏顶部的复选标记。
您可以推送所做的更改。 这将应用这些更改到远程仓库上的上游分支。 如果您尚未准备好创建拉取请求,或者希望在 GitHub 上创建拉取请求,则可能需要这样做。 - 在侧边栏的顶部,单击省略号 (...)。
- 在下拉菜单中,单击 Push(推送)。
使用扩展进行个性化设置
在代码空间中,您可以访问 Visual Studio 代码市场。 在本示例中,您将安装可更改主题的扩展,但您可以安装对工作流程有用的任何扩展。
-
在左侧栏中,单击扩展图标。
-
在搜索栏中,输入
fairyfloss
并安装 fairyfloss 扩展。 -
从列表中选择
fairyfloss
主题。 -
在当前代码空间中对编辑器设置所做的更改,如主题和键盘绑定,将通过 Settings Sync(设置同步)自动同步到您打开的任何其他代码空间以及登录到您 GitHub 帐户的任何 Visual Studio Code 实例。
后续步骤
您已经成功创建、个性化并在代码空间中运行了第一个应用程序,但还有很多需要探索的地方! 以下是一些帮助您对 Codespaces 执行后续操作的有用资源:
- 深入探讨:本快速入门介绍了 Codespaces 的一些功能。 从技术角度深入探讨这些领域。
- 设置 Codespaces 的项目:这些指南提供了有关设置项目使用特定语言的 Codespaces 的信息。
- 为项目配置 Codespaces :本指南提供有关为项目 Codespaces 创建自定义配置的详细信息。