在VsCode上使用开发容器devcontainer

概要

本文主要介绍了如何在 VsCode 中使用开发容器来确保项目的开发成员使用统一的开发环境。

过程

创建配置文件

在工程文件夹下创建 .devcontainer 文件夹,并在其中创建 devcontainer.jsonDockerfile 文件。

文件结构如下:

shell 复制代码
.devcontainer/
├── Dockerfile
└── devcontainer.json

其中,devcontainer.json 文件内容如下:

json 复制代码
{
    "name": "Python Dev (3.12)",
    "build": {
        "dockerfile": "Dockerfile",
        "context": "..",
        "options": [
            "--network=host"
        ]
    },
    "settings": {
        "terminal.integrated.defaultProfile.linux": "bash",
        "python.defaultInterpreterPath": "/usr/bin/python3"
    },
    "extensions": [
        "ms-python.python",
        "ms-azuretools.vscode-docker"
    ],
    "postCreateCommand": "uv sync",
    "remoteUser": "root"
}

Dockerfile 是根据你需要定制的镜像描述文件,这里以一个简单的 python flask 工程举例:

shell 复制代码
# 使用 Ubuntu 24.04 作为基础镜像
FROM ubuntu:24.04

# 安装依赖项
RUN sed -i 's@//.*archive.ubuntu.com@//mirrors.tuna.tsinghua.edu.cn@g' /etc/apt/sources.list.d/ubuntu.sources && \
    apt-get update && \
    apt-get install -y python3.12 python3.12-venv python3-pip curl git

# 设置工作目录
WORKDIR /workspace

使用容器构建开发环境

要在 VsCode 中使用容器,你需要下载 "Dev Containers"插件。

在启动之前,你可以使用 podman/docker build 命令先构建一下镜像,确认 Dockerfile 没有问题:

shell 复制代码
cd .devcontainer
podman build -t container-test:latest .

安装完成后,使用 VsCode 打开工作文件夹,并按 F1Ctrl+Shift+P 打开命令面板,输入 reopen in container(或点击左下角的蓝色图标,并选择"在容器中重新打开")。

随后,VsCode 将自动构建容器并启动,启动后的环境即为构建完成的容器。

相关推荐
Molesidy5 小时前
【VSCode】【Clangd】Win下的基于LLVM/Clangd+Clangd插件+MINGW+CMake的VSCode配置C/C++开发环境的详细教程
c++·ide·vscode·clangd·llvm
zbhbbedp282793cl5 小时前
如何在VSCode中安装Python扩展?
ide·vscode·python
天天向上10245 小时前
markdown及vscode中可以的emoji
ide·vscode·编辑器
IT利刃出鞘7 小时前
WordPress插件--Markdown编辑器
编辑器
小明_GLC9 小时前
关于新项目在PyCharm中自动构建UV环境的问题
ide·pycharm·uv
Joyce_JTR11 小时前
【vscode】vscode上plantuml安装和使用
ide·vscode·编辑器
lichong95111 小时前
Android studio release 包打包配置 build.gradle
android·前端·ide·flutter·android studio·大前端·大前端++
Theliars12 小时前
Ubuntu 上使用 VSCode 调试 C++ (CMake 项目) 指南
c++·vscode·ubuntu·cmake
香香爱编程14 小时前
Electron里的electron-window-state 使用
前端·javascript·vue.js·vscode·electron·前端框架
Hy行者勇哥18 小时前
VSCode 插件开发实战:从零打造「文件模板快建」工具,吃透扩展生态核心技术
ide·vscode·编辑器