How to Enable Font Ligatures in VS Code

Make your code easier to scan and improve your developer experience with font ligatures in VS Code.


What are ligatures?

Ligatures are special characters in a font that combine two or more characters into one. They were originally invented by scribes as a way to increase handwriting speed by combining commonly used characters. The ampersand ( & ) was developed from a Latin ligature for et (latin for and).

These special characters have a practical application in printing, they were often used to improve the legibility of certain character combinations such as fi or fl. In the age of printing with movable type, these ligatures helped to improve printing speed by allowing one block to print two or more characters.

In general, the most common ligatures are f- ligatures such as fi, fl, and ff. This is because f isn't a great neighbor and tends to overlaps or crowd the letter next to it in many typefaces. Some fonts use ligatures here to increase the spacing between the f and the letter after it. Others choose an artistic approach and create special combination character known generally as a stylistic ligature. Take a look at the following example to see them in action.

A comparison of the word fluffy with and without ligatures.

Font: Myriad Pro

Ligatures found a use in code editors as a way to improve readability of common expressions or operators. For example, != would be replaced with in a ligatured font.

What fonts to use?

There are many fonts that include programming ligatures. My favorite being Fira Code, a popular open source font with ligatures for most of what I need as a Vue.js or React developer. Below is a side by side comparison of a code snippet I made shown in VS Code with Fira Code and the default font.

Fira Code

Fira Code

VS Code Default

VS Code Default

If Fira Code doesn't vibe with you or you just want to see what else is out there, I've put together a list of other popular ligatured fonts that are compatible with VS Code.

Enabling ligatures in VS Code

Visual Studio Code (my editor of choice) supports font ligatures without requiring any additional extensions. The only requirement is that you have a ligatured font installed on your computer.

Install font

Mac OS

Using the Mac OS package manager homebrew.

brew tap homebrew/cask-fonts
brew install --cask font-fira-code

Windows

Using the CLI installer scoop

scoop bucket add nerd-fonts
scoop install firacode

Enable in VS Code

Open the settings ⌘, file settings.json and add these lines to it. Replace "Fira Code" with your favorite ligatured font.

{
  "editor.fontFamily": "Fira Code",
  "editor.fontLigatures": true
}

As always with open source, if you really like something, pay for it. Being an open source developer is hard work and rarely pays the bills. Buying a cup of coffee for a developer can go a long way.