当前位置：首页 > news >正文

VS Code 配置本地 Dev Container

news 来源：原创 2025/6/29 8:11:53

最近 Visual Studio Code 异常卡顿，以为是插件原因（排查后是 GPU 加速的 bug），在搜索插件隔离的过程中，机缘巧合，了解到了 Dev Container 这么一个开发环境方案。

1. 背景描述

本文基于如下开发环境：

操作系统
- Windows 11 24H2
开发工具
- Visual Studio Code (VS Code)
容器运行环境
- 由 Docker Desktop for Windows 提供支持
- Docker Desktop 采用 WSL2 作为虚拟化后端（非 Hyper-V 方案）

本文中的 Dev Container 基于 WSL2 的 Docker 环境运行。如果需要连接远程服务器，可以先使用 Remote - SSH 等插件建立连接，然后在远程服务器上配置和使用 Dev Container。

2. 选择 Dev Container 的原因

将开发环境从本地迁移到 Dev Container 的目的是：

隔离 VS Code 插件：目前安装了 200+ 的插件，仅依赖 workspace 切换插件开关，相对较难管理，且跨平台同步逻辑不清晰。
隔离 VS Code 设置：避免大量个性化或插件设置堆积在本地用户设置中，使得维护困难
便于跨设备开发：Dev Container 通过 devcontainer.json 配置，自动创建容器开发环境，大幅削弱跨设备环境搭建与同步的成本。

如果不需要考虑跨设备开发以及环境隔离，也可以选择 VS Code Profile 实现插件隔离、设置隔离

3. 注意事项

尽管 Dev Container 具有环境隔离的诸多优势，但也存在许多需要注意的事项。

由于 Dev Container 主要基于 Docker 容器，如果涉及操作系统相关的 GUI 界面开发，可能不是一个非常合适的选项。
Windows 中使用 Dev Container 时，由于涉及虚拟化，以及 9p 文件传输协议的限制，会存在性能下降等问题。
Dev Container 基于 Docker 容器，如果开发环境涉及较为复杂的网络环境，推荐先熟悉相关配置后，再正式使用。
由于 Windows NTFS 文件系统和 WSL2 中 Linux 文件系统的差异，可能会存在大小写兼容性，文件重命名失败等问题。

4. 配置 Dev Container

为了便于管理，本文采用从现有的 Windows 目录内创建 Dev Container，通过此方式创建可以保持 Dev Container 的工作目录内容和 Windows 目录内容一致。

4.1. Dev Container 环境准备

Windows 系统安装 Docker Desktop for Windows（需要确保 Docker Engine 可以正常运行）
VS Code 安装 Dev Container 插件

4.2. 创建 Dev Container 配置

4.2.1. 方法一、自动创建配置文件

在这里插入图片描述

VS Code 中按 F1 键，运行 Dev Containers: Add Dev Container Configuration Files
根据提示配置开发环境所需的 Dev Container 配置
VS Code 会在当前目录下自动生成 DevContainer 配置（.devcontainer/devcontainer.json）

4.2.2. 方法二、手动创建配置文件

在根目录下 .devcontainer/devcontainer.json 文件，Dev Container 配置文件内容如下所示（请根据实际情况，自行修改）：

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/debian
{"name": "Debian",// Or use a Dockerfile or Docker Compose file. More info: https://containers.dev/guide/dockerfile"image": "mcr.microsoft.com/devcontainers/base:bullseye",// Features to add to the dev container. More info: https://containers.dev/features.// "features": {},// Use 'forwardPorts' to make a list of ports inside the container available locally.// "forwardPorts": [],// Configure tool-specific properties.// "customizations": {},// Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.// "remoteUser": "root"// "postAttachCommand": "sudo apt update && sudo apt install -y xclip","customizations": {"vscode": {"extensions": ["DavidAnson.vscode-markdownlint","huacnlee.autocorrect"],"settings": {"[markdown]": {"editor.defaultFormatter": "DavidAnson.vscode-markdownlint"},"[json]": {"editor.defaultFormatter": "vscode.json-language-features"},"editor.renderWhitespace": "all","terminal.integrated.defaultProfile.windows": "Git Bash","markdownlint.config": {"MD033": false}}}}
}

4.3. [可选] 添加 Dockerfile

Create a Dev Container: https://code.visualstudio.com/docs/devcontainers/create-dev-container#_dockerfile

在 Dev Container 中使用 Dockerfile
- 在和 .devcontainer 文件同级目录下创建 Dockerfile 文件
- 使用 build 代替 image

{"name": "Debian",// Or use a Dockerfile or Docker Compose file. More info: <https://containers.dev/guide/dockerfile>// "image": "mcr.microsoft.com/devcontainers/base:bullseye","build": { "dockerfile": "Dockerfile" }
}

4.4. 构建 Dev Container

一般性进入目录后，VS Code 会自动检测 Dev Container 配置文件，并提示是否打开 Dev Container

在 VS Code 中按 F1 键：

如果 Dev Container 配置在当前目录：输入 Dev Containers: Rebuild and Reopen in Container
如果需要打开第三方目录或 workspace：输入 Dev Containers: Open Folder in Container... 或 Dev Containers: Open Workspace in Container...

4.4.1. 重新构建 Dev Container

如果修改了 Dev Container 的配置，需要重新构建 Dev Container。

在 VS Code 中按 F1 键，输入 Dev Containers: Rebuild and Reopen in Container

5. 使用 Dev Container

[插件隔离] 除了和常规方式一样添加插件外，可以右键 Add to devcontainer.json 添加插件到配置文件中，这样构建环境的时候会自动安装插件。
[设置隔离] 在 VS Code 设置中，选择 Remote [Dev Container:..] 选项卡，在此处修改的配置，将专属于当前 Dev Container，和 devcontainer.json 文件中的配置同步
```
# devcontainer.json
"customizations": {"vscode": {"extensions": ["vscode-icons-team.vscode-icons",],"settings": {"editor.fontSize": 16,}}
}
```