Daily Dev Tips №96— Visual Studio Code — how to enable this new sexy Fira Code font?

Fira Code is getting quite popular nowadays as a new dev font. It is a Monospaced font with programming ligatures. From its official github project,

Fira Code is an extension of the Fira Mono font containing a set of ligatures for common programming multi-character combinations. This is just a font rendering feature: underlying code remains ASCII-compatible. This helps to read and understand code faster.

Fira Code vs Fira Mono

Alright, let’s see how we can enable it in our favourite IDE VS Code.

1. Install the Fira Code

The installation is very straightforward, I am going to show you the easiest way to install it in Mac here, for windows etc, please check the official wiki page.

$ brew tap caskroom/fonts
$ brew cask install font-fira-code

2. Enable Fira Code in VS Code

After the installation, you can open the settings.json file in VS Code.

1.) Press cmd+, (mac) or ctrl+, (windows) or Code -> Preferences -> Settings

open settings.json

2.) Update the Font Family to Fira Code , enable the Font Ligatures , choose a font size that suits you, for me, it is 14px.

update settings.json via the new settings UI

If you prefer directly update the settings.json file, you can add the following lines

"editor.fontFamily": "Fira Code",
"editor.fontSize": 14,
"editor.fontLigatures": true,

update settings.json directly

3.) now open some javascript file and check the look and feel.

Before using Fira Code:

Before — not using Fira Code Font

After using Fira Code:

After enabling Fira Code Font

Don’t they look much better for you?! Let me know what you think below!

Thanks for reading! 🎊 If you find this helpful don’t forget to give some claps 👏🏻 and feel free to share this with your friends and followers! 🙏If you have some tips to share, feel free to comment below.