Thursday, September 14, 2017

VS Code with code ligatures

Code ligatures are these cool things I just found out about recently that replace text to symbols. For example: '!=' turns into '!='. That pretty cool.

Now, if you're not seeing the equal symbol with a slash across it, that just means you haven't installed correct font for code ligatures - FiraCode. Click here for install instructions.

With the font installed, time to activate this for VS Code, you'll have to modify your settings.json - either your users or your workspaces settings.json.

FYI, most editors and IDEs are supported except for a few; most notable are Eclipse and Sublime which are not supported yet. Huh....

To open settings.json, from the File menu choose Prefereneces, Settings or use the keyboard shortcut Ctrl +,. Add these lines and restart VS Code.

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

You might have to wrap the "Fira Code" font with extra apostrophes like
"'Fira Code'".
if it doesn't work.

Read up more about code ligatures.