How to beautify VS Code
Well this arc begins like it did for the first cavemen who saw each other smashing heads with sticks and quickly sought bigger sticks than their bretheren. I was on YouTube trying get hold of some React.js hacks and suddenly come across this video with one of the prettiest VS Code setups I’d ever seen; and I was hooked. Gone was the thought of finishing the project I had come seeking aid for, I needed my VS code looking beautiful and wouldn't rest till it did.
So what did I see to be enthralled in an instant?
- The enchanting cursor:
This one is the easiest to setup and can be done by going to VS Code setting, then searching for cursor blinking:
If you haven't changed this setting before, it should look something like the snip below.
Now we’ll change this to expand and on going back to our file we can find our cursor gracefully animated.
Now lets quickly go through the other animation styles in the dropdown where we selected expand before
Cursor with the smooth animation setting:
Cursor with the phase animation setting:
Using a different cursor
Now this is where I would say we were taking things a bit extreme; but hell, who am I to judge?
So let’s bring up our VS Code settings once again and head over to Editor: Cursor Style. Here You can change the “type” of cursor you want, those who prefer Vim’s underline, this is a dream come true.
Making it all Fontastic!
For this tutorial I’ll show you how to setup Fira Code, but the steps should be similar for other fonts too :)
Go get the fonts from wherever you like ;)
That’s a joke, please try to get them from their official repository or cdn as the other hostings may have older version that may lead to unwanted bugs
Get Fira Code here
Click on the giant download button to begin download of the fonts zip
If you're on windows:
- Unzip the file
- Venture inside the ttf folder
- Unblock each font file like in the below example
4. Now we can install all of these fonts(make sure you did the step above for every file)
5. Head over to VS code and write the name of your installed font in the Font Family setting of VS Code:
6. If your font supports it, turn on Font ligatures in settings:
This will turn on font specific “ligatures” which is just a fancy term for the some font characters getting “joined” when written in a specific order like given in the list below(from fira code)
Wrap things up with a good theme
If you liked the theme I was using, its called “Outrun Night” and here’s the link
If you were looking for something more… “mainstream”? I’ve got you covered. Try out Monikai Pro. It has its own matching and minimal icons which will make the whole environment even more soothing.
If you're one of the light theme gang(very few I know), here’s Ayu theme. Probably the best light theme I’ve come across on the VS marketplace.
That’s it!
If you followed the steps properly, our shiny new font should now be visible in any subsequent file that you may open with VS code.
If you're wondering why I went with this particular font, its simply because it has inbuilt support for font ligatures (which in my opinion makes code a bit more readable).
Some final words
VS Code is one of the best and most widely used IDE. It is flexible and extremely customizable. Running on electron it may have its shortcomings but they are greatly outnumbered(and being eliminated) due to the sheer optimizations and features that have been (and are being) put into it. These animations/customizations will have a minimal (if any) impact on VS code’s performance. And your IDE is where you’ll be spending most of your time coding and even poking around :P. So why not adjust it to your own liking?
Hope you enjoyed this article and didn't get bothered by all the images and gifs (I find them to be lacking in other tutorials). I honestly think “The sky’s the limit” for customizations in VS Code and please feel free to share your own tips.
