The Ultimate Guide 🚀 To Use VS Code With Windows Subsystem for Linux (WSL)👩‍💻👨‍💻
Tags: vscode, webdev, beginners, codenewbie
Published: 2020-02-16 12:54:00


*Originally published on my blogging site [ajeet.dev](https://ajeet.dev/developing-in-wsl-using-visual-studio-code/)*

---

**Don't forget to subscribe to my weekly [Newsletter](https://ajeet.dev/subscribe/) 📧**


---

*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](https://code.visualstudio.com/) 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](https://ajeet.dev/category/wsl/).

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](https://ajeet.dev/linux-vs-windows-os/)
2. [Switching From Windows to Linux? Read This First](https://ajeet.dev/switching-from-windows-to-linux/)
3. [Windows Subsystem For Linux - Run Linux on Windows (It's FAST)](https://ajeet.dev/windows-subsystem-for-linux/)
4. [A Beginner's Guide To Use Windows Subsystem For Linux](https://ajeet.dev/how-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](https://code.visualstudio.com/docs/editor/intellisense), [parameter info](https://code.visualstudio.com/docs/editor/intellisense), [linting](https://code.visualstudio.com/docs/python/linting), [debug support](https://code.visualstudio.com/docs/python/debugging), [code snippets](https://code.visualstudio.com/docs/editor/userdefinedsnippets), and [unit testing](https://code.visualstudio.com/docs/python/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](https://code.visualstudio.com/docs/editor/integrated-terminal).
* VS Code supports [Git for version control](https://code.visualstudio.com/docs/editor/versioncontrol). 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](https://ajeet.dev/windows-subsystem-for-linux/)


### **⬇️ Download Visual Studio Code for Windows**

Download [Visual Studio Code](https://code.visualstudio.com/) 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](https://aka.ms/vscode-remote/download/extension) 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](https://aka.ms/vscode-remote/download/extension) 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] (https://dev-to-uploads.s3.amazonaws.com/i/e820sk0ljn3nfkwzdimv.png)

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] (https://dev-to-uploads.s3.amazonaws.com/i/9f46ljr1obrvir5vocgq.png)

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

![Starting VS code in WSL for the first time] (https://dev-to-uploads.s3.amazonaws.com/i/3667py1lgpqwwl1ijafz.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/hs0ox4brmuoeruqbbepf.png)

Once finished, you will see the following view.

![VS Code in WSL] (https://dev-to-uploads.s3.amazonaws.com/i/j4emq1mlc6hgvdw4s9pn.png)

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.

![Run code in VS Code in WSL] (https://dev-to-uploads.s3.amazonaws.com/i/ukl4m83ezy1dih0j5mrl.png)


### **📂 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](https://ajeet.dev/how-to-use-windows-subsystem-for-linux/), 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](https://dev-to-uploads.s3.amazonaws.com/i/46bw7dx8vu9x0k4u971c.png)

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".
    
![VS Code Editor View of Remote WSL](https://dev-to-uploads.s3.amazonaws.com/i/g6in6w5sd4ccy6qok4qp.png)
    
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.
    
![Open remote wsl using ubuntu command](https://dev-to-uploads.s3.amazonaws.com/i/5tlg5xfbczj77pboph6w.png)
    
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](https://dev-to-uploads.s3.amazonaws.com/i/2l6lnwnyeaoy9ie8ixlm.png)
    

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. 

![Create folder in WSL VS Code editor](https://dev-to-uploads.s3.amazonaws.com/i/5wufzfh8s1z3opahrh9j.png)

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

![Create a file in WSL using VS Code](https://dev-to-uploads.s3.amazonaws.com/i/ri2sff9t4eoazys8sxpk.png)

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

![File created by VS Code inside WSL](https://dev-to-uploads.s3.amazonaws.com/i/azj675d13nt76c45x5ur.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/ymdo2t9jz3d2nmickl9n.png)

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](https://dev-to-uploads.s3.amazonaws.com/i/wcv2dnszu0z0m7yu5qe7.png)

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.

![Extension lists in WSL](https://dev-to-uploads.s3.amazonaws.com/i/y9jgtikpp4wm4xzeg1lr.png)



### **💡 What's Next**

In my next blog, I am also going to write on [how to use Python with VS code inside WSL](https://ajeet.dev/newbie-in-python/). Stay Tuned!

Happy Coding! 🤓

---


Credits 🙏 :
[Official Microsoft Docs on WSL](https://code.visualstudio.com/docs/remote/wsl)
Emojis taken from [Emojipedia](https://emojipedia.org/)
Cover image by [Undraw](undraw.co/)