VS Code Dev Containers 如何让团队共享一致开发环境

如果团队成员各自安装不同 Node.js 版本，最常见的结果不是代码立刻报错，而是依赖安装、格式化和断点调试出现“在我电脑上没问题”的差异。VS Code Dev Containers 的做法是把开发工具链写进仓库里的 .devcontainer/devcontainer.json，成员拉取项目后按同一份配置重开容器。

官方地址：https://code.visualstudio.com/docs/devcontainers/containers

1. 先把团队入口固定下来

先确认 Docker 正在运行，再打开项目文件夹。按路径 Extensions → 搜索 Dev Containers → Install 安装扩展。随后按 F1 打开命令面板，执行 Dev Containers: Add Dev Container Configuration Files...，选择适合项目的 Node.js 模板；如果仓库已有 Dockerfile，也可以在这里选择复用。

看到项目树出现 .devcontainer/devcontainer.json，并且命令面板出现 Reopen in Container，说明入口已经生成。此时先不要急着改一堆设置，团队一致性首先来自“配置文件跟着仓库走”。

2. 用一份 devcontainer.json 固化工具链

打开刚生成的文件，保留模板结构，把关键字段收敛到团队真正需要的内容。下面示例使用预构建镜像；postCreateCommand 假定仓库提交了锁文件，没有锁文件时改成 npm install。

{
  // 用固定的开发容器镜像，避免成员各自安装运行时。
  "image": "mcr.microsoft.com/devcontainers/typescript-node",
  "customizations": {
    "vscode": {
      // 这些扩展会安装在容器侧，而不是只装在本机。
      "extensions": ["dbaeumer.vscode-eslint"],
      // 把保存时格式化作为团队默认行为。
      "settings": {"editor.formatOnSave": true}
    }
  },
  // 让容器内的开发服务器可以从本机访问。
  "forwardPorts": [3000],
  // 创建容器后自动安装锁定版本的依赖。
  "postCreateCommand": "npm ci"
}

保存后，如果只是改了编辑器设置可以先重载窗口；如果改了镜像、Feature 或创建后命令，应执行 Dev Containers: Rebuild and Reopen in Container，否则旧容器可能继续使用旧配置。

3. 重开容器并确认调试发生在容器内

按 F1 执行 Dev Containers: Reopen in Container，等待构建和依赖安装结束。重连后打开 Terminal → New Terminal，运行下面的检查命令；它的目的不是比较版本高低，而是确认命令执行位置。

# 在 VS Code 的容器终端中确认当前工作目录和 Node.js 是否可用。
pwd
node --version
npm --version

接着走 Run and Debug → create a launch.json file → Node.js，选择项目已有的启动文件，设置一个断点并按 F5。官方文档说明，文件夹已经在容器中打开时，调试器会在远程主机启动应用并连接调试会话；因此真正的成功信号是左下角绿色远程状态、终端位于容器工作区、断点命中，而不是只看到构建通知。

常见问题

为什么扩展装过了，容器里仍然没有？

本机扩展和容器内扩展是两组安装位置。检查 customizations.vscode.extensions 是否写入扩展 ID，并在扩展视图里确认它位于容器分组；修改后重建容器。

为什么改了 devcontainer.json 却没有生效？

普通设置可重载窗口，镜像、端口和 postCreateCommand 这类创建阶段配置应执行 Rebuild and Reopen in Container，让新配置重新参与创建。

绿色远程状态出现了，是否就代表调试一定在容器内？

它只能证明窗口已连接容器。还要结合容器终端中的 pwd、运行时命令输出和实际断点命中共同判断；如果 F5 启动的是本机任务，需回到 launch.json 和启动配置检查目标。