How to Use VSCode on WSL

The Windows Subsystem for Linux (WSL) is one handy tool you should always have on your repertoire. And if you use Visual Studio Code for your programming projects, there’s a way to use it without having to open a new Command Prompt.

Why Use VSCode and WSL

If you are a developer, programmer, or computer science student, you’ve probably had problems with compatibility issues between machines and operating systems.

In fact, even a simple plain-text editor won’t work on a different OS if it wasn’t built with cross-compatibility in mind. That’s why you need to test and develop in different software environments – and that’s exactly what WSL does best.

But here’s the problem. Running GUI apps on WSL can get pretty slow. And Visual Studio Code, as much as it’s good with all its features, is not exactly friendly with slow machines. Worse if you’re using it to build a Linux GUI program.

That’s where the Visual Studio Code WSL extension comes in. It works on your Windows version of Visual Studio Code but programs things in your WSL filesystem.

How the Visual Studio Code WSL Extension Works

The WSL extension for Visual Studio Code lets you access your WSL files remotely. It’s similar to doing things with SSH. You are not directly using the resources for your WSL installation to run Visual Studio Code, but it’s editing your WSL files while using your regular Windows resources.

Not only does this saves you processing power to run GUI app prototypes, but also gives you a fresh environment for development.

However, this means that some extensions that rely on third-party programs won’t work unless you install them in your WSL environment too. So no compilers, no Docker, no Node, and certainly no interpreters. Even PlatformIO won’t work.

As it is, using the WSL extension has its own pros and cons. But if the other alternative is to run a Linux distro on a USB or as dual-boot, then the benefits of using WSL speaks for itself.

How to Connect VSCode to WSL

1. In Visual Studio Code, go to Extensions and search for “WSL” on the extensions search bar.

2. Click on the “Install” button. Wait until it’s done.

3. Run the command search bar by going to “Help -> Show All Commands” or pressing on CTRL + Shift + P.

4. Type WSL: Connect to WSL on the command search bar to connect to WSL.

Note: WSL calls this as “initiating remote connection” and you would know it’s connected if it says WSL: <your distro> on the lower-left corner.

5. In the first run, the extension will look for WSL currently installed on your computer. If it’s not available or the extension can’t find it, you’ll have to download it first by using the “Connect to WSL using Distro…” command.

How to Install Extensions on WSL Visual Studio Code

1. Click on the Extensions button to see your list of Visual Studio Code extensions. There should be a new category there that says “Local – Installed.”

2. For the extensions you need, you can click on the button that says “Install on WSL: <your distro>” to make them accessible on your current distro.

3. Once installed, you can keep using them even if you disconnect and reconnect to your WSL distro at another time. You are now ready to use Visual Studio Code on WSL.

Frequently Asked Questions

How can I go back to normal Visual Studio Code after installing the WSL extension?

Even if you restart Visual Studio Code, your WSL instance will keep popping up whenever you run it. To disconnect, press Ctrl + Shift + P, then type remote: close remote connection on the Command Palette.

Is the WSL extension available in VSCodium?

Because Microsoft maintains the WSL extension, it is not contained in VSCodium.

Image credit: Unsplash, screenshots by Terenz Jomar Dela Cruz