Featured image of post Using Docker to stay clean. Part 02 - Visual Studio Code

Using Docker to stay clean. Part 02 - Visual Studio Code

In this article, I present my way of working with Docker in a way that keeps the computer clean when using new technology for learning or occasional use. The assumptions made here are "as little Docker as possible", that is, I focus on not letting the knowledge needed to use it overshadow the knowledge we want to possess. This is the second part of the article on this topic.

Table of contents

Just Docker

WykorzystanieDockeraWCeluZachowaniaCzystyosci PLuginDocker
Ilustracja 1. Plugin view

The Docker extension by Microsoft available at https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-docker allows us to easily manage and run images. It has many more features that are beyond the scope of this article.

Its most important features are:

WykorzystanieDockeraWCeluZachowaniaCzystyosci FunkcjePluginuDocker
Ilustracja 2. A context menu view that gives access to useful functions

The following functions are most interesting for starting a new container from an image:


This is the equivalent of running the service from the previous part of the article. It starts the given container and leaves it in the background.

Run interactive

Corresponds to running an interactive image. After using this command, all output and the ability to interact with the image is available from the Visual Studio Code terminal.


Allows us to update the image if a newer version has appeared under the given tag.


Removes the image, freeing up disk space.

For operations on a running container, the most interesting features are:

Attach Shell

Connects the Visual Studio Code terminal allowing us to act in the selected container.

Open in Browser

Opens the container in a browser (if the browser has provided a port for this)


Stops the container.

In summary - we have all the basic operations as in the console but in a much more pleasant environment.

Remote - Containers

WykorzystanieDockeraWCeluZachowaniaCzystyosci RemoteContainers
Ilustracja 3. View of Remote-Containers plugin

This is undoubtedly the best plugin to work with Docker that integrates with the plugin above, well:

WykorzystanieDockeraWCeluZachowaniaCzystyosci FunkcjePluginuRemoteContainers
Ilustracja 4. Docker plugin extension by Remote - Containers.
Attach Visual Studio Code

This function causes our Visual Studio Code to be reopened in the context of the container! This gives us the ability to open folders that are located there. This gives us great integration as we can easily copy data and work on files from within Visual Studio Code.

WykorzystanieDockeraWCeluZachowaniaCzystyosci QisokVSCWKontenerze
Ilustracja 5. View Visual Studio Code inside the container.
There is an even better part of this extension, that is

=== .devcontainer

Visual Studio Code can run in a containerized environment (run the project in Docker) by adding a .devcontainer directory and in it a devcontainer.json file used to configure the VSC environment and a Dockerfile that stores information about our image in which we will be working. VSC can complete the file structure for you through the command Remote-Containers: Add Development Container Configuration Files, so you don’t have to save or remember anything.

The directory structure and file contents are as follows:

WykorzystanieDockeraWCeluZachowaniaCzystyosci WidokKonteneraDevContainer
Ilustracja 6. directory structure for .devcontainer
  1. a view of the directory structure,

  2. The contents of the Dockerfile for the environment in which I write posts for this blog,

  3. the contents of devcontainer.json, which automatically configures this environment on first startup.

  4. a terminal and the ability to open ports while running in a container!

You can find more about configuring Visual Studio Code under containers at here, and even more information at the official Microsoft site.

node.js example

  1. To begin, create a directory to work in

    This can be D:/mynodejsproject, for example. You can do this using the command:

    > mkdir D:/mynodejsproject

Then open Visual Studio Code: in it: To do this, right-click on an empty space in the menu directory:PPM[Open With Code]. You can also do this with the command line:


> cd D:/mynodejsproject
> code .
Utwórz przykładowy Devcontainer

Inside Visual Studio Code, press F1 and type Remote-Container: Reopen in container - this command will open a menu for selecting a sample container, from which select Node.js, version any (I chose 16). It will take a while for the image to be downloaded and run. In the meantime, you can see that in our D:/mynodejsproject directory, a folder has appeared

  • .devcontainer and in it two files (mentioned above):

In the D:/mynodejsproject directory, create an app.js file

You can also do this from within Visual Studio Code. Paste the code from the previous section into it, which I also include below:

Code from Getting Started with Node.js
const http = require('http');

const http = require('http');

const hostname = '';
const port = 3000;

const server = http.createServer((req, res) => {
  res.statusCode = 200;
  res.setHeader('Content-Type', 'text/plain');
  res.end('Hello World');

server.listen(port, /*hostname,*/ () => {
  console.log(`Server running at http://${hostname}:${port}/`);

*Don’t forget to save the contents of the file!

Open Terminal in Visual Studio Code

Go to View  Terminal on the top bar of VSC or press F1 and type Open new external terminal. You will probably see something similar:

node ➜ /workspaces/mynodejsproject $

Well, we are inside a container, in a directory that is named identically to ours! What’s more, if we type the ls command, we can see that our app.js file is there!

node ➜ /workspaces/mynodejsproject $ ls
Let’s run our application: type the command node app.js in terminal

Visual Studio automatically detects that we need port 3000 and redirects it to our computer itself! This is told to us by the message:

WykorzystanieDockeraWCeluZachowaniaCzystyosci PrzekierowaniePortowPrzezVSC

Moreover, we can click the Open in browser button, and we will see the awaited Hello world in our favorite browser!

Keep playing!

You can install a separate set of add-ons in the container, also why not add support for JavaScript or node itself?

comments powered by Disqus
Please keep in mind that the blog is in preview form at this point and may contain many errors (but not merit errors!). Nevertheless, I hope you enjoy the blog! Many illustrations appeared on the blog thanks to unsplash.com!
Built with Hugo
Theme Stack designed by Jimmy