How do i setup font ligatures for Visual Studio Code?

Kolobozka6b picture Kolobozka6b · May 19, 2019 · Viewed 18.4k times · Source

I am setting up fonts ligatures for my VSCode using these two lines.

"editor.fontFamily": "'Fira Code'",
"editor.fontLigatures": true,

But it still looks the same as before.

I have tried to disable all of my installed extensions but it didn't work.

Here is my full settings:

{
  "workbench.iconTheme": "material-icon-theme",
  "workbench.colorTheme": "Material Theme Darker High Contrast",
  "editor.formatOnSave": true,
  "explorer.confirmDelete": false,
  "editor.suggestSelection": "first",
  "vsintellicode.modify.editor.suggestSelection": "automaticallyOverrodeDefaultValue",
  "window.zoomLevel": 0,
  "editor.fontSize": 16, //!=
  "editor.fontFamily": "'Fira Code'",
  "editor.fontLigatures": true,
  "explorer.confirmDragAndDrop": false
}

I want fully functional font ligatures as on this page: How i want it to look. Instead I am getting basic text with some font.

Answer

Ahmad Awais picture Ahmad Awais · Apr 19, 2020

Step #1: Install Fira Code.

Step #2: Set the font in VSCode settings:

"editor.fontFamily": "Fira Code, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,

Step #3: Restart/reload VSCode.

That's about it.