WSL,VSCode Terminal: "Coddled and Cosseted"

FLAG: "If you have more time as a developer to improve your Terminal look and also if you're a Windows user, this blog can help you!"

Here we try out some fancy stuff for the WSL terminal.

The plan is to use WSL via windows Terminal. For this first install WSL and Windows Terminal on your machine.

Go through the below 6 steps and have the awesome terminal on your machine.

• STEP 1 : Install zsh in WSL

apt-get install zsh

• STEP 2 : Install "Oh My Zsh"

visit the website https://ohmyz.sh/#install

sh -c "$(curl -fsSL https://raw.github.com/ohmyzsh/ohmyzsh/master/tools/install.sh)"

• STEP 3 : Install PowerLevel10k

git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k

• STEP 4 : Install Font FiraCode NF (We need this font then only the PowerLevel10k theme looks fine.)

Download the Font from the link

After downloading the ttf file into your machine, just double-click the ttf file. The file will open, then press the install button at the top. This will install the font on your windows machine.

Now we need to map the font to the WSL Terminal, for that go to the settings of the terminal.

Click on the Open JSON file

The JOSN file looks like below one

Copy the below code and paste it in your JSON file.

NOTE: update the guid with the guid of your ubuntu instance

            {
                "fontFace": "FiraCode NF",
                "guid": "{YourUbuntuguid}",
                "hidden": false,
                "name": "Ubuntu",
                "snapOnInput": true,
                "source": "Windows.Terminal.Wsl",
                "useAcrylic": true
            },

You need to copy the code to the appropriate section of the JSON file as shown below.

STEP 5 : Configuring the Powerlevel10k

Go to WSL and open the .zshrc file kept in your home directory.

vi ~/.zshrc

Add the below line and save the file

ZSH_THEME="powerlevel10k/powerlevel10k"

Reload the .zshrc file in your terminal

source ~/.zshrc

Then the configuration screen for the powerlevel10k will appear if not type the below command

p10k configure

Follow the instructions and set up the new look as below!!!

ohhhh!!! Wait!! We have a few more work. Now we need our VScode terminal also looks cool.

STEP 6 : Updating the VSCode terminal font

Open VScode and go to its setting

Search the below line

Terminal integrated font family

update the font name here also.

Done, if you open the WSL terminal in vscode it looks cool!!.
Enjoy!