How to Set Up Docker 27 Development Environments with VS Code 1.90 Dev Containers

Introduction

Containerized development streamlines workflow consistency across teams, eliminates "it works on my machine" issues, and isolates dependencies. Docker 27 introduces performance improvements for build caching and resource management, while VS Code 1.90 enhances Dev Containers integration with faster container startup and better extension support. This guide walks you through setting up reproducible development environments using these tools.

Prerequisites

• A supported operating system (Windows 10/11, macOS 12+, or Linux distribution with kernel 5.15+)
• Administrator/sudo access for software installation
• Stable internet connection for downloading tools and container images

Step 1: Install Docker 27

First, install Docker Engine 27 (or Docker Desktop 27 for Windows/macOS):

• Windows/macOS: Download Docker Desktop 27 from the official Docker site. Run the installer, follow prompts, and restart your system if required.

• Linux: Use your distribution’s package manager or follow Docker’s official installation guide for your distro. For Ubuntu, run:
  

  sudo apt-get update && sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin -y
  

Verify the installation by running docker --version in your terminal. You should see output similar to Docker version 27.0.1, build 12345.

Step 2: Install VS Code 1.90

Download Visual Studio Code 1.90 from the VS Code update page:

• Run the installer for your OS, check "Add VS Code to PATH" (Windows) or drag to Applications (macOS).
• Linux users can install via Snap: sudo snap install code --classic or download the .deb/.rpm package.

Confirm the installation with code --version — output should start with 1.90.0.

Step 3: Install the Dev Containers Extension

VS Code’s Dev Containers extension (ID: ms-vscode-remote.remote-containers) enables containerized development. Install it via:

• VS Code Marketplace: Search for "Dev Containers" in the Extensions tab (Ctrl+Shift+X / Cmd+Shift+X) and click Install.
• Command line: Run code --install-extension ms-vscode-remote.remote-containers.

Restart VS Code after installation to activate the extension.

Step 4: Create a Dockerfile for Your Development Environment

Define your environment’s base image and dependencies in a Dockerfile. Below is an example for a Node.js 20 development environment:

# Use official Node.js 20 image as base
FROM node:20-slim

# Set working directory
WORKDIR /app

# Install common development tools
RUN apt-get update && apt-get install -y \
    git \
    curl \
    vim \
    && rm -rf /var/lib/apt/lists/*

# Switch to non-root user for security
RUN useradd -m -s /bin/bash devuser && chown -R devuser:devuser /app
USER devuser

# Set default shell
SHELL ["bin/bash", "-c"]

Save this file as Dockerfile in your project root.

Step 5: Configure devcontainer.json

Create a .devcontainer folder in your project root, and add a devcontainer.json file inside it. This file tells VS Code how to build and connect to your Dev Container:

{
    "name": "Node.js 20 Dev Environment",
    "dockerFile": "../Dockerfile",
    "context": "..",
    "extensions": [
        "dbaeumer.vscode-eslint",
        "esbenp.prettier-vscode",
        "ms-vscode.vscode-typescript-next"
    ],
    "forwardPorts": [3000, 9229],
    "postCreateCommand": "npm install",
    "settings": {
        "terminal.integrated.defaultProfile.linux": "bash"
    }
}

Key fields explained:

• name: Display name for the container in VS Code.
• dockerFile: Path to your Dockerfile relative to devcontainer.json.
• extensions: VS Code extensions to install inside the container.
• forwardPorts: Ports to forward from the container to your host OS.
• postCreateCommand: Command to run after the container is created (e.g., install dependencies).

Step 6: Open Your Project in the Dev Container

Launch the Dev Container with these steps:

1. Open your project folder in VS Code.
2. Open the Command Palette (Ctrl+Shift+P / Cmd+Shift+P).
3. Search for and select Dev Containers: Reopen in Container.
4. VS Code will build the Docker image using your Dockerfile, start the container, and reconnect to the containerized environment. This may take a few minutes on first run.

Once complete, the bottom-left corner of VS Code will show "Dev Container: Node.js 20 Dev Environment" to confirm the connection.

Step 7: Verify Your Setup

Confirm everything works as expected:

• Open the integrated terminal in VS Code (Ctrl+/ Cmd+\) — it should be running inside the container. Run node --version to verify Node.js is installed.
• Run docker ps on your host terminal — you should see your Dev Container running.
• Test port forwarding: Start a sample app on port 3000 inside the container, then access it at localhost:3000 on your host browser.

Troubleshooting Common Issues

• Docker daemon not running: Start Docker Desktop (Windows/macOS) or run sudo systemctl start docker (Linux).
• Container build fails: Check your Dockerfile for syntax errors, ensure you have internet access to pull base images.
• VS Code can’t connect to container: Restart VS Code, reinstall the Dev Containers extension, or check Docker logs for errors.
• Port conflicts: Change forwarded ports in devcontainer.json if the default ports are in use on your host.

Conclusion

You’ve now set up a reproducible Docker 27 development environment managed via VS Code 1.90 Dev Containers. This workflow ensures all team members use identical dependencies, reduces environment-related bugs, and integrates seamlessly with VS Code’s tooling. Next steps include customizing your devcontainer.json for your specific tech stack, adding more extensions, or setting up multi-container environments with Docker Compose.