My VS Code Visual Setup
Vanilla VS Code is dull. I looked for extensions to personalize the appearance and found some to be helpful. I curated them for you to try.
Bracket Pair Colorizer
Turn your plain brackets to be more readable! This extension makes them colored and shows a thin line of their scope. It also tells you when you have an unpaired bracket. Version 2 is now available but I stick with the older one because I don’t have any issue up until now. Install here.
indent-rainbow gives the indentation four different colors on each step, depends on your tab size. Install here.
Indented Block Highlighting
I use this as a support for bracket colorizer. It highlights the area where the cursor is. Install here.
Seeing whitespace left disregarded sometimes itches me. This extension highlights and removes it with a shortcut which results in cleaner code. Install here.
United Ubuntu Theme (from Linux Themes for VS Code)
I’ve used this theme since the early days of using VS Code and haven’t switched to anything else since. It is vibrant and contrastive.
There are also some additionals I’d like to suggest on VS Code preferences settings:
- I set
boundaryto show faded dots representing whitespace
- I set
2. The default value
4consumes too much width and not suitable for vertically-split editors.
- I use Monaco typeface. Originally from macOS, Monaco is not too thin and has simpler lowercase “a” and “g” derived from Chancery hand and Blackletter respectively1. We read code, not newspapers.
Quora, Why are there two ways to write the lower case letters ‘A’ and ’G’? [website], https://www.quora.com/Why-are-there-two-ways-to-write-the-lower-case-letters-A-and-G, (accessed June 6 2020)↩