How To: Install VS Code and use with Docker

By working in Docker containers, all of our code will work in the same environment. This helps mitigate the issue of developing on different platforms (Windows, Mac, Linux and its flavors), versions and hardware.

  • Go to https://code.visualstudio.com/download and download the version for your platform and install it.

  • In VS Code, install the Docker Container extension.
  • As an example, we will create a folder proj that will contain a file Dockerfile (MUST BE THAT NAME, NO EXTENSION) that will create a Linux based environment with Python, PIP, Node.js, and NPM installed.

  • In the Dockerfile, put this exact code

    • This code is commented to help understand what is happening.

    • The first line gets the image to start from (i.e. a version of Ubuntu). It is located online at the  Docker Hub . You can search for other images to start with for your own configurations. You can also upload your own.

    • apt-get installs the packages.

      • -y means to automatically say “yes” in Linux if it asks you questions to confirm “yes | no” to continue installing.

      • Example: nodejs=10.24.0~dfsg-1~deb10u1 , the 10.24.0~dfsg-1~deb10u1 part is the exact version. This ensures that that specific version is installed. By default, it is the latest version which can break your code a year from now if things change. Used apt-cache madison <package> to figure out the version available on the repo.

         

         

# Derive from image
FROM python:3.9.5-slim

# Create a work directory in the Docker image that
# all the files will be created in
WORKDIR /api

# NOTE: To check available versions of a package
# apt-cache madison <package>
#
# Install dependent libraries for software to work
RUN apt-get update -y
RUN apt-get install -y nodejs=10.24.0~dfsg-1~deb10u1
RUN apt-get install -y npm=5.8.0+ds6-4+deb10u2

  • Continuing the example, to create a coding project in VS Code that will be loaded in Docker via Remote-Container command (from the Docker extension you just installed)

    • To do this, use the hotkey CTRL+SHIFT+P (on Windows, should be the same on Mac and Linux) OR go to the menu View->Command Palette…

    • Then type in “Remote-Containers: Open Folder in Container”. This will open a folder that you can select with the Dockerfile in it.

  • You will be asked a question “How would you like to create your container configuration?”

    • Choose From ‘Docker File’

  • NOTE: It may take a few minutes to build the image from the Docker container the first time.

 

  • You are now working in a Docker Image, a specific one with a Linux environment with Python, Pip, Node.js, and NPM installed.

  • You can open the terminal with hotkey CTRL+SHIFT+` (tilde, not quotation) or by going to the menu and Terminal->New Terminal

  • You should see something similar to this in the terminal: root@214200bcda0c:/workspaces/proj#

    • The 214200bcda0c would probably be different because that is generated automatically if you do not explicitly name an image.

  • You can test Linux environment by checking it in the terminal with cat /etc/os-release. You should see:

 

PRETTY_NAME="Debian GNU/Linux 10 (buster)"
NAME="Debian GNU/Linux"
VERSION_ID="10"
VERSION="10 (buster)"
VERSION_CODENAME=buster
ID=debian
HOME_URL="https://www.debian.org/"
SUPPORT_URL="https://www.debian.org/support"
BUG_REPORT_URL="https://bugs.debian.org/"
root@be56144f1bc5:/workspaces/proj_setup/api# 

  • You can check the Python version, Node.js (JavaScript without the browser) version, where they are installed and start writing code in those languages in the environment.

  • To close the project in VS Code, go to menu File->Close Folder
    • If you are running a Docker container, also close the remote connection File->Close Remote Connection

  • Remember to open projects in Docker via Remote-Container command

  • To do this, use the hotkey CTRL+SHIFT+P (on Windows, should be the same on Mac and Linux) OR go to the menu View->Command Palette…

  • Then type in “Remote-Containers: Open Folder in Container”. This will open a folder that you can select with the Dockerfile in it.

  • You will be asked a question “How would you like to create your container configuration?”

    • Choose From ‘Docker File’

  • NOTE: It may take a few minutes to build the image from the Docker container the first time.

Close

50% Complete

Two Step

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.