Visual Studio Code Development Containers


I’ve been using Visual Studio Dev Containers to have a seamless development experience across different operating systems. Visual Studio Dev Containers work by leveraging Docker’s containerization functionality to allow using Visual Studio Code inside the container. The result is that your VS Code application looks and functions as if you were actually running whichever Linux image you built.

In order to use Visual Studio Code Dev Containers, you must have Docker installed on your operating system. Afterwards, you’d create a file (devcontainer.json) which tells VS Code how to access and configure a dev container. Here is an example:

{
  "image": "mcr.microsoft.com/devcontainers/typescript-node",
  "forwardPorts": [3000],
  "customizations": {
    "vscode": {
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  }
}

Credit

  • mcr.microsoft.com/devcontainers is Microsoft’s container registry for dev containers.
  • mcr.microsoft.com/devcontainers/typescript-node is a Docker image that describes a pre-configured environment for Node.js & TypeScript tools—so you can develop in that language immediately.
  • forwardPorts tells VS Code to forward port 3000 from the container to the host machine, which is useful for web servers or apps running inside the container.
  • customizations enables you to customize the environment (install additional extensions, set VS Code settings, etc).

Tip: In this dev container, node, npm, and eslint are pre-installed and available on the PATH for Node.js and JavaScript development.

Why use Dev Containers?
Dev Containers ensure your development environment is consistent across different machines and team members, reducing “it works on my machine” problems. Many official dev container images come with popular tools pre-installed, so you can start coding right away.

How to use:
In VS Code, open the Command Palette (Ctrl+Shift+P), then select “Dev Containers: Reopen in Container” to start working inside your configured environment.

For more details, see the VS Code Dev Containers documentation.

There’s more to learn about each of the fields in the documentation (like having multiple ports, the variety of customization parameters, etc.), but this is a general summary of what Dev Containers are.