VSCode与Docker的完美结合：容器化开发入门

VSCode 通过 Remote-Containers 扩展实现真正“进容器开发”。安装扩展后，用 .devcontainer/devcontainer.json 定义镜像、工具、端口等，一键在容器内编码、调试、运行，环境可复现、团队一致。

VSCode 和 Docker 结合，能让本地开发环境更干净、可复现，也更容易和生产环境对齐。关键不是“装上就用”，而是理解怎么让 VSCode 真正“进到容器里”去写代码、调试、运行——而不是只在宿主机上敲 docker 命令。

用 Remote-Containers 打开项目，直接在容器里编码

这是最核心的体验升级。安装官方扩展 Remote - Containers 后，打开一个文件夹，点击左下角绿色按钮（或按 Ctrl+Shift+P → “Remote-Containers: Open Folder in Container”），VSCode 就会根据项目里的 .devcontainer/devcontainer.json 自动构建镜像、启动容器，并把整个工作区挂载进去。

• devcontainer.json 定义了基础镜像、要安装的工具（如 Python、Node.js、Go）、端口转发、环境变量，甚至启动后自动执行的命令
• 你编辑的代码实时存在容器里，终端也是容器内的 shell，git、npm、python manage.py runserver 全部原生运行
• 不需要手动 docker build / docker run，也不用反复 cp 文件或改路径

调试器也能进容器：断点、变量、调用栈全正常

只要容器里装了对应语言的调试支持（比如 Python 的 ptvsd 或 debugpy，Node 的 --inspect），并在 devcontainer.json 中配置好端口转发和 launch.json，VSCode 的调试器就能无缝连接。

• 例如 Python 项目：在容器内启动服务时加上 --no-browser --port=8000 --host=0.0.0.0，再把 8000 端口映射出来，launch.json 里设好 "attach" 模式和端口，F5 就能连上
• 调试时看到的路径是容器内的路径（如 /workspace/src/main.py），但 VSCode 会自动映射到你本地打开的文件，断点不掉、变量可查

共享配置，团队协作少踩坑

把 .devcontainer/ 提交到 Git，所有人拉代码后一键进容器，环境完全一致。

Angel工作室企业网站管理系统1.2

Angel工作室企业网站管理系统全DIV+CSS模板，中英文显示，防注入sql关键字过滤，多浏览器适应，完美兼容IE6-IE8,火狐，谷歌等符合标准的浏览器，模板样式集中在一个CSS样式中，内容与样式完全分离，方便网站设计人员开发模板与管理。系统较为安全，以设计防注入，敏感字符屏蔽。新闻，产品，单页独立关键字设计，提高搜索引擎收录。内置IIS测试，双击打启动预览网站 　　 Angel工作室企业网站

0

查看详情

• 避免“我本地跑得好好的，怎么 CI 报错了？”——因为 CI 可以复用同一份 devcontainer 配置做测试环境
• 新成员不用看长达一页的“本地环境搭建指南”，打开 VSCode → Open in Container → 等两分钟 → 开始写代码
• 不同项目可用不同基础镜像（如前端用 node:18，后端用 python:3.11-slim），互不干扰

小技巧让体验更顺滑

有些细节不注意，容易卡住或白忙活：

• 确保 Docker Desktop 正在运行，且用户在 docker 组里（Linux/macOS）；Windows 用户推荐开启 WSL2 后端
• 如果容器启动失败，点左下角绿色按钮 → “Reopen in Container”，再看 VSCode 右下角弹出的构建日志，错误通常很明确（比如 apt 源超时、缺少 build-essential）
• 需要图形界面（如 Electron 调试）？得额外配 X11 转发或用 VSCode Web 版 + 容器内浏览器

基本上就这些。不需要改 workflow，也不用学新语法，几个配置文件 + 一个扩展，就能把开发环境从“本机拼凑”变成“容器封装”。不复杂，但容易忽略。

以上就是VSCode与Docker的完美结合：容器化开发入门的详细内容，更多请关注php中文网其它相关文章！