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

Question

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

92

我该如何配置VS Code以支持斜体样式，就像这张图片中展示的一样？

我的当前设置：

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

- undefined

我使用Angular，也在尝试查找如何实现此功能。我尝试了很多方法，但仍然无法让它在.html文件中工作，并且我已经拥有所有所需的字体和设置。 - marknt15

13个回答

34

首先，我知道这个帖子已经过去一年了，但是我正在寻找相同的东西，而不改变主要的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

1

基本上做的是同样的事情 :) - M.Vanderlee

是的，但它只是一个主题，如果您想更改文本或编辑器的颜色以符合您的需求，则还需要进行一些调整。我真的不知道您是否可以同时拥有两个主题。但是感谢您指出这一点 ^^ - Xullien

对我来说，scope 中的 Keyword 必须小写：keyword。 - Scott Rudiger

谢谢，我的看起来很好！另外，如果有人在普通/粗体上使用Operator Mono时遇到问题，请尝试“editor.fontWeight”：“300”。 - Paula Fleck

26

Reinstate Monica的回答对我有所帮助，但我发现并不是所有东西都像我在倾斜特定主题中发现的那样倾斜。我从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"
            }
        }
    ]
}

这是我于2021年9月11日更新的列表，请复制以下代码块：

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

}

- tralawar

12

您需要使用字体文件名来指定字体。如果您有一个具有斜体的字体，那么这将起作用（我在Mac上尝试过）。

例如：

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

- Arturo Maltos

2

请注意，这会使所有内容变为斜体字。根据提供的屏幕截图，看起来原帖是在寻找特定规则的斜体字。以下答案解释了如何实现：https://dev59.com/tVgR5IYBdhLWcg3wbs6X#50714195 - jabacchetta

9

首先从这里下载压缩文件。然后解压并通过双击每个具有.ttf扩展名的文件来安装它们。之后，打开VS Code并使用CMD + ,或CTRL + ,（在Windows机器上）打开设置，然后输入font。在字体族中，粘贴此内容'Fira Code iScript'（包括单引号）。现在将开始使用fira code作为主要字体。

唯一剩下的就是添加设置并告诉VS Code什么时候实际使用递归字体。为此，在设置中继续输入token color，点击Token Color Customizations - 在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": ""
            }
          }
        ]
    },

这样就可以了！记得保存设置文件！

- Filip Malek

9

以下代码完美无缺。

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

要让它起作用，您必须在计算机上安装Operator Mono。可以在此处下载：https://www.typography.com/fonts/operator/styles/撰写本文时，其当前价格为599.00美元/台。

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

- Brent Aureli

1

不是Operator字体集需要花钱。Operator Mono是一个免费提供的子集。 - Soviut

我切换到了 Material 主题，斜体生效了，谢谢你的建议！ - Fernando Rojo

6

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

在此之后也要重新启动VSCode。

- Lord_Rhaziel

你也可以将它从中等模式更改为轻松模式。 - Lord_Rhaziel

你使用的是Linux吗？如果是，请将字体系列更改为“Operator Mono Book”。另外，请确保颜色主题支持斜体。可以尝试使用Material Operator。 - Lord_Rhaziel

3

要使 VS Code 变成斜体格式，请按照以下步骤进行操作：

步骤1：安装 Fira Code iScript（通过从 GitHub 下载 .ttf 文件并在本地打开安装-直接链接）。

步骤2：您需要安装 Dark++ Italic 主题。（VS Code 直接链接）

在 VS Code 中按下 ctrl/command + p 启动命令面板，然后运行命令：

ext install idbartosz.darkpp-italic

步骤3：打开VS Code设置中的JSON文件并添加以下行。

{
  ...
  "editor.fontFamily": "Fira Code iScript",
  "editor.fontLigatures":  true,
  "editor.fontSize": 14,
  "workbench.colorTheme": "Dark++ Italic",
  ...
}

步骤4：现在你的编辑器将会像你想象的一样棒。如果你想进行更进一步的定制，你也可以尝试以下指令。

VS Code使用TextMate语法来定义它需要如何渲染代码。你可以参考官方文档以获得更多的清晰度。在settings.json中，你可以通过修改editor.tokenColorCustomizations下的textMateRules来覆盖当前主题的字体样式。

你可以找到以下示例：

"editor.tokenColorCustomizations": {
  "textMateRules": [
      {
          "scope": [
              // the following elements will be in italic
              //   (=Fira Code iScript)
              "comment",
              "keyword.control.import.js", // import
              "keyword.control.export.js", // export
              "keyword.control.from.js", // from
              // "constant", // String, Number, Boolean…, this, super
              "storage.modifier", // static keyword
              "storage.type.class", // class keyword
              "storage.type.php", // typehints in methods keyword
              "keyword.other.new.php", // new
              "entity.other.attribute-name", // html attributes
              "fenced_code.block.language.markdown" // markdown language modifier
          ],
          "settings": {
              "fontStyle": "italic"
          }
      },
      {
          "scope": [
              // the following elements will be displayed in bold
              "entity.name.type.class" // class names
          ],
          "settings": {
              "fontStyle": "bold"
          }
      },
      {
          "scope": [
              // the following elements will be displayed in bold and italic
              "entity.name.section.markdown" // markdown headlines
          ],
          "settings": {
              "fontStyle": "italic bold"
          }
      },
      {
          "scope": [
              // the following elements 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",
              "comment.block",
              "entity.other.attribute-name.class.css"
          ],
          "settings": {
              "fontStyle": ""
          }
      }
  ]
}

第五步：如何识别令牌

为了识别给定元素的TextMate令牌范围，打开命令面板（ctrl + shift + p），搜索 Developer: Inspect Editor Tokens and Scopes。这将打开 Scope Inspector（打开新窗口），您可以获得要配置的元素的标识符。现在，只需单击要检查的元素，vscode将向您显示匹配的作用域列表。

- Anand Raja

2

如果您想精确地更改您想要的内容，请使用上面答案中的.json结构，然后查看本网站第12.4节命名约定

https://macromates.com/manual/en/language_grammars

您可以更改您编写的每一行代码中的每个元素。

- Thinh NV

0

在检查给定的答案后，不要失去动力。也许你和我一样，没有安装包中提供的所有字体。在我的特定情况下，当我安装了Firacode iScript Regular以及粗体和斜体包时，一切都像魔法般地运行。

- varunswarup0

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- RaidenF · Accepted Answer

这个问题的直接答案是(从这个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的文档和作用域关键字。

Explanation:

如果您为 VS Code 定义了一个字体（例如 OP 的操作员单体），则所有内容都会以该字体呈现。为了实现 OP 图片中的外观效果，您需要对某些元素应用不同的字体样式（斜体/粗体）。此外，如果您的字体具有明显不同的斜体样式（例如 Operator Mono 具有草书连字），则您将获得类似于 OP 图像的外观效果。

其他考虑因素

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

要使斜体字符联接在一起（没有间隔），就像写草书一样，您需要启用字体连字：

为此，请确保您的 settings.json 中具有以下内容：

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

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

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

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

将以下内容添加到settings.json文件中(ctrl + ,或cmd + ,)

Explanation:

其他考虑因素

将以下内容添加到settings.json文件中(`ctrl + ,`或`cmd + ,`)