DEV Community

loading...
Cover image for WSL,VSCode Terminal: "Coddled and Cosseted"

WSL,VSCode Terminal: "Coddled and Cosseted"

sunishsurendrank profile image Sunish Surendran K ・3 min read

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

Alt Text

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

Alt Text

  • STEP 3 : Install PowerLevel10k
git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k
Enter fullscreen mode Exit fullscreen mode
  • 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.

Alt Text

Click on the Open JSON file

Alt Text

The JOSN file looks like below one

Alt Text

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

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

Alt Text

STEP 5 : Configuring the Powerlevel10k

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

vi ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

Add the below line and save the file

ZSH_THEME="powerlevel10k/powerlevel10k"
Enter fullscreen mode Exit fullscreen mode

Reload the .zshrc file in your terminal

source ~/.zshrc
Enter fullscreen mode Exit fullscreen mode

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

p10k configure
Enter fullscreen mode Exit fullscreen mode

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

Alt Text

Alt Text

Alt Text

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

Alt Text

Search the below line

Terminal integrated font family

Alt Text

update the font name here also.

Alt Text

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

Discussion (0)

Forem Open with the Forem app