Skip to main content

在代码空间中开发

可以使用浏览器、Visual Studio Code、JetBrains IDE 或在命令 shell 中在 codespace 中工作。

注意:在 JetBrains IDE 中使用 GitHub Codespaces 目前为公开 beta 版本,可能会随时发生更改。

关于使用 GitHub Codespaces 进行开发

可以使用所选工具在 codespace 中开发代码:

  • 命令 shell,通过使用 GitHub CLI 启动的 SSH 连接。
  • JetBrains IDE 之一,通过 JetBrains 网关。
  • Visual Studio Code 桌面应用程序。
  • Visual Studio Code 的基于浏览器的版本。

使用本文中的选项卡,可以在每种工作方式的信息之间切换。 你当前位于 Visual Studio Code 的 Web 浏览器版本的选项卡上。

在浏览器的 codespace 中工作

在浏览器中使用 Codespaces 可提供功能齐全的开发体验。 可以编辑代码、调试、使用 Git 命令以及运行应用程序。

用户界面五个主要组件的带注释的屏幕截图:边栏、活动栏、编辑器、面板、状态栏。

用户界面的主要组件包括:

  1. 边栏 - 默认情况下,此区域显示你在资源管理器中的项目文件。
  2. 活动栏 - 这将显示视图并提供在它们之间切换的方法。 您可以通过拖放来重新排列视图。
  3. 编辑器 - 这是编辑文件的位置。 可以右键单击文件的选项卡以访问选项,例如在资源管理器中查找文件。
  4. 面板 - 这是可以查看输出和调试信息的位置,以及集成终端的默认位置。
  5. 状态栏 - 此区域提供有关 codespace 和项目的有用信息。 例如,分支名称、配置端口等。

为获取 GitHub Codespaces 最佳使用体验,建议使用基于 Chromium 的浏览器,如 Google Chrome 或 Microsoft Edge。有关详细信息,请参阅“GitHub Codespaces 客户端故障排除”。

自定义存储库的 codespace

可以通过创建或更新存储库的开发容器配置来自定义为存储库创建的 codespace。 可以从 codespace 中执行此操作。 更改开发容器配置后,可以通过为 codespace 重新生成 Docker 容器来将更改应用于当前 codespace。 有关详细信息,请参阅“开发容器简介”。

个性化代码空间

可以使用 dotfiles 存储库和设置同步为创建的任何 codespace 个性化 codespace 环境的各个方面。 个性化可以包括 shell 首选项和其他工具。 有关详细信息,请参阅“个性化你帐户的 GitHub Codespaces”。

从代码空间运行应用程序

您可以转发代码空间中的端口以测试和调试应用程序。 还可以管理端口协议,并在组织内或公开共享端口。有关详细信息,请参阅“代码空间中的转发端口”。

提交更改

在对 codespace 进行更改(无论是添加新代码还是更改配置)时,需要提交更改。 将配置更改提交到存储库可确保从此存储库创建 codespace 的其他任何人都具有相同的配置。 你所做的任何自定义,例如添加 VS Code 扩展,都会提供给所有用户。

在本教程中,你从模板存储库创建了 codespace,因此 codespace 中的代码尚未存储在存储库中。 可以通过将当前分支发布到 GitHub.com 来创建存储库。

如需相关信息,请参阅“在代码空间中使用源控制”。

使用 Visual Studio Code Command Palette

Visual Studio Code Command Palette 允许你访问和管理 Codespaces 和 Visual Studio Code 的许多功能。 有关详细信息,请参阅“在 GitHub Codespaces 中使用 Visual Studio Code 命令面板”。

导航到现有代码空间

  1. 可以在“你的 codespace”页面上查看创建的每个可用代码空间。 要显示此页面,请在 GitHub.com 的左上角,选择 ,然后单击“ Codespace”****。 这会转到 github.com/codespaces

  2. 单击你要在其中进行开发的 codespace 的名称。

    https://github.com/codespaces 页面上的三个 codespace 列表的屏幕截图。

