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.
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
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 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.
Image: VS Code Server (Credit - Microsoft Blog)
Once finished, you will see the following view.
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 "[email protected]:~$ " , type code --help and press Enter. Here is the output you would see.
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 "[email protected]:~$ " , 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".
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 .
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.
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 WSLA little problem with this approach is we have now 3 VS Code editors opened.
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 commandThis 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
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
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
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
You will see the "demo" file in the left sidebar of VS Code UI.
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
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
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
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! 🤓
Comments