The Command Palette and Custom Themes - Visual Studio Code for Vue.js Developers

In this lesson, we dive into the all important topic of color themes in Visual Studio code. Kidding aside, you do spend a lot of time looking at the editor so it’s worth taking the time making it look both visual pleasing and optimized for good eye health.

Links

How to Install JetBrains Mono Font in Visual Studio Code
VS Code Docs: Customizing a Color Theme
JetBrains Mono Font

Keyboard Shortcuts

Open Command Palette
- Cmd+Shift+P (Mac)
- Ctr+Shift+P (Windows)
Open Extension Panel - ⌘+⇧+X
- Cmd+Shift+X (Mac)
- Ctr+Shift+X (Windows)

Note

Right before recording these first 3 lessons, I updated VS Code to version 1.67 which includes Bracket Pair Colorization by default. I knew something didn't look right with the Material Theme Darker High Contrast and it was those bright yellow curly braces and parentheses. It took me a couple days of thinking that I was going crazy before I realized what happened.

You can turn bracket pair colorization off with this setting:

"editor.bracketPairColorization.enabled": false