Install Docker Desktop, VS Code, and the official Docker extension from Microsoft. 2. Create a Dockerfile in your project root, such as using node:18-alpine for Node.js apps with proper COPY, RUN, and CMD instructions. 3. Use the Docker extension panel to build the image, then run it as a container with optional port mapping like 3000:3000. 4. For full containerized development, install the Dev Containers extension, run "Dev Containers: Add Dev Container Configuration", select a base environment, and reopen the project in the container to run code, extensions, and terminals inside it. 5. Utilize additional features like live reloading with docker-compose, viewing logs, attaching shells, and pushing images to registries directly from the Docker panel, enabling a seamless container-based development workflow within VS Code.
Using Docker with VS Code is straightforward and can greatly streamline your development workflow—especially when working with containerized applications. VS Code’s Docker extension makes it easy to build, manage, and debug containers directly from the editor. Here’s how to set it up and use it effectively.

1. Install Prerequisites
Before you begin, make sure you have the following installed:
- Docker Desktop (or Docker Engine on Linux)
- Visual Studio Code
- Docker extension for VS Code
? You can install the Docker extension by going to the Extensions tab in VS Code (
Ctrl Shift X
), searching for "Docker", and installing the official one published by Microsoft.![]()
2. Create a Dockerfile in Your Project
If your project doesn’t already have a Dockerfile
, create one in the root directory. Here’s a basic example for a Node.js app:
# Use an official Node runtime as the base image FROM node:18-alpine # Set the working directory in the container WORKDIR /app # Copy package files and install dependencies COPY package*.json ./ RUN npm install # Copy the rest of the application code COPY . . # Expose the port the app runs on EXPOSE 3000 # Define the command to run the app CMD ["npm", "start"]
For Python, .NET, or other runtimes, adjust the base image and commands accordingly.

3. Use the Docker Extension to Build and Run Containers
Once the Docker extension is installed and you have a Dockerfile
:
- Open the Docker panel in the sidebar.
- Under Images, right-click your project and choose Build Image.
- Give it a tag (e.g.,
myapp:latest
) and confirm.
After building:
- Go to Containers in the Docker panel.
- Right-click the image and select Run (or Run Interactive if you need a shell).
- Optionally, map ports (e.g.,
3000:3000
) so you can access the app in your browser.
You can also stop, restart, or remove containers from this panel.
4. Debug Your App in a Container (Optional but Powerful)
For full development inside a container (recommended for consistent environments), use Dev Containers.
Install the Dev Containers Extension
Search for and install the "Dev Containers" extension (also by Microsoft).
Open Your Project in a Container
- Open your project folder in VS Code.
- Press
Ctrl Shift P
→ type "Dev Containers: Add Dev Container Configuration". - Choose a base environment (e.g., Node.js, Python, etc.).
- VS Code will generate
.devcontainer/devcontainer.json
and aDockerfile
.
Example devcontainer.json
:
{ "name": "My Dev Container", "dockerFile": "Dockerfile", "forwardPorts": [3000], "postAttachCommand": "npm install" }
- Click Reopen in Container when prompted (or run "Dev Containers: Reopen in Container").
Now, your entire development environment runs inside the container—VS Code extensions, terminal, and files are all container-based.
5. Useful Tips
-
Auto-rebuild on change: Use
docker-compose
with volume mounts for live reloading during development. - View logs: Right-click a running container → View Logs.
- Execute a command in a running container: Right-click → Attach Shell.
- Push to registry: Right-click an image → Push (after logging in via CLI).
Summary
- ? Install Docker and the Docker extension for VS Code
- ? Add a
Dockerfile
to your project - ? Build and run containers from the Docker panel
- ? (Optional) Use Dev Containers for full containerized development
With these tools, you can seamlessly build, test, and debug applications in containers—right from your editor.
Basically, it turns VS Code into a powerful container development environment with minimal setup.
The above is the detailed content of How to use Docker with VS Code?. For more information, please follow other related articles on the PHP Chinese website!

