Adding Fira Code font for better editing

If you want to try a topic that can quickly lead to a (warm? heated?) discussion, say out loud that the best font for programming is such and such, and just wait! I don't want to start any arguments, but I can certainly recommend a font that can make your JS code look much better, and become more readable.

An article in Slant, at https://www.slant.co/topics/67/~best-programming-fonts, lists over 100 programming fonts; did you even think so many were available?

The key to a better font hinges on the concept of ligatures. In typography, a ligature occurs when two or more letters are joined, becoming a single character. OK, the proper technical word would be glyph, but let's not make it more complicated than needed!

Some ligatures you may not be aware of are these: the ampersand character (&) was originally a ligature of the letters E and t, spelling out et in Latin, meaning and. Similarly, the German ß character was a ligature of two s letters, next to each other, and the Spanish Ñ originally was a pair of N characters, one written on top of the other.

In JS, there are many symbols that are written as two or more characters, just because no other way is available. For example, the greater than or equal to symbol is typed as >=, which doesn't look as good as the mathematical symbol ≥, does it? Other combinations are <= (less than or equal to), => (for arrow functions, which we'll meet in Chapter 2, Using Modern JavaScript Features), the binary shift operators << and >>, the equality operators == and === (plus the corresponding != and !==), and more.

Do not confuse ligatures with kerning. Both have to do with showing adjacent characters, but the former refers to joining characters and replacing them with a new one, while the latter deals with reducing the distance between characters. If you place an f next to an i, kerning would make them closer without overlapping (in the same way that you can reduce spacing between A and V because of the letters' shapes), while a ligature would replace both characters with fi, actually joining both letters.

How to do it...

While there are many monospaced fonts (meaning all characters have the same width, which helps with onscreen alignment and indentation), there are not so many that also provide ligatures. In my case, after experimenting with many, I can recommend using Fira Code, available online at https://github.com/tonsky/FiraCode. This font provides lots of ligatures, not only for JS but for other programming languages as well. Take a look at following illustration for all the possibilities:

All the available ligatures, as seen in the figure taken from
https://raw.githubusercontent.com/tonsky/FiraCode/master/showcases/all_ligatures.png

Download the latest version (1.206, as of December 2018) and install it, according to the standard procedures for your operating system. Afterwards, you'll have to change a pair of VSC settings, as seen earlier in this chapter; just add the following lines, and save your configuration:

"editor.fontFamily": "'Fira Code', 'Droid Sans Mono', 'Courier New'",
"editor.fontLigatures": true,
.
.
.

The first line defines what font you want to use (and in CSS style, I also provided alternatives, just in case I took my settings to a different machine where Fira Code wasn't available) and the second line tells VSC to enable onscreen ligatures.

How it works...

After doing the changes in the previous section, when you open VSC, you'll be able to see code as in the following screenshot:

A sample listing, showing several ligatures; see lines 60 (=>), 63 (=== and ||), or 71 (<=)

Note that you don't have to do anything at all when you type in your code. If you want an arrow ligature, you will have to type the two characters = and > as usual; the way they will look on screen is just a result of font rendering. Similarly, if you want to search for an arrow, seek =>, as that's what will be saved to disk.

Now we have got VSC configured to our liking, let's start more packages to help with source code management and other features.