Movatterモバイル変換


[0]ホーム

URL:


Skip to content
DEV Community
Log in Create account

DEV Community

Cover image for WSL,VSCode Terminal: "Coddled and Cosseted"
Sunish Surendran K
Sunish Surendran K

Posted on

     

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 below6 steps and have the awesome terminal on your machine.

  • STEP 1 : Install zsh in WSL
apt-get install zsh
Enter fullscreen modeExit fullscreen mode

Alt Text

  • STEP 2 : Install "Oh My Zsh"

visit the websitehttps://ohmyz.sh/#install

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

Alt Text

  • STEP 3 : Install PowerLevel10k
git clone https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k
Enter fullscreen modeExit fullscreen mode
  • STEP 4 : Install Font FiraCode NF (We need this font then only the PowerLevel10k theme looks fine.)

Download the Font from thelink

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 modeExit 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 modeExit fullscreen mode

Add the below line and save the file

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

Reload the .zshrc file in your terminal

source ~/.zshrc
Enter fullscreen modeExit fullscreen mode

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

p10k configure
Enter fullscreen modeExit 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!

Top comments(0)

Subscribe
pic
Create template

Templates let you quickly answer FAQs or store snippets for re-use.

Dismiss

Are you sure you want to hide this comment? It will become hidden in your post, but will still be visible via the comment'spermalink.

For further actions, you may consider blocking this person and/orreporting abuse

Software Engineer
  • Location
    Falken's Maze
  • Work
    Research and Development Engineer
  • Joined

More fromSunish Surendran K

DEV Community

We're a place where coders share, stay up-to-date and grow their careers.

Log in Create account

[8]ページ先頭

©2009-2025 Movatter.jp