How to change your VS Code appearance
Răzvan Stătescu
Posted on December 30, 2020
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
Posted on December 30, 2020
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.
Related
