可使用 VSCode Remote - Containers 在 Docker 容器中搭建隔离开发环境:需安装扩展与 Docker;支持基于 Dockerfile、devcontainer.json 启动,或附加运行中容器;还可自定义扩展、端口转发及初始化命令。

如果您希望在独立、可复现的环境中进行开发,避免本地依赖冲突或系统污染,则可以使用 VSCode 的 Remote - Containers 扩展将整个开发环境运行于 Docker 容器中。以下是实现该隔离开发环境的具体操作路径:
本文运行环境:MacBook Pro,macOS Sequoia。
一、安装必要组件
Remote - Containers 功能依赖 VSCode 官方扩展与本地 Docker 运行时协同工作,需确保基础工具链完整可用。
1、打开 VSCode,进入 Extensions 视图(快捷键 Cmd+Shift+X)。
2、搜索并安装 Remote - Containers 扩展。
3、在系统终端中执行 docker --version,确认已安装 Docker Desktop 并处于运行状态。
二、基于现有 Dockerfile 启动容器
此方式适用于项目根目录已存在有效 Dockerfile 的场景,VSCode 将据此构建镜像并启动开发容器。
1、在 VSCode 中打开目标项目文件夹。
2、按下 Cmd+Shift+P,输入并选择 Remote-Containers: Reopen in Container。
3、VSCode 自动检测 Dockerfile 后开始构建镜像,并在完成后将窗口重连至容器内。
三、从 devcontainer.json 配置初始化环境
当项目未提供 Dockerfile 但定义了 devcontainer.json 时,VSCode 可自动拉取基础镜像并应用配置项完成环境装配。
1、在项目根目录创建 .devcontainer 文件夹。
系统优势: 全DIV+CSS模板,多浏览器适应,完美兼容IE6-IE8,以及Firefox Opera 等符合标准的浏览器,模板样式集中在一个CSS文件中,内容与样式完全分离,方便网站设计人员开发模板与管理。系统较为安全,以设计防注入,敏感字符屏蔽。新闻,产品,单页独立关键字设计,提高搜索引擎收录。 调试环境必须为IIS 后台账户密码:admin功能介绍:基本信息设置:网站名称,联系人等信息
2、在该文件夹中新建 devcontainer.json,内容至少包含 image 或 build 字段。
3、按下 Cmd+Shift+P,执行 Remote-Containers: Reopen in Container,VSCode 将依据配置拉取镜像并注入开发工具链。
四、手动指定镜像并附加到运行中容器
适用于已有预构建镜像或需快速接入调试中容器的场景,跳过构建阶段直接建立开发会话。
1、在终端中运行 docker run -it -d -v $(pwd):/workspace -w /workspace --name my-dev-container mcr.microsoft.com/vscode/devcontainers/universal:latest。
2、在 VSCode 中按下 Cmd+Shift+P,选择 Remote-Containers: Attach to Running Container...。
3、从列表中选择 my-dev-container,确认后即完成附加。
五、自定义容器内开发工具与端口转发
通过修改 devcontainer.json 可声明额外的 VSCode 扩展、非标准端口映射及初始化脚本,使容器行为更贴合实际开发需求。
1、在 .devcontainer/devcontainer.json 中添加 "extensions" 数组,填入所需扩展 ID,例如 "ms-python.python"。
2、在 same 文件中添加 "forwardPorts" 字段,列出需自动转发的端口号,如 [3000, 8080]。
3、添加 "postCreateCommand" 字段,指定容器首次创建后执行的 shell 命令,例如 "npm install"。









