September 12: VSCode Dev Container

Setup VSCode in Dev Containers 🚢

Hey everyone, I hope it’s going good. This is something I’ve faced quite a lot. I’ve encountered a recurring challenge at my workplace: setting up backend repositories every time I change my device (three times already, lol). The process has become even more tedious with the new Apple Silicon chips.

So, I’ve decided to switch my development environment entirely to Docker containers. While exploring, I discovered Dev Containers in VSCode (my preferred editor).

This blog serves more as a backup for my setup rather than a typical blog post, lol.

Requirements

• Docker
• VScode
• Docker and Remote Explorer extension for VSCode
• Environment Variables for build args (if required)

Steps

Setup devcontainer.json

Skip this if .devcontainer/devcontainer.json exist in the repo

• Create a folder named .devcontainer in the project root
• Create a file named .devcontainer/devcontainer.json.

    // README at: https://github.com/devcontainers/templates/tree/main/src/docker-existing-dockerfile
    {
        "name": "Existing Dockerfile",
        "build": {
            "options": ["--network", "host"],
            // Sets the run context to one level up instead of the .devcontainer folder.
            "context": "../path/to/context",
            // Update the 'dockerFile' property if you aren't using the standard 'Dockerfile' filename.
            "dockerfile": "../path/to/context/Dockerfile",
            "args": {
                "XYZ": "${localEnv:XYZ}",
            }
            
        },
        "mounts": [
            "source=profile,target=/root,type=volume",
            "target=/root/.vscode-server,type=volume"
        ],
        "customizations": {
            "vscode": {
                "extensions": [
                    "alexcvzz.vscode-sqlite",
                    "dracula-theme.theme-dracula",
                    "eamodio.gitlens",
                    "github.codespaces",
                    "github.copilot",
                    "github.copilot-chat",
                    "github.vscode-github-actions",
                    "github.vscode-pull-request-github",
                    "mhutchie.git-graph",
                    "mikoz.black-py",
                    "ms-azuretools.vscode-docker",
                    "ms-python.black-formatter",
                    "ms-python.debugpy",
                    "ms-python.python",
                    "ms-python.vscode-pylance",
                    "ms-toolsai.jupyter",
                    "ms-toolsai.jupyter-keymap",
                    "ms-toolsai.jupyter-renderers",
                    "ms-toolsai.vscode-jupyter-cell-tags",
                    "ms-toolsai.vscode-jupyter-slideshow",
                    "ms-vscode-remote.remote-containers",
                    "ms-vscode-remote.remote-ssh",
                    "ms-vscode-remote.remote-ssh-edit",
                    "ms-vscode.remote-explorer",
                    "ms-vscode.remote-server",
                    "mtxr.sqltools",
                    "qwtel.sqlite-viewer",
                    "vscodevim.vim",
                    "waderyan.gitblame"
                ],
                "settings": {
                    "terminal.integrated.defaultProfile.linux": "bash"
                }
            }
        },
        "features": {
            "ghcr.io/devcontainers-contrib/features/pre-commit:2": {}
        }

    }

This is my preferred config.

Working in the Container

1. Press Ctrl+Shift+P (or Cmd+Shift+P on mac) to open the command palette.
2. Select Dev Containers: Reopen in Container (recommended).
3. It will take some time to build the Docker image for the first time.
   • Ensure the shell where VS Code is started has the necessary environment variables; otherwise, the build will fail.
   • Once built, you can start development within the container.
   • From the second time onward, it will automatically start the container even if it’s stopped.
   • Use the VSCode terminal to perform tasks within Docker (e.g., running the server).
4. (Not recommended) You can manually run and attach to the running container with Dev Containers: Attach to Running Container.

Note: Don’t forget to close unwanted running Docker containers.

Caveats

• Bash is set as the default terminal.

Reference

For more details, visit: https://code.visualstudio.com/docs/devcontainers/containers#_quick-start-open-an-existing-folder-in-a-container

Endnote

I’m still figuring out how to use my zsh configuration inside Docker, but that’s for later. I hope this helps you in some way. Enjoy, and until next time!