或者,可以通过导航到特定存储库,单击“ 代码”按钮并选择 Codespaces 选项卡来查看该存储库的任何 codespace。下拉菜单将显示该存储库的所有活动 codespace。********

使用本文中的选项卡,可以在每种工作方式的信息之间切换。 你当前位于 Visual Studio Code 的选项卡上。

在 VS Code 的 codespace 中工作

GitHub Codespaces 为你提供完整的 Visual Studio Code 开发体验。 使用 VS Code 在 codespace 中开发时,你可以编辑代码、调试和使用 Git 命令。 有关详细信息,请参阅 VS Code 文档

用户界面五个主要组件的带注释的屏幕截图:边栏、活动栏、编辑器、面板、状态栏。

用户界面的主要组件包括:

  1. 边栏 - 默认情况下,此区域显示你在资源管理器中的项目文件。
  2. 活动栏 - 这将显示视图并提供在它们之间切换的方法。 您可以通过拖放来重新排列视图。
  3. 编辑器 - 这是编辑文件的位置。 可以右键单击文件的选项卡以访问选项,例如在资源管理器中查找文件。
  4. 面板 - 这是可以查看输出和调试信息的位置,以及集成终端的默认位置。
  5. 状态栏 - 此区域提供有关 codespace 和项目的有用信息。 例如,分支名称、配置端口等。

有关使用 VS Code 的详细信息,请参阅 VS Code 文档中的用户界面指南

可以直接从 VS Code 连接到你的 codespace。 有关详细信息,请参阅“在 Visual Studio Code 中使用 GitHub Codespaces”。

有关故障排除信息,请参阅“GitHub Codespaces 客户端故障排除”。

自定义存储库的 codespace

可以通过创建或更新存储库的开发容器配置来自定义为存储库创建的 codespace。 可以从 codespace 中执行此操作。 更改开发容器配置后,可以通过为 codespace 重新生成 Docker 容器来将更改应用于当前 codespace。 有关详细信息,请参阅“开发容器简介”。

个性化代码空间

可以使用 dotfiles 存储库和设置同步为创建的任何 codespace 个性化 codespace 环境的各个方面。 个性化可以包括 shell 首选项和其他工具。 有关详细信息,请参阅“个性化你帐户的 GitHub Codespaces”。

从代码空间运行应用程序

您可以转发代码空间中的端口以测试和调试应用程序。 还可以管理端口协议,并在组织内或公开共享端口。有关详细信息,请参阅“代码空间中的转发端口”。

提交更改

在对 codespace 进行更改(无论是添加新代码还是更改配置)时,需要提交更改。 将配置更改提交到存储库可确保从此存储库创建 codespace 的其他任何人都具有相同的配置。 你所做的任何自定义,例如添加 VS Code 扩展,都会提供给所有用户。

在本教程中,你从模板存储库创建了 codespace,因此 codespace 中的代码尚未存储在存储库中。 可以通过将当前分支发布到 GitHub.com 来创建存储库。

如需相关信息,请参阅“在代码空间中使用源控制”。

使用 Visual Studio Code Command Palette

Visual Studio Code Command Palette 允许你访问和管理 Codespaces 和 Visual Studio Code 的许多功能。 有关详细信息,请参阅“在 GitHub Codespaces 中使用 Visual Studio Code 命令面板”。

导航到现有代码空间

  1. 可以在“你的 codespace”页面上查看创建的每个可用代码空间。 要显示此页面,请在 GitHub.com 的左上角,选择 ,然后单击“ Codespace”****。 这会转到 github.com/codespaces

  2. 单击你要在其中进行开发的 codespace 的名称。

    https://github.com/codespaces 页面上的三个 codespace 列表的屏幕截图。

或者,可以通过导航到特定存储库,单击“ 代码”按钮并选择 Codespaces 选项卡来查看该存储库的任何 codespace。下拉菜单将显示该存储库的所有活动 codespace。********

使用本文中的选项卡,你可以在每种工作方式的信息之间切换。 你当前位于 JetBrains IDE 的选项卡上。

在 JetBrains IDE 中的 codespace 中工作

