南宁门户网站seoul是什么国家
最近 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,}} }
6. 参考
Developing inside a Container: https://code.visualstudio.com/docs/devcontainers/containers
7. 扩展
Get Started with Dev Containers in VS Code - YouTube: https://www.youtube.com/watch?v=b1RavPr_878
- 本作品采用 署名-相同方式共享 4.0 国际(CC BY-SA 4.0 DEED) 许可