The Ultimate Guide To Use VS Code With Windows Subsystem for Linux (WSL)

In this blog, we will learn how to use Visual Studio Code in Windows Subsystem for Linux (WSL). In case you have not heard about WSL before, please read my earlier blog posts - What is Windows Subsystem For Linux and How To Run Linux on Windows.

This is part 5 of our 6 part series. You can find the full series here:

  1. Linux Vs Windows - Why Linux Is Better For Programming & Web Dev
  2. Switching From Windows to Linux? Read This First
  3. Windows Subsystem For Linux - Run Linux on Windows (It's FAST)
  4. A Beginner's Guide To Use Windows Subsystem For Linux
  5. How To Use Visual Studio Code With Windows Subsystem for Linux (WSL) 👇
  6. How to Use Git and Github with WSL (Blog coming tomorrow)

This blog post is written for beginners who want to get into the programming or web development.

Table of Contents

💻 Getting started

Visual Studio Code (also known as VS Code) is a code editor by Microsoft. It has several code editing features such as code completion, parameter info, linting, debug support, code snippets, and unit testing. For web development in Windows, VS Code integration with Windows Subsystem for Linux (WSL) is quite amazing for two reasons:

  • It has a built-in terminal to create a smooth workflow between VS Code and our command line. We can create multiple terminals at different locations easily. Read more about VS Code integrated terminal.
  • VS Code supports Git for version control. You can run Git commands from its UI itself.

✅ Install the Windows Subsystem for Linux (WSL)

I have written a step-by-step guide to get you started using the WSL. Follow this guide to use WSL

⬇️ Download Visual Studio Code for Windows

Download Visual Studio Code for Windows. Install the software. This is same as installing a software to your Windows PC. During installing the VS Code, it will ask you to "Select Additional Tasks". Make sure you check the "Add to PATH" option. This way you can open a folder in WSL by just using the code command.

⚙️ Install the Remote Development Extension Pack

The Remote Development extension pack lets you use WSL as your Linux-based full-time development environment without leaving VS Code. You can use Linux based utilities, and run apps, and much more without leaving your Windows machine.

Open VS code, and install the Remote Development extension pack. If you have never installed an extension before, press CNTRL+SHIFT+X button simultaneously using your keyboard. This will bring up the Extensions view in the Left/Right side of the Code Editor. Search for "Remote Development". Click on the first search result, and click on Install.

🛠️ Set up VS Code Server

Once you install the extension, you will see a Remote Development extension icon at the bottom left corner of the VS Code editor.

Remote Development VS Code Extension Icon
Remote Development VS Code Extension Icon

Click on the icon, you will get a pop up with a list of options. Click on the first option "Remote-WSL: New Window" for the default distro or select the "Remote-WSL: New Window using Distro" for a specific distro.

Start VS Code Server
Start VS Code Server in WSL

You will see a notification "Starting VS Code in WSL...". 

Starting VS code in WSL for the first time

This means VS Code is setting up a server inside WSL for the first time. Once installed, the VS Code of your Windows machine/desktop will communicate with VS Code server on the Linux side.

The main purpose of this server is to install and host extensions in WSL. This means extension, such as Python, will run against the Python installed inside WSL. Python extension will not run against what you will install on the Windows side.

VS Code Server
Image: VS Code Server (Credit - Microsoft Blog)

Once finished, you will see the following view.

VS Code in WSL
VS Code in WSL

This means we have opened a terminal in WSL. Now, whenever you open a terminal window in this VS Code by going to terminal > New terminal, it will automatically run in WSL. This means everytime we open a new terminal in VS Code, we start a new instance of the bash shell in WSL, from VS Code editor running on Windows (not inside WSL). 

Let's run a command in terminal. Just after "ajeet@Ajeet-Lenovo:~$ " , type code --help and press Enter. Here is the output you would see.

Run code in VS Code in WSL
Run code in VS Code in WSL

📂 Create a folder in WSL using VS Code

Let's run some more commands to convince us we are connected to the Linux subsystem. In my previous blog post, I had created a folder inside the home directory of Linux (or WSL) by running a command in WSL terminal. Now, let's create a project directory using VS Code, without running any command in WSL terminal.

Close your WSL terminal if you have opened. In the already opened VS Code terminal, run ls command to see all the files and folders. Currently there will be none. Now, just after "ajeet@Ajeet-Lenovo:~$ " , type mkdir ajeet and press Enter. This will create a folder "ajeet" inside WSL. Run ls command again, and you will see the newly created folder "ajeet". 

Create project directory in WSL using VS Code
Image: Create project directory in WSL using VS Code

Now, you can see this folder "ajeet" when you open the home directory of Linux by running this command in VS Code terminal: explorer.exe .

So, we can see the Ubuntu commands are running in the VS Code as well. Going forward we will use WSL terminal integrated into VS Code instead of Ubuntu/WSL terminal.

💘 Ways to Connect with WSL - Remote Window

There may be several ways to connect with with VS Code server. Let us explore a couple of ways to open a Remote WSL. First close both the WSL terminal and VS Code editor.

  1. As we know from the previous section, we can open a Remote - WSL: New Window by clicking on the Remote Development extension icon of the VS Code. Do that and we will be connected to WSL in another VS Code editor. In the VS Code terminal, run this command: code .(the dot "." argument tells VS Code editor to open the current folder). This will open an another VS Code editor. We will see files and folders. You will see the newly created folder "ajeet". 
    VS Code Editor View of Remote WSL
    VS Code Editor View of Remote WSL
    A little problem with this approach is we have now 3 VS Code editors opened.
  2. The second approach is faster. Close all the VS Code editors. Open WSL terminal. Run this command to open a project folder in VS Code: code . The dot "." tells editor to open the current folder.
    Open remote wsl using ubuntu command
    Open remote wsl using ubuntu command
    This will open VS Code editor automatically, and you will be connected to the Remote WSL.  Now, you can close your WSL terminal and run all the commands as usual using VS Code integrated terminal.
    VS Code Editor View of Remote WSL
    VS Code Editor View of Remote WSL

I prefer the second approach. Now, we can easily create a folder (as we did in the previous section) by running commands in the VS Code terminal. 

Create folder in WSL VS Code editor
Create folder in WSL VS Code editor

Note that we can open another VS Code terminal by going to terminal > New terminal. Alternatively, using keyboard press CNTRL+` (using the backtick character). 

Note: To open another folder in WSL, go to File > New Folder. VS Code will show you a file and folder navigator for the Linux file system. Click on any folder and select "OK". VS Code will open up the folder and its content.

Open a folder in VS Code
Open a folder in VS Code

If you select "Show Local" instead of selecting any folder and clicking on "Ok", you will get the Windows File Open dialog to select any folder to work with. This way you can switch back to Windows file system.

🖹 Create a File in WSL using VS Code

Creating a file in the home directory of Linux subsystem is easy. Make sure you are connected to Linux Subsystem and using integrated terminal. To create a new file, go to File > New File. Alternatively, click on the editor section present just above the terminal, and press CNTRL+N button simultaneously using your keyboard. Write something in it, and press CNTRL+S button simultaneously to save the new file. You will get an option to rename the newly created file. Rename it as "demo" and Click "OK".

Create a file in WSL using VS Code
Create a file in WSL using VS Code

You will see the "demo" file in the left sidebar of VS Code UI.

File created by VS Code inside WSL
File created by VS Code inside WSL

Let us create a new file "python_file" in a new project directory "python". In the already opened VS Code terminal, run mkdir python to create a new project directory "python", cd python to go to directory, and run ls to view the file in this folder. Currently there will be none. Right click on "python" folder in the left sidebar of the VS Code UI. 

Create a file in a project directory in WSL using VS Code
Create a file in a project directory in WSL using VS Code

 You will get an option to rename the file. Rename it to "python_file". Run ls command again in the terminal to see that file.

Create a file in a project directory in WSL
Create a file in a project directory in WSL

Write something in it, and press CNTRL+S button simultaneously to save the new file.

Alternatively, you can use the Linux command to create a file in a directory. For example, I would like to create a JavaScript file named "demo" inside "ajeet_new" directory. we will use touch command. Run touch ajeet_new/demo.js in the VS Code terminal to create a file.

Create a file using linux command
Create a file using linux command

This command says, go to "ajeet_new folder", and create a file "demo" having format JS.

🧰 Manage Extensions

Let's see how Extensions work in WSL and or Locally. Open VS Code, and press CNTRL+SHIFT+X button simultaneously using your keyboard to bring up the Extension view. If you install an extension from here, you can see where that extension is installed. In the left sidebar, you will see two category: Local - Installed and WSL:Ubuntu-18.04 - Installed.

In the Local - Installed category, you will also see some extensions labelled as "Install in WSL:Ubuntu-18.04". These are the extensions that you can install to run on your remote host (WSL). Select Install to install these extensions.

Extension lists in WSL

💡 What's Next

In my next blog, I will write how to use Git and Github in WSL. Happy Coding! 🤓 


Credits 🙏 : 
Official Microsoft Docs on WSL
Emojis taken from Emojipedia
Cover image by Undraw.co 

Comments