How can I change operators styling/shortening in VS Code

Question

I'm wondering how I can prevent conditional operators like !== from looking like this:

I just want them to look like <= >= etc. as I read them easier.

score 1 · Accepted Answer · answered Mar 27 '23 at 11:05

These "operators styling/shortening" are called Ligatures. Writing style makes reading easy and convenient and can make your editor look better with awesome fonts along with ligatures.

Check out your settings.json in VSC for:

"editor.fontLigatures": true

If you want to turn off font ligatures for a specific programming language (ex. PHP), than add this lines to a settings.json file in VSC:

{
  "editor.fontLigatures": true,
  "[php]": {
    "editor.fontLigatures": false
  }
}

thanks! I believe i turned it on at one point to give it a go but didnt know which settings to turn it off. Appreciate the help. — Damien Sullivan, Mar 28 '23 at 22:03

score -2 · Answer 2 · answered Mar 27 '23 at 17:47

These are called "ligatures". If you want to enable or disable ligatures on a fine-grained basis, consult your font's documentation to see whether and how it is supported. VS Code supports configuring font ligatures in the same way as browsers do via CSS (since VS Code is browser-based): font-feature-settings in its editor.fontLigatures setting.

For example, for Fira Code, see its readme. Its equality operator ligatures are controlled by ss08. Its other comparison operators are controlled by ss02, cv19, cv20, cv23.

If you want to completely disable ligatures, set editor.fontLigatures to false.

How can I change operators styling/shortening in VS Code

2 Answers2