Hot AI Tools

Undress AI Tool
Undress images for free

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

When encountering Docker problems, you should first locate the problem, which is problems such as image construction, container operation or network configuration, and then follow the steps to check. 1. Check the container log (dockerlogs or docker-composelogs) to obtain error information; 2. Check the container status (dockerps) and resource usage (dockerstats) to determine whether there is an exception due to insufficient memory or port problems; 3. Enter the inside of the container (dockerexec) to verify the path, permissions and dependencies; 4. Review whether there are configuration errors in the Dockerfile and compose files, such as environment variable spelling or volume mount path problems, and recommend that cleanbuild avoid cache dryness

The main difference between Docker and traditional virtualization lies in the processing and resource usage of the operating system layer. 1. Docker containers share the host OS kernel, which is lighter, faster startup, and more resource efficiency; 2. Each instance of a traditional VM runs a full OS, occupying more space and resources; 3. The container usually starts in a few seconds, and the VM may take several minutes; 4. The container depends on namespace and cgroups to achieve isolation, while the VM obtains stronger isolation through hypervisor simulation hardware; 5. Docker has better portability, ensuring that applications run consistently in different environments, suitable for microservices and cloud environment deployment.

VSCode workspace is a .code-workspace file that saves project-specific configurations. 1. It supports multi-root directory, debug configuration, shortcut key settings and extension recommendations, and is suitable for managing different needs of multiple projects. 2. The main scenarios include multi-project collaboration, customized development environment and team sharing configuration. 3. The creation method is to save the configuration through the menu File>SaveWorkspaceAs.... 4. Notes include distinguishing between .code-workspace and .vscode/settings.json, using relative paths, and avoiding storing sensitive information.

To expose Docker container ports, the host needs to access the container service through port mapping. 1. Use the dockerrun-p[host_port]:[container_port] command to run the container, such as dockerrun-p8080:3000my-web-app; 2. Use the EXPOSE instruction to mark the purpose in the Dockerfile, such as EXPOSE3000, but the port will not be automatically published; 3. Configure the ports segment of the yml file in DockerCompose, such as ports:-"8080:3000"; 4. Use dockerps to check whether the port map is generated after running.

YoucanuseenvironmentvariablesinVSCodetasksviathe${env:VARIABLE_NAME}syntax.1.Referencevariablesdirectlyintasks.jsontoavoidhardcodingsensitivedataormachine-specificvalues.2.Providedefaultvalueswith"${env:VARIABLE_NAME:-default_value}"topreve

TheVSCodeterminalnotworkingisoftenduetoafrozenterminal,misconfiguredshellsettings,conflictingextensionsorstartupscripts,oracorruptedcache/installation.1.FirstcheckiftheterminalisfrozenbytypingacommandlikelsordirandpressingEnter;ifunresponsive,closean

Using VSCode to develop Angular projects is efficient and convenient, and the key is to configure the environment correctly. First install Node.js and npm; secondly, install AngularCLI globally through npm to create projects and generate components; then install AngularLanguageService, Prettier, ESLint and debug plug-ins in VSCode to improve the development experience; then use ngnew command to create a project and open it in VSCode; use IntelliSense to achieve automatic code completion, quickly navigate files through Ctrl P, and use F12 jump definition; run ngserve to start the development server and enable automatic reloading; configure

Using lightweight basic images, merging and optimizing RUN instructions, and copying only necessary files are the key to reducing Docker images size. 1. Select lightweight basic images such as alpine, distroless or scratch to reduce unnecessary system components; 2. Merge multiple RUN commands and clean caches in time, such as combining apt-getupdate with installation commands, and delete /var/lib/apt/lists/*; 3. Exclude non-essential files through .dockerignore, use multi-stage construction to separate compilation and runtime dependencies, and copy only the necessary configuration and executable files into the final image. These methods can effectively reduce mirror size, improve construction and deployment efficiency, and reduce security
