Having my editor looks the way I want really helps my mood when I code.
You can do some things to customize your VS Code editor too.
🖥 Theme
Right now, I use the "Tokyo Night" theme for VS Code. I really like the colors and the fact that is not hurting my eyes with those nasty, bright colors.
To change the theme go to Settings > Workbench > Appearance > Color Theme.
✏️ Fonts
For the font, I use Cascadia Code from Microsoft right now.
Other similar fonts are: Victor Mono or Fira Code
I went with Cascadia Code because I think is the most readable; but in the end, it's a matter of opinion.
After you download and install the font on your computer, you can go to Settings > Text Editor > Font and put "cascadia code" in the Font Family input.
Font Ligatures
What I like about Cascadia Code font is that it supports font ligatures. This means that it replaces certain character combinations like === or <= or => with some icons and that makes the code look even better.
I also use some token color customizations that I'll show below 👇
That's how my VS Code looks right now
Here it is my full VS Code font configuration
"editor.fontFamily": "'cascadia code'", "editor.fontLigatures": true, "editor.fontWeight": 400, "editor.fontSize": 12, "editor.lineHeight": 23, "editor.tokenColorCustomizations": { "textMateRules": [ { "scope": "emphasis", "settings": { "fontStyle": "italic" } }, { "scope": "strong", "settings": { "fontStyle": "bold" } }, { "scope": "entity.other.attribute-name", "settings": { "fontStyle": "italic" } }, { "scope": "markup.underline", "settings": { "fontStyle": "underline" } }, { "scope": "markup.bold", "settings": { "fontStyle": "bold" } }, { "scope": "markup.heading", "settings": { "fontStyle": "bold" } }, { "scope": "markup.italic", "settings": { "fontStyle": "italic" } }, { "name": "String interpolation", "scope": [ "punctuation.definition.template-expression.begin", "punctuation.definition.template-expression.end", "punctuation.section.embedded" ], "settings": { "fontStyle": "italic" } }, { "name": "this.self", "scope": "variable.language", "settings": { "fontStyle": "italic", "foreground": "#ff5874" } }, { "name": "@Decorator", "scope": ["meta.decorator punctuation.decorator"], "settings": { "fontStyle": "italic" } }, { "scope": ["punctuation.definition.comment", "comment"], "settings": { // "foreground": "#ff5874", "fontStyle": "italic" } }, { "scope": [ //following will be in italic =FlottFlott "entity.name.type.class", //class names "keyword", //import, export, return… "constant", //String, Number, Boolean…, this, super "storage.modifier", //static keyword "storage.type", "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": "" } } ] } Let me know in the comments what VS Code Theme and Font are you using 👇
If you want to reach me, check out my website
Top comments (0)