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)