VS Code Remote Development With Docker Containers on Windows

This is a topic I’ve been curious about for a long time. My team supports windows and linux environments which presents some unique challenges

  1. We have to move in and out of shell environments
  2. We have to understand tools on both systems (grep vs find, etc)
  3. We have to understand nuances of running languages on multiple OSs (pathing is always a joy)

The company mostly issues Windows laptops (and some Macs), so we’ve used a number of different approaches to get run time in both environments including

  1. Local VMs running on our laptops
  2. VMs running in a VMWare cluster
  3. Straight EC2 instances
  4. Cloud9
  5. Docker containers
  6. WSL

They all have pros and cons, but I’ve been curious about Remote Development with VS Code for a while so I gave it a try to see if it could make sense to add to the list.

I’m working on a Windows 10 laptop with Docker Desktop installed. I found this article and started running through it.

First I installed the VS code extension for remote development with containers: https://marketplace.visualstudio.com/items?itemName=ms-vscode-remote.remote-containers

No problems on install. It creates a new side bar icon for remote options and some helpful info about the containers you have available. It also shows you the container’s volume mount, which is helpful context.

I cloned the node example repo, and the popup in the article came up no problem, and within seconds I was debugging a node process. Not bad.

Now with PowerShell

As usual, I gotta tie it back to PowerShell. My team does a lot of development in PowerShell, and we’re starting to do some PowerShell Core development targeted at Linux. This feels like it could be a good fit.

I created an empty directory with a .devcontainer directory

The I mimicked the devcontainer.json file from the node sample repo

{
    "name": "PS Sample",
    "dockerFile": "Dockerfile",

    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash" // Hoping to switch to pwsh later
    }
}

And then created a one line docker file

FROM mcr.microsoft.com/powershell

When I clicked on the remotes icon a popup offered to reopen the folder inside my dev container. I let it build and it dropped me right into a bash window

So I added a hello world powershell script through VS Code

write-host "hello world!";

Like I expected the file showed up inside of the container and I could run it with pwsh HelloWorld.ps1

Debugging PowerShell

Next I wanted to debug my powershell script. At first I was disappointed because it looked like the extension wouldn’t pick that up by default

But I found this article on debugging inside of a dev container and it had a helpful link to this extension.

I struggled with it for a few minutes before realizing the VS Code was seeing the extension already installed on my local machine, but not in my dev container. I added that to the extension list in my devcontainer.json file like so

{
    "name": "PS Sample",
    "dockerFile": "Dockerfile",

    "settings": {
        "terminal.integrated.shell.linux": "/bin/bash" // Hoping to switch tp pwsh later
    },
    "extensions": [
        "ms-vscode.powershell"
    ]
}

Rebuilt the container, and just like that debugging showed up!

Lastly, adding this to an existing project was just a matter of copying over the .devcontainers folder (I won’t show any screen shots, because it’s an active project).

I will note the powershell modules are a sub section of a larger project that includes work in other languages (typescript, python, etc). I had to put the .devcontainer directory in the root of the powershell section of the project.

Conclusion

There is a little magic happening here, like installing support for VS Code extensions inside of the container. But for the most part it’s pretty standard Docker features like volume mapping, interactive terminals, etc. Just grouped together for convenience.

Remote development will go into our list of tools for spending time in other languages!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s