Minimal VSCode Setup for Maximized Productivity (Part 2)

Background Photo by Mohammad Rahmani on Unsplash

Note: As of VSCode version 1.74, the CustomizeUI extension will not work anymore. If you still want to use the extension, you must remain on version 1.73.1 or earlier.

Welcome back to part two of my Minimal VSCode Setup series!

In this article, I’ll explain how we can use the Customize UI extension to modify and minimize more parts of our UI for an even more comfortable and relaxing coding experience.

If you haven’t read part one yet where I show you how you can clean up VSCode’s layout and editor using traditional settings, go ahead and read it now! Parts of this tutorial may not make sense and will feel incomplete if you’ve haven’t completed the steps in the previous tutorial.

Minimal VSCode Setup for Maximized Productivity (Part 1)

Installing Customize UI

Start by installing the Customize UI extension in VSCode. You can either navigate to this page and click install, or simply search up “Customize UI” in the VSCode extension panel.

After you finish installing it, you’ll be prompted to install Monkey Patch. Monkey Patch is an auxiliary extension that Customize UI relies on to inject custom JavaScript into VSCode.

Inline Title Bar (Mac Only)

One of Customize UI’s key features is support for a seamless, inline title bar. Enable this feature by using the following two settings:

"window.titleBarStyle": "native",
"customizeUI.titleBar": "inline",

As you can see, Customize UI has merged the window control buttons and the tabs bar to create an inline title bar which helped create more room for our editor and for our code.

If you’re using a synced instance of VSCode on another computer that’s running Windows or another operating system, you may notice that the window.titleBarStyle setting has disabled regular inline support for the title bar. To solve this issue, we’ll need to add the window.titleBarStyle setting to the list of ignored synced settings, as shown below:

"settingsSync.ignoredSettings": [
    "window.titleBarStyle",
    "customizeUI.titleBar",
],

Merging Our Sidebar and Explorer

Customize UI doesn’t stop there! We can also merge our sidebar with our side panel, effectively moving it out of our way by placing it below our file explorer. You’ll understand what I mean once you enable these two settings:

"customizeUI.activityBar": "bottom",
"customizeUI.statusBarPosition": "under-panel",

For the people who hate the look of the sidebar / activity bar but aren’t entirely comfortable with disabling it, we now have the best of both worlds! It’s out of the way while we code, but we can still access it by opening our explorer using shortcuts like Control Shift E.

Custom UI Fonts

If, like me, you dislike the fonts that VSCode ships with, you can now change it by using Customize UI! Simply enter in the desired font along with the following two settings.

"customizeUI.font.monospace": "Cartograph CF Light",
"customizeUI.font.regular": "Cartograph CF Light",

It’s not a terribly groundbreaking UI change, but hey, it does look a little cooler this way!

We can also specify custom font sizes for various UI elements using the customizeUI.fontSizeMap setting, as shown below:

"customizeUI.fontSizeMap": {
    "13px": "14px",
    "12px": "14px",
    "window-title": "12px",
    "tab-title": "12px",    // Editor tab titles
    "monospace": "10.5px",  // Monospace fonts in user interface
    "menu": "13px",         // Menu items (windows only)
}

I personally don’t use any of these font size customizations, but they’re definitely something you can use if you ever feel that certain UI fonts are too small or too big.

Custom List Heights

If, like me, you also dislike the way the files and folders in our explorer are clumped up and spaced, Customize UI has a fix for that too! Through the customizeUI.listRowHeight setting, we can directly control the list height of the files in our explorer and our source control.

"customizeUI.listRowHeight": 36,

With this change, our files and folders are no longer clumped up and are spaced out and padded comfortably. Definitely one of my favorite features of Customize UI!

Conclusion

And that marks the end of our tutorial! I hope that you guys learned about the different ways you can modify and customize your VSCode setup so that it could feel less cluttered and more minimal.

I know that once you experience for yourself all the benefits and productivity improvements that a minimal and distraction free setup can bring, you’ll never code the same way again. (Not to mention that our new setup looks super cool too!)

Thanks for reading, and till next time, bye! 👋