Have you seen this below style in VSCode before?
It might be called as Cursive fonts, Stylistic italic, ...
I decided to write this article after figure out how it can work, and it was not really have an existing article yet.
It works if following these general parts:
- A font supports ligatures and its configuration
- VSCode text mate rules configuration
Font ligatures is a great feature in VSCode, it has convinced me to switch from Sublime Text to VSCode in the past.
The good fonts support font ligatures and free are Fira Code, Cascadia Code. The current one I'm using is Cascadia Code because it's nice, and it gets updates frequently along with Windows Terminal — a new powerful terminal app on Windows.
- Fira Code: https://github.com/tonsky/FiraCode
- Cascadia Code: https://github.com/microsoft/cascadia-code
- Windows Terminal: https://github.com/Microsoft/Terminal
Cascadia Code
We can get the installation via so many ways: brew, scoop, choco, download directly from release page on its GitHub page.
After get installed in your OS system, add this configuration to your VSCode
{
// first item for Windows, next item for macOS
// because I use sync settings for multiple OS
"editor.fontFamily": "'Cascadia Code PL', 'CascadiaCodePL', Consolas",
// setting font ligatures as https://github.com/microsoft/cascadia-code#font-features
"editor.fontLigatures": "'ss01', 'ss02', 'ss03', 'ss04', 'ss05', 'ss06', 'zero', 'onum'",
// this is optional, it makes the weight of default font become lighter.
// Otherwise if we set font to 'Cascadia Code PL SemiLight' as it would be the same but it could'nt work with font ligatures.
// "editor.fontWeight": "350"
}
Text mate rules
Text mate rules configuration is textMateRules — a child of editor.tokenColorCustomizations in VSCode settings, it helps to set colors and styles using textmate theming rules (as VSCode explained)
We have to add this below configuration into settings to make some specific parts in code file get formatted by Stylistic/Cursive fonts, as Cascadia Code, it should be done with italic style as well.
{
"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": ""
}
}
]
}
}
Then it should be done, the result will be shown if you open a .go file, like the cover of this article.
If you like the theme, it's here: https://marketplace.visualstudio.com/items?itemName=GitHub.github-vscode-theme
GLHF!
Top comments (0)