How do I get Visual Studio Code to display italic

问题:

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

My current settings:

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

回答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.

回答2:

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.

回答3:

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'",

回答4:

The following code is fine

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

You must have Operator Mono installed on your computer for that to work. It can be downloaded here: https://www.typography.com/fonts/operator/styles/ Current price at the time of writing this is $599.00 for one machine.

If you have the fonts installed and have restarted Visual Studio Code, try changing your theme. Some themes do not support the italic style.

回答5:

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

Also restart VSCode after this.