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:

{   "editor.fontLigatures": true,   "editor.fontFamily": "Operator Mono" } 

Answer 1

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.