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:
- Linux Vs Windows – Why Linux Is Better For Programming & Web Dev
- Switching From Windows to Linux? Read This First
- Windows Subsystem For Linux – Run Linux on Windows (It’s FAST)
- A Beginner’s Guide To Use Windows Subsystem For Linux
- How To Use Visual Studio Code With Windows Subsystem for Linux (WSL)
- How to Use Git and Github with WSL (Blog coming tomorrow)
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 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.
$ code --help
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 it. In the already opened VS Code terminal, run ls command to see all the files and folders. Currently, there will be none.
Create a folder “ajeet” inside WSL:
$ mkdir ajeet
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
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”.
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.
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. Now, 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).
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.
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”.
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.
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.
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.