💻 Development Containers in VS Code

What Is a Dev Container?

You already know how to run an app in a container. A development container flips the idea around: instead of packaging the finished app, it packages the place you build the app. VS Code launches a container, mounts your source into it, installs your extensions inside it, and then connects your editor to it. You edit locally; everything actually runs in the container.

💡 A useful analogy: A dev container is a fully-equipped workshop that travels with the project. Whoever opens the repo walks into the same workshop — same tools, same bench, same versions — so nobody wastes a day discovering their Node is three majors behind.

Prerequisites & Setup

Three pieces get you started:

• VS Code — the editor.
• Docker Desktop (or Docker Engine on Linux) — the container runtime.
• Dev Containers extension — search "Dev Containers" in the Extensions view (Ctrl+Shift+X) and install the Microsoft one.

Confirm Docker is alive before you begin:

docker --version
docker run --rm hello-world

Once installed, a small green remote indicator appears in the bottom-left corner of VS Code. Opening a folder that contains a .devcontainer config will prompt "Reopen in Container".

Anatomy of devcontainer.json

The config lives at .devcontainer/devcontainer.json. At minimum it names an image; from there you layer on ports, extensions, and settings. Here's a complete Node example:

{
  "name": "Node.js Development",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode"
      ],
      "settings": {
        "editor.formatOnSave": true,
        "editor.defaultFormatter": "esbenp.prettier-vscode"
      }
    }
  },
  "postCreateCommand": "npm install",
  "remoteUser": "node"
}

Features & Lifecycle Commands

Features — tools without writing a Dockerfile

Features are reusable, community-maintained install scripts you drop into your config. Need the GitHub CLI, Docker-in-Docker, or an extra language? Add a line instead of hand-writing apt-get in a Dockerfile:

{
  "image": "mcr.microsoft.com/devcontainers/base:ubuntu",
  "features": {
    "ghcr.io/devcontainers/features/node:1": { "version": "20" },
    "ghcr.io/devcontainers/features/python:1": { "version": "3.12" },
    "ghcr.io/devcontainers/features/github-cli:1": {},
    "ghcr.io/devcontainers/features/docker-in-docker:1": {}
  }
}

Lifecycle commands — run the right thing at the right time

These hooks fire at distinct moments. The one you'll use most is postCreateCommand for installing dependencies:

Multi-Service with Compose

When your project needs a database alongside the app, point the dev container at a Docker Compose file and tell VS Code which service to attach to. VS Code develops inside the app service while the db service runs beside it.

.devcontainer/devcontainer.json:

{
  "name": "Web App with Database",
  "dockerComposeFile": "compose.yaml",
  "service": "app",
  "workspaceFolder": "/workspace",
  "forwardPorts": [3000, 5432],
  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint", "mtxr.sqltools-driver-pg"]
    }
  },
  "postCreateCommand": "npm install"
}

.devcontainer/compose.yaml:

services:
  app:
    build:
      context: ..
      dockerfile: .devcontainer/Dockerfile
    volumes:
      - ..:/workspace:cached      # your source, live-mounted
    command: sleep infinity       # keep the container alive for VS Code
    environment:
      DATABASE_URL: postgres://postgres:postgres@db:5432/myapp
    depends_on:
      - db

  db:
    image: postgres:16
    restart: unless-stopped
    volumes:
      - postgres-data:/var/lib/postgresql/data
    environment:
      POSTGRES_PASSWORD: postgres
      POSTGRES_DB: myapp

volumes:
  postgres-data:

GitHub Codespaces

The best part: the same .devcontainer config powers GitHub Codespaces, a full VS Code environment running in the cloud. A contributor with nothing but a browser clicks "Create codespace" and lands in your exact environment — no local Docker, no setup.

You can add cloud-specific hints without breaking local use:

{
  "name": "My Project",
  "image": "mcr.microsoft.com/devcontainers/universal:2",
  "hostRequirements": { "cpus": 4, "memory": "8gb" },
  "customizations": {
    "codespaces": {
      "openFiles": ["README.md", "src/app.js"]
    }
  }
}

Best Practices (Do / Don't)

Hands-on Exercise

{
  "name": "Express Dev",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:20",
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint", "esbenp.prettier-vscode"],
      "settings": { "editor.formatOnSave": true }
    }
  },
  "postCreateCommand": "npm install",
  "remoteUser": "node"
}

Summary & Quiz

📚 Further Reading

• VS Code — Developing inside a Container
• The Dev Container Specification
• Dev Container Features catalog

🚀 What's Next?

You've now built the whole Module 2 toolkit — Git, Docker, Compose, and reproducible dev environments. Next you'll put it all together in a Weekend Project combining version control and containerization end to end.