Comment puis-je obtenir du code Visual Studio pour afficher les polices en italique dans du code formaté?
Comment configurer VS Code pour prendre en charge les styles italiques, comme dans cette image?
Mes paramètres actuels:
{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}
La réponse directe à cette question est ( depuis 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 documentation de VS Code et les mots-clés de la portée .
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'apparence de l'image du PO, vous devez appliquer un style de police différent (italique/gras) à certains éléments. De plus, si votre police a un style italique sensiblement différent (par exemple, Operator Mono a des ligatures cursives), vous obtiendrez un aspect similaire à l'image du PO.
Autres considérations
Pour que votre italique soit différent de votre texte normal, vous devez utiliser une police dont l'italique est différent. Une telle police est OperatorMono (payant), ou FiraCodeiScript (gratuit), ou FiraFlott (gratuit). Personnellement, je préfère FiraCodeiScript.
Pour que les caractères italiques soient liés (sans espacement), comme pour l'écriture cursive, vous devez activer les ligatures de police:
Pour ce faire, assurez-vous que votre fichier settings.json présente les caractéristiques suivantes:
{
"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 manque la première. Les polices avec des espaces dans leurs noms nécessitent généralement des guillemets simples'. En outre, vous devrez peut-être redémarrer VS Code.
Tout d'abord, je sais que ce fil a plus d'un an, mais je cherchais la même chose sans changer le thème principal de Dark +. Je les ai donc mis dans le fichier settings.json de vs code, ce n'est peut-être pas le plus joli. mais cela fonctionne même sur n'importe quel thème que vous choisissez et qui n'a pas d'italique, et si vous voulez le supprimer, mettez-le simplement dans les commentaires, j'ai la couleur dans les commentaires si vous voulez le 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 va aider tout le monde et je suis de nouveau désolé d'avoir posté sur un article obsolète.
Vous devez spécifier la police en utilisant le nom de fichier. Si vous avez une police en italique, cela fonctionnera (j’ai essayé sur Mac).
Par exemple:
"editor.fontFamily": "'OperatorMono-LightItalic'",
Le code suivant est correct
{
"editor.fontLigatures": true,
"editor.fontFamily": "Operator Mono"
}
Pour que cela fonctionne, Operator Mono doit être installé sur votre ordinateur. Il peut être téléchargé ici: https://www.typography.com/fonts/operator/styles/ Prix actuel au moment de la rédaction: 599,00 $ US pour une machine.
Si les polices sont installées et que vous avez redémarré Visual Studio Code, essayez de changer de thème. Certains thèmes ne supportent pas le style italique.
"editor.fontFamily": "Operator Mono Medium",
"editor.fontLigatures": true,
"editor.fontSize": 14,
Redémarrez également VSCode après cela.