Note: It appears in Visual Studio Code 1.73.1 that the process for how to open a container has changed. I’ve added the changes to the post

Visual Code supports vscontainers. Basically a way of running Visual Code, connecting to a docker image and working within that container.

So for example we could run up a Go container with all the Go tooling within it, use Visual Code’s terminal to interact directly with the container and it also support volumes, so allows us to store data directly on our host machine.

If you’re using Windows you’ll need the Docker Desktop and WSL2 installed.

All we need to do is…

Let’s say we wanted to work with a dotnet container. Create a folder to act as your code folder and then create a .vscontainer .devcontainer folder and within that a vscontainer.json devcontainer.json file. Add the following

{
  "image": "mcr.microsoft.com/vscode/devcontainers/dotnet",
  "forwardPorts": [3000]
}

Now use the View | Command Palette (or Ctrl+Shift+P) and run the command >Remote-Containers: Reopen in Container Dev Containers: Reopen in Container. This will restart VS Code and when it’s finished downloading the container image will be ready for you to start interacting with – if you haven’t already got the terminal window open then try opening one. In my case I have a bash terminal. You should now be within the container so just try and run the dotnet CLI command and you should see it’s help/commands.

Obviously if your system already has dotnet installed that probably won’t surprise you or interest you that much, but there’s a bunch of alternative containers, for example, how about a TypeScript Node container

{
  "image": "mcr.microsoft.com/vscode/devcontainers/typescript-node:0-12",
  "extensions": ["dbaeumer.vscode-eslint"],
  "forwardPorts": [3000]
}

To see a list of Microsoft defined containers, take a look at microsoft-vscode-devcontainers.

Here’s another one to try – so I have Swift set up on my Linux server but not on my Windows Box, so using the following will give me a Swift environment

{
  "image": "swift",
  "forwardPorts": [3000]
}

Now from the terminal (as already stated) you’re within the container but you’ll want to store your code on the host machine – well magically works out of the box (so to speak) and I am able to create a folder in the terminal and see it in the host folder I created with .vscontainer within it.

References

Developing inside a Container

I’m using Visual Code for my React development and I’m using Chrome as my browser – I want to debug my React code in Chrome using Visual Code, so let’ see how it’s done.

First off, check out Introducing Chrome Debugging for VS Code, secondly VS Code – Debugger for Chrome.

Or, if you prefer, here’s the steps

• Ctrl+Shift+X within Visual Code to load the Extensions list
• Search for Debugger for Chrome and install it (if not already installed)

You’re going to need a launch.json file in the .vscode folder, here’s a minimal example

{
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "Launch Chrome",
            "url": "http://localhost:3000",
            "webRoot": "${workspaceFolder}"
        },
        {
            "type": "chrome",
            "request": "attach",
            "name": "Attach to Chrome",
            "port": 9222,
            "webRoot": "${workspaceFolder}"
        }
   ]
}

In the above we have two configurations, both for Chrome, one launches Chrome with the supplied URL, the second attaches to an existing instance of Chrome.

If you now choose the option Run | Start Debugging, Chrome will launch with your URL loaded. You can place breakpoints in your code (before or after you start debugging) and you’re application will break at these breakpoints as you’d expect and you can inspect variables etc. So basically a full debugging experience.

Default commands within debug mode are as follows

• F5 Continue
• F10 Step Over
• F11 Step Into
• Shift+F11 Step Out
• Ctrl+Shift+F5 Restart
• Shift+F5 Stop

To attach to an existing running instance of Chrome, ensure you start Chrome with the following command line parameters –remote-debugging-port=9222, for example create a shortcut link with Target “C:\Program Files\Google\Chrome\Application\chrome.exe” –remote-debugging-port=9222.

You’ll also need to ensure only this instance of Chrome is open/running and then you can run the “Attach to Chrome” option.