VSC Developing inside a Container

This is a convenient function to create isolated, self-contained environment for development.

For example, I want to test my Go/Python app in different versions w/wo external service dependencies. Previsouly I need to set up virtual env for Python or managing multiple versions for Go. Now by taking the advantage of dev container I can easily develop code inside the full-feature container(or docker compose) with SVC editor even in parallel, the setup is as simple as below.

Prerequisite

The dev container overview.

Docker installed at target machine(local or remote)
VSC Dev Container extension installed

Setup

How to Create a Dev Container

create a .devcontainer folder in your project root directory.
create a devcontainer.json file inside .devcontainer folder and add settings, for example:

// For format details, see https://aka.ms/devcontainer.json. For config options, see the
// README at: https://github.com/devcontainers/templates/tree/main/src/go
{
  // A name for the dev container displayed in VSC left corner status bar
  "name": "Demo",
  // other pre-build image to use, it has better support and features.
  // https://github.com/devcontainers/images/tree/main/src
  "image": "golang:1.21.3-bullseye",

  // Dockerfile is most suitable for installing packages and tools independent of your workspace files.
  // https://code.visualstudio.com/docs/devcontainers/create-dev-container#_dockerfile
  // "build": { "dockerfile": "Dockerfile" },

  // Docker compose
  // https://code.visualstudio.com/docs/devcontainers/create-dev-container#_use-docker-compose

  // Features to add to the dev container. More info: https://containers.dev/features.
  // For example, you can install go, git here instead of using post create command
  // "features": {
  // 	"ghcr.io/devcontainers/features/common-utils:2": {},
  // 	"ghcr.io/devcontainers/features/sshd:1": {}
  // },

  // Configure tool-specific properties.
  "customizations": {
    // Configure properties specific to VS Code.
    "vscode": {
      "settings": {},
      "extensions": [
        "streetsidesoftware.code-spell-checker"
      ]
    }
  },

  // Use 'forwardPorts' to make a list of ports inside the container available locally.
  // "forwardPorts": [9000],

  // Use 'portsAttributes' to set default properties for specific forwarded ports. 
  // More info: https://containers.dev/implementors/json_reference/#port-attributes
  // "portsAttributes": {
  // 	"9000": {
  // 		"label": "Hello Remote World",
  // 		"onAutoForward": "notify"
  // 	}
  // },

  // Use 'postCreateCommand' to run commands after the container is created.
  // you can have a utility script in your workspace folder to indicate what
  // to install here, but a Dockerfile may be more efficient.
  // "postCreateCommand": "bash -i scripts/install-dependencies.sh",

  // Uncomment to connect as root instead. More info: https://aka.ms/dev-containers-non-root.
  "remoteUser": "root"
}

start dev container:

1	Dev Containers: Reopen in Container

if any change is made in .devcontainer.json, rebuild it:

1	Dev Containers: Rebuild Containers

How to Attach to a Running Container

Visual Studio Code can create and start containers for you but that may not match your workflow and you may prefer to “attach” VS Code to an already running Docker container - regardless of how it was started.

Once attached, you can install extensions, edit, and debug like you can when you open a folder in a container using devcontainer.json.

This is useful to modify and test a running docker container on the fly without codebase on your local.

attach VSC to a running container

1	Dev Containers: Attach to Running Container

If you need to repeatedly attach to a running container, you can set up configuration in image or container-name level, so next time the attach will start in the right step and place.