How to Set up VSCode terminal with WSL
Tags: vscode, productivity, tutorial, ubuntu
Published: 2021-05-15 07:02:09

Let's all agree on the fact that, the terminal is the developer's best friend, and that's what we are most proud of. Doing all those git operations on the terminal and finally pushing your code, satisfaction like nothing else! But are you still stuck with the old Microsoft Powershell terminal which takes an eternity to load up and with that boring monochrome theme to it. 

It's time to give your terminal a makeover.

Here are the topics we'll be going through this blog, 
1. What is WSL?
2. Setting up WSL and Ubuntu.
3. Connecting WSL to the VSCode terminal.
4. Installing Zsh configuration and OhMyZsh.
5. Setting up the theme on Zsh.
6. Installing powerlevel10k theme. (Optional)

--- 
## What is WSL?  
Gone are the days, where you had to first make a partition in your hard drive, in which one part would be occupied by any Linux distro like Ubuntu, and the other occupied by Windows OS.

![partition.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1620972337441/AgkGOn5Yn.png)

With Windows Subsystem for Linux (WSL), you can run a Linux environment directly on Windows, bringing in most of the command-line tools and utilities. Of course, you won't get all the features of the GUI. 

The latest version is WSL 2 and is faster than the previous version. You have full control over the version, either to downgrade or upgrade, bring all developer-friendly tools as Git and NodeJS installed.

## Setting up WSL and Ubuntu
WSL comes inbuilt with the Windows OS, it's just a matter of activation.

Go to your settings and search for _Turn Windows Features On or Off_

![settings.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1620974860558/RM5vkv3DE.jpeg)

Search for *Windows Subsystem for Linux*, click the checkbox, click Ok, and restart your PC.

![onoroff.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1620974927531/-G5osJL8q.jpeg)

You should now be able to view the various Linux distros on Microsoft Store after this.

We'll download Ubuntu since it's the most popular one and widely used.

![ubuntu.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1620984707477/Wxoe7QXCw.jpeg)

After installing you should see the ubuntu terminal on your desktop.

Run it, you may have to wait for a couple of minutes, to get the WSL set up.

## Connecting WSL to VSCode terminal
After this open VSCode. You will most probably get a pop-up notification saying that WSL has been detected on your PC. 

Now go to extensions and download the following extension,
(you may be redirected to this page automatically also)

![remote-wsl.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1620985203782/4i8BTLcea.jpeg)

After this restart VSCode one last time, and you should be able to open up a new WSL window.

![new-wsl-window.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1620985815103/37kwVPI8C.jpeg)

Now open up the Ubuntu terminal.
NodeJS, Git comes with the installation so if you run `node --version` and `git --version` you should be able to see the resultant version.

## Installing Zsh configuration and OhMyZsh
Before installing zsh, let first update the existing packages. Run the command,
```
sudo apt-get update
sudo apt upgrade
```

Now let's install zsh shell. Run the following command,
```
sudo apt install zsh
```
Zsh shell is somewhat like the Bash shell, but there are plenty of new features and support for various plugins and themes, which I'll talk about ahead. 

Now let's install OhMyZsh.
```
sh -c "$(curl -fsSL https://raw.githubusercontent.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"
```
In case, your ubuntu is missing `curl`, just install it using the following command
```
sudo apt install curl
```
## Setting up the theme on Zsh.
OhMyZsh comes in with a lot of themes, which you can set by editing the `.zshrc` file.

Make sure you're in the root directory and run
```
code ~/.zshrc
```
This will open up the file in VSCode.

Go over to the line of code `ZSH_THEME` and set it to "random"
```
ZSH_THEME="random"

```
Now every time you open a new terminal session, a new theme will be set. If you stumble upon the one you want, you can set its name to `ZSH_THEME` in the `.zshrc` file.

## Installing powerlevel10k theme (Optional)
Now, this is completely optional. If you're satisfied with your current OhMyZsh theme, you can stop right here else, if you want to try something much cooler, go ahead.

Alright! Powerlevel10k is a theme for the `zsh` shell. It's not all about the theme by the way. If you have noticed, I did mention "improving performance". The Microsoft Powershell is very slow, in my machine at least, takes about 15-20 seconds to load (seriously). 

The question is - **Is it really fast?**

According to the `readme` file on [Powerlevel10k's](https://github.com/romkatv/powerlevel10k#is-it-really-fast) GitHub repository, the benchmark proves to give a prompt latency of 8.7 ms. 

To install the `powerlevel10k` theme, simply clone the repository by running the following command
```
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

```
`powerlevel10k` recommends installing the 'Meslo Nerd' font for a better experience. I do recommend, as many emojis come in with the theme and can't be displayed unless you have the theme.

The fonts required are
- [MesloLGS NF Regular.ttf](https://github.com/romkatv/powerlevel10k-media/raw/master/MesloLGS%20NF%20Regular.ttf)
- [MesloLGS NF Bold.ttf](https://github.com/romkatv/powerlevel10k-media/raw/master/MesloLGS%20NF%20Bold.ttf)
- [MesloLGS NF Italic.ttf](https://github.com/romkatv/powerlevel10k-media/raw/master/MesloLGS%20NF%20Italic.ttf)
- [MesloLGS NF Bold Italic.ttf](https://github.com/romkatv/powerlevel10k-media/raw/master/MesloLGS%20NF%20Bold%20Italic.ttf)

Double click on each file and install it. This will make the font available on your system globally.

All you need to do now is, configure the font on VSCode settings.

Search for **Terminal font**, and set it to `MesloLGS NF`

![meslo.JPG](https://cdn.hashnode.com/res/hashnode/image/upload/v1621001369386/dsiq6caSU.jpeg)

You're all set now!

Go ahead and start a new terminal session, configure your settings for `powerlevel10k` in the terminal itself, and now it's time to flex💪.

> That's all for the blog, hope you have successfully customized your terminal. If you did like it, make sure you give it a ❤. Do let me know if you're falling into any errors, follow me on  [Twitter](https://twitter.com/BrodasGeo) where I talk about exploring new web technologies and executing them in projects. <br />
Till then adios👋

*Icon Credits to Pixel Perfect and Freepik from Flaticon*

VSCode theme I'm using - 
https://marketplace.visualstudio.com/items?itemName=GeoBrodas.geobrodas-theme-red-doyoubleed


# Support Me 🙌
My constant source of energy is coffee, if you feel I deserve one,
<a href="https://www.buymeacoffee.com/geobrodas"><img src="https://img.buymeacoffee.com/button-api/?text=Buy me a coffee&emoji=&slug=geobrodas&button_colour=FF5F5F&font_colour=ffffff&font_family=Cookie&outline_colour=000000&coffee_colour=FFDD00"></a>