Comment faire pour que Visual Studio Code affiche les polices italiques dans le code formaté ?

Question

Comment configurer VS Code pour qu'il prenne en charge les styles italiques, comme dans cette image ?

Mes paramètres actuels :

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

Answer 1

La réponse directe à cette question est ( à partir de cette page github ) :

Ajoutez ceci à settings.json ( ctrl + , ou 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": ""
      }
    }
  ]
}

Vous pouvez également fournir d'autres mots-clés dans scope bien sûr. Vérifiez La documentation de VS Code et le mots-clés du champ d'application .

Explication :

Lorsque vous définissez une police pour VS Code (par exemple Operator Mono pour l'OP), tout est rendu dans cette police. Pour obtenir l'aspect de l'image de l'OP, vous devez appliquer un style de police différent (italique/gras) à certains éléments. De même, si votre police a un style d'italique sensiblement différent (par exemple, Operator Mono a des ligatures cursives), vous obtiendrez un aspect similaire à l'image de l'OP.

---

Autres considérations

Pour que votre italiques pour être différent de votre texte normal, vous devez utiliser une police dont les italiques ont un aspect différent. Une telle police est OperatorMono (payant), ou FiraCodeiScript (gratuit), ou FiraFlott (gratuit). Je préfère personnellement FiraCodeiScript.

Pour que les caractères italiques soient liés (sans espace entre eux), comme pour l'écriture cursive, vous devez activer les ligatures de police :

Pour faire ce qui précède, assurez-vous que votre settings.json contient les éléments suivants :

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

Le reste des polices n'est pas nécessaire, mais il s'agit de polices de secours au cas où il vous manquerait la première. Les polices avec des espaces dans leurs noms, ont généralement besoin de guillemets simples. ' . De plus, vous devrez peut-être redémarrer VS Code.

Answer 2

Tout d'abord, je sais que ce fil de discussion a plus d'un an, mais je cherchais la même chose sans changer le thème principal Dark+, donc j'ai mis ceci dans le settings.json de vs code, ce n'est peut-être pas le plus joli mais ça fonctionne même sur n'importe quel thème que vous choisissez qui n'a pas d'italique, et si vous voulez l'enlever il suffit de le mettre dans les commentaires, j'ai mis la couleur dans les commentaires si vous voulez la changer plus tard !

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

J'espère que cela vous aidera, et je m'excuse encore une fois d'avoir posté sur un article périmé.

Answer 3

Vous devez spécifier la police en utilisant le nom du fichier. Si vous avez une police avec une face italique, alors cela fonctionnera (j'ai essayé sur Mac).

Par exemple :

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

Answer 4

Le code suivant est correct

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

Vous devez avoir installé Operator Mono sur votre ordinateur pour que cela fonctionne. Vous pouvez le télécharger ici : https://www.typography.com/fonts/operator/styles/ Le prix actuel au moment de la rédaction de ce document est de 599,00 $ pour une machine.

Si les polices sont installées et que vous avez redémarré Visual Studio Code, essayez de modifier votre thème. Certains thèmes ne prennent pas en charge le style italique.

Answer 5

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

Redémarrez également VSCode après cela.