通过 Docker 与 Visual Studio Code 统一开发环境通过 Docker 与 Visual Stud

痛点

新人 Landing 时，需要按照 SOP 逐一配置开发环境，包括不限于开发语言环境、编辑器配置和项目配置等。如：nvm、项目所需的 NodeJS 版本、Visual Studio Code 插件与编辑器配置。

多项目并行开发时，由于项目创建时期的不同，所依赖的语言环境可能不同，开发不同项目时需要手动切换环境。如：A 项目依赖的 NodeJS 版本是 16，而 B 项目依赖的 NodeJS 版本是 14，如果切换项目时，忘记了切换环境，则可能会报错。

使用流程

下载并安装 Docker Desktop

Docker Desktop 下载链接：www.docker.com/products/do…;
下载并安装 Visual Studio Code

Visual Studio Code 下载链接：code.visualstudio.com/Download
Visual Studio Code 内安装 Dev Containers 插件

插件主页：marketplace.visualstudio.com/items?itemN…
在 Visual Studio Code 内按组合键Command+Shit+P展示所有命令，找到并点击Dev Containers: Clone Repository in Container Volume...，接着输入 Git 仓库地址并点按Return键确认即可。流程如下图。

配置方法

想要开发环境满足项目研发需求，配置是不可或缺的，以下简述一些常用配置。

本配置文件在项目目录下 devcontainer/devcontainer.json

{
    // 用以指定环境所使用的镜像
    "image": "node:16"

    // 转发端口
    "forwardPorts": [8080],

    // 容器创建后执行的命令
    "postCreateCommand": "npm i -g pnpm && pnpm i",
    
    // 自定义配置
    "customizations": {
        // Visual Studio Code 项目自定义配置
        "vscode": {
            // Visual Studio Code 配置，配置方法与直接使用 Visual Studio Code 一致。
            "settings": {},
            
            // 通过填写扩展 ID，实现自动安装。
            "extensions": ["esbenp.prettier-vscode"],
        }
    },
    
    // 容器环境变量
    "containerEnv": { "FOO": "BAR" }
}

参考链接：

Dev Containers 使用文档：code.visualstudio.com/docs/devcon…

devcontainer.json 配置说明： containers.dev/implementor…

优劣势

优势

可以做到环境隔离：基于 docker 容器开发时，每个项目的环境都是相互隔离的，有利于多个项目并行开发，无需切换 node 版本。
环境预配置：项目所使用的 NodeJS 版本与 Visual Studio Code 的插件都是通过配置文件预先配置的，无需手动安装。

劣势

配置过程有一定学习成本。
不使用此功能的 Visual Studio Code 用户，打开具有 Dev Containers 配置文件的项目时，会在窗口右下角看到一个提示使用的弹窗，如下图，可点击右侧按钮“不再展示”。