如何将VSCode与Docker无缝集成，实现容器内开发和调试？

技术教程
2025-10-22 20:06:02

安装Docker、VSCode及Dev Containers扩展；2. 在项目根目录创建.devcontainer文件夹并配置Dockerfile和devcontainer.json；3. 点击VSCode左下角绿色按钮打开容器，自动构建环境并进入开发。

如何将vscode与docker无缝集成，实现容器内开发和调试？

为了在 VSCode 中实现与 Docker 的无缝集成，进行容器内开发和调试，关键是利用 Dev Containers（Development Containers）功能。这一功能由 VSCode 的 Dev Containers 扩展提供，允许你将整个开发环境封装在容器中，真正做到“开箱即用”、环境一致、可复现。

1. 安装必要工具

确保本地已安装以下组件：

Docker：桌面版或引擎服务正常运行
VSCode：推荐使用最新稳定版本
Dev Containers 扩展：在扩展市场搜索 “Dev Containers” 并安装（官方扩展名为 ms-vscode-remote.remote-containers）

2. 创建容器化开发环境

VSCode 支持通过配置文件自动构建并进入容器环境。你需要在项目根目录下创建 .devcontainer 文件夹，并添加配置文件。

基本结构如下：

.devcontainer/
├── devcontainer.json
└── Dockerfile

示例：Dockerfile

定义开发所需的基础环境，例如 Node.js：

FROM node:18-slim
<h1>安装常用工具（可选）</h1><p>RUN apt-get update && apt-get install -y \
git \
curl \
vim \
&& rm -rf /var/lib/apt/lists/*</p><p>WORKDIR /workspace</p>

示例：devcontainer.json

Vheer

AI图像处理平台

260 查看详情 Vheer

告诉 VSCode 如何启动容器：

{
  "name": "My Dev Container",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "workspaceFolder": "/workspace",
  "remoteUser": "node",
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "ms-vscode.node-debug2"
      ],
      "settings": {
        "terminal.integrated.shell.linux": "/bin/bash"
      }
    }
  },
  "postAttachCommand": "npm install"
}

3. 启动容器内开发

完成配置后，执行以下步骤：

点击左下角绿色 >
选择 “Reopen in Container” 或 “Open Folder in Container…”
VSCode 将自动构建镜像、启动容器，并挂载当前项目目录
连接成功后，所有终端、编辑、调试操作都在容器内执行

此时打开的终端显示的是容器内部环境，npm、python、gcc 等命令均来自容器镜像。

4. 调试容器内应用

调试过程与本地几乎无异，只需注意路径和端口映射。

以 Node.js 应用为例：

在 .vscode/launch.json 中配置调试器：

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Launch App in Container",
      "type": "node",
      "request": "launch",
      "program": "/workspace/index.js",
      "console": "integratedTerminal",
      "cwd": "/workspace"
    }
  ]
}