VSCode与GitHub Codespaces的协同工作流

VSCode 与 GitHub Codespaces 协同实现本地与云端开发环境无缝切换：支持连接现有 Codespace、本地一键创建新 Codespace、同步设置与扩展、通过 devcontainer.json 统一环境配置。

如果您希望在本地开发环境与云端开发环境之间无缝切换，VSCode 与 GitHub Codespaces 的协同可以提供一致的编辑体验和即时可用的远程开发环境。以下是实现二者高效协同的具体操作路径：

本文运行环境：MacBook Air，macOS Sequoia。

一、通过 VSCode 连接现有 Codespace

此方法利用 VSCode 的 Remote - SSH 扩展或官方 GitHub Codespaces 扩展，直接接入已创建的云端容器实例，保持本地界面习惯的同时运行远程环境。

1、在 GitHub.com 上进入目标仓库，点击 Code → Open with Codespaces → Create codespace on main，等待环境初始化完成。

2、在 VSCode 中安装 GitHub Codespaces 扩展（由 GitHub 官方发布）。

3、点击 VSCode 左下角绿色远程连接状态栏，选择 Connect to GitHub Codespace，从列表中选取刚创建的实例。

4、连接成功后，VSCode 窗口右下角显示 Codespace 标识，文件资源管理器与终端均指向远程容器内路径。

二、从本地 VSCode 快速启动新 Codespace

该方式跳过网页端操作，在本地编辑器中一键触发云端环境构建，适用于需频繁切换分支或验证不同配置的场景。

1、确保本地 VSCode 已登录 GitHub 账户（通过 Command Palette → GitHub: Login to GitHub）。

2、打开任意本地克隆的 GitHub 仓库文件夹，按下 Cmd+Shift+P（macOS）调出命令面板。

3、输入并选择 Codespaces: Create New Codespace...，随后选择目标仓库与分支。

4、VSCode 自动跳转至新 Codespace 页面并建立连接，无需离开编辑器即可开始编码。

商务通(在线客服系统)

一款无需安装的即时交流系统，只需申请一个帐号，将一段代码嵌入贵站网页中，就可以让客服人员发现所有到达您网站的访客，而且可以看到访客的来源、使用的搜索引擎等，您可以主动发起对话与访客沟通，进行产品推销，从而大大提高产品销售成功率。 还是一款协同管理软件，在保持与客户信息通畅的同时，也保持公司内部之间的信息交流，从而提高企业的工作效率和客户服务质量。 管理员帐号：biiz.cn 密码：biiz.cn

0

查看详情

三、同步本地设置与扩展到 Codespace

VSCode 支持将用户级设置、快捷键、代码片段及已安装扩展自动同步至 Codespace，避免重复配置，保障开发一致性。

1、在本地 VSCode 中启用设置同步：点击左下角齿轮图标 → Turn on Settings Sync，使用 GitHub 账户授权。

2、在同步设置中勾选 Extensions、Settings、Keybindings 和 Snippets。

3、首次连接 Codespace 后，VSCode 提示 Apply settings from your settings sync?，点击 Yes 即完成同步。

4、若部分扩展在 Codespace 中不可用（如依赖本地 GUI 或硬件），VSCode 将自动跳过并记录于通知中心。

四、使用 devcontainer.json 定义统一开发环境

通过项目根目录下的 devcontainer.json 文件，可声明 Codespace 及本地 Remote-Container 模式共用的运行时、工具链与端口映射规则，实现环境定义即代码。

1、在仓库中新建 .devcontainer/devcontainer.json 文件，写入基础配置，例如指定 Ubuntu 映像与预装 Node.js 版本。

2、在配置中添加 "customizations.vscode.extensions" 字段，列出必需扩展 ID（如 ms-python.python、esbenp.prettier-vscode）。

3、配置 "forwardPorts" 以暴露本地可访问的端口（如 3000、5000），Codespace 自动启用端口转发并生成可点击链接。

4、保存后，重新构建 Codespace（右键资源管理器中 .devcontainer 文件夹 → Rebuild Container）或重启本地 Remote-Container 会话。

以上就是VSCode与GitHub Codespaces的协同工作流的详细内容，更多请关注php中文网其它相关文章！