VS Code Dev Containers 教程：从基础到进阶配置

1. 简介

Development Containers(简写为 dev container)可以让你使用容器作为一个完整的开发环境. 用容器可以隔离不同的开发环境, 允同时使用不同的开发环境. 便于分享开发环境, 提高开发效率.

VS Code 支持 dev container. 本教程将介绍如何使用 VS Code 的 dev container 功能.

---

2. 环境要求

在开始之前, 请确保已安装以下工具:

• Docker: 用于管理和运行容器化的开发环境. 官网教程: Get Docker
• VS Code: 提供便捷的开发体验并支持 Remote Development 扩展. 官网教程: Visual Studio Code

---

3. 配置步骤

本节将详细介绍如何从零开始配置 Dev Container，包括插件安装、镜像使用和自定义 Dockerfile。

3.1. 安装 “Remote Development” 插件

3.1.1 从插件栏安装

1. 打开 VS Code 的扩展(Extensions)视图, 搜索 “Remote Development” 插件.
2. 点击 “Install” 安装.
   

3.1.2 使用命令行安装:

1. 打开Terminal(通过菜单栏: Terminal/终端 -> New Terminal/新建终端)

code --install-extension ms-vscode-remote.vscode-remote-extensionpack

---

3.2. 使用已有镜像创建开发容器

步骤 1: 创建配置文件夹

在工作目录下创建 .devcontainer 文件夹.

mkdir .devcontainer

步骤 2: 创建 devcontainer.json 配置文件

在 .devcontainer 文件夹下创建 devcontainer.json 文件, 内容如下:

{
  "name": "Dev Container Python",
  "image": "mcr.microsoft.com/devcontainers/python:3.11"
}

这个文件内容后续会根据不同需要调整.

此时,目录结构如下:

$ tree -a .
.
└── .devcontainer
    └── devcontainer.json

如图所示:

步骤 3: 打开 dev container:

按照如下步骤操作:

1. 打开 VS Code 的命令面板(快捷键: Ctrl+Shift+P)
2. 搜索"Remote-Containers: Reopen in Container"
3. 选择"Remote-Containers: Reopen in Container".
   

此时 VS Code 会自动下载镜像并启动一个 python 的 dev container. 顺利完成后如图所示:

一些预制的镜像

以下是常见开发语言的预制镜像:

语言	镜像	说明
C++	mcr.microsoft.com/devcontainers/cpp:ubuntu-22.04	支持常见的 C++ 构建工具
Go	mcr.microsoft.com/devcontainers/go:1.21	适用于 Go 语言开发
Java	mcr.microsoft.com/devcontainers/java:21	包含 Java 开发环境和工具
Python	mcr.microsoft.com/devcontainers/python:3.11	预装 Python 和常用依赖

更多的镜像可以参考: Dev Container 样例

3.3 从Dockerfile构建镜像并使用

步骤 1: 修改 devcontainer.json 配置文件

如果需要自定义镜像, 则需要将image改为build,并指定构建镜像的Dockerfile.

{
  "name": "Dev Container Python",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "runArgs": ["--name", "devcontainer-python"]
}

步骤 2: 创建Dockerfile

Dockerfile 文件内容:

FROM ubuntu:22.04

# 设为noninteractive模式来减少警告
ENV DEBIAN_FRONTEND=noninteractive


# 安装必要的软件, 可以根据自己的需求定制安装软件
RUN apt update -y && \
    apt -y install --no-install-recommends apt-utils dialog && \
    apt -y install \
    build-essential \
    iproute2 \
    poppler-utils \
    procps \
    python3 \
    python3-pip \
    sudo \
    && apt autoremove -y \
    && apt clean -y

# 添加用户的GID/UID必须与你本机用户的GID/UID匹配, 以免引起权限问题.
# 如果你本机的GID/UID与下面的设置(1000/1000)不一致, 请修改此文件.
# 参考: https://aka.ms/vscode-remote/containers/non-root-user
ARG USER_UID=1000
ARG USER_GID=$USER_UID

