VSCode + WSL2 + devcontainer for dev environment

eye-catchOther techs
Sponsored links

If we could establish dev environment in a Docker container, it is easy to share the environment. It’s easy to set up the environment on windows but if you want to have better performance, you need to use WSL2. I will explain how to prepare the environment in this article.

Let’s establish the environment together with me.

Sponsored links

Setup WSL2 and ubuntu environment

You can basically follow the official page to prepare the WSL2 and ubuntu environment on Windows.

Install WSL
Install Windows Subsystem for Linux with the command, wsl --install. Use a Bash terminal on your Windows machine run by your preferred Linux distribution - Ubun...

Installing Ubuntu with default version

The command needs to be executed in PowerShell with an admin right.

I executed the following command. This command will install the default version.

> wsl --install -d ubuntu

You can check the available distribution list. It might be better to specify the version explicitly to have the name with the version.

> wsl -l -o
インストールできる有効なディストリビューションの一覧を次に示します。
'wsl --install -d <Distro>' を使用してインストールします。

NAME            FRIENDLY NAME
Ubuntu          Ubuntu
Debian          Debian GNU/Linux
kali-linux      Kali Linux Rolling
openSUSE-42     openSUSE Leap 42
SLES-12         SUSE Linux Enterprise Server v12
Ubuntu-16.04    Ubuntu 16.04 LTS
Ubuntu-18.04    Ubuntu 18.04 LTS
Ubuntu-20.04    Ubuntu 20.04 LTS

If you specify the version, the command is for example the following.

wsl --install -d Ubuntu-20.04

Installation succeeded.

Change the version from WSL1 to WSL2

But if I check the version, Ubuntu uses WSL1.

> wsl -l -v
  NAME                   STATE           VERSION
* docker-desktop-data    Stopped         2
  Ubuntu                 Running         1
  docker-desktop         Stopped         2

I changed the version with the following command.

> wsl --set-version ubuntu 2
変換中です。この処理には数分かかることがあります...
WSL 2 との主な違いについては、https://aka.ms/wsl2 を参照してください
変換が完了しました。

> wsl -l -v
  NAME                   STATE           VERSION
* docker-desktop-data    Stopped         2
  Ubuntu                 Stopped         2
  docker-desktop         Stopped         2

Change the display name

Update completed but the name is Ubuntu without the version info. So, I changed it with the following steps.

  1. Press windows key + R
  2. Input regedit and enter
  3. Go to \HKEY_CURRENT_USER\SOFTWARE\Microsoft\Windows\CurrentVersion\Lxss
  4. Find an entry where DistributionName is Ubuntu
  5. Change the name to Ubuntu 20.04 LTS

The name changed.

> wsl --list --verbose
  NAME                   STATE           VERSION
* docker-desktop-data    Stopped         2
  Ubuntu 20.04 LTS       Running         2
  docker-desktop         Stopped         2

Installing the same Ubuntu version

By the way, when I executed the following command

wsl --install -d Ubuntu-20.04

The same version was installed correctly.

> wsl --list --verbose
  NAME                   STATE           VERSION
* docker-desktop-data    Stopped         2
  Ubuntu-20.04           Stopped         1
  Ubuntu 20.04 LTS       Stopped         2
  docker-desktop         Stopped         2

If you need two Ubuntu with the same version, you can install them with the following commands.

wsl --install -d Ubuntu
wsl --install -d Ubuntu-20.04

The default version was 20.04 when I executed it but it could change with this option --set-default-version <Version>. But I didn’t try it.

Remove one of the distribution

There are two Ubuntu 20.04. I need only one. So, I tried to remove it but…

> wsl -l -v
  NAME                   STATE           VERSION
* docker-desktop-data    Stopped         2
  Ubuntu-20.04           Stopped         2
  Ubuntu 20.04 LTS       Stopped         2 <- this is what I want to remove
  docker-desktop         Stopped         2

> wsl --unregister Ubuntu
Unregistering...
There is no distribution with the supplied name.
> wsl --unregister "Ubuntu 20.04 LTS"
Unregistering...
There is no distribution with the supplied name.

I changed the name from the registry. When I changed the name back to the original Ubuntu from Ubuntu 20.04 LTS and executed the command again

> wsl --unregister Ubuntu
Unregistering...
>

I was removed correctly.

Hmm… It’s strange.

Note that the Ubuntu is still on localhost. If you open the windows menu and search for Ubuntu, you can find and run it. If you run it after the unregistration, it will be installed again with WSL1.

Sponsored links

Install Docker

Docker has already been installed on my machine so I updated the version to Docker Desktop 4.12.0.

I changed the settings as shown below.

But it didn’t work as expected. docker command isn’t recognized in Ubuntu system even after reboot.

After I uninstalled and re-install it, it worked. It is actually not necessary to check Ubuntu-20.04

docker command is recognized in Ubuntu.

~/development/play-with-go$ docker -v
Docker version 20.10.17, build 100c701

Open VSCode from Ubuntu

I created new directories in Ubuntu system.

$ pwd
/home/yuto
$ mkdir development
$ cd development
$ mkdir play-with-go
$ cd play-with-go
$ pwd
/home/yuto/development/play-with-go

If you execute “code .” command, it opens the current directory in VSCode.

If WSL extension is installed, “code .” command will install VS Code server.

~/development/play-with-go$ code .
Installing VS Code Server for x64 (e7f30e38c5a4efafeec8ad52861eb772a9ee4dfb)
Downloading: 100%
Unpacking: 100%
Unpacked 2424 files and folders to /home/yuto/.vscode-server/bin/e7f30e38c5a4efafeec8ad52861eb772a9ee4dfb.

Install extension

Install Dev Containers extensions if it has not been installed.

Dev Containers - Visual Studio Marketplace
Extension for Visual Studio Code - Open any folder or repository inside a Docker container and take advantage of Visual Studio Code's full feature set.

Create docker container environment

After you install Dev Containers extensions, this green button appears on the left bottom.

Click the button and select Reopen in Container.

Another way to do that is to press F1 key to open the Command Palette and select Reopen in Container.

Does remote-container command not appear on the Comman Pallate?

remote-container command didn’t appear on the Command Palette (F1) at first.

When I uninstalled Remote - SSH, and Remote Development, it appeared. After that, I installed the two extensions again to check the behavior.
But the command still appeared after the installation. I don’t know what caused the problem but if it doesn’t appear on your machine, try to uninstall or disable them.

You need to select what you want. I established Go lang development environment.

You can choose the docker image version. If you don’t know about it, default is ok.

I don’t need Node.js. I chose none

If you need additional features, you can check them here.

Git version needs to be selected.

Once the configuration step is complete, it starts creating the environment. It takes minutes.

When it’s ready, you can do what you want on VSCode.

Dockerfile and devcontainer.json are generated automatically. Next time it starts, VSCode loads devcontainer.json for the settings. Dockerfile is used when the container is rebuilt.

You can now whatever you want without making your local system messy.

Comments

Copied title and URL