要将 GitHub Codespaces 与 JetBrains IDE 一起使用,必须已安装 JetBrains 网关。 有关安装 JetBrains 网关的信息,请参阅 JetBrains 网站

可以使用所选的 JetBrains IDE 在 codespace 中工作。 创建 codespace 后,可以使用 JetBrains 网关应用程序在首选 IDE 中打开 codespace。

使用 JetBrains IDE 在 codespace 中进行开发时,可以编辑代码、调试和使用 Git 命令。 有关各种 JetBrains IDE 的详细信息,请参阅 JetBrains 文档

IntelliJ IDEA 用户界面

在 GitHub Codespaces 文档中,我们使用 IntelliJ IDEA 作为具有代表性的 JetBrains IDE。 不同的 JetBrains IDE 可能具有不同的布局。

JetBrains IntelliJ IDEA 用户界面的六个主要组件的带注释的屏幕截图。

用户界面的主要组件包括:

  1. 导航栏 - 显示当前所选文件或目录的路径。 使用导航栏右侧的按钮执行各种操作,包括生成、运行或调试项目,或者运行 Git 命令以提交和推送更改。
  2. 项目工具窗口 - 显示项目的结构,并允许在编辑器中打开文件。
  3. GitHub Codespaces 工具窗口 - 单击工具窗口左侧栏中的 GitHub Codespaces 插件即可显示。 它显示有关 codespace 的信息,包括其显示名称和计算机类型。 此工具窗口顶部的按钮可用于:
    • 刷新活动 codespace 的工具窗口中的详细信息
    • 显示“你的 codespace”网页
    • 查看 codespace 创建日志
  4. 编辑器 - 这是编辑文件的地方。 可以右键单击文件的选项卡以访问选项,例如将选项卡移动到新窗口。
  5. 终端 - 单击主窗口底部的工具窗口栏中的“终端”(状态栏正上方),即可显示。 通过集成终端,无需切换到专用终端应用程序即可执行命令行任务。
  6. 状态栏 - 将鼠标悬停在状态栏左侧的图标上可查看工具列表。 单击图标可隐藏或显示工具窗口栏。 状态栏的右侧显示有关项目的信息,包括当前 Git 分支。

有关 IntelliJ IDEA 用户界面的详细信息,请参阅 IntelliJ IDEA 的 JetBrains 文档

自定义存储库的 codespace

可以通过创建或更新存储库的开发容器配置来自定义为存储库创建的 codespace。 可以从 codespace 中执行此操作。 更改开发容器配置后,可以通过为 codespace 重新生成 Docker 容器来将更改应用于当前 codespace。 有关详细信息,请参阅“开发容器简介”。

个性化代码空间

可以使用 dotfiles 存储库为创建的任何 codespace 个性化 codespace 环境的各个方面。 有关详细信息,请参阅“个性化你帐户的 GitHub Codespaces”。

提交更改

在对 codespace 进行更改(无论是添加新代码还是更改配置)之后,需要提交和推送更改。 将更改推送到存储库可确保从此存储库创建 codespace 的其他任何人都具有相同的配置。 这也意味着,为修改为存储库创建的 codespace 的配置所做的任何自定义都将可供使用该存储库的所有人使用。

有关详细信息,请参阅“在代码空间中使用源控制”。

延伸阅读

使用本文中的选项卡,可以在每种工作方式的信息之间切换。 当前位于 GitHub CLI 的选项卡上。

在命令 shell 中的 codespace 中工作

若要详细了解 GitHub CLI,请参阅“关于 GitHub CLI”。

可以使用 GitHub CLI 创建新的 codespace,或启动现有 codespace,然后通过 SSH 连接到它。 连接后,可以使用你喜欢的命令行工具在命令行上工作。

安装 GitHub CLI 并对 GitHub 帐户进行身份验证后,可以使用命令 gh codespace [<SUBCOMMAND>...] --help 浏览帮助信息。 或者,可以通过 https://cli.github.com/manual/gh_codespace 查看相同的参考信息。

有关详细信息,请参阅“将 GitHub Codespaces 与 GitHub CLI 配合使用”。