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

时间：2016-12-25 11:45:43

标签： fonts visual-studio-code

如何配置VS Code以支持斜体样式，如图所示？

我目前的设置：

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

11 个答案:

答案 0 :(得分：38)

这个问题的直接答案是（from this github page）：

将此添加到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's documentation和scope keywords。

说明：

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

其他注意事项

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

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

Ligature Example

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

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

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

答案 1 :(得分：16)

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

希望这对任何人都有帮助，并且再次抱歉在过时的帖子上发帖。

答案 2 :(得分：8)

首先从here下载一个zip文件。然后将其解压缩并双击双击以安装扩展名为 .ttf 的每个文件。之后，转到VS Code，并使用 CMD +，或 CTRL + （在Windows计算机上）打开设置，然后键入 font 。在字体系列下，粘贴此'Fira Code iScript'（包括单引号）。现在将开始使用fira代码作为主要字体。 剩下的就是添加设置并告诉VS Code何时实际使用递归字体。为此，仍然在设置中，键入 token color ，然后单击“令牌颜色自定义”-在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": ""
            }
          }
        ]
    },

那应该为您做！记住要保存设置文件！

答案 3 :(得分：7)

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

例如：

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

答案 4 :(得分：5)

以下代码没问题

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

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

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

答案 5 :(得分：2)

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

此后再重启VSCode。

答案 6 :(得分：1)

对于任何想完全更改您想要的内容的人，请使用上述答案的.json结构，然后在 12.4命名约定

部分中查看此站点。

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

您实际上可以在编写的每个代码行上更改每个元素。

答案 7 :(得分：0)

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

将此添加到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"
            }
        }
    ]
}

答案 8 :(得分：0)

检查了给定的答案后，不要灰心。 也许像我一样，您没有安装软件包中随附的所有字体。 在我的特殊情况下，在我将Firacode iScript Regular与Bold和Italic软件包一起安装后，它的工作原理就像是魅力。

答案 9 :(得分：0)

我知道这是一个老问题，但是当我尝试在Windows计算机上设置操作符mono时，我发现自己处于这个线程上，不得不花一些时间使其正常运行，但是如果有人在寻找它，事实证明，它与VS Code上的代码一样简单：

  1. 安装操作员Mono Dark主题
  2. 将以下内容添加到您的settings.json中：
"workbench.colorTheme": "Operator Mono Dark Theme",
"editor.fontFamily": "Operator Mono Light"

，应该这样做。

答案 10 :(得分：0)

最直接的方法是安装一个专门为 Operator Mono 优化的主题。在 VSCode 市场上有 quite a few of them 包括 Solarized。

相关问题
最新问题