Make Your VS Code Terminal Look Awesome

krishnaagarwal

Krishna Agarwal

Posted on July 20, 2022

Make Your VS Code Terminal Look Awesome

Change your integrated terminal from this:
Image description

To this:
Image description

Summary
In this article we are gonna use oh-my-posh and Nerd fonts. We are not only gonna set this up for VS Code integrated terminal, it’s also be avaliable for our external terminal like below:

Image description
Installing Windows Terminal and PowerShell 7
First head over the Microsoft Store and download the Windows Terminal. After that run this command to install PowerShell 7:

winget install --id Microsoft.Powershell --source winget
Enter fullscreen mode Exit fullscreen mode

Installing oh-my-posh
Oh My Posh is a custom prompt engine for any shell that has the ability to adjust the prompt string with a function or variable.

winget install oh-my-posh
Enter fullscreen mode Exit fullscreen mode

Then use this command to activate oh-my-posh

oh-my-posh get shell

Enter fullscreen mode Exit fullscreen mode

Create a PowerShell Profile script:

New-Item -Path $PROFILE -Type File -Force

Enter fullscreen mode Exit fullscreen mode

Open that with notepad:

notepad $PROFILE
Enter fullscreen mode Exit fullscreen mode

Then add the line below:

oh-my-posh init pwsh | Invoke-Expression
Enter fullscreen mode Exit fullscreen mode

Installing Nerd Fonts
After the installations abow, you need to see something like this:
Image description

We’ll fix that soon. Now install Caskaydia Cove Nerd Font Complete open it and on that opening window, click install. Then head over to Terminal open Settings > Defaults > Appearance and select the font that you installed.

Image description

for now your terminal should looks like this:

Image description

Setting VS Code Integrated terminal
Now we are gonna set VS Code for oh-my-posh. Open Command Palette and type:

Terminal: Select Default Profile
Enter fullscreen mode Exit fullscreen mode

and select PowerShell as your default terminal.

Open your integrated terminal, you should see something like this:
Image description

Open Command Palette again and select Preferences: Open Settings (JSON) in the json file add following:

// Controls the font family.
"editor.fontFamily": "DejaVuSansMono Nerd Font",
// Controls the font size.
"editor.fontSize": 14,
Enter fullscreen mode Exit fullscreen mode

When you save that file your terminal should look better:

Image description

Conclusion
So, This was the final look of our terminal.

If you found this helpful, make sure to show your support with a like, and a share would be greatly appreciated!

Let me know what you think about this!

Follow me on GitHub and DEV.

Also Thanks to my friend Babal.

💖 💪 🙅 🚩
krishnaagarwal
Krishna Agarwal

Posted on July 20, 2022

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

What was your win this week?
weeklyretro What was your win this week?

November 29, 2024

Where GitOps Meets ClickOps
devops Where GitOps Meets ClickOps

November 29, 2024

How to Use KitOps with MLflow
beginners How to Use KitOps with MLflow

November 29, 2024