DEV Community

Cover image for Make Your VS Code Terminal Look Awesome
Krishna Agarwal
Krishna Agarwal

Posted on • Updated on

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.

Top comments (0)