Create a C ++ and Python execution environment with WSL2 + Docker + VSCode

I'm using C ++ and Python in the competition pro, and I wanted an execution environment on Windows, so I made it. Since it is not for development, it is the minimum required setting.

2020/1/11: Added "C ++ Standard Settings" to allow you to use C ++ 17 grammar on VSCode

Target

--For those who want to create a simple execution environment for C ++ and Python --Windows users --Docker installed --For those using VSCode

Usage environment / tools

• GitHub
• Windows 10 + WSL2
• Docker Desktop for Windows (v3.0.0)
• VSCode (v1.52.1)

Sample repository of execution environment created in this article: https://github.com/e5pe0n/algo-training-sample

Create a repository on GitHub

Create a repository on GitHub to make it easier to manage your code. Enter an appropriate Repository Name, check Add a README file, and click Create Repository. .gitignore will be created later, so don't check it here.

Creating a Dev Container

Clone the repository you just created to the Docker container that will be the execution environment.

Put Remote Development in VSCode

First, open VSCode and install the extension Remote Development (ms-vscode-remote.vscode-remote-extensionpack) so that you can connect to the container from VSCode.

Associate VSCode with GitHub

When the installation is complete, a green button that allows you to use the Remote Development function will be displayed at the bottom left of the editor. Click it. Click Remote-Containers: Clone Repository in Container Volume from the menu that appears.

Enter the URL of the repository and press enter.

For the first time, you'll be prompted to sign in to your GitHub account with VSCode, or you'll be asked to jump to your browser to allow VSCode to access GitHub, click Yes or Continue, respectively.

Branch to clone

When VSCode and GitHub are linked, you will be asked for the branch to clone, so select main.

Volume type

Since it will not be used with other repositories, select Create a unique volume this time.

Container type

Let's set the container type to Ubuntu. Then you will be asked for the version, but set it to focal.

With this, I was able to create a container linked to the repository for the time being. From here, we will arrange the container settings so that C ++ and Python can be executed.

Container settings

When the container is created for the first time, it will have the following directory structure. From here, you can edit the configuration file or add a new configuration file.

/workspaces/<repo-name>
├── .devcontainer
│   ├── devcontainer.json
│   └── Dockerfile
├── .git
└── README.md

The final directory structure looks like this.

/workspaces/<repo-name>
├── .clang-format
├── .devcontainer
│   ├── devcontainer.json
│   └── Dockerfile
├── .git
├── .gitignore
├── README.md
└── requirements.txt

Create .gitignore

Execute touch .gitignore directly under the repository directory to create an empty file. In gitignore.io, enter vscode,C ++, Python and click Create. Copy all the displayed contents to the .gitignore created earlier, and you're done. Edit it if necessary.

Editing Dockerfile

In the following part of Dockerfile # [Optional] Uncomment this ..., add the command to be executed when the container is created. The build-essential installed with apt-get contains the C ++ compiler g ++, and clang-format is for formatting C ++ files. Also, Python 3.8.2 is included by default, but since the Python package installer pip is not included, python3-pip is installed.

# See here for image contents: https://github.com/microsoft/vscode-dev-containers/tree/v0.154.0/containers/ubuntu/.devcontainer/base.Dockerfile

# [Choice] Ubuntu version: bionic, focal
ARG VARIANT="focal"
FROM mcr.microsoft.com/vscode/devcontainers/base:0-${VARIANT}

# [Optional] Uncomment this section to install additional OS packages.
RUN apt-get update && export DEBIAN_FRONTEND=noninteractive \
    && apt-get -y install --no-install-recommends \
    build-essential \
    clang-format \
    python3-pip

Creating a .clang-format

