How to get Visual Studio code to display italic fonts in formatted code?

Question

How do I configure VS Code to support italic styles, as in this figure?

My current settings:

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

Answer 1

Direct answer to this question ( from this github page ):

Add this to settings.json ( ctrl + , or 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": "" } } ] } 

You can also provide other keywords in scope course. Check the VS Code documentation and area keywords .

Explanation:

When you define a font for VS code (e.g. Operator Mono for OP), everything is displayed in that font. In order to improve the appearance of the OP image, you need to apply a different font style (italic / bold) to certain elements. In addition, if your font has a significantly different italic style (for example, Operator Mono has italic ligatures), you will get a look similar to the OP image.

---

Other considerations

To make italics look different than regular text, you must use a font whose italics look different. Such a font is OperatorMono (paid), FiraCodeiScript (free) or FiraFlott (free). I personally prefer FiraCodeiScript.

To associate italic characters (without spaces between them), as when writing italics, you must enable font ligatures:

To do this, make sure your settings.json file has the following:

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

Other fonts are not needed, but they are backup fonts in case you missed the first one. Fonts with spaces in names usually need single quotes. ' Alternatively, you may need to restart VS Code.

Answer 2

First of all, I know that this topic is older than a year, but I searched for the same thing without changing the main Dark + theme, so I put them in settings.json from the vs code, it may not be the cutest, but it works even on any topic of your choice that does not have italics, and if you want to delete it, just put it in the comment, I put the color in the comment if you want to change it later!

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

Hope this helps anyone, and sorry again for posting to outdated mail.

Answer 3

You must specify the font using the file name. If you have a font with italics, then this will work (I tried this on a Mac).

For example:

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

Answer 4

Following code is ok

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

To work on your computer, Mono Monator must be installed. It can be downloaded here: https://www.typography.com/fonts/operator/styles/ The current price at the time of writing of this book is $ 599.00 per machine.

If you installed the fonts and restarted Visual Studio Code, try changing the theme. Some themes do not support italic style.

Answer 5

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

Also restart VSCode after that.

Answer 6

You can customize VS Code using this theme.