fonts - studio - fuentes para illustrator

¿Cómo consigo que Visual Studio Code muestre las fuentes en cursiva en el código formateado?

Question

¿Cómo configuro VS Code para que admita estilos en cursiva, como en esta imagen?

Mis ajustes actuales:

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

Answer 1

La respuesta directa a esta pregunta es ( de esta página github ):

Agregue esto a settings.json ( ctrl + , o 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": ""
      }
    }
  ]
}

También puede proporcionar otras palabras clave en el scope del curso. Consulte la documentación de VS Code y las palabras clave del alcance .

Explicación:

Cuando define una fuente para el Código VS (por ejemplo, Operator Mono para el OP), todo se representa en esa fuente. Para lograr el aspecto en la imagen del OP, debe aplicar un estilo de fuente diferente (cursiva / negrita) a ciertos elementos. Además, si su fuente tiene un estilo de cursiva significativamente diferente (por ejemplo, Operator Mono tiene ligaduras en cursiva), obtendrá una apariencia similar a la imagen del OP.

Otras Consideraciones

Para que sus cursivas se vean diferentes al texto normal, necesita usar una fuente cuyas cursivas se vean diferentes. Dicha fuente es OperatorMono (pagado), o FiraCodeiScript (gratis), o FiraFlott (gratis). Personalmente prefiero FiraCodeiScript.

Para hacer que los caracteres en cursiva estén vinculados (sin tener espacio entre ellos), como escribir en cursiva, debe habilitar las ligaduras de fuentes:

Para hacer lo anterior, asegúrese de que settings.json tenga lo siguiente:

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

El resto de las fuentes no son necesarias, pero son fuentes de reserva en caso de que falte la primera. Las fuentes con espacios en sus nombres, por lo general necesitan comillas simples '' . Además, es posible que deba reiniciar el Código VS.

Answer 2

El siguiente código está bien

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

Debe tener el Operador Mono instalado en su computadora para que funcione. Se puede descargar aquí: https://www.typography.com/fonts/operator/styles/ El precio actual en el momento de escribir esto es de $ 599.00 por una máquina.

Si tiene las fuentes instaladas y ha reiniciado el código de Visual Studio, intente cambiar su tema. Algunos temas no soportan el estilo itálico.

Answer 3

En primer lugar, sé que este hilo tiene más de un año, pero estaba buscando lo mismo sin cambiar el tema principal de Dark +, así que lo puse en la configuración.json de código vs, puede que no sea el más bonito pero funciona incluso en cualquier tema que elija que no tenga cursiva, y si desea eliminarlo, simplemente póngalo en comentarios. ¡He puesto el color en los comentarios si desea cambiarlo más adelante!

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

Espero que esto ayude a alguien, y perdón por publicar en una publicación obsoleta.

Answer 4

Tienes que especificar la fuente usando el nombre de archivo. Si tiene una fuente con letra cursiva, esto funcionará (lo intenté en Mac).

Por ejemplo:

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

Answer 5

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

También reinicie VSCode después de esto.