# 创建一个非root用户
# 参考: https://aka.ms/vscode-remote/containers/non-root-user
RUN groupadd --gid $USER_GID vscode \
    && useradd -s /bin/bash --uid $USER_UID --gid $USER_GID -m vscode \
    && echo vscode ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/vscode \
    && chmod 0440 /etc/sudoers.d/vscode

# 切回到dialog模式
ENV DEBIAN_FRONTEND=dialog

此时的文件结构如下:

$ tree -a .
.
└── .devcontainer
    ├── Dockerfile
    └── devcontainer.json

1 directory, 2 files

需要注意的是, 自定义的镜像中需要支持如下命令或者库:

• curl
• freetype
• gcompat
• libxext
• libxi
• libxrender
• libxtst
• procps
• ps
• unzip

步骤 3: 打开 dev container

此时步骤同前. 在命令面板中查找并执行命令: “Remote-Containers: Reopen in Container”

---

4. 在 devcontainer.json配置编辑器

除了基本的 Dev Container 配置，你还可以在 devcontainer.json 中定义 VS Code 插件和编辑器设置，以提高开发效率。

4.1 在 devcontainer.json 中安装 VS Code 插件

通常我们会在 vs code 中安装一些插件, 我们可以将这些插件写入到配置文件, 这样在构建 docker 镜像成功之后, vscode 会自动安装这些插件.
配置方法如下:

4.1.1 配置文件

在 customizations.vscode.extensions路径下插入一个数组, 样例如下:

{
  "name": "Dev Container Python",
  "image": "mcr.microsoft.com/devcontainers/python:3.11",
  "customizations": {
    "vscode": {
      "extensions": ["ms-python.python", "ms-python.black-formatter"]
    }
  }
}

4.1.2 如何获取插件 ID

1. 搜索到你想要安装的插件
2. 在对应插件的介绍页查找Identifier
3. 拷贝对应的Identifier并填入上面的配置中

如图所示:

4.1.3 常用 VSCode 插件

根据不同的开发需求, 可以选择一些常用插件:

前端开发:

• esbenp.prettier-vscode: Prettier 代码格式化工具.
• dbaeumer.vscode-eslint: ESLint 语法检查.
• ms-vscode.vscode-typescript-next: TypeScript 支持.

后端开发:

• ms-python.python: Python 插件.
• golang.go: Go 语言插件.
• ms-vscode.cpptools: C/C++ 插件.

容器和 DevOps:

• ms-azuretools.vscode-docker: Docker 工具.
• hashicorp.terraform: Terraform 插件.

Markdown 和文档工具:

• yzhang.markdown-all-in-one: Markdown 插件.
• bierner.markdown-preview-github-styles: GitHub 风格的 Markdown 预览.

4.2 在 devcontainer.json 中配置编辑器行为

vscode 同样支持将编辑器的设置保存到devcontainer.json中.

{
  "name": "Dev Container Python",
  "image": "mcr.microsoft.com/devcontainers/python:3.11",
  "customizations": {
    "vscode": {
      "settings": {
        "editor.formatOnSave": true,
        "files.insertFinalNewline": true,
        "files.trimFinalNewlines": true,
        "files.trimTrailingWhitespace": true
      },
      "extensions": ["ms-python.python", "ms-python.black-formatter"]
    }
  }
}

4.3 更新配置并重建容器

如果你是在 dev container 中修改了devcontainer.json并想让它立即生效, 那你需要重新构建.

1. 打开编辑器命令面板(快捷键Ctrl+Shift+P)
2. 搜索并打开Rebuild
   

---

5. 总结

Dev Containers 提供了一种高效且一致的开发环境管理方式，适用于多种语言和工具链的开发需求。通过合理配置 devcontainer.json 和 Dockerfile，你可以在团队中实现开发环境的共享，显著提升开发效率和协作体验。

参考资料

1. devcontainer.json 配置参考, by Docker
2. Developing inside a Container, by Microsoft
3. VS Code 插件市场

进一步阅读

笔者主要是以 C++为主要工作语言, 如下是更多的关于 C++ 开发环境的文章.

• Windows 11 CLion C++ Dev Container 开发环境配置
• VS Code C++ 开发环境配置
• Vcpkg 使用全攻略: 支持 VS Code, Visual Studio 和 CLion
• CMake 入门教程: 从基础到实践