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

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:

Ligature Example

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.


First of all I know this thread is over a year old, but I was searching for the same thing without changing the main Dark+ theme, so I've put these in the settings.json of vs code, it might not be the most pretty but it works even on any theme you choose that doesn't have italic, and if you want to remove it just put it in comments, I've put the color in comments if you want to change it later!

     "editor.tokenColorCustomizations": {
    "textMateRules": [{
            "name": "Comment",
            "scope": [
                "comment",
                "punctuation.definition.comment"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#4A4A4A"
            }
        },

        {
            "name": "Keyword, Storage",
            "scope": [
                "Keyword",
                "Storage"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },

        {
            "name": "Keyword Control",
            "scope": [
                "keyword.control"
            ],
            "settings": {
                "fontStyle": "italic"
            }
        },

        {
            "scope": "entity.other.attribute-name",
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#78dce8"
            }
        },


        {
            "name": "entity.name.method.js",
            "scope": [
                "entity.name.method.js"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#82AAFF"
            }
        },


        {
            "name": "Language methods",
            "scope": [
                "variable.language"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#FF5370"
            }
        },


        {
            "name": "HTML Attributes",
            "scope": [
                "text.html.basic entity.other.attribute-name.html",
                "text.html.basic entity.other.attribute-name"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#FFCB6B"
            }
        },


        {
            "name": "Decorators",
            "scope": [
                "tag.decorator.js entity.name.tag.js",
                "tag.decorator.js punctuation.definition.tag.js"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#82AAFF"
            }
        },


        {
            "name": "ES7 Bind Operator",
            "scope": [
                "source.js constant.other.object.key.js string.unquoted.label.js"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#FF5370"
            }
        },

        {
            "name": "Markup - Italic",
            "scope": [
                "markup.italic"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": "#f07178"
            }
        },


        {
            "name": "Markup - Bold-Italic",
            "scope": [
                "markup.bold markup.italic",
                "markup.italic markup.bold",
                "markup.quote markup.bold",
                "markup.bold markup.italic string",
                "markup.italic markup.bold string",
                "markup.quote markup.bold string"
            ],
            "settings": {
                "fontStyle": "bold",
                //"foreground": "#f07178"
            }
        },

        {
            "name": "Markup - Quote",
            "scope": [
                "markup.quote"
            ],
            "settings": {
                "fontStyle": "italic",
                //"foreground": ""
            }
        },
        {
            "scope": "variable.other",
            "settings": {
                "foreground": "#82fbff"
            }
        },
        {
            "scope": "entity.name.function",
            "settings": {
                "foreground": "#dfd9a8"
            }
        },
        {
            "scope": "support.function",
            "settings": {
                "fontStyle": "italic",
                "foreground": "#dfd9a8"
            }
        },
        {
            "scope": "string",
            "settings": {
                "foreground": "#CE9178"
            }
        },
    ]
},

Hope this helps anyone, and sorry again for posting on an outdated post.


Reinstate Monica's answer helped me, but I noticed everything wasn't italic in the same way I found on italic specific themes. I found a more comprehensive list of italic settings from https://github.com/wesbos/cobalt2-vscode/issues/116. Thank @bgarrant on github.

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

"editor.fontFamily": "Dank Mono, Menlo, Monaco, 'Courier New', monospace",
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
    "textMateRules": [
        {
            "scope": [
              //following will be in italic
              "comment",
              "emphasis",
              "entity.name.method.js",
              "entity.name.class.js",
              "entity.name.tag.doctype",
              "entity.other.attribute-name",
              "entity.other.attribute-name.tag.jade",
              "entity.other.attribute-name.tag.pug",
              "keyword",
              "keyword.control",
              "keyword.operator.comparison",
              "keyword.control.flow.js",
              "keyword.control.flow.ts",
              "keyword.control.flow.tsx",
              "keyword.control.ruby",
              "keyword.control.module.ruby",
              "keyword.control.class.ruby",
              "keyword.control.def.ruby",
              "keyword.control.loop.js",
              "keyword.control.loop.ts",
              "keyword.control.import.js",
              "keyword.control.import.ts",
              "keyword.control.import.tsx",
              "keyword.control.from.js",
              "keyword.control.from.ts",
              "keyword.control.from.tsx",
              "keyword.operator.expression.delete",
              "keyword.operator.new",
              "keyword.operator.expression",
              "keyword.operator.cast",
              "keyword.operator.relational",
              "keyword.operator.sizeof",
              "keyword.operator.logical.python",
              "italic",
              "markup.italic",
              "markup.quote",
              "markup.changed",
              "markup.italic.markdown",
              "markup.quote.markdown",
              "markup.deleted.diff",
              "markup.inserted.diff",
              "meta.delimiter.period",
              "meta.diff.header.git",
              "meta.diff.header.from-file",
              "meta.diff.header.to-file",
              "meta.tag.sgml.doctype",
              "meta.var.expr",
              "meta.class meta.method.declaration meta.var.expr storage.type.js",
              "meta.decorator punctuation.decorator",
              "meta.selector",
              "punctuation.accessor",
              "punctuation.definition.comment",
              "punctuation.definition.template-expression.begin",
              "punctuation.definition.template-expression.end",
              "punctuation.section.embedded",
              "quote",
              "source.js constant.other.object.key.js string.unquoted.label.js",
              "source.go keyword.package.go",
              "source.go keyword.import.go",
              "source.go keyword.function.go",
              "source.go keyword.type.go",
              "source.go keyword.struct.go",
              "source.go keyword.interface.go",
              "source.go keyword.const.go",
              "source.go keyword.var.go",
              "source.go keyword.map.go",
              "source.go keyword.channel.go",
              "source.go keyword.control.go",
              "storage",
              "storage.type",
              "storage.modifier",
              "storage.type.property.js",
              "storage.type.property.ts",
              "storage.type.property.tsx",
              "tag.decorator.js entity.name.tag.js",
              "tag.decorator.js",
              "text.html.basic entity.other.attribute-name.html",
              "text.html.basic entity.other.attribute-name",
              "variable.language",
              "variable.other.object.property"
            ],
            "settings": {
              "fontStyle": "italic"
            }
        }
    ]
}

NEW refined list I use 9/11/2021 Copy the block below

"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,
"window.zoomLevel": 1,
"cSpell.languageSettings": [

],
"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
        "entity.name.method.js",
        "entity.name.class.js",
        "entity.name.tag.doctype",
        "entity.other.attribute-name",
        "entity.other.attribute-name.tag.jade",
        "entity.other.attribute-name.tag.pug",
      ],
      "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 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'",