Dev Containers 怎样从配置打开容器
来源:17golang原创
时间:2026-10-25 11:34:02 100浏览 收藏
Dev Containers 的入口不是单独记住一个容器名称,而是让 VS Code 读取项目里的 devcontainer.json。只要配置文件位置正确,并且 Docker 与 Dev Containers 扩展可用,就可以从命令面板打开或重新打开容器;连接成功后,工作区和工具链会落在容器环境中。
官方地址:https://code.visualstudio.com/docs/devcontainers/containers
新项目先确认配置文件路径,再执行“Dev Containers: Reopen in Container”;如果当前窗口还没有容器上下文,则执行“Dev Containers: Open Folder in Container...”。左下角出现远程状态、工作区能在容器内打开,才算完成这次配置打开。
先放对 devcontainer.json
Dev Containers 支持两种常见位置:项目下的 .devcontainer/devcontainer.json,或者项目根目录下的 .devcontainer.json。团队协作时更建议使用前一种目录结构,因为 Dockerfile、Compose 文件和其他配置可以一起放在 .devcontainer/ 中。
项目根目录/ ├── .devcontainer/ │ └── devcontainer.json └── src/
下面是一份只声明基础镜像和端口的最小配置。JSON 必须保持合法,说明放在代码块外,不能把注释直接塞进严格 JSON。
{
"name": "Node 开发容器",
"image": "mcr.microsoft.com/devcontainers/typescript-node",
"forwardPorts": [3000],
"customizations": {
"vscode": {
"extensions": ["dbaeumer.vscode-eslint"]
}
}
}
image 决定容器的基础环境,forwardPorts 描述需要从容器转发到本机的端口,customizations.vscode.extensions 则声明连接后要安装的 VS Code 扩展。这个文件只负责描述开发容器,不等于已经创建或连接成功。

从配置打开容器
打开项目文件夹后,按 F1 或 Cmd/Ctrl+Shift+P 打开命令面板,输入 Dev Containers。根据当前窗口状态选择命令:
- 当前项目尚未连接容器:选择
Dev Containers: Open Folder in Container...,再选择项目目录。 - 项目已经有配置,想按配置重新创建或连接:选择
Dev Containers: Reopen in Container。 - 第一次使用配置时,等待镜像拉取、容器创建和扩展安装完成。
不要把“打开文件夹”与“打开容器”混为一谈。普通的 File > Open Folder 只改变本地工作区;Dev Containers 命令还会读取配置并准备容器环境。
# 在命令面板中选择 Dev Containers: Reopen in Container # 重新连接前,先保存 devcontainer.json,避免继续使用旧配置。 echo "选择命令面板中的 Dev Containers: Reopen in Container"
上面的命令块只是把操作意图写成可复制的提示,不代表在终端执行了 VS Code 命令。真正的入口是 VS Code 命令面板;文章配图也只用于解释界面状态。
用状态栏和日志验收连接结果
容器启动后先看窗口左下角的远程状态指示,它应显示当前已经连接到开发容器。然后在资源管理器中打开项目文件,确认路径和工具链来自容器,而不是继续使用本机环境。
如果配置中声明了 forwardPorts,可以在端口面板查看 3000 是否被转发;如果声明了扩展,可以打开扩展视图确认扩展处在容器环境中。验收时关注“连接对象、工作区、端口”三个状态,不要只看容器是否短暂启动。

配置不生效时怎么修正
如果命令面板找不到 Dev Containers 命令,先确认扩展已安装并处于启用状态;如果找不到配置,检查文件名是否为 devcontainer.json、目录是否以点号开头,以及当前打开的是否是项目根目录。
修改 image、Dockerfile、Compose 服务或扩展列表后,已有容器可能仍保留旧状态。此时重新执行 Dev Containers: Rebuild and Reopen in Container,让配置重新参与创建。若仍失败,从命令面板执行 Dev Containers: Show Container Log,重点看镜像拉取、Docker 连接、JSON 解析和端口占用信息。
# 排查顺序:配置路径 -> JSON 语法 -> Docker 可用性 -> 端口占用 -> 容器日志 # 每次只改一个因素,便于把日志中的错误对应回具体配置项。 配置文件位置 JSON 语法 Docker 连接 端口占用 容器日志
如果只是调整扩展或端口,通常可以先重开容器;如果替换了基础镜像或改变了构建文件,则优先使用重建命令。这样能区分“没有重新读取配置”和“重新读取后仍然创建失败”两类问题。
相关问题
devcontainer.json 一定要放在 .devcontainer 目录吗?
不一定。项目可以使用 .devcontainer/devcontainer.json,也可以在项目根目录使用 .devcontainer.json。前一种更适合把相关 Docker 配置集中管理。
为什么 Reopen in Container 后仍然使用本机工具?
先看左下角远程状态是否真的连接到容器,再检查终端和扩展是否打开在容器上下文。如果配置文件改过但没有重建,也可能仍然沿用旧容器。
总结
从配置打开 Dev Container 可以归纳为四个检查点:把 devcontainer.json 放在支持的位置,声明基础镜像和需要的资源,用 Dev Containers 命令打开或重建,最后通过远程状态、工作区和端口面板验收。遇到失败时优先查看容器日志,而不是反复点击普通的打开文件夹。
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
501 收藏
-
465 收藏
-
150 收藏
-
499 收藏
-
418 收藏
-
423 收藏
-
459 收藏
-
372 收藏
-
410 收藏
-
187 收藏
-
490 收藏
-
399 收藏
-
477 收藏
-
- 前端进阶之JavaScript设计模式
- 设计模式是开发人员在软件开发过程中面临一般问题时的解决方案,代表了最佳的实践。本课程的主打内容包括JS常见设计模式以及具体应用场景,打造一站式知识长龙服务,适合有JS基础的同学学习。
- 立即学习 543次学习
-
- GO语言核心编程课程
- 本课程采用真实案例,全面具体可落地,从理论到实践,一步一步将GO核心编程技术、编程思想、底层实现融会贯通,使学习者贴近时代脉搏,做IT互联网时代的弄潮儿。
- 立即学习 516次学习
-
- 简单聊聊mysql8与网络通信
- 如有问题加微信:Le-studyg;在课程中,我们将首先介绍MySQL8的新特性,包括性能优化、安全增强、新数据类型等,帮助学生快速熟悉MySQL8的最新功能。接着,我们将深入解析MySQL的网络通信机制,包括协议、连接管理、数据传输等,让
- 立即学习 500次学习
-
- JavaScript正则表达式基础与实战
- 在任何一门编程语言中,正则表达式,都是一项重要的知识,它提供了高效的字符串匹配与捕获机制,可以极大的简化程序设计。
- 立即学习 487次学习
-
- 从零制作响应式网站—Grid布局
- 本系列教程将展示从零制作一个假想的网络科技公司官网,分为导航,轮播,关于我们,成功案例,服务流程,团队介绍,数据部分,公司动态,底部信息等内容区块。网站整体采用CSSGrid布局,支持响应式,有流畅过渡和展现动画。
- 立即学习 485次学习