Quickstart for Codespaces

简介

In this guide, you'll create a codespace from a template repository and explore some of the essential features available to you within the codespace.

From this quickstart, you will learn how to create a codespace, connect to a forwarded port to view your running application, use version control in a codespace, and personalize your setup with extensions.

For more information on exactly how Codespaces works, see the companion guide "Deep dive into Codespaces."

创建代码空间

1. Navigate to the template repository and select Use this template.

2. Name your repository, select your preferred privacy setting, and click Create repository from this template.

3. Navigate to the main page of the newly created repository. Under the repository name, use the Code drop-down menu, and in the Codespaces tab, click New codespace.

   

Running the application

Once your codespace is created, your repository will be automatically cloned into it. Now you can run the application and launch it in a browser.

1. Since this example uses a Node.js project, start the application by entering npm run dev in the terminal. 此命令执行 package.json 文件中的 dev 脚本，并启动样本仓库中定义的 web 应用程序。

   

   If you're following along with a different application type, enter the corresponding start command for that project.

2. When your application starts, the codespace recognizes the port the application is running on and displays a prompt to forward that port so you can connect to it.

   

3. 单击 Open in Browser（在浏览器中打开），在新选项卡中查看正在运行的应用程序。

Edit the application and view changes

1. Switch back to your codespace and open the haikus.json file by double-clicking it in the File Explorer.

2. Edit the text field of the first haiku to personalize the application with your own haiku.

3. Go back to the running application tab in your browser and refresh to see your changes.

   If you've closed the tab, open the Ports panel and click the Open in browser icon for the running port.

Committing and pushing your changes

Now that you've made a few changes, you can use the integrated terminal or the source view to commit and push the changes back to the remote.

1. 在活动栏中，单击 Source Control（源控制）视图。
2. 要暂存更改，请单击已更改文件旁边的 +；如果您更改了多个文件并且要全部暂存，请单击 Changes（更改）旁边的该按钮。
3. 输入提交消息，描述您所做的更改。
4. 要提交暂存的更改，请单击源控制侧栏顶部的复选标记。
   You can push the changes you've made. 这将应用这些更改到远程仓库上的上游分支。 如果您尚未准备好创建拉取请求，或者希望在 GitHub 上创建拉取请求，则可能需要这样做。
5. 在侧边栏的顶部，单击省略号 (...)。
6. 在下拉菜单中，单击 Push（推送）。

Personalizing with an extension

在代码空间内，您可以访问 Visual Studio Code Marketplace。 For this example, you'll install an extension that alters the theme, but you can install any extension that is useful for your workflow.

1. 在左侧栏中，单击扩展图标。

2. 在搜索栏中，输入 fairyfloss 并安装 fairyfloss 扩展。

   

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

   

4. Changes you make to your editor setup in the current codespace, such as theme and keyboard bindings, are synced automatically via Settings Sync to any other codespaces you open and any instances of Visual Studio Code that are signed into your GitHub account.

后续步骤

您已经成功创建、个性化并在代码空间中运行了第一个应用程序，但还有很多需要探索的地方！ 以下是一些帮助您对 Codespaces 执行后续操作的有用资源：

• Deep dive: This quickstart presented some of the features of Codespaces. The deep dive looks at these areas from a technical standpoint.
• Setting up your project for Codespaces: These guides provide information on setting up your project to use Codespaces with specific languages
• Configuring Codespaces for your project: This guide provides details on creating a custom configuration for Codespaces for your project.

延伸阅读

• Enabling Codespaces for your organization
• Managing billing for Codespaces in your organization