Into the Blue Hour
a vyonizr's blog

My VS Code Visual Setup

Bracket Pair Colorizer

Photo by Debby Hudson on Unsplash

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

Bracket Pair Colorizer

Bracket Pair Colorizer (source: Visual Studio Marketplace)

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

indent-rainbow

indent-rainbow (source: Visual Studio Marketplace)

indent-rainbow gives the indentation four different colors on each step, depends on your tab size. Install here.

Indented Block Highlighting

Indented Block Highlighting demo (source: Visual Studio Marketplace)

I use this as a support for bracket colorizer. It highlights the area where the cursor is. Install here.

Trailing Spaces

Trailing Spaces

Trailing Spaces (source: Visual Studio Marketplace)

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)

United Ubuntu

United Ubuntu Theme

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:

  1. I set Render Whitespace to boundary to show faded dots representing whitespace
  2. I set Tab Size to 2. The default value 4 consumes too much width and not suitable for vertically-split editors.
  3. 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.

Monaco Font

Specimen of the typeface Monaco (source: Wikipedia)

  1. 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)