Prepare .clang-format as a C ++ file format setting file. By turning on VSCode autoformat and setting the C ++ formatter to Clang-Format, you can automatically format the code as set in .clang-format. There are so many items that can be set (https://clang.llvm.org/docs/ClangFormatStyleOptions.html), so you can set it as you like. To be honest, I don't really understand it, so I set only the ones that interest me.

.clang-format

ColumnLimit: 110
AllowShortBlocksOnASingleLine: true
AllowShortFunctionsOnASingleLine: Empty
AllowShortIfStatementsOnASingleLine: true
BinPackArguments: false
BinPackParameters: false
BreakBeforeBinaryOperators: NonAssignment
ConstructorInitializerAllOnOneLineOrOnePerLine: true
IndentWidth: 2

Creating requirements.txt

requirements.txt is a file used for Python package management. You can list the packages here and run pip3 install -r requirements.txt to install the required packages with one command. The following packages will be introduced.

After installing these with pip3 install, write a list of installed packages to requirements.txt with pip3 freeze.

$ pwd
/workspaces/<repo-name>
$ pip3 install numpy flake8 autopep8
$ pip3 freeze > requirements.txt

I think that requirements.txt is as follows, including the dependent packages.

requirements.txt

autopep8==1.5.4
flake8==3.8.4
mccabe==0.6.1
numpy==1.19.4
pycodestyle==2.6.0
pyflakes==2.2.0
toml==0.10.2

Editing devcontainer.json

This is the container configuration file. By writing VSCode settings and commands after the container is created in this, the settings will be automatically reflected when the container is created.

settings

This is the part to write the VSCode settings.

extensions

Here is a list of VS Code extensions you want to install. I am writing the following for the time being.

postCreateCommand

This is where I write the command to be executed after the container is created. By writing pip3 install -r requirements.txt here, the package of requirements.txt written earlier will be installed automatically.

remoteUser

If you want to connect to the container as root, comment it out as follows. I use it as a basic root because it is troublesome around permissions.

// "remoteUser": "vscode"

With these settings, devcontainer.json looks like this.

// For format details, see https://aka.ms/devcontainer.json. For config options, see the README at:
// https://github.com/microsoft/vscode-dev-containers/tree/v0.154.0/containers/ubuntu
{
	"name": "Ubuntu",
	"build": {
		"dockerfile": "Dockerfile",
		// Update 'VARIANT' to pick an Ubuntu version: focal, bionic
		"args": {
			"VARIANT": "focal"
		}
	},
	// Set *default* container specific settings.json values on container create.
	"settings": {
		"terminal.integrated.shell.linux": "/bin/bash",
		"editor.formatOnSave": true,
		"python.languageServer": "Pylance",
		"python.pythonPath": "/usr/bin/python3",
		"python.linting.flake8Args": [
			"--max-line-length", //Set the number of characters per line to 110
			"110"
		],
		"python.formatting.provider": "autopep8",
		"python.formatting.autopep8Args": [
			"--max-line-length", //Set the number of characters per line to 110
			"110"
		],
		"[cpp]": {
			"editor.tabSize": 2,
			"editor.defaultFormatter": "xaver.clang-format" //Extension Clang-Select Format
		},
	},
	// Add the IDs of extensions you want installed when the container is created.
	"extensions": [
		"visualstudioexptteam.vscodeintellicode",
		"ms-vscode.cpptools",
		"xaver.clang-format",
		"donjayamanne.git-extension-pack",
		"ms-python.python",
		"ms-python.vscode-pylance",
		"coenraads.bracket-pair-colorizer-2",
		"shardulm94.trailing-spaces",
		"vscodevim.vim"
	],
	// 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": "pip3 install -r requirements.txt",

	// Comment out connect as root instead. More info: https://aka.ms/vscode-remote/containers/non-root.
	// "remoteUser": "vscode"
}

This completes the container settings.

Rebuilding the container

As a finishing touch, rebuild the container based on the settings. Click the green Dev Container: Ubuntu at the bottom left and select Remote-Containers: Rebuild Container.

Now you have a C ++ and Python execution environment. After the rebuild is complete, for example, the following hello.cpp and hello.py can be executed in the container.

hello.cpp

#include <bits/stdc++.h>
using namespace std;

int main() {
  cout << "I'm C++!" << endl;
}

# g++ -o hello hello.cpp
# ./hello 
I'm C++!

hello.py

print("I'm Python!!")

# python3 hello.py
I'm Python!!

After that, if you push this to a remote repository, you can create the same environment immediately.

C ++ Standard settings

If the extension C/C ++ writes the grammar of C ++ 17, an error message will be displayed if it is left in, so set C ++ Standard. Open the command palette with Ctrl + Shift + P and selectC/C ++: Edit Configurations (JSON).

Then, the directory .vscode will be created directly under/workspaces, and c_cpp_properties.json will be created in it. Set cppStandard in this to"gnu ++ 17".

c_cpp_properties.json

{
    "configurations": [
        {
            "name": "Linux",
            "includePath": [
                "${workspaceFolder}/**"
            ],
            "defines": [],
            "compilerPath": "/usr/bin/gcc",
            "cStandard": "gnu17",
            "cppStandard": "gnu++17",
            "intelliSenseMode": "gcc-x64"
        }
    ],
    "version": 4
}

For example, the following code with structured binding will no longer display the error message.

bonus

When I create a new directory, I want to separate the C ++ and Python directories, so I put the following directories in the repository as templates.

template
├── cpp
│   ├── build         // C++Executable file storage
│   │   └── .gitkeep
│   ├── .gitkeep
│   └── run.sh        // C++File execution script
└── python
    └── .gitkeep

run.sh

f=`echo $1 | sed -e 's/\(.*\).cpp/\1/'`
current_dir=$(eval pwd)
g++ -std=c++17 -g -o ${current_dir}/build/${f}.out $1
eval ${current_dir}/build/${f}.out

run.sh is a script that compiles and executes C ++ files, and is used like sh run.sh A.cpp. I would love to know if there is a better way to use it in the competition pro!