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

Marcio Barrios
May 14, 2018 · 3 min read

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

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.

Themes

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

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

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade