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
First of all let’s compare the default VS Code UI against my minimal approach:
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
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.
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.
- Indenticator to highlight only the current indent depth
- Subtle Match Brackets to underline matching brackets (instead of a border)
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.
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.