Using Visual Studio Code with Windows Subsystem for Linux

Since Microsoft stated embracing open source, two great features, in my opinion, Microsoft released are:

• Visual Studio Code (VS Code), and
• Windows Subsystem for Linux (WSL)

With the combination of these two, it opens a new way for a software developer writing code. The WSL enables the ability for a developer to run Linux environment on Windows 10 without the overhead of a virtual machine. With WSL, we can install most major Linux distributions from the Windows Store. We are also able to run Bash shell scripts and Linux applications on it.

It is even possible we run Linux applications with GUI with WSL. This article provides a step-by-step instruction to configure WSL so we can run VS Code on Linux with WSL. Although the title of this article is ‘’Using Visual Studio Code with Windows Subsystem for Linux’’, the method described here also works for other GUI applications.

The software used in this article are:

• Windows 10 1809
• Ubuntu 18.04
• Visual Studio Code 1.30.2
• MebaXTerm 11.1

Brief Steps in using VS Code with WSL

1. Enable WSL
2. Install Linux
3. Install VSC on the installed Linux
4. Download MobaXterm and install it
5. Launch MobaXterm and turn on X Server
6. Setup X Client on the installed Linux
7. Launch VS Code and enjoy

Requirements

In addition to Windows 10 and VS Code, we need X Server and X Client to make VS Code work with WSL.

In the Linux world, X Window System plays the role which provides the basic framework for building GUI environments. X Window System uses a client-server model to enable remote computing with graphic interface. Therefore, to use our local machine, e.g., a laptop, to connect to a remote Linux machine, we need:

1. Run X client application on the remote Linux machine
2. Run X server on our local machine

The remote X client application makes a connection to the local X server and provides the graphic interface. With this technology, it becomes possible to run VS Code with WSL.

The X server is the graphic environment we want to run. In this case, it is our Windows 10. However, Bash of WSL does not support X Server. If we Google ‘’x server for windows’’, many options show up. In my opinion, the simplest option is MobaXterm which is the tool used in this article.

Enable Windows Subsystem for Linux

Before we can install a Linux distribution, we need to enable WSL. To do so, first, type ‘’turn windows features on or off’’ on the search bar.

In the window, Check ‘’Windows Subsystem for Linux.’’

We may need to reboot the machine after we click the OK button.

Now, we have WSL enabled on Windows 10.

(More details about WSL can be found at https://docs.microsoft.com/en-us/windows/wsl/install-win10).

Installation Linux (Ubuntu)

Once we have WSL enabled, we are ready to install Linux onto Windows 10.

In the Windows Store, search ubuntu.

Install and launch it.

After launching Ubuntu, follow the instructions to create a user account.

Now we have Ubuntu installed and ready to use.

Use VS Code with WSL

The first thing we need to do is download MobaXterm and turn on X server.

Setup MobaXterm

We first download MobaXterm from its official website. It has portable and install versions. Just pick one we prefer and launch it. After launch MobaXterm, make sure X server is enabled (the red rectangle in the picture below).

That’s it. We now have X Server running.

Configure X Client

As mentioned in the beginning, X client is the application that we want to access remotely. In this article, it is VS code. To do so, follow the steps listed below:

Step 1: Launch Command Prompt.

Step 2: In the Command Prompt, type bash to enter Ubuntu bash. It looks like something below:

Step 3: Type the command $ export DISPLAY=localhost:0.0. We can also add this command in ~/.bashrc, so we do not need to do this every time when we log in.

export DISPLAY=localhost:0.0 tells X client applications where to display windows. Because we are running X server and X client application on the same machine, DISPLAY=localhost:0.0 means use the display on the local machine. For a remote machine, it would be export DISPLAY=[remote machine]:0.0.

Install VS Code

Now, we can download and install VS Code onto Ubuntu. Due to the graphic related dependencies VS Code needs, I would recommend installing Firefox before VS Code; it saves a lot of dependency issues.

1. $ sudo apt update
2. $ sudo apt install firefox
3. Launch Firefox to download VS Code.
4. The downloaded VS Code Debian package should locat at ~/Download.
5. $ cd ~/Download
6. $ sudo dpkg -i code_1.30.2-1546901646_amd64.deb

Note: If the installation fails because of some dependence issues, install the dependent libraries.

$ sudo dpkg -i code_1.30.2-1546901646_amd64.deb
Selecting previously unselected package code.
(Reading database ... 42604 files and directories currently installed.)
Preparing to unpack code_1.30.2-1546901646_amd64.deb ...
Unpacking code (1.30.2-1546901646) ...
dpkg: dependency problems prevent configuration of code:
 code depends on libnotify4; however:
  Package libnotify4 is not installed.
 code depends on libnss3 (>= 2:3.26); however:
  Package libnss3 is not installed.
 code depends on libxkbfile1; however:
  Package libxkbfile1 is not installed.
 code depends on libgconf-2-4; however:
  Package libgconf-2-4 is not installed.
 code depends on libsecret-1-0; however:
  Package libsecret-1-0 is not installed.
 code depends on libxss1; however:
  Package libxss1 is not installed.

dpkg: error processing package code (--install):
 dependency problems - leaving unconfigured
Processing triggers for mime-support (3.60ubuntu1) ...
Errors were encountered while processing:
 code

Install the dependent libraries:

sudo apt install libnotify4 libnss3 libxkbfile1 libgconf-2-4 libsecret-1-0 libgtk-3-0 libxss1

If there is an error like below, try sudo apt –fix-broken install.

Reading package lists... Done
Building dependency tree
Reading state information... Done
libgtk-3-0 is already the newest version (3.22.30-1ubuntu1).
libgtk-3-0 set to manually installed.
You might want to run 'apt --fix-broken install' to correct these.
The following packages have unmet dependencies:
 libgconf-2-4 : Depends: gconf2-common (= 3.2.6-4ubuntu1) but it is not going to be installed
                Recommends: gconf-service but it is not going to be installed
 libnss3 : Depends: libnspr4 (>= 2:4.12) but it is not going to be installed
 libsecret-1-0 : Depends: libsecret-common but it is not going to be installed
E: Unmet dependencies. Try 'apt --fix-broken install' with no packages (or specify a solution).

After the installation completes, launch VS Code.

$ code

Note: Once we launch VS Code, we may notice that we are not able to move or resize the window of VS Code. That is because Custom tile and menu bar on Linux is enabled by default since VS Code 1.30. To be able to move and resize the window of VS Code, we need to change the setting to native.

First of all, open VS Code settings. [File->Preferences->Settings]

Second, type title bar on the search bar and choose native.

Restart VS Code. Now, we are able to move and resize the windows of VS Code.

More details about this issue can be seen at:

• https://github.com/Microsoft/vscode/issues/65232
• https://github.com/Microsoft/vscode/issues/65036

Conclusion

With WSL and X Server, we can install Linux on Windows 10 and run native Linux applications with graphic interface. However, we may be wondering why we want to do this? Why not just use VM like VirtualBox or VMware on Windows or have another Linux machines? Of course, these are all valid options, but sometimes, these options may be practical for our needs. For example:

1. Running virtual machine may be slow if we do not have a powerful workstation
2. We may not have a budget to buy another machine to run Linux
3. Running applications with graphic interface on a cloud may be slow because of the long latency

WSL provides an easy and cheap solution that we can have Linux and Linux applications running on our comfortable Windows 10 environment.