VSCode与GitHub Codespaces组合提供无需本地配置的云端开发环境：一、通过GitHub网页直接启用VSCode Web版；二、用VSCode桌面端远程连接云端容器；三、通过devcontainer.json自定义开发环境；四、配置端口转发实现实时Web预览。
如果您正在寻找一种无需本地配置即可立即开始编码的开发体验，VSCode与GitHub Codespaces的组合可能正是您需要的云端协作方案。以下是实现该环境协同工作的关键路径：
本文运行环境：MacBook Air，macOS Sequoia。
一、在GitHub Codespaces中直接启用VSCode Web界面
GitHub Codespaces原生集成了基于Web的VSCode编辑器，无需安装任何客户端即可访问完整功能，所有操作均在浏览器中实时执行，依赖项由远程容器自动加载。
1、登录GitHub账号，进入目标仓库页面。
2、点击绿色“Code”按钮，切换至“Codespaces”标签页。
3、点击“Create codespace on main”按钮启动新环境。
4、等待初始化完成后，浏览器将自动加载VSCode Web版界面，左侧资源管理器、顶部命令面板、底部终端全部可用。
二、通过VSCode桌面端远程连接Codespaces
VSCode桌面应用可通过官方扩展实现与Codespaces的无缝桥接，本地客户端仅作为前端界面，全部计算与存储均发生在云端容器中，本地磁盘不保存项目副本。
1、在VSCode桌面端安装“GitHub Codespaces”扩展。
2、按Cmd+Shift+P（Mac）调出命令面板，输入“Codespaces: Create New Codespace”。
3、选择目标仓库及分支，确认创建规格（如CPU/内存配置）。
4、连接成功后，状态栏右下角显示“Codespaces”标识，且文件资源管理器中呈现远程容器内的完整目录结构。
三、自定义devcontainer.json配置开发环境
通过devcontainer.json文件可精确声明容器操作系统、预装工具链、端口转发规则及启动脚本，确保每次新建Codespace都具备完全一致的开发上下文。
1、在仓库根目录创建.devcontainer文件夹。
2、在其中新建devcontainer.json文件，写入基础配置对象。
3、指定image字段为mcr.microsoft.com/vscode/devcontainers/python:3.11，或使用Dockerfile路径。
4、在features数组中添加git、github-cli、node等必要工具，保存后重新构建容器，新环境将自动安装全部声明组件。
四、启用端口转发并实时预览Web应用
Codespaces默认隔离网络端口，需显式声明需暴露的本地端口，系统会为其分配唯一公共URL，支持跨设备即时访问运行中的服务。
1、在VSCode命令面板中执行“Codespaces: Forward Port from Container”。
2、输入要转发的端口号（如3000）。
3、在弹出的端口列表中点击对应条目右侧的地球图标。
4、浏览器将自动打开https://.githubpreview.dev，展示正在Codespaces中运行的本地服务。
