Visual Studio Code WSL Plugin (WINDOWS ONLY)

The WSL Plugin in Visual Studio Code can make your development workflow a bit easier. It is important to note that this is *NOT Required to do any of your assignments. This document will show you how to install and use the WSL plugin to on a Windows development environment.

In this document I will refer to Visual Studio Code as VSCode for short.

Installation

NOTE: You should have already followed the development environment setup guide and have installed VSCode in order to complete the following steps.

1. Open VSCode
2. Click the extension icon (red), use the search bar (orange) and search for wsl, click the Remote - WSL extension (yellow) and then click the install button that should appear on the screen to the right (green).
3. Wait for the installation to complete
4. When the installation is finished you should have a little green icon in the bottom left corner of VSCode

Connecting to a WSL Environment

To activate the WSL Environment in VSCode you need to first click the green WSL Icon in the bottom left corner of VSCode. This will cause a list to appear at top of your VSCode editor. Select the Remote-WSL: New Window using Distro... option.

You should now see a list of the installed WSL Linux distributions you have installed. You will want to select the Ubuntu Linux distribution you have installed during the environment setup.

Selecting your Ubuntu distribution from the list will cause VSCode to open an new editor instance. Once the new one opens you can close the old window. You should now notice that your VSCode editor WSL icon has change to the name of your Ubuntu distribution and this means you are successfully connected to your WSL Linux environment.

Using Your WSL Environment in VSCode

Now that your WSL environment is active you can now interact directly with your Ubuntu install. For example, you can open a terminal window directly in your editor using the Terminal menu option and selecting New Terminal.

From the terminal panel that opens at the bottom of the editor that you will notice the word bash. This means that you are using a Linux terminal and not Windows command prompt or Powershell. You can now use any standard Linux commands here to navigate or manipulate the file system, or run programs like git, make, and gcc.

In addition to the terminal, you will most likely want to open a folder or some code to work on an assignment. You can open an entire directory to work on an assignment by selecting File from the menu and choose Open Folder....

You will see a different type of open dialog box than you might be used to at the top of the screen.

You will notice that the menu shows /home/ at the top and then your username below. On a Linux operating system all user’s have a home directory for their documents. This is like the Users folder in Windows where you have your personal folder for your documents, music, downloads, etc. If you select your username from the list, it will show any other folders that are contained within your personal directory. Once you find the folder that you are interested in working within, you can click OK. You will now see a file explorer open on the left-hand side of the editor. In the example below I opened a folder within my user home folder named CS110.

You will also see that the file explorer also shows sub-directories like my e01-hello_world project folder and the files it contains as well. You can expand and collapse folders using the arrows next to the folder names.

Now that I have my folder open with my code, I can click on the code to open the files in the editor, and open a terminal to use my compiler, git, or other tools. It is important to not that when you open a terminal window, it will start inside the directory you have open. In my case, this is my CS110 folder. To run commands on my project in e01-hello_world folder. I need to move my terminal to that directory using cd. If I had opened my e01-hello_wold folder instead of CS110 I would not have needed to change my directory with cd when opening a new terminal.

Below you can see a basic example of using the terminal to navigate to the right folder, compile, and run the hello world program.

If you need to create new files and folders, you can using the terminal (using mkdir or touch) or VSCode directly. If you right click on a folder in VSCode, you can choose to create a new folder or file.

Disconnecting from WSL

If you plan to only use VSCode for this class, you don’t need to disconnect your VSCode editor from your WSL Ubuntu environment. If you would like to restore VSCode to it’s normal behavior to editor files purely within Windows you can click the WSL icon in the bottom left-hand corner of VSCode and choose Close Remote Connection from the menu that will open at the top of the VSCode editor.