如何让Visual Studio代码在格式化代码中显示斜体字体？来自这个github页面

Posted 2021-05-07

如何配置VS代码以支持斜体样式，如此图片中所示？

我目前的设置：

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

答案

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

您还可以在scope中提供其他关键字。检查VS Code's documentation和scope keywords。

Explanation:

为VS Code定义字体时（例如OP的Operator Mono），所有内容都以该字体呈现。为了实现OP图像的外观，您需要对某些元素应用不同的字体样式（斜体/粗体）。此外，如果您的字体具有明显不同的斜体样式（例如，运算符单声道具有草书连字），您将获得与OP图像类似的外观。

---

Other considerations

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

要使斜体字符链接，（它们之间没有间距），就像写草书一样，您需要启用字体连字：

要执行上述操作，请确保您的settings.json具有以下内容：

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

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

另一答案

首先我知道这个帖子已经有一年多了，但是我在不改变主要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"
            }
        },
    ]
},

希望这可以帮助任何人，并再次抱歉发布在一个过时的帖子。

另一答案

您必须使用文件名指定字体。如果你有一个斜体字体，那么这将工作（我在Mac上试过这个）。

例如：

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

另一答案

以下代码没问题

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

您必须在计算机上安装Operator Mono才能使用。它可以在这里下载：https://www.typography.com/fonts/operator/styles/一个机器的当前价格为599.00美元。

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

另一答案

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

此后重启VSCode。