Minimal User Interface for Visual Studio Code

VS Code is an excellent editor with tons of features, but because of that the UI feels cluttered

This post is about an opinionated list of settings, themes, fonts and extensions to achieve a cleaner look and feel. Have in mind that I use the editor mainly for Javascript and React, and I don’t use some cool features like git, debugger or terminal integrations. And I prefer to use the Command Palette (⇧⌘P) instead of having the options in the UI.

I am not the only one removing things from the UI, Dan Abramov created a minimalistic theme with some nice recommendations, in fact I took some settings from his Subliminal theme page.

First of all let’s compare the default VS Code UI against my minimal approach:

Default VS Code UI

Default VS Code UI (explorer opened)

Minimal VS Code UI

Minimal VS Code UI (explorer opened)

To achieve this “clean” User Interface I’m using the Operator Mono font, Material Theme Palenight High Contrast theme and some extensions and settings that I will cover below.

Before going into detail with the settings I want to mention some general features about my setup:

• I removed the Activity Bar (the first left column that let you switch between explorer, git, debugger and extensions)
• I removed extra information that was “fixed” in the UI (like Status Bar, Minimap or Opened Editor section)
• I wanted a UI to focus on the code and without distractions, with subtle colors for line numbers, current indentation depth and matching brackets
• I use Prettier so I don’t need any visual hint for whitespace characters or indentation guides
• I use a slightly bigger font, taking advantages of italics for reserved words or comments

Settings

I recommend you to have a look at the documentation to clarify some UI names that are not so obvious.

Every tweaked setting has a short explanation so it will be easier for you to just use the ones you are interested in.

Settings for a minimal VS Code UI

One last comment about the settings, you can customize your color theme with the workbench.colorCustomizations object, have a look at the Theme Color Reference to learn more about it.

Extensions

• Indenticator to highlight only the current indent depth
• Subtle Match Brackets to underline matching brackets (instead of a border)
• Prettier to format your Javascript / Typescript / CSS code

Fonts

Nowadays we have a good amount of excellent coding fonts to choose, I’ve been using Fira Code in the past, now I use Operator Mono.

• Operator Mono (nice italics)
• Fira Code (awesome ligatures)
• Source Code Pro
• IBM Plex
• Hack
• Dank Mono

Themes

I always use dark themes, I currently use Material Theme Palenight High Contrast but there are other great choices.

• Material Theme
• Night Owl
• Magoon
• Gloom
• Dracula
• Subliminal
• Nord
• Cobalt2
• Panda
• Plastic

Thanks for reading! I hope this was useful to tweak your VS Code UI.