如何获得Visual Studio Code以格式化代码显示斜体字体?

我如何配置VS Code以支持斜体样式(如该图所示)?

我当前的设置:

{
  "editor.fontLigatures": true,
  "editor.fontFamily": "Operator Mono"
}
undefined asked 2020-08-01T16:12:34Z
5个解决方案
55 votes

这个问题的直接答案是(来自这个github页面):

将此添加到settings.json('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": ""
      }
    }
  ]
}

您当然也可以在'中提供其他关键字。 查看VS Code的文档和scope关键字。

说明:

当您为VS Code定义字体时(例如,OP的Operator Mono),所有内容均以该字体呈现。 为了获得OP图像的外观,您需要对某些元素应用不同的字体样式(斜体/粗体)。 另外,如果您的字体具有明显不同的斜体样式(例如Operator Mono具有草书连字),您将获得与OP图像相似的外观。


其他注意事项

为了使斜体看起来与普通文本不同,您需要使用斜体看起来不同的字体。 这样的字体是OperatorMono(付费),FiraCodeiScript(免费)或FiraFlott(免费)。 我个人更喜欢FiraCodeiScript。

要使斜体字符链接在一起(它们之间没有空格),就像写草书一样,您需要启用字体连字:

Ligature Example

为此,请确保您的settings.json具有以下内容:

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

其余字体不需要,但是如果您缺少第一个字体,它们是备用字体。 名称中带有空格的字体通常需要单引号'。 另外,您可能需要重新启动VS Code。

K. Gkinis answered 2020-08-01T16:13:26Z
17 votes

首先,我知道这个线程已经使用了一年多,但是我一直在寻找相同的东西而没有更改主要的Dark +主题,所以我将它们放在vs代码的settings.json中,它可能不是最漂亮的 但是它甚至可以在您选择的没有斜体的任何主题上使用,并且如果您要删除它,只需将其放在注释中,如果您以后要更改它,我就在注释中添加颜色!

     "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"
            }
        },
    ]
},

希望这对任何人都有帮助,并再次抱歉过时的帖子。

Xullien answered 2020-08-01T16:13:51Z
9 votes

您必须使用文件名指定字体。 如果您的字体带有斜体,则可以使用(我在Mac上尝试过)。

例如:

"editor.fontFamily": "'OperatorMono-LightItalic'",
Arturo Maltos answered 2020-08-01T16:14:15Z
6 votes

以下代码很好

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

您必须在计算机上安装Operator Mono才能正常工作。 可以在这里下载:[https://www.typography.com/fonts/operator/styles/]撰写本文时,当前价格为一台机器$ 599.00。

如果您已经安装了字体并重新启动了Visual Studio Code,请尝试更改主题。 有些主题不支持斜体样式。

Brent Aureli answered 2020-08-01T16:14:45Z
2 votes
"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,

此后还要重新启动VSCode。

Lord_Rhaziel answered 2020-08-01T16:15:05Z
translate from https://stackoverflow.com:/questions/41320848/how-do-i-get-visual-studio-code-to-display-italic-fonts-in-formatted-code