VS Code 开发容器实战：在 Docker 容器中构建、运行并调试 Code - OSS

VS Code 开发容器实战在 Docker 容器中构建、运行并调试 Code - OSS【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscodeVisual Studio Code 仓库内置了一套完整的 Dev Container 配置.devcontainer目录开发者只需一个装有 Docker 的本地机器就能在隔离容器中获得带图形桌面的完整 Code - OSS 构建环境——包括 VNC 远程桌面、预装的开发工具链和一键调试配置。读完本文你将掌握该开发容器的完整配置结构devcontainer.json、Dockerfile、初始化脚本、本地与 GitHub Codespaces 两种启动方式以及容器内构建并调试 Code - OSS 的具体命令与原理。开发容器配置总览仓库中的开发容器由.devcontainer目录下的 5 个文件定义各文件的分工如下文件作用devcontainer.json容器构建与运行配置构建参数、features、端口转发、卷挂载、扩展预装Dockerfile基于typescript-node:24-bookworm基础镜像安装 Code - OSS 开发所需组件install-vscode.sh构建镜像时执行的脚本添加 Microsoft 软件源并安装code-insiders及原生依赖post-create.sh容器创建后执行npm i和npm run electron预热依赖与 Electrondevcontainer-lock.json锁定三个 feature 的版本与镜像摘要保证构建可复现devcontainer.json 关键配置解析devcontainer.json 中的每一项都有明确的用途结合配置内容逐条说明{ name: Code - OSS, build: { dockerfile: Dockerfile }, features: { ghcr.io/devcontainers/features/desktop-lite:: {}, ghcr.io/devcontainers/features/rust:: {}, ghcr.io/devcontainers/features/sshd:1: {} }, containerEnv: { DISPLAY: // 允许 Dev Containers 扩展设置 DISPLAY之后脚本会补回默认值 }, overrideCommand: false, privileged: true, mounts: [ { source: vscode-dev, target: /vscode-dev, type: volume } ], postCreateCommand: ./.devcontainer/post-create.sh, forwardPorts: [6080, 5901], hostRequirements: { memory: 9gb } }featuresdesktop-lite提供轻量 X 桌面与 VNC 服务对应后文的 noVNC 6080 端口与 VNC 5901 端口rust提供 Rust 工具链仓库cli/目录下有 Rust 编写的 CLI 模块sshd提供 SSH 接入能力。devcontainer-lock.json 中锁定了具体版本desktop-lite 1.2.8、rust 1.5.0、sshd 1.1.0并附带 sha256 摘要用于完整性校验避免 feature 上游升级破坏构建。DISPLAY: 刻意留空让 Dev Containers 扩展在本地已配置显示环境时注入宿主的DISPLAY值这样容器内的桌面应用会直接显示在本地窗口中。当本地没有该变量时Dockerfile 第 11 行会往~/.bashrc和~/.zshrc写入export DISPLAY${DISPLAY:-:1}回退到容器内部的:1显示。privileged: true容器以特权模式运行以支持桌面与 sshd 等 feature 在容器内正常工作。mounts挂载名为vscode-dev的命名卷到/vscode-dev路径。这个卷专门用于存放 npm 缓存等可复用数据见下文 Dockerfile 部分使容器重建后无需重新下载依赖。postCreateCommand容器创建完成后自动执行 post-create.sh其内容为npm i和npm run electron即预装依赖并下载 Electron 二进制省去首次手动运行的等待。forwardPorts: [6080, 5901]自动转发两个端口并在portsAttributes中分别标注为 VNC web client (noVNC) 与 VNC TCP portonAutoForward: silent表示静默转发、不弹窗打扰。hostRequirements: { memory: 9gb }声明宿主至少需要 9 GB 内存与下文本地启动建议一致。customizations预装 6 个扩展ESLint、EditorConfig、Pull Requests、GitHub Issue Notebooks、Self-host Test Provider、Resource Monitor并关闭 Resource Monitor 的电池与 CPU 频率显示容器内无意义。overrideCommand: false不覆盖 Dockerfile 中的CMD。Dockerfile 的CMDchown node:node /vscode-dev sudo -u node mkdir -p /vscode-dev/npm-cache sleep inf实际是保底逻辑——先修正/vscode-dev属主、创建 npm 缓存目录再用sleep inf让容器在无交互场景下保持存活。Dockerfile 构建细节Dockerfile 的构建过程值得逐行理解基础镜像为mcr.microsoft.com/devcontainers/typescript-node:24-bookwormNode 24 Debian 12在构建阶段直接执行 install-vscode.sh添加 Microsoft 官方 apt 源amd64/arm64/armhf 三架构并安装code-insiders及libsecret-1-dev、libxkbfile-dev、libkrb5-dev等原生编译依赖——这些是 node-gyp 编译原生扩展如密钥存储、Kerberos 认证相关模块所必需的切换到非 root 用户node全局安装node-gyp把 npm 缓存目录软链到/vscode-dev/npm-cache即前面挂载的命名卷npm 缓存因此跨容器重建持久化重建容器后npm i会显著提速最后CMD阶段切回 root 修正卷属主并保持容器存活。快速开始本地容器前提条件已安装 VS Code 与 DockerDocker Desktop 或 Linux 上的 Docker。文档提供了两种方式徽章一键启动点击仓库 README 中的 Open in Dev Containers 徽章或等价链接VS Code 会自动安装 Dev Containers 扩展如未安装、把源码克隆到容器卷clone in volume并启动开发容器手动启动在本地机器安装 Docker DesktopmacOS或 Docker for Linux。重要运行完整构建Docker 至少需要4 核 CPU 和 8 GB 内存推荐9 GB 内存与devcontainer.json中hostRequirements.memory: 9gb的声明一致。macOS 用户或 Windows 上使用旧 Hyper-V 引擎的用户请通过 Docker 状态栏图标右键进入Preferences/Settings Resources Advanced修改资源上限。容器内已预装 Resource Monitor 扩展可在状态栏实时观察 CPU/内存占用。安装 VS Code Stable 或 Insiders 及Dev Containers扩展。注意Dev Containers 扩展要求使用 Visual Studio Code 官方发行版而非 Code - OSS 本身来运行这是许可证要求。按Ctrl/Cmd Shift P或F1选择Dev Containers: Clone Repository in Container Volume...。提示虽然也可以直接挂载本地源码树但在 macOS 或 Windows Hyper-V 引擎上执行npm i等操作会很慢。建议 Windows 上使用 WSL 文件系统或统一使用 clone repository in container 方式——它使用命名卷named volume而非本地文件系统IO 性能更好。在输入框中填写仓库 URL或某个分支/PR 的 URL并回车。容器启动后按以下情况查看桌面如果本地或 Windows 上的 WSL设置了DISPLAY或WAYLAND_DISPLAY环境变量容器内的桌面应用会直接显示在本地窗口中若未设置则打开浏览器访问http://localhost:6080noVNC Web 客户端或用 VNC Viewer 之类的客户端连接localhost:5901密码为vscode。在 VS Code 或集成终端中启动的任何程序都会出现在这个桌面上。默认凭据提示VNC 默认密码为vscodeVNC 服务器运行在5901端口Web 客户端noVNC在6080端口——这两个端口正是devcontainer.json中forwardPorts声明并自动转发的端口。快速开始GitHub Codespaces在仓库的 GitHub 页面点击Code下拉菜单选择Open with Codespaces再点击New codespace。如提示选择机器规格选择Standard也是默认项。注意如果你的账号未加入 Codespaces 测试计划可能看不到这些选项。Codespace 在浏览器中运行起来后按Ctrl/Cmd Shift P或F1选择Ports: Focus on Ports View。端口列表中应能看到VNC web client (6080)——这个标签名直接来自devcontainer.json的portsAttributes配置。选中该行并点击地球图标在浏览器标签页中打开。提示如果看不到该端口按Ctrl/Cmd Shift P选择Forward a Port手动输入端口6080。新标签页中会看到 noVNC 界面点击Connect并输入密码vscode。之后在 VS Code 或集成终端中启动的任何程序都会显示在这里。使用 VS Code 客户端连接 CodespacesVNC 响应更流畅通过 VS Code 客户端访问 codespace 并使用 VNC Viewer 时VNC 响应可能更流畅。步骤安装 VS Code Stable 或 Insiders 及GitHub Codespaces扩展同样要求 VS Code 官方发行版。按Ctrl/Cmd Shift P或F1选择Codespaces: Create New Codespace配置如下仓库microsoft/vscode分支任选例如main之后可更换规格Standard4 核、8 GB。连接 codespace 后用 VNC Viewer 连接localhost:5901密码vscode。提示可能还需要把 VNC 客户端的Picture Quality设置为High才能获得全彩桌面。在 VS Code 或集成终端中启动的程序都会显示在 VNC 桌面中。上手构建并运行 Code - OSS桌面环境说明容器使用 Fluxbox 窗口管理器以保持轻量右键点击桌面可看到菜单。它兼容 GNOME 和 GTK 应用因此需要时可以在容器内安装其他图形工具。也可以用命令行工具set-resolution调整分辨率。构建并启动在本地 VS Code 客户端中打开终端Ctrl/Cmd Shift 执行npm i bash scripts/code.sh构建完成后按前文快速开始的方式连接浏览器6080或 VNC Viewer5901输入密码vscode即可看到 Code - OSS 窗口。容器环境下的启动细节scripts/code.sh 会检测运行环境。在容器内存在/.dockerenv标记文件时它会以--disable-dev-shm-usage参数启动 Code这是针对 Chromium 在容器中不释放共享内存、脚本流式加载可能耗尽资源的已知问题的规避手段参见脚本中引用 Chromium bug 1263267 的注释。此外脚本首次运行时会调用node build/lib/preLaunch.ts完成 Electron 下载与内置扩展编译设置VSCODE_SKIP_PRELAUNCH可跳过并导出VSCODE_DEV1、NODE_ENVdevelopment、ELECTRON_ENABLE_LOGGING1等开发模式环境变量。由于 post-create.sh 已在容器创建时执行过npm i与npm run electron首次手动运行这一步通常很快。调试 Code - OSS通过浏览器或 VNC Viewer 右上角的关闭按钮先关闭刚才启动的 Code - OSS 实例。回到本地 VS Code 客户端使用Run / Debug视图启动VS Code配置它通常是默认配置一般直接按F5即可。VS Code 是一个 compound 调试配置定义在 .vscode/launch.json 中它会同时启动/附加五个调试会话Launch VS Code Internal、Attach to Main Process端口 5875、Attach to Extension Host端口 5870、Attach to Shared Process端口 5879和Attach to Agent Host Process端口 5878并执行Ensure Prelaunch Dependencies前置任务stopAll: true表示停止时统一终止所有会话。注意如果启动超时可以调大 .vscode/launch.json 中 VS Code、Attach to Main Process、Attach to Extension Host 和 Attach to Shared Process 各配置的timeout值例如 Attach to Main Process 默认为30000各 Extension Host / Shared Process 会话默认0。不过通常先运行一次./scripts/code.sh完成 Electron 下载即可解决超时问题。稍等片刻Code - OSS 会带着附加好的调试器出现——至此你可以对主进程、扩展宿主等任意进程打断点调试。补充说明容器内预装了 VS Code Insiders可以直接用它打开容器中的代码进行开发命令为VSCODE_IPC_HOOK_CLI /usr/bin/code-insiders .清除VSCODE_IPC_HOOK_CLI是为了避免 Insiders 误连接到容器外宿主机的 VS Code IPC 通道。容器以非 root 的node用户运行主要工作负载Dockerfile 中USER node/vscode-dev命名卷在构建结束时统一修正属主保证 npm 缓存可写。整个开发体验依赖 Dev Containers 扩展的clone in volume能力源码与构建产物存放在容器命名卷中本地磁盘仅做客户端展示从而绕开 macOS / Windows Hyper-V 场景下跨文件系统 IO 缓慢的问题。小结.devcontainer目录用一份 devcontainer.json 加一份精简 Dockerfile 就把 Code - OSS 的开发环境完整容器化desktop-lite/sshd等 feature 加上锁文件保证环境一致命名卷持久化 npm 缓存加速重建postCreateCommand预热依赖forwardPorts打通 noVNC/VNC 访问最终配合bash scripts/code.sh与 .vscode/launch.json 的多进程调试复合配置在本地 Docker 或 GitHub Codespaces 中都能完成构建 → 运行 → 断点调试的完整闭环。【免费下载链接】vscodeVisual Studio Code项目地址: https://gitcode.com/GitHub_Trending/vscode6/vscode创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考