Using Font Ligatures in VS Code

Font ligatures combine multiple characters into a single unique character. Some fonts provide ligatures specifically for software development.

Some free fonts that support ligatures are:

Font
Reference

Cascadia Code
link

Fira Code
link

J…


This content originally appeared on DEV Community and was authored by Sam Wronski

Font ligatures combine multiple characters into a single unique character. Some fonts provide ligatures specifically for software development.

Font Ligatures in VS Code infographic

Some free fonts that support ligatures are:

Font Reference
Cascadia Code link
Fira Code link
JetBrains Mono link
Iosevka link
Hasklig link
Monoid link
Victor Mono link

To enable font ligatures in Visual Studio Code you will need to edit the settings.json file. To do this open the VS Code settings (File -> Preferences -> Settings) select the Text Editor group and Font settings. Replace the name of the font with the font you would like to use. For example if you would like to use Cascadia Code then replace the font with Cascadia Code. You may include fallback fonts that will be used if the first font is not available. Cascadia Code, Fira Code will prioritize Cascadia Code but use Fira Code if Cascadia Code isn't available on the current machine.

Once you've configured the font you'll need to explicitly enable ligatures. This is a separate option and requires you to modify the settings.json file directly. You will need to add the "editor.fontLigatures" setting to your settings.json settings file. Once this is done your settings should include two lines that look something like this:

{
  "editor.fontFamily": "*** Your ligature enabled font ***",
  "editor.fontLigatures": true,
  "...": "your other settings",
}

Once you've made these changes you should be ready to start taking advantage of ligatures in your code.

Note: Different fonts may support a different set of ligatures.


This content originally appeared on DEV Community and was authored by Sam Wronski


Print Share Comment Cite Upload Translate Updates
APA

Sam Wronski | Sciencx (2021-11-01T18:36:40+00:00) Using Font Ligatures in VS Code. Retrieved from https://www.scien.cx/2021/11/01/using-font-ligatures-in-vs-code/

MLA
" » Using Font Ligatures in VS Code." Sam Wronski | Sciencx - Monday November 1, 2021, https://www.scien.cx/2021/11/01/using-font-ligatures-in-vs-code/
HARVARD
Sam Wronski | Sciencx Monday November 1, 2021 » Using Font Ligatures in VS Code., viewed ,<https://www.scien.cx/2021/11/01/using-font-ligatures-in-vs-code/>
VANCOUVER
Sam Wronski | Sciencx - » Using Font Ligatures in VS Code. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/11/01/using-font-ligatures-in-vs-code/
CHICAGO
" » Using Font Ligatures in VS Code." Sam Wronski | Sciencx - Accessed . https://www.scien.cx/2021/11/01/using-font-ligatures-in-vs-code/
IEEE
" » Using Font Ligatures in VS Code." Sam Wronski | Sciencx [Online]. Available: https://www.scien.cx/2021/11/01/using-font-ligatures-in-vs-code/. [Accessed: ]
rf:citation
» Using Font Ligatures in VS Code | Sam Wronski | Sciencx | https://www.scien.cx/2021/11/01/using-font-ligatures-in-vs-code/ |

Please log in to upload a file.




There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.