There are three setting changes to make in order to enable cursive font and font ligatures in VSCode
editor.fontLigatures
to true
All of these changes can be done in the settings panel, which can be accessed by CMD + ,
(macOS) or CTRL + ,
(Windows).
For the first part, we'll be editing editor.tokenColorCustomizations
. This is a config where
we can specify how to apply certain styles to specific bits of code. This is how it looks in settings.json
with no styles applied:
"editor.tokenColorCustomizations": { "textMateRules": [ { "scope": [], "settings": { "fontStyle": "italic" } } ] }
The scope
field is what we'll be editing to specify what pieces of code should have the italic
fontStyle applied.
If you want to know what scope a piece of code falls under you can pull up the command pallete (cmd + shift + p
or ctrl + shift + p
)
and look for Developer: Inspect Editor Tokens and Scopes
.
This is what my current configuration looks like:
"editor.tokenColorCustomizations": { "textMateRules": [ { "scope": [ "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" } } ] }
The second part is a bit simpler, lets look for editor.fontLigatures
in settings and set it to true.
This enables ligatures, which can combine two or more characters into one.
As for the final part, we need to install a font which has cursive italics and ligatures. My personal choice
is Fira Code iScript
. This font can be downloaded and installed on your system from here.
After installing the font on your system, change the editor.fontFamily
setting to 'Fira Code iScript', Consolas, 'Courier New', monospace
.
You should now have cursive and ligatures enabled! Finished product: