Meesteren van Dev Containers in VS Code

Maak consistente, draagbare en herhaalbare ontwikkelomgevingen met behulp van Dev Containers.

Inhoud

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.

vs code dev containers

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 of Cmd+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 — Hoofdconfiguratiebestand
  • Dockerfile — 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 getoond
  • build / image — Gebruik een Dockerfile of vooraf gebouwde afbeelding
  • customizations.vscode.extensions — VS Code extensies die automatisch worden geïnstalleerd
  • forwardPorts — Poorten die vanuit container naar host worden getoond
  • postCreateCommand — Wordt uitgevoerd wanneer container voor het eerst wordt aangemaakt (bijv. afhankelijkheden installeren)
  • postStartCommand — Wordt uitgevoerd elke keer dat de container wordt gestart
  • containerEnv — Omgevingsvariabelen die beschikbaar zijn in de container
  • remoteUser — Gebruikersaccount die binnen de container wordt gebruikt
  • mounts — 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:

  1. 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.

  2. Container aanmaken — Docker maakt een nieuwe container van de gebouwde afbeelding.

  3. Volume koppelen — Uw projectmap wordt gekoppeld in de container, waardoor uw code binnen beschikbaar is.

  4. Extensies installeren — Alle opgegeven VS Code extensies worden automatisch geïnstalleerd in de container.

  5. Post-create opdrachten — Uw postCreateCommand wordt uitgevoerd (bijv. npm install, pip install -r requirements.txt).

  6. 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.js
  • db — PostgreSQL database, toegankelijk op db:5432 vanuit uw app
  • redis — Redis cache, toegankelijk op redis: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 van redis-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:

  1. Gebruik genaamde volumes voor node_modules, venv, enz.

  2. Schakel bestandsdeling in in Docker Desktop instellingen

  3. Overweeg het gebruik van cached of delegated mountopties:

    "workspaceMount": "source=${localWorkspaceFolder},target=/workspace,type=bind,consistency=cached"

Extensies installeren niet

Probleem: Extensies opgegeven in devcontainer.json installeren niet

Oplossingen:

  1. Herbouw container: Dev Containers: Rebuild Container
  2. Controleer of extensie-IDs correct zijn
  3. Zorg dat extensies ondersteuning bieden voor remote containers (meestal wel)

Poort al in gebruik

Fout: Poort 3000 is al toegewezen

Oplossingen:

  1. Stop conflicterende containers: docker ps en docker stop <container>
  2. Wijzig poorttoewijzing in forwardPorts
  3. 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:

Gerelateerde artikelen op deze site: