it-swarm.com.ru

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

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

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

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

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


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

Чтобы ваш курсив выглядел иначе, чем обычный текст, вы должны использовать шрифт, курсив которого выглядит иначе. Такой шрифт - 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

Во-первых, я знаю, что этой ветке больше года, но я искал то же самое, не меняя основной темы Dark +, поэтому я поместил их в файл 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"
            }
        },
    ]
},

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

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 долларов США за одну машину.

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

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

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

2
Lord_Rhaziel