Setting up VSCode terminal with WSL

Georgey V B / May 14, 2021

5 min read

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

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, brings all developer-friendly tools like 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

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

onoroff.JPG

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

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

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

new-wsl-window.JPG

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,

terminal
sudo apt-get update
sudo apt upgrade

Now let's install zsh shell. Run the following command,

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

terminal
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

terminal
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

terminal
code ~/.zshrc

This will open up the file in VSCode.

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

zshrc
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 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

terminal
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

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

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

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

© 2021 Georgey V B