web-dev-qa-db-ja.com

書式付きコードで斜体フォントを表示するには、Visual Studioコードを取得するにはどうすればよいですか？

この図のように、イタリックスタイルをサポートするようにVS Codeを構成するにはどうすればよいですか？

私の現在の設定：

{
  "editor.fontLigatures": true,
  "editor.fontFamily": "Operator Mono"
}
fontsvisual-studio-code
41
undefined

この質問に対する直接的な答えは（ from 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のドキュメント および スコープキーワード を確認してください。

説明：

VS Codeのフォント（OPのOperator Monoなど）を定義すると、すべてがそのフォントでレンダリングされます。 OPの画像の外観を実現するには、特定の要素に異なるフォントスタイル（斜体/太字）を適用する必要があります。また、フォントの斜体スタイルが大幅に異なる場合（たとえば、Operator Monoには筆記体の合字）、OPの画像と同様の外観になります。

その他の考慮事項

italicsが通常のテキストと異なるように見えるようにするには、斜体のフォントを使用する必要があります。このようなフォントは、OperatorMono（有料）、または FiraCodeiScript （無料）、または FiraFlott （無料）です。個人的にはFiraCodeiScriptが好きです。

筆記体を書くように、イタリック文字をリンクさせる（間隔を空けない）には、フォントの合字を有効にする必要があります。

Ligature Example

上記を行うには、settings.jsonに次のものがあることを確認してください。

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

残りのフォントは必要ありませんが、最初のフォントがない場合の代替フォントです。名前にスペースが含まれるフォントは、通常、単一引用符'が必要です。また、VS Codeの再起動が必要になる場合があります。

48
K. Gkinis

まず、このスレッドが1年以上前のものであることを知っていますが、メインのDark +テーマを変更せずに同じものを探していたので、これらをsettings.json vsコードに入れました。しかし、イタリック体を持たない選択したテーマでも機能します。削除したい場合はコメントに入れてください。後で変更したい場合はコメントに色を付けました！

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

これが誰にとっても役立つことを願っています。また、古い投稿に投稿して申し訳ありません。

17
Xullien

ファイル名を使用してフォントを指定する必要があります。斜体のフォントを使用している場合、これは機能します（Macで試しました）。

例えば：

"editor.fontFamily": "'OperatorMono-LightItalic'",
9
Arturo Maltos

次のコードは問題ありません

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

それを機能させるには、コンピューターにOperator Monoをインストールする必要があります。ここからダウンロードできます： https://www.typography.com/fonts/operator/styles/ これを書いている時点での現在の価格は599.00ドルです1台のマシン。

フォントをインストールし、Visual Studio Codeを再起動した場合は、テーマを変更してみてください。一部のテーマは、斜体スタイルをサポートしていません。

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

この後、VSCodeも再起動します。

2
Lord_Rhaziel