Using Visual Studio Code from a docker image locally or remotely via VS Online

Published Mar 30 2020 08:25 AM 12.7K Views




Utilising Custom Container builds to spin up a custom Visual Studio Code Environment for use on premise with Visual Studio Code or Online with Visual Studio Online

Using Visual Studio Code

Please see the following  repository contains a Visual Studio Code container build and instructions on deployment


Using a Devcontainer custom docker image within the rep is a folder .devcontainer 

Within .devcontainer are two file


Dockerfile - docker installation file

devcontainer.json - Json file for the container build 


DockerFile - this file is the build of the docker image for the dev environment and includes things like python library installations





# Copyright (c) Microsoft Corporation. All rights reserved.
# Licensed under the MIT License. See for license information.

#Python Versions
#FROM python:3
#Python Anaconda
FROM continuumio/anaconda3

# Avoid warnings by switching to noninteractive
ENV DEBIAN_FRONTEND=noninteractive

# This Dockerfile adds a non-root user with sudo access. Use the "remoteUser"
# property in devcontainer.json to use it. On Linux, the container user's GID/UIDs
# will be updated to match your local UID/GID (when using the dockerFile property).
# See for details.

# Uncomment the following COPY line and the corresponding lines in the `RUN` command if you wish to
# include your requirements in the image itself. It is suggested that you only do this if your
# requirements rarely (if ever) change.
# COPY requirements.txt /tmp/pip-tmp/

