Quickstart for Codespaces

Try out Codespaces in 5 minutes.

代码空间可用于使用 GitHub Team 或 GitHub Enterprise Cloud 的组织。 更多信息请参阅“GitHub 的产品”。

简介

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 应用程序。

    终端中的 npm run dev

    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. Port Forwarding Panel

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. 要提交暂存的更改,请单击源控制侧栏顶部的复选标记。 Click the check mark icon
    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 主题。

    选择 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 执行后续操作的有用资源:

延伸阅读

此文档对您有帮助吗?

隐私政策

帮助我们创建出色的文档!

所有 GitHub 文档都是开源的。看到错误或不清楚的内容了吗?提交拉取请求。

做出贡献

或者, 了解如何参与。