How do I get Visual Studio Code to display italic fonts in formatted code?

Question

How do I configure VS Code to support italic styles, like in this picture?

My current settings:

Answer 1

After checking the given answers, don't be demotivated. Maybe you, like me, didn't install all the fonts that comes in the package. In my particular case after i installed Firacode iScript Regular along with the Bold and Italic packages, the thing worked like charm.

Answer 2

You have to specify the font using the filename. If you have a font with an italic face, then this will work (I tried this on Mac).

For example:

"editor.fontFamily": "'OperatorMono-LightItalic'",

Answer 3

The direct answer to this question is (from this github page):

Add this to settings.json (ctrl + , or cmd + ,)

"editor.tokenColorCustomizations": {
  "textMateRules": [
    {
      "scope": [
        //following will be in italic (=FlottFlott)
        "comment",
        "entity.name.type.class", //class names
        "keyword", //import, export, return…
        "constant", //String, Number, Boolean…, this, super
        "storage.modifier", //static keyword
        "storage.type.class.js", //class keyword
      ],
      "settings": {
        "fontStyle": "italic"
      }
    },
    {
      "scope": [
        //following will be excluded from italics (VSCode has some defaults for italics)
        "invalid",
        "keyword.operator",
        "constant.numeric.css",
        "keyword.other.unit.px.css",
        "constant.numeric.decimal.js",
        "constant.numeric.json"
      ],
      "settings": {
        "fontStyle": ""
      }
    }
  ]
}

You can also provide other keywords in scope of course. Check VS Code's documentation and the scope keywords.

Explanation:

When you define a font for VS Code (e.g. Operator Mono for the OP), everything is rendered in that font. In order to achieve the look in the OP's image, you need to apply a different font style (italic/bold) to certain elements. Also, if your font has a significantly different italics style (e.g. Operator Mono has cursive ligatures), you will get a similar look to the OP's image.

---

Other considerations

In order for your italics to look different than your normal text, you need to be using a font whose italics, look different. Such a font is OperatorMono (paid), or FiraCodeiScript (free), or FiraFlott (free). I personally prefer FiraCodeiScript.

To make the italic characters linked, (not have spacing between them), like writing cursive, you need to enable font ligatures:

To do the above, make sure that your settings.json has the following:

{
  "editor.fontLigatures": true,
  "editor.fontFamily": "'Fira Code iScript', Consolas, 'Courier New', monospace"
}

The rest of the fonts are not needed, but they are fallback fonts in case that you are missing the first. Fonts with spaces in their names, usually need single quotes'. Also, you might need to restart VS Code.

Answer 4

"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,

Also restart VSCode after this.