CodeNewbie Community 🌱

Cover image for How to set up VSCode terminal with WSL
Georgey
Georgey

Posted on • Originally published at geobrodas.vercel.app

How to set up VSCode terminal with WSL

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

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,

sudo apt-get update
sudo apt upgrade
Enter fullscreen mode Exit fullscreen mode

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

sudo apt install zsh
Enter fullscreen mode Exit fullscreen mode

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)"
Enter fullscreen mode Exit fullscreen mode

In case, your ubuntu is missing curl, just install it using the following command

sudo apt install curl
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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"

Enter fullscreen mode Exit fullscreen mode

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

git clone --depth=1 https://github.com/romkatv/powerlevel10k.git ${ZSH_CUSTOM:-$HOME/.oh-my-zsh/custom}/themes/powerlevel10k

Enter fullscreen mode Exit fullscreen mode

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πŸ’ͺ.

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 where I talk about exploring new web technologies and executing them in projects.

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,

Buy Me A Coffee

Oldest comments (0)