In modern development, we often encounter issues with inconsistent environment configurations and dependency conflicts. Especially in team development, different developers may have different local environments, making it difficult for the project to run smoothly on everyone's machine. Development Containers can help solve these problems by providing a consistent, isolated development environment, ensuring that all team members are developing in the same environment.

In this blog, we will introduce how to use VS Code's Development Containers, configure and run a containerized development environment, and demonstrate how to develop with them through a sample project.

What are Development Containers?

Development Containers are development environments based on Docker containers. With the Remote - Containers extension in VS Code, developers can develop and run code inside containers. Containerized development environments not only eliminate the differences in local development setups but also make it easy to share the development environment across different machines and operating systems.

Main Advantages:

• Consistency: Ensures that all developers are using the same development environment, eliminating issues caused by environment configuration differences.
• Isolation: Development containers can be fully isolated from the local environment, avoiding conflicts between the system and development dependencies.
• Portability: Containers can easily run on different machines, ensuring environment consistency.

How to Develop Using Development Containers

1. Install Required Tools

Before starting with Development Containers, make sure your system has the following tools installed:

1.1 Docker

Development Containers rely on Docker to run containers. You can download and install Docker from the official Docker website.

1.2 Visual Studio Code

Download and install VS Code from the VS Code official website.

1.3 Remote - Containers Extension

Open VS Code, go to the Extensions marketplace, search for Remote - Containers, and install it. This extension allows VS Code to connect to Docker containers and develop within them.

2. Create a Dev Container Configuration File

2.1 Create the .devcontainer Folder

In your project's root directory, create a .devcontainer folder and create a devcontainer.json configuration file inside it. This file defines the container's environment and settings.

mkdir .devcontainer

2.2 Write the devcontainer.json Configuration File

{
  "name": "My Development Container",
  "image": "mcr.microsoft.com/vscode/devcontainers/javascript-node:0-14",
  "features": {
    "ghcr.io/devcontainers/features/node:1": {
      "version": "14"
    }
  },
  "customizations": {
    "vscode": {
      "extensions": [
        "dbaeumer.vscode-eslint"
      ]
    }
  },
  "forwardPorts": [3000],
  "postCreateCommand": "npm install"
}

Configuration Explanation: - name: The name of the container, displayed in VS Code. - image: The base container image being used, in this case, a development container with Node.js. - features: Specifies the tools and versions to install inside the container, here Node.js version 14. - customizations: Configures VS Code extensions inside the container, installing ESLint. - forwardPorts: Maps port 3000 from inside the container to the local machine. - postCreateCommand: Command to run after the container is created, in this case, installing project dependencies with npm install.

3. Start the Development Container

After opening your project folder, click the Remote Explorer icon in the lower-left corner of VS Code, and select Reopen in Container. VS Code will build and start the container based on the devcontainer.json configuration, and load your project into the container.

Your development environment is now running inside the container, and all code editing and terminal operations are performed within the container.

4. Developing and Debugging Inside the Container

Once the container is started, VS Code will automatically connect to the container. You can edit code, run commands, and operate through the terminal just as you would in a local environment.

For example, suppose we're developing a simple Node.js application:

node src/index.js

Since port forwarding has been configured, when the application runs inside the container, you can access it in your browser at http://localhost:3000 and see the output.

Conclusion

Using VS Code's Development Containers feature, developers can easily create consistent development environments without manually configuring dependencies locally. The containerized development environment not only isolates the local environment but also provides great portability and consistency.

Whether for team collaboration or solo project development, Development Containers can help you increase development efficiency and reduce issues caused by environment differences. If you haven't used them yet, follow the steps above to set them up and give it a try!