{"id":9304,"date":"2022-03-21T22:03:42","date_gmt":"2022-03-21T22:03:42","guid":{"rendered":"http:\/\/putridparrot.com\/blog\/?p=9304"},"modified":"2022-11-24T09:51:18","modified_gmt":"2022-11-24T09:51:18","slug":"visual-code-with-vscontainers","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/visual-code-with-vscontainers\/","title":{"rendered":"Visual Code with vscontainers"},"content":{"rendered":"

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<\/em><\/p>\n

Visual Code supports vscontainers. Basically a way of running Visual Code, connecting to a docker image and working within that container. <\/p>\n

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.<\/p>\n

If you’re using Windows you’ll need the Docker Desktop and WSL2 installed.<\/em><\/p>\n

All we need to do is…<\/p>\n

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<\/del> .devcontainer folder and within that a vscontainer.json<\/del> devcontainer.json file. Add the following<\/p>\n

\r\n{\r\n  "image": "mcr.microsoft.com\/vscode\/devcontainers\/dotnet",\r\n  "forwardPorts": [3000]\r\n}\r\n<\/pre>\n
Now use the View | Command Palette (or Ctrl+Shift+P) and run the command >Remote-Containers: Reopen in Container<\/em><\/del> Dev Containers: Reopen in Container<\/em>. 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<\/em> terminal. You should now be within the container so just try and run the dotnet<\/em> CLI command and you should see it’s help\/commands.<\/p>\n
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<\/p>\n
\r\n{\r\n  "image": "mcr.microsoft.com\/vscode\/devcontainers\/typescript-node:0-12",\r\n  "extensions": ["dbaeumer.vscode-eslint"],\r\n  "forwardPorts": [3000]\r\n}\r\n<\/pre>\n
To see a list of Microsoft defined containers, take a look at microsoft-vscode-devcontainers<\/a>. <\/p>\n
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<\/p>\n
\r\n{\r\n  "image": "swift",\r\n  "forwardPorts": [3000]\r\n}\r\n<\/pre>\n
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.<\/p>\n
References<\/strong><\/p>\n
Developing inside a Container<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"
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 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[246],"tags":[],"class_list":["post-9304","post","type-post","status-publish","format-standard","hentry","category-visual-code"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9304","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=9304"}],"version-history":[{"count":5,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9304\/revisions"}],"predecessor-version":[{"id":9773,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/9304\/revisions\/9773"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=9304"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=9304"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=9304"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}