Подтвердить что ты не робот

Как получить код Visual Studio для отображения курсивных шрифтов в форматированном коде?

Как мне настроить VS Code для поддержки курсивных стилей, как на этом рисунке?

Мои текущие настройки:

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

Ответ 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 (например, Operator Mono для OP), все отображается в этом шрифте. Для того, чтобы улучшить внешний вид изображения OP, необходимо применить другой стиль шрифта (курсив/полужирный) к определенным элементам. Кроме того, если ваш шрифт имеет существенно другой стиль курсива (например, Operator Mono имеет курсивные лигатуры), вы получите вид, аналогичный изображению OP.


Другие соображения

Чтобы курсив выглядел иначе, чем обычный текст, вы должны использовать шрифт, курсив которого выглядит иначе. Такой шрифт - OperatorMono (платный), FiraCodeiScript (бесплатный) или FiraFlott (бесплатный). Я лично предпочитаю FiraCodeiScript.

Чтобы связать курсивные символы (без промежутков между ними), как при написании курсива, необходимо включить лигатуры шрифтов:

Ligature Example

Для этого убедитесь, что ваш файл settings.json имеет следующее:

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

Остальные шрифты не нужны, но они являются резервными шрифтами на тот случай, если вы пропустили первый. Шрифты с пробелами в именах, как правило, нуждаются в одинарных кавычках '. Кроме того, вам может понадобиться перезапустить VS Code.

Ответ 2

Прежде всего, я знаю, что эта тема старше года, но я искал одно и то же, не изменяя основную тему 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"
            }
        },
    ]
},

Надеюсь, это поможет кому угодно, и жаль снова за публикацию на устаревшей почте.

Ответ 3

Вы должны указать шрифт, используя имя файла. Если у вас есть шрифт с курсивом, тогда это будет работать (я пробовал это на Mac).

Например:

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

Ответ 4

Следующий код в порядке

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

Для работы на вашем компьютере должен быть установлен Mono Monator. Его можно скачать здесь: https://www.typography.com/fonts/operator/styles/ Текущая цена на момент написания этой книги составляет $599,00 за одну машину.

Если вы установили шрифты и перезапустили Visual Studio Code, попробуйте изменить тему. Некоторые темы не поддерживают курсивный стиль.

Ответ 5

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

Также перезапустите VSCode после этого.

Ответ 6

Вы можете настроить VS Code с помощью этой темы