DEV Community

Cover image for This VS Code customs combo is lit! 🔥
Sujeet Gund
Sujeet Gund

Posted on • Updated on

This VS Code customs combo is lit! 🔥

When it comes to coding straight for hours, you might get it somehow boring too for sitting for a long period of time in front of a monitor. And you will wish for customizability within VS Code.

That's why in this article I will discuss about some popular trending customs for your VS Code for productivity! 🚀

1. Cascadia Code (FONT)

This is one of my favourite font family and recently I saw it is going quiet popular too.
To make cascadia code as your default font family in vs code follow following steps:

  • Open setting in VS Code
    Open VS Code Setting

  • Search for font in search bar.
    Search in VS Code setting

  • Add cascadia code in font family as shown in picture below.
    Change font family

Still you will not notice any changes, since you have to install Cascadia Code font family from microsoft.

Download this file
Now extract the downloaded file and open ttf folder from extracted file and open following file to install font.

Install Cascadia Code
That's it ⚡, now reopen VS Code you will really love this font family, I swear.

💡 Note: If by chance, you font family doesn't applied then try to restart pc once. In 99% cases you would not have to restart the pc but in case something went wrong, just restart the pc and font will be applied!

2. Font Ligatures (FONT STYLE)

You might see someone writing following code,
an arrow function looks like this:

Image description

And triple equal to (===) looks like this:

Image description

It actually looks so awesome!✨ This all happens due to Font Ligature. Do you want to write like this? Here you have to do for this:

  • Open settings in VS Code. And search for font in search bar you will find following result. Font Ligature Option
  • Click on that tab and it will open settings.json file make the following change in it: Initially, you will see
"editor.fontLigatures": false,
Enter fullscreen mode Exit fullscreen mode

Just replace false with true and all done! This effect will immediately apply on your editor.

"editor.fontLigatures": true,
Enter fullscreen mode Exit fullscreen mode

3. Editor Theme

I personally love to use Cobalt2, But there are many good themes are available in VS Code Marketplace and using it from a long time

You can also try Material theme, JellyFish theme or Github theme etc.

Conclusion:

Here is a sample code when you apply all the above recommendations.
Conclusion

Hit like if you really like this article and feel free to ask queries in comment section. 🙏

Top comments (2)

Collapse
 
atinypixel profile image
Aziz Kaukawala

Instead of

{
    "editor.fontLigatures": true
}
Enter fullscreen mode Exit fullscreen mode

set

{
    "editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'"
}
Enter fullscreen mode Exit fullscreen mode
Collapse
 
maurice35 profile image
Maurice Kollewe T

Looks really nice. Thanks for sharing.