如何让Visual Studio代码在格式化代码中显示斜体字体？

Question

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

我目前的设置:

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

Answer 1

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

将其添加到settings.json(ctrl + ,或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的文档和范围关键字.

说明:

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

其他考虑

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

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

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

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

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

Answer 2

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

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

Answer 3

恢复莫妮卡的回答对我有帮助，但我注意到所有内容都不像我在斜体特定主题上发现的那样斜体。我从https://github.com/wesbos/cobalt2-vscode/issues/116找到了更全面的斜体设置列表。感谢 github 上的@bgarrant。

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

Answer 4

您必须使用文件名指定字体.如果你有一个斜体字体,那么这将工作(我在Mac上试过这个).

例如:

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

Answer 5

首先从这里下载一个 zip 文件。然后解压缩它并通过双击安装每个具有.ttf扩展名的文件。之后转到 VS Code 并使用CMD +或CTRL + ，（在 Windows 机器上）打开设置并输入font。在字体系列下粘贴此“Fira Code iScript”（包括单引号）。现在将开始使用 fira 代码作为主要字体。唯一剩下的就是添加设置并告诉 VS Code 何时实际使用递归字体。为此，仍然在设置中，键入令牌颜色单击令牌颜色自定义 - 在 settings.json 中打开它并将此吸盘粘贴到：

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

那应该为你做！记得保存设置文件！

Answer 6

以下代码很好

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

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

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

Answer 7

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

在此之后也重新启动 VSCode。