At the beginning of my coding journey, I was watching a video by Wes Boss and fell in love with the Operator Mono font. I loved it so much but couldn't justify $200 on it at the time.
This year, I finally splurged on it since I stare at my code editor every single day. I had done this set up once and got it working but recently forgot how I did it. So here's a recap now that I've got it working again.
You need to purchase the Operator Mono font.
I used this gist for getting italics to show as cursive. There are so many different customizations for what you want this to look like so if you're not digging this particular one, definitely do some research.
I really love ligatures, they make my brain happy. To get ligatures working with Operator Mono, I used operator-mono-lig. They have instructions for how to get this to work for Windows, Mac and Linux so hopefully your bases would be covered.
Both times I've done this I've gone and updated my VS Code settings before remember install the font, so don't be like me and remember to grab those from the build folder first.
One thing I found that differs from the operator-mono-lig documentation is that I needed to add my font as Operator Mono Lig.
My settings.json:
{
"workbench.colorTheme": "In Bed by 7pm",
"workbench.sideBar.location": "right",
"security.workspace.trust.untrustedFiles": "open",
"editor.fontFamily": "Operator Mono Lig, Menlo, Monaco, 'Courier New', monospace",
"editor.tabSize": 2,
"files.autoSave": "afterDelay",
"editor.minimap.enabled": false,
"editor.fontLigatures": true,
"editor.tokenColorCustomizations": {
"textMateRules": [
{
"scope": [
//following will be in italic
"comment",
"entity.name.type.class", //class names
"constant", //String, Number, Boolean…, this, super
"storage.modifier", //static keyword
"storage.type.class.js", //class keyword
"keyword", //import, export, return…
],
"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": ""
}
}
]
},
"editor.fontSize": 14
}
Which gives me this:
Top comments (0)