Meesteren van Dev Containers in VS Code
Maak consistente, draagbare en herhaalbare ontwikkelomgevingen met behulp van Dev Containers.
Ontwikkelaars komen vaak het “werkt op mijn machine” dilemma tegen vanwege onovereenstemmingen in afhankelijkheden, toolversies of OS-verschillen. Dev Containers in Visual Studio Code (VS Code) lossen dit elegant op — door u te laten ontwikkelen binnen een containeromgeving die specifiek is ingesteld voor uw project.
Moderne softwareontwikkeling vereist consistente, herhaalbare omgevingen die werken over machines en besturingssystemen. Of u nu werkt aan een Python data science project, een Node.js webtoepassing of een Go microservice, het garanderen dat elke teamlid een identieke ontwikkelomgeving heeft, kan uitdagend zijn.
Deze uitgebreide gids leidt u door wat Dev Containers zijn, waarom ze waardevol zijn en hoe u ze instelt in VS Code voor soepele, draagbare ontwikkelwerkvloeiingen. U leert alles van de basisinstelling tot geavanceerde configuraties met Docker Compose en beste praktijken voor team samenwerking.
🧩 Wat zijn Dev Containers?
Dev Containers zijn een functie die wordt aangeboden door de VS Code Remote - Containers extensie (nu onderdeel van VS Code Remote Development). Ze laten u uw project openen in een Docker container die vooraf is ingesteld met alle afhankelijkheden, talen en tools.
Denk eraan als:
“Een volledig ingestelde ontwikkelomgeving, gedefinieerd als code.”
In plaats van Python, Node.js, databases en verschillende tools direct op uw machine te installeren, definieert u ze in configuratiebestanden. Wanneer u het project in VS Code opent, start het automatisch een container met alles vooraf geïnstalleerd en ingesteld zoals gespecificeerd.
Een Dev Container instelling bevat meestal:
- Een Dockerfile of verwijzing naar een basisafbeelding (definieert het containerbesturingssysteem, talen en tools)
- Een
devcontainer.json
bestand (instelt werkruimte-instellingen, VS Code extensies, poortverkeer, omgevingsvariabelen en opstartopdrachten) - Optioneel docker-compose.yml als uw project afhankelijk is van meerdere diensten (zoals databases, Redis, berichtenwachtrijen, enz.)
⚙️ Waarom Dev Containers gebruiken?
Hier is wat ze krachtig maakt:
-
Herhaalbaarheid: Elke ontwikkelaar en CI-systeem gebruikt exact dezelfde omgeving. Geen meer “het werkt op mijn machine maar niet op de jouwe” problemen. Wat op uw laptop werkt, werkt identiek op uw collega’s Windows machine, Mac of Linux werkstation.
-
Isolatie: Er is geen behoefte om uw lokale machine te vervuilen met conflicterende afhankelijkheden. Werk aan meerdere projecten die verschillende versies van Python, Node.js of andere tools vereisen zonder versieconflicten of virtuele omgevingen te moeten beheren.
-
Draagbaarheid: Werkt op elk OS dat Docker ondersteunt. Uw ontwikkelomgeving reist met uw code. Clone een repository, open het in VS Code, en u bent binnen een paar minuten klaar om te coderen — ongeacht uw besturingssysteem.
-
Team consistentie: Een configuratie gedeeld over uw hele team. Nieuwe teamleden kunnen binnen een paar minuten op gang komen in plaats van uren (of dagen) te spenderen aan het configureren van hun ontwikkelomgeving met de juiste tools en versies.
-
Automatisering: Installeert automatisch VS Code extensies, taalafhankelijkheden en tools wanneer u het project opent. Post-create opdrachten kunnen database migraties, gegevensseeden of andere setup taken uitvoeren zonder manuele tussenkomst.
-
Beveiliging: Isolatie van potentieel risicovolle afhankelijkheden in containers. Als u een oudere, kwetsbare versie van een bibliotheek moet testen, blijft het beperkt en beïnvloedt het niet uw gastbesturingssysteem.
Reëel voorbeeld: Stel dat u bij een team komt dat werkt aan een microservicesproject dat Python 3.11, PostgreSQL 15, Redis en Elasticsearch gebruikt. Zonder Dev Containers zou u uren moeten besteden aan het installeren en configureren van elk onderdeel. Met Dev Containers opent u het project in VS Code, laat het de container bouwen, en bent u binnen 5-10 minuten aan het schrijven van code.
🧱 Een Dev Container instellen in VS Code
Laten we stap voor stap gaan.
1. Installeer de benodigde tools
Voordat u begint, zorg er voor dat u de volgende tools heeft geïnstalleerd:
-
Docker Desktop (of een equivalente container runtime zoals Podman)
- Voor Windows/Mac: Download en installeer Docker Desktop
- Voor Linux: Installeer Docker Engine en zorg dat uw gebruiker in de docker groep is
-
VS Code (nieuwste versie aanbevolen)
-
De Dev Containers extensie (door Microsoft)
- Open VS Code
- Ga naar Extensies (
Ctrl+Shift+X
ofCmd+Shift+X
op macOS) - Zoek naar “Dev Containers”
- Installeer de extensie met ID:
ms-vscode-remote.remote-containers
Controleer uw instellingen:
# Controleer of Docker draait
docker --version
docker ps
# Moet de Docker versie en lopende containers tonen (als er zijn)
2. Initialiseer de Dev Container
Open uw projectmap in VS Code
en open het Command Palette (Ctrl+Shift+P
of Cmd+Shift+P
op macOS), typ en selecteer:
Dev Containers: Add Dev Container Configuration Files...
VS Code toont een lijst met vooraf gedefinieerde omgevingssjablonen. Kies de die overeenkomt met uw project:
- Node.js — JavaScript/TypeScript projecten
- Python — Data science, webapps, scripts
- Go — Go toepassingen en diensten
- .NET — C#/F# toepassingen
- Java — Spring Boot, Maven, Gradle projecten
- Docker-in-Docker — Wanneer u Docker binnen uw container nodig hebt
- En veel meer…
U kunt ook extra functies selecteren zoals:
- Algemene hulpmiddelen (git, curl, wget)
- Database clients
- Cloud CLI tools (AWS, Azure, GCP)
Deze wizard maakt een .devcontainer
map met:
devcontainer.json
— HoofdconfiguratiebestandDockerfile
— Aangepaste afbeeldingsdefinitie (of verwijzing naar een vooraf gebouwde basisafbeelding)
3. Pas devcontainer.json
aan
Het devcontainer.json
bestand is waar de magie gebeurt. Hier is een goed gedocumenteerde voorbeeld voor een Node.js project:
{
// Container weergavenaam in VS Code
"name": "Node.js Ontwikkelcontainer",
// Bouwconfiguratie - kan een Dockerfile of vooraf gebouwde afbeelding gebruiken
"build": {
"dockerfile": "Dockerfile",
"context": ".."
},
// Alternatief: gebruik een vooraf gebouwde afbeelding in plaats van een Dockerfile
// "image": "mcr.microsoft.com/devcontainers/javascript-node:18",
// Werkruimteconfiguratie
"customizations": {
"vscode": {
// VS Code instellingen die van toepassing zijn in de container
"settings": {
"terminal.integrated.defaultProfile.linux": "bash",
"editor.formatOnSave": true,
"editor.defaultFormatter": "esbenp.prettier-vscode"
},
// Extensies die automatisch worden geïnstalleerd
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"eamodio.gitlens",
"ms-azuretools.vscode-docker"
]
}
},
// Poortverkeer - maak containerpoorten beschikbaar op de host
"forwardPorts": [3000, 5432],
"portsAttributes": {
"3000": {
"label": "Toepassing",
"onAutoForward": "notify"
}
},
// Opdrachten om uit te voeren op verschillende stappen
"postCreateCommand": "npm install", // Na container is aangemaakt
"postStartCommand": "npm run dev", // Na container is gestart
// Omgevingsvariabelen
"containerEnv": {
"NODE_ENV": "development",
"PORT": "3000"
},
// Voer container uit als niet-root gebruiker (aanbevolen voor beveiliging)
"remoteUser": "node",
// Extra volumes koppelen
"mounts": [
"source=${localEnv:HOME}/.ssh,target=/home/node/.ssh,readonly,type=bind"
]
}
Belangrijke configuratieopties uitgelegd:
name
— Weergavenaam die in de VS Code statusbalk wordt getoondbuild
/image
— Gebruik een Dockerfile of vooraf gebouwde afbeeldingcustomizations.vscode.extensions
— VS Code extensies die automatisch worden geïnstalleerdforwardPorts
— Poorten die vanuit container naar host worden getoondpostCreateCommand
— Wordt uitgevoerd wanneer container voor het eerst wordt aangemaakt (bijv. afhankelijkheden installeren)postStartCommand
— Wordt uitgevoerd elke keer dat de container wordt gestartcontainerEnv
— Omgevingsvariabelen die beschikbaar zijn in de containerremoteUser
— Gebruikersaccount die binnen de container wordt gebruiktmounts
— Extra bestanden/mappen die worden gekoppeld (zoals SSH-sleutels)
💡 Pro tips:
- Gebruik
postCreateCommand
voor traag werk (npm install, pip install) - Gebruik
postStartCommand
voor snelle opstarttaken (database migraties) - Specificeer altijd extensies die uw project nodig heeft — dit garandeert consistent tooling
- Gebruik omgevingsvariabelen voor configuratie die varieert tussen ontwikkelaars
4. Bouw en open in container
Zodra uw configuratie klaar is, is het tijd om uw ontwikkelomgeving te starten:
Open Command Palette (Ctrl+Shift+P
/ Cmd+Shift+P
) en voer uit:
Dev Containers: Reopen in Container
Wat gebeurt er daarna:
-
Afbeelding bouwen — VS Code bouwt de Docker afbeelding op basis van uw Dockerfile of haalt een vooraf gebouwde afbeelding op. Dit kan een paar minuten duren bij de eerste keer.
-
Container aanmaken — Docker maakt een nieuwe container van de gebouwde afbeelding.
-
Volume koppelen — Uw projectmap wordt gekoppeld in de container, waardoor uw code binnen beschikbaar is.
-
Extensies installeren — Alle opgegeven VS Code extensies worden automatisch geïnstalleerd in de container.
-
Post-create opdrachten — Uw
postCreateCommand
wordt uitgevoerd (bijv.npm install
,pip install -r requirements.txt
). -
Klaar! — VS Code verbindt zich opnieuw met de container, en u bent nu aan het ontwikkelen binnen deze.
Controleer of u in de container bent:
U kunt bevestigen dat u binnen de container werkt door een terminal te openen en de volgende opdrachten uit te voeren:
# Controleer het besturingssysteem
uname -a
# Uitvoer: Linux ... (container's kernel)
# Controleer de hostnaam (meestal de container ID)
hostname
# Uitvoer: abc123def456
# Controleer lopende processen
ps aux
# U zult containerprocessen zien, niet die van uw host
Let op de VS Code statusbalk (onderaan links) die nu toont: Dev Container: [Uw container naam]
Levenscyclusopdrachten van de container:
- Container opnieuw bouwen —
Dev Containers: Rebuild Container
(wanneer u de Dockerfile wijzigt) - Opnieuw bouwen zonder cache —
Dev Containers: Rebuild Container Without Cache
(voor frisse bouw) - Lokaal opnieuw openen —
Dev Containers: Reopen Folder Locally
(uit de container, werken op host)
5. Voeg extra diensten toe (optioneel)
Echte wereldtoepassingen hangen vaak af van databases, cachinglagen, berichtenwachtrijen of andere diensten. U kunt Docker Compose gebruiken om meerdere containers te orchestreren.
Voorbeeld: Full-stack toepassing met Node.js, PostgreSQL en Redis
Maak een docker-compose.yml
in uw .devcontainer
map:
version: "3.8"
services:
# Hoofdontwikkelcontainer
app:
build:
context: ..
dockerfile: .devcontainer/Dockerfile
volumes:
# Projectmap koppelen
- ..:/workspace:cached
# Gebruik genaamd volume voor node_modules (beter prestaties)
- node_modules:/workspace/node_modules
# Houd container actief
command: sleep infinity
# Netwerktoegang tot andere diensten
depends_on:
- db
- redis
environment:
DATABASE_URL: postgresql://dev:secret@db:5432/appdb
REDIS_URL: redis://redis:6379
# PostgreSQL database
db:
image: postgres:15-alpine
restart: unless-stopped
volumes:
- postgres-data:/var/lib/postgresql/data
environment:
POSTGRES_USER: dev
POSTGRES_PASSWORD: secret
POSTGRES_DB: appdb
ports:
- "5432:5432"
# Redis cache
redis:
image: redis:7-alpine
restart: unless-stopped
volumes:
- redis-data:/data
ports:
- "6379:6379"
volumes:
postgres-data:
redis-data:
node_modules:
Vervolgens, bijwerken van uw devcontainer.json
om Docker Compose te gebruiken:
{
"name": "Volledige stack ontwikkelomgeving",
// Gebruik docker-compose in plaats van enkele container
"dockerComposeFile": "docker-compose.yml",
// Welke dienst gebruiken als de ontwikkelcontainer
"service": "app",
// Pad naar werkmap binnen container
"workspaceFolder": "/workspace",
"customizations": {
"vscode": {
"extensions": [
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"ms-azuretools.vscode-docker",
"ckolkman.vscode-postgres" // PostgreSQL client
]
}
},
"forwardPorts": [3000, 5432, 6379],
"postCreateCommand": "npm install && npm run db:migrate",
"remoteUser": "node"
}
Wat deze instelling biedt:
app
— Uw ontwikkelcontainer met Node.jsdb
— PostgreSQL database, toegankelijk opdb:5432
vanuit uw appredis
— Redis cache, toegankelijk opredis:6379
- Genaamde volumes — Bewaar databasegegevens tussen containerherstarts
- Poortverkeer — Toegang tot alle diensten vanaf uw hostmachine
Verbind met diensten vanuit uw code:
// In uw Node.js toepassing
const { Pool } = require('pg');
const redis = require('redis');
// PostgreSQL verbinding
const pool = new Pool({
connectionString: process.env.DATABASE_URL
// Resolvert naar: postgresql://dev:secret@db:5432/appdb
});
// Redis verbinding
const redisClient = redis.createClient({
url: process.env.REDIS_URL
// Resolvert naar: redis://redis:6379
});
Toegang tot diensten vanaf uw host:
- App:
http://localhost:3000
- PostgreSQL:
localhost:5432
(met behulp van een PostgreSQL client) - Redis:
localhost:6379
(met behulp vanredis-cli
of GUI tools)
Nu, wanneer u het project in VS Code opent, starten alle diensten automatisch!
🧠 Geavanceerde tips en beste praktijken
Gebruik vooraf gebouwde afbeeldingen
Bespaar aanzienlijke bouwtijd door te beginnen met Microsoft’s officiële devcontainer afbeeldingen:
{
"image": "mcr.microsoft.com/devcontainers/python:3.11",
"features": {
"ghcr.io/devcontainers/features/git:1": {},
"ghcr.io/devcontainers/features/github-cli:1": {}
}
}
Features zijn herbruikbare installatie scripts voor veelvoorkomende tools (Git, GitHub CLI, Node, AWS CLI, enz.).
Versiebeheer beste praktijken
Altijd committen uw .devcontainer
map:
git add .devcontainer/
git commit -m "Dev Container configuratie toevoegen"
git push
Dit garandeert:
- ✅ Nieuwe teamleden krijgen automatisch de omgeving
- ✅ Omgevingsveranderingen worden bijgehouden en beoordeeld
- ✅ Iedereen ontwikkelt in dezelfde setup
Pro tip: Voeg een README sectie toe die de dev container setup uitlegt:
## Ontwikkelingsetup
Dit project gebruikt VS Code Dev Containers. Om te beginnen:
1. Installeer Docker Desktop en VS Code
2. Installeer de "Dev Containers" extensie
3. Clone deze repository
4. Open in VS Code
5. Klik op "Reopen in Container" wanneer aangeroepen
Debuggen in containers
Debuggen werkt naadloos. Stel uw launch.json
zoals gebruikelijk in:
{
"version": "0.2.0",
"configurations": [
{
"name": "Launch Node.js",
"type": "node",
"request": "launch",
"program": "${workspaceFolder}/index.js",
"skipFiles": ["<node_internals>/**"]
}
]
}
Stel tussentijdspunten in en debug normaal — VS Code verwerkt de containerverbinding automatisch.
Continuous Integration Pariteit
Gebruik dezelfde containerafbeelding in uw CI/CD pipeline:
# GitHub Actions voorbeeld
name: CI
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
container:
image: mcr.microsoft.com/devcontainers/javascript-node:18
steps:
- uses: actions/checkout@v3
- run: npm install
- run: npm test
Dit garandeert dev/prod pariteit — als tests lokaal werken, werken ze in CI.
Prestatieoptimalisatie
Voor macOS/Windows gebruikers — gebruik genaamde volumes voor afhankelijkheden:
{
"mounts": [
"source=myproject-node_modules,target=${containerWorkspaceFolder}/node_modules,type=volume"
]
}
Dit verbetert aanzienlijk de bestands I/O prestaties voor node_modules
, venv
, enz.
Multi-stage ontwikkeling
Maak verschillende configuraties voor verschillende teamrollen:
.devcontainer/
├── devcontainer.json # Standaard (volledige stack)
├── frontend/
│ └── devcontainer.json # Alleen frontend (lichter)
└── backend/
└── devcontainer.json # Alleen backend (met DB)
Teamleden kunnen hun omgeving kiezen wanneer ze het project openen.
Werken met SSH-sleutels en Git
Koppel uw SSH-sleutels voor Git operaties:
{
"mounts": [
"source=${localEnv:HOME}${localEnv:USERPROFILE}/.ssh,target=/home/node/.ssh,readonly,type=bind"
],
"postCreateCommand": "ssh-add ~/.ssh/id_ed25519 || true"
}
Aangepaste omgevingsbestanden
Laad omgevingsspecifieke configuratie:
{
"runArgs": ["--env-file", ".devcontainer/.env"]
}
.devcontainer/.env
:
API_KEY=dev_key_here
DEBUG=true
LOG_LEVEL=debug
🔧 Veelvoorkomende probleemoplossing
Container start niet
Fout: Kan niet verbinden met de Docker daemon
Oplossing:
- Zorg dat Docker Desktop draait
- Op Linux, controleer:
sudo systemctl status docker
- Controleer of Docker in uw PATH is:
docker --version
Snelheid op macOS/Windows
Probleem: Bestandsbewerkingen zijn traag
Oplossingen:
-
Gebruik genaamde volumes voor
node_modules
,venv
, enz. -
Schakel bestandsdeling in in Docker Desktop instellingen
-
Overweeg het gebruik van
cached
ofdelegated
mountopties:"workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached"
Extensies installeren niet
Probleem: Extensies opgegeven in devcontainer.json
installeren niet
Oplossingen:
- Herbouw container:
Dev Containers: Rebuild Container
- Controleer of extensie-IDs correct zijn
- Zorg dat extensies ondersteuning bieden voor remote containers (meestal wel)
Poort al in gebruik
Fout: Poort 3000 is al toegewezen
Oplossingen:
- Stop conflicterende containers:
docker ps
endocker stop <container>
- Wijzig poorttoewijzing in
forwardPorts
- Gebruik dynamische poorten: VS Code toont beschikbare poorten automatisch
Wijzigingen in Dockerfile niet toegepast
Probleem: Gewijzigde Dockerfile maar wijzigingen zijn niet zichtbaar
Oplossing: Herbouw zonder cache:
Dev Containers: Rebuild Container Without Cache
Container stopt direct
Probleem: Container start dan stopt
Oplossing: Voeg een opdracht toe om het actief te houden in docker-compose.yml
:
command: sleep infinity
Of in devcontainer.json
:
{
"overrideCommand": true
}
✅ Conclusie
Dev Containers in VS Code brengen consistentie, eenvoud en automatisering tot uw ontwikkelwerkvloeiing. Ze veranderen complexe, broske setup naar codegedefinieerde omgevingen die gewoon werken, ongeacht uw machine of besturingssysteem.
Belangrijkste conclusies:
- 🎯 Elimineer “werkt op mijn machine” problemen — Iedereen gebruikt identieke omgevingen
- 🚀 Snellere onboarding — Nieuwe teamleden productief binnen minuten, niet dagen
- 🔒 Beter beveiliging — Isolatie van afhankelijkheden van uw gastbesturingssysteem
- 📦 Draagbaar — Uw omgeving reist met uw code
- 🤝 Team consistentie — Geen meer afhankelijkheidsversieconflicten
- 🔄 CI/CD pariteit — Gebruik dezelfde afbeelding in ontwikkeling en continue integratie
Of u nu werkt aan een eenvoudig Python script of een complexe microservicesarchitectuur met meerdere databases, Dev Containers bieden een robuuste basis voor moderne ontwikkeling.
Als u werkt aan meertalige projecten, draagt bij aan open source repositories, onboarding van nieuwe ontwikkelaars vaak, of gewoon wil dat u schone en herhaalbare devomgevingen hebt — Dev Containers zijn een must-have tool in uw stack.
Begin klein: probeer Dev Containers op uw volgende project. Zodra u de voordelen ervaren, zult u zich afvragen hoe u ooit zonder hen ontwikkeld.
📚 Nuttige bronnen en gerelateerde artikelen
Officiële documentatie:
- Microsoft Dev Containers Documentatie
- Dev Container Images Repository — Vooraf gebouwde afbeeldingen voor verschillende talen en frameworks
- Dev Container Features — Herbruikbare configuratiefragmenten voor dev containers
Gerelateerde artikelen op deze site:
- VSCode Cheatsheet — Essentiële VS Code snelkoppelingen en commando’s
- Docker Cheatsheet — Referentie voor Docker commando’s
- Docker Compose Cheatsheet — Meervoudige container orchestratie
- Python Cheatsheet — Referentie voor de Python-taal
- Node.js installeren — Handleiding voor het installeren van Node.js
- Go Cheatsheet — Referentie voor de Go-taal
- Populariteit van programmeertalen en frameworks — Technologietrends en rangschikkingen