Developing in Docker containers using VSCode Remote-Containers, you need to install VSCode, Docker and Remote-Containers extensions first. 1. Open the project folder. 2. Click the green label in the lower left corner to select "Remote-Containers: Open Folder in Container...", 3. Select the Dev Container template (such as Node.js), and VSCode automatically generates .devcontainer configuration. 4. Click "Reopen in Container" to wait for the container to be built and connected, 5. Configure images, port forwarding, plug-ins, etc. through devcontainer.json, 6. You can customize Dockerfile or use docker-compose to manage multiple services, which is suitable for team development, newcomer onboarding and learning scenarios, ensuring that the environment is consistent and does not pollute the local system.

Do you use VSCode for development, but want to run code in the container? Remote-Containers do this - it allows you to develop in Docker containers, just write code locally, and the environment is all in the container, clean and consistent. Below is a practical introductory tutorial that will take you to get started step by step.

1. Prerequisite: What do you need to prepare

• Visual Studio Code (Latest Version)
• Docker (installed and running)
  • Windows: Install Docker Desktop
  • macOS: Docker Desktop
  • Linux: Install Docker Compose Docker Engine
• Remote-Containers Extension
  • Search Remote-Containers in VSCode Extension Market and install (provided by Microsoft)

? Check: Open the terminal and run docker --version and docker run hello-world to ensure Docker works properly.

2. Open the project and connect to the container (the easiest way)

Suppose you have a local project folder (such as my-node-app ) and you want to develop it in the container.

step:

1. Open VSCode

2. Click the green tag in the lower left corner: (Quick access to remote resources)

   

3. Select: Remote-Containers: Open Folder in Container...

4. Select your project folder

5. VSCode will prompt you to select a "Dev Container", for example:

   • Node.js
   • Python 3
   • Ubuntu
   • Or customize Dockerfile

6. Choose one, such as Node.js , VSCode will automatically generate the .devcontainer folder

7. Click "Reopen in Container"

8. Wait for Docker to build the image and start the container

9. After the container is started, VSCode will be automatically connected - you are developing it in the container now!

? You will see .devcontainer/devcontainer.json and .devcontainer/Dockerfile , which are the configuration core.

3. Understand the .devcontainer configuration file

VSCode controls container behavior through the .devcontainer folder.

Main documents:

• devcontainer.json : defines how container starts
• Dockerfile (optional): Custom image building
• devcontainer.json example:

 {
  "name": "My Dev Container",
  "image": "node:18",
  "forwardPorts": [3000],
  "postAttachCommand": "npm install",
  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint", "ms-vscode.vscode-typescript-next"]
    }
  }
}

Key field description:

• image : Basic image (can also use dockerFile to point to custom Dockerfile)
• forwardPorts : Automatic forwarding port (such as front-end 3000 and back-end 8000)
• postAttachCommand : Automatically run the command after connection
• extensions : Recommended installation plug-ins (team unified environment)
• mounts : Can mount additional volumes (advanced usage)

4. Use a custom Dockerfile (more flexible)

Don't want to use ready-made mirrors? Write your own Dockerfile.

Example structure:

 project-root/
├── .devcontainer/
│ ├── devcontainer.json
│ └── Dockerfile
├── src/
└── package.json

.devcontainer/Dockerfile :

 FROM node:18-slim

WORKDIR /workspaces/my-app

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

.devcontainer/devcontainer.json :

 {
  "name": "Custom Node Container",
  "dockerFile": "Dockerfile",
  "forwardPorts": [3000, 5000],
  "postCreateCommand": "npm install",
  "remoteUser": "node"
}

?? Note: The default user is root . If the basic image has non-root users (such as node ), it is recommended to add "remoteUser": "node" more secure.

5. Common techniques and problem solving

? Automatically open project directory

Add in devcontainer.json :

 "workspaceFolder": "/workspaces/my-app"

? Mount local .ssh or .npmrc

 "mounts": [
  "source=${env:HOME}/.ssh,target=/home/vscode/.ssh,type=bind,consistency=cached"
]

? Use docker-compose (multi-service development)

If you have databases, Redis, etc.:

• Create docker-compose.yml
• Use in devcontainer.json :

 "dockerComposeFile": "docker-compose.yml",
"service": "app",
"runServices": ["db", "redis"]

? Container startup failed? Try:

• Delete container: docker ps -a find and docker rm <id></id>
• Clean up the image: docker image ls → docker rmi
• View log: VSCode's "Remote Explorer" in the lower right corner → View container output

6. Who is suitable for it?

• Team development: Unify the environment and avoid "can run on my machine"
• Newcomer joining: Enter the development environment with one click
• Learn new technology: No need to pollute local systems
• Pre-CI/CD Verification: Local environment and production closer

Basically that's it.
Not complicated, but many people are stuck in Docker without startup, or the extension is not installed.
As long as Docker can run, Remote-Containers can be used.
It is recommended to start with "Open Folder in Container" and then gradually customize it.

The above is the detailed content of VSCode remote containers tutorial. For more information, please follow other related articles on the PHP Chinese website!