VS Code Dev Container

Posted on Edited on In Views:

Sources:

  1. Developing inside a Container from VS Code.
  2. Custom Dev Container Features from VS Code.
  3. See my github repo for my DevContainer confguration.

Dev container

See Developing inside a Container from VS Code.

  1. Start VS Code, run the Dev Containers: Open Folder in Container... command from the Command Palette (F1) or quick actions Status bar item, and select the project folder you would like to set up the container for.

    Tip: If you want to edit the container's contents or settings before opening the folder, you can run Dev Containers: Add Dev Container Configuration Files... instead.

  2. Use Dev Containers: Open Container Configuration File in the Command Palette (Ctrl+Shift+P) to do your customization.

    • The Dev Containers extension uses the files in the .devcontainer folder, namely devcontainer.json, and an optional Dockerfile or docker-compose.yml, to create your dev containers.

To use images supporting CUDA, make sure you have NVIDIA Container Toolkit installed. Then add this to your .devcontainer.json:

1
2
3
4
"runArgs": [
    "--gpus",
    "all"
]

Or, you can just use the docker image:

1
2
3
4
docker pull lyklove/ml:1.0
cd <your_project>
docker run --gpus all --rm -d -i --name ml --network host -v $(pwd):/code -w /code lyklove/ml:1.0 bash
docker container exec -it ml bash

Add features in dev-container

You can also explore official and publicly contributed Features on the specification site. Any Feature can be added by editing devcontainer.json.

Add extensions in dev-container

While you can edit your devcontainer.json file by hand to add a list of extension IDs, you can also right-click on any extension in the Extensions view and select Add to devcontainer.json.

Custumize image

See Create a Dev Container

Usually, you will use a base image (provided by VS Code):

1
2
3
4
5
6
7
8
9
10
{
  "image": "mcr.microsoft.com/devcontainers/typescript-node",

  "customizations": {
    "vscode": {
      "extensions": ["streetsidesoftware.code-spell-checker"]
    }
  },
  "forwardPorts": [3000]
}

However, you can use your own image in "image" field. Meanwhile, you can replace the image property in devcontainer.json with dockerfile to build from your Dockerfile:

1
2
3
4
5
6
7
8
9
10
11
{
  "build": { "dockerfile": "Dockerfile" }, //path to your Dockerfile

  "customizations": {
    "vscode": {
      "extensions": ["dbaeumer.vscode-eslint"]
    }
  },

  "forwardPorts": [3000]
}

My dev-container config

Sources:

  1. Setup a NVIDIA DevContainer with GPU Support for Tensorflow/Keras on Windows
  2. Containerization of CUDA environment using VSCode
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
{
  "name": "CUDA",

  // Here, I use my own image, you can use the official image from NVIDIA.
  // For more CUDA-supported base images, refer to https://hub.docker.com/r/nvidia/cuda
  "image": "lyklove/ml:1.0", 
  // "build": { "dockerfile": "Dockerfile" },

  "runArgs": [
    "--gpus=all"
  ],
  "remoteEnv": {
    "PATH": "${containerEnv:PATH}:/usr/local/cuda/bin",
    "LD_LIBRARY_PATH": "$LD_LIBRARY_PATH:/usr/local/cuda/lib64:/usr/local/cuda/extras/CUPTI/lib64",
    "XLA_FLAGS": "--xla_gpu_cuda_data_dir=/usr/local/cuda"
  },

  // You can run any script here to update the content of the container.
  // "updateContentCommand": "bash .devcontainer/sanity_check.sh", 

  // `postCreateCommand` runs in the workspace folder in the container
  "postCreateCommand": [
    "nvidia-smi"
  ],
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-python.python",
        "ms-toolsai.jupyter",
        "ms-toolsai.vscode-jupyter-cell-tags",
        "ms-toolsai.jupyter-keymap",
        "ms-toolsai.jupyter-renderers",
        "ms-toolsai.vscode-jupyter-slideshow",
        "ms-python.vscode-pylance",
        "charliermarsh.ruff",
        "yzhang.markdown-all-in-one",
        "ms-python.black-formatter",
        "redhat.vscode-yaml",
        "ms-azuretools.vscode-docker",
        "ZainChen.json"
      ]
    }
  },

  // To search a feature, refer to: https://containers.dev/features
  "features": {
    "ghcr.io/devcontainers/features/go:1": {
        "version": "1.18"
    },
    "ghcr.io/devcontainers/features/docker-in-docker:1": {
        "version": "latest",
        "moby": true
    },

    //For python
    // "ghcr.io/devcontainers-contrib/features/black:2": {
    //   "version": "2.0.17",
    // },
    // "ghcr.io/devcontainers-contrib/features/ruff:1": {
    //   "version": "1.0.1",
    // },
    // "ghcr.io/devcontainers/features/anaconda:1": {
    //   "version": "1.0.12",
    // }
}
}