DEV Community

Rost
Rost

Posted on

Using Dev Containers in VS Code

#tutorial #vscode #tooling #docker

Modern software development demands consistent, reproducible environments that work across machines and operating systems. Developers often face the “works on my machine” dilemma due to dependency mismatches, tool versions, or OS differences. Dev Containers in Visual Studio Code (VS Code) solve this elegantly — by letting you develop inside a containerized environment configured specifically for your project.

This article walks through what Dev Containers are, why they’re valuable, and how to set them up in VS Code for smooth, portable development workflows.

🧩 What Are Dev Containers?

Dev Containers are a feature provided by the VS Code Remote - Containers extension (now part of VS Code Remote Development).
They allow you to open your project in a Docker container that’s pre-configured with all your dependencies, languages, and tools.

Think of it as:

“A fully configured development environment, defined as code.”

A Dev Container setup typically includes:

  • A Dockerfile (defining the base image and tools).
  • A devcontainer.json file (configuring workspace settings, extensions, ports, etc.).
  • Optional docker-compose.yml if your project depends on multiple services.

⚙️ Why Use Dev Containers?

Here’s what makes them powerful:

  • Reproducibility: Every developer and CI system uses the same environment.
  • Isolation: No need to pollute your local machine with extra dependencies.
  • Portability: Works on any OS that supports Docker.
  • Team Consistency: One configuration shared across your team.
  • Automation: Automatically installs extensions, dependencies, and tools when you open the project.

🧱 Setting Up a Dev Container in VS Code

Let’s go step-by-step.

1. Install the Required Tools

You’ll need:

  • Docker Desktop (or an equivalent container runtime)
  • VS Code
  • The Dev Containers extension (Search for “Dev Containers” in VS Code extensions marketplace.)

2. Initialize the Dev Container

Open your project folder in VS Code and open the Command Palette (Ctrl+Shift+P or Cmd+Shift+P on macOS), then run:

Dev Containers: Add Dev Container Configuration File
Enter fullscreen mode Exit fullscreen mode

Choose a predefined environment from the list — for example:

  • Node.js
  • Python
  • Go
  • .NET
  • Docker-in-Docker, etc.

This creates a .devcontainer folder with:

  • devcontainer.json
  • Dockerfile (or a reference to a base image)

3. Customize devcontainer.json

Here’s a sample devcontainer.json:

{
  "name": "Node.js Development Container",
  "build": {
    "dockerfile": "Dockerfile"
  },
  "settings": {
    "terminal.integrated.shell.linux": "/bin/bash"
  },
  "extensions": [
    "dbaeumer.vscode-eslint",
    "esbenp.prettier-vscode"
  ],
  "forwardPorts": [3000],
  "postCreateCommand": "npm install",
  "remoteUser": "node"
}
Enter fullscreen mode Exit fullscreen mode

💡 Tip:
You can include your favorite VS Code extensions, environment variables, and even auto-run commands after the container builds.

4. Build and Open in Container

Once your configuration is ready:

  • Run “Dev Containers: Reopen in Container” from the Command Palette.

  • VS Code will:

    • Build the Docker image.
    • Start a container.
    • Mount your project directory inside it.
    • Install all dependencies and extensions.

When it’s done, your VS Code session is running inside the container. You can check by running:

uname -a
Enter fullscreen mode Exit fullscreen mode

You’ll see the container’s Linux environment instead of your host OS.

5. Add Additional Services (Optional)

If your project depends on databases or APIs, you can use Docker Compose.

Example docker-compose.yml:

version: "3"
services:
  app:
    build: .
    volumes:
      - .:/workspace
    command: npm start
  db:
    image: postgres:latest
    environment:
      POSTGRES_USER: dev
      POSTGRES_PASSWORD: secret
      POSTGRES_DB: appdb
Enter fullscreen mode Exit fullscreen mode

Then, in devcontainer.json:

{
  "dockerComposeFile": "docker-compose.yml",
  "service": "app",
  "workspaceFolder": "/workspace"
}
Enter fullscreen mode Exit fullscreen mode

Now, both your app and database start together when you open the container.

🧠 Advanced Tips

  • Use Pre-Built Images: Save build time by starting from Microsoft’s devcontainer images.
  • Version Control: Commit your .devcontainer folder so teammates share the same environment.
  • Debugging: You can attach debuggers just like in a local setup — VS Code handles it seamlessly.
  • Continuous Integration: Use the same Docker image in CI pipelines to ensure total parity.

✅ Conclusion

Dev Containers in VS Code bring consistency, simplicity, and automation to your development workflow.
They turn complex setups into code-defined environments that just work, no matter your machine or OS.

If you collaborate on multi-language projects, contribute to open-source repos, or need clean and reproducible dev environments — Dev Containers are a must-have tool in your stack.

Top comments (0)