How do i setup font ligatures for Visual Studio Code?

Question

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 1

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.

Answer 2

It doesn't seem you didn't have the Fira font installed in your PC. Please follow this step if you are using MacOS.

Open terminal and run these commands.

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

And try to restart VsCode.

Or if you are on other OS (Windows or Linux) follow this step. https://github.com/tonsky/FiraCode/wiki/Installing

Hopefully, this might be helpful.

Answer 3

Since VS Code 1.40, editor.fontLigatrues supports string settings, that is useful for fonts that support different stylistic sets:

ie:

• "editor.fontLigatures": "'ss09', 'zero', 'onum'",
• "editor.fontLigatures": "'ss01'",

You can read more about feature tags here (but the support depends on the font in question):

https://docs.microsoft.com/en-us/typography/opentype/spec/featuretags

Answer 4

如果您使用的是 macOS，有时您需要重新启动计算机才能使 Visual Studio Code 的连字生效。

Answer 5

我解决了我的问题，把 Fira 代码放在没有“”的地方

Answer 6

For those with a different version of VS Code you can try to press key combination of control and comma ( Ctrl + , ) to open your settings tab and then after search for font ligatures

After this click on Edit in settings.json .

Then set editor.fontLigatures=true .

After completing this step then you'll be good to go.

Answer 7

Install FiraCode font-family for Mac 'Computer' but not 'User'

How to install and remove fonts on your Mac--Apple support

Answer 8

install this font first and it will work.

https://github.com/microsoft/cascadia-code/releases/download/v2108.26/CascadiaCode-2108.26.zip