How to change your VS Code appearance
Tags: vscode, productivity
Published: 2020-12-30 19:51:13

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](https://github.com/microsoft/cascadia-code) from Microsoft right now. 

Other similar fonts are: [Victor Mono](https://rubjo.github.io/victor-mono/) or [Fira Code](https://github.com/tonsky/FiraCode)

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
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xq2rbgf9cehzcomqgd7z.png)

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](https://statescu.net)*