The Ultimate Guide 🚀 To Use VS Code With Windows Subsystem for Linux (WSL)👩‍💻👨‍💻

Originally published on my blogging site ajeet.dev

Don't forget to subscribe to my weekly Newsletter 📧

I am a newbie in tech. I have been using Linux and Windows side by side for quite some time. Windows Subsystem for Linux by Microsoft is a powerful tool for those who do not want to switch to Linux for some reasons. This blog post is based on my personal experience. Feedback Welcome. Would really appreciate your time 🙏

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 my 5-part series on WSL. 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) 👇

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

Table of Contents

• 💻 Getting started
• ✅ Install the Windows Subsystem for Linux (WSL)
• ⬇️ Download Visual Studio Code for Windows
• ⚙️ Install the Remote Development Extension Pack
• 🛠️ Set up VS Code Server
• 📂 Create a folder in WSL using VS Code
• 💘 Ways to Connect with WSL - Remote Window
• 🖹 Create a File in WSL using VS Code
• 🧰 Manage Extensions
• 💡 What's Next

💻 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.

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.

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

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.

Once finished, you will see the following view.

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 every time 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.

📂 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".

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 . Do not forget the space and dot after the word explorer.

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 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.

First, 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 another VS Code editor. We will see files and folders. You will see the newly created folder "ajeet".

A little problem with this approach is we have now 3 VS Code editors opened.

Second, 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.

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.

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

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

🖹 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".

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

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.

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.

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

🧰 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.

💡 What's Next

In my next blog, I am also going to write on how to use Python with VS code inside WSL. Stay Tuned!

Happy Coding! 🤓

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