# Configure apt and install packages
RUN apt-get update \
    && apt-get -y install --no-install-recommends apt-utils dialog 2>&1 \
    # Verify git, process tools, lsb-release (common in install instructions for CLIs) installed
    && apt-get -y install git openssh-client less iproute2 procps lsb-release \
    # Install DataScience Python Libraries
    && pip --disable-pip-version-check --no-cache-dir install pylint \ 
    && pip --disable-pip-version-check --no-cache-dir install jupyter \
    && pip --disable-pip-version-check --no-cache-dir install numpy \
    && pip --disable-pip-version-check --no-cache-dir install pandas \
    && pip --disable-pip-version-check --no-cache-dir install scipy \
    && pip --disable-pip-version-check --no-cache-dir install folium==0.2.1 \
    && pip --disable-pip-version-check --no-cache-dir install matplotlib \
    && pip --disable-pip-version-check --no-cache-dir install ipywidgets>=7.0.0 \
    && pip --disable-pip-version-check --no-cache-dir install bqplot \
    && pip --disable-pip-version-check --no-cache-dir install nbinteract==0.0.12 \
    # Update Python environment based on requirements.txt
    ## && pip --disable-pip-version-check --no-cache-dir install -r /tmp/pip-tmp/requirements.txt \
    ## && rm -rf /tmp/pip-tmp \
    # Create a non-root user to use if preferred - see
    && groupadd --gid $USER_GID $USERNAME \
    && useradd -s /bin/bash --uid $USER_UID --gid $USER_GID -m $USERNAME \
    # [Optional] Add sudo support for the non-root user
    && apt-get install -y sudo \
    && echo $USERNAME ALL=\(root\) NOPASSWD:ALL > /etc/sudoers.d/$USERNAME\
    && chmod 0440 /etc/sudoers.d/$USERNAME \
    # Clean up
    && apt-get autoremove -y \
    && apt-get clean -y \
    && rm -rf /var/lib/apt/lists/*

# Switch back to dialog for any ad-hoc use of apt-get







This file confirm the python requirements and VSCode Extensions which are to be installed. devcontainer.json file is similar to launch.json for debugging, but designed to launch (or attach to) a development container instead. At its simplest, all you need is a .devcontainer/devcontainer.json file in your project that references an image, Dockerfile, or docker-compose.yml, and a few properties. You can adapt it for use in a wide variety of situations.





	"name": "Python 3",
	"context": "..",
	"dockerFile": "Dockerfile",
    // Add the IDs of extensions you want installed when the container is created.
		// Confirm to user that they can now use the notebook = change background to white and insert refresh now file
	    "postCreateCommand": "sudo bash ./.devcontainer/ > ~/post-create.log",
	// Set *default* container specific settings.json values on container create.
	"settings": { 
		"": "/bin/bash",
		//Python Versions "python.pythonPath": "/usr/local/bin/python",
		//"python.linting.enabled": true,
		//"python.linting.pylintEnabled": true,
		//"python.linting.pylintPath": "/usr/local/bin/pylint"
		//Using Conda Python
		"python.pythonPath": "/opt/conda/bin/python",
		"python.linting.enabled": true,
		"python.linting.pylintEnabled": true,
		"python.linting.pylintPath": "/opt/conda/bin/pylint",
	// Use 'forwardPorts' to make a list of ports inside the container available locally.
	// "forwardPorts": [],

	// Use 'postCreateCommand' to run commands after the container is created.
	//"postCreateCommand": "pip install -r requirements.txt",

	// Uncomment to connect as a non-root user. See
	// "remoteUser": "vscode"






The following VSCode Repo contains various container deployments this repository contains a set of dev container definitions to help get you up and running with a containerized environment.


The definitions describe the appropriate container image, runtime arguments for starting the container, and VS Code extensions that should be installed. Each provides a container configuration file (devcontainer.json) and other needed files that you can drop into any existing folder as a starting point for containerizing your project. (The vscode-remote-try-* repositories may also be of interest if you are looking for complete sample projects.)


Before You Start

The Visual Studio Code Remote - Containers extension lets you use a Docker container as a full-featured development environment. It allows you to open any folder inside (or mounted into) a container and take advantage of Visual Studio Code's full feature set. A .devcontainer folder in your project tells VS Code how to access (or create) a development container with a well-defined tool and runtime stack. This container can be used to run an application or to sandbox tools, libraries, or runtimes needed for working with a codebase.

Workspace files are mounted from the local file system or copied or cloned into the container. Extensions are installed and run inside the container, where they have full access to the tools, platform, and file system. This means that you can seamlessly switch your entire development environment just by connecting to a different container.

Running the container within VSCode on Windows, Mac or Linux

The following Requirements are installed as part of the container build

  • jupyter
  • numpy
  • pandas
  • scipy
  • folium==0.2.1
  • matplotlib
  • ipywidgets>=7.0.0
  • bqplot
  • nbinteract==0.0.12

You can run this container from VSCode locally see

Quick Start Installation

To get started, follow these steps:

Install and configure Docker for your operating system.

Windows / macOS:

Install Docker Desktop for Windows/Mac

Right-click on the Docker taskbar item and update Settings / Preferences > Shared Drives / File Sharing with any source code locations you want to open in a container. If you run into trouble, see Docker Desktop for Windows tips on avoiding common problems with sharing.


Follow the official install instructions for Docker CE/EE for your distribution. If you are using Docker Compose, follow the Docker Compose directions as well.

Add your user to the docker group by using a terminal to run: sudo usermod -aG docker $USER

Sign out and back in again so your changes take effect.

Install Visual Studio Code

Install the Remote Development extension pack

Loading the Docker container in Visual Studio Code

Let's start by using a sample project to try things out.

Clone one of the repository

Start VS Code and click on the quick actions Status Bar item in the lower left corner of the window. 



Quick actions Status bar item

Select Remote-Containers: Open Folder in Container... from the command list that appears, and open the root folder of the project you just cloned.

The window will then reload, but since the container does not exist yet, VS Code will create one. This may take some time, and a progress notification will provide status updates. Fortunately, this step isn't necessary the next time you open the folder since the container will already exist.



Dev Container Progress Notification

After the container is built, VS Code automatically connects to it and maps the project folder from your local file system into the container. Check out the Things to try section of in the repository you cloned to see what to do next.

Tip: Want to use a remote Docker host? See the Advanced Containers article for details on setup


Running the container in Visual Studio CodeSpaces (Browser Experience)

Utilise the container in Visual Studio CodeSpaces'll need the following:

  • A Microsoft Azure subscription. If you don't already have one, you can sign up for a free trial at or a Student Subscription at
  • A Visual Studio Online environment. This provides a hosted instance of Visual Studio Code, in which you'll be able to run the notebooks for the lab exercises. To set up this environment:
    1. Browse to
    2. Click Get Started.
    3. Sign in using the Microsoft account associated with your Azure subscription.
    4. Click Create environment. If you don't already have a Visual Studio Online plan, create one. This is used to track resource utlization by your Visual Studio Online environments. Then create an environment with the following settings:
      • Environment Name: A name for your environment - for example, intro-Datascience.
      • Git Repository: leestott/intro-Datascience
      • Instance Type: Standard (Linux) 4 cores, 8GB RAM
      • Suspend idle environment after: 120 minutes
    5. Wait for the environment to be created, and then click Connect to connect to it. This will open a browser-based instance of Visual Studio Code.
    6. Wait for a minute or so while the environment is set up for you. It might look like nothing is happening, but in the background we are installing some extensions that you will use in the labs.
    7. Copy your notebooks files and data and undertake your learning

Tip: you can change the color scheme back to a dark background if you prefer - just click the  icon at the bottom left and select a new Color Theme.

1 Comment
Version history
Last update:
‎Jun 17 2020 09:48 AM
Updated by: