VSCode is the world’s most popular IDE, but the settings that VSCode comes with can feel too overwhelming and extra for most programming purposes.
To solve this problem, I created my own minimal VSCode setup, free from clutter and distractions to help increase productivity and ease eyestrain during long coding sessions.
In this tutorial, I’ll show you all the settings and changes you can make in order to do the same. I’ll show you how you can turn your VSCode from this ugly mess,
To this!
Let’s begin!
The Settings.JSON File
First up, start by opening up our settings.json file, which is the file that VSCode uses to store all of our settings. We’re going to be working in this file instead of the Settings UI because we can simply copy and paste our desired settings into this file.
Press Control + Shift + P to open up the command palette, and type in “Settings”. From the dropdown menu, select “Preferences: Open Settings (JSON)”.
Most the settings that I’ll introduce in this tutorial are pretty self explanatory, but I’ve attached a few comments to the more obscure ones explaining what they do.
If you don’t like any particular change that I’ve introduced, feel free to change it back! Remember: everyone is different, and your VSCode should be tailored to you!
Decluttering the Layout
First, let’s clearing up VSCode’s messy and cluttered layout. Apply the following settings by copying them and pasting them into the JSON file.
You may be wondering why I’ve decided to move the sidebar and explorer from the left to the right. Two reasons:
- When the sidebar is on the left, every time we open our sidebar, it will shift our editor and our code over to the right, which is annoying and tiresome on our eyes.
- Second, by moving our sidebar to the right, we’re distributing all the text and color throughout our screen and making everything even more clean and even, decluttering our layout even further.
Again, if you don’t like this change, feel free to change it back! I personally prefer it like this.
Simplifying our Editor
We’ve cleaned up our layout, and now let’s focus on our editor.
Apply this next set of settings, designed specifically to remove unnecessary elements of our editor and yield you the most amount of real estate for your code.
Nice! We’ve just increased all the space that our code can occupy by removing useless elements of our editor that nobody really uses. We’ve also added some padding to the top and bottom of our code, hidden flashy borders and scrollbars, and cleaned up our tabs bar too.
However, there’s still a lot of flashing, highlighting, and popups happening everywhere which causes unnecessary strain on our eyes and distract us from our code. To eliminate all these distractions, apply these next set of settings.
Other Layout and Editor Settings
Here are some other useful but optional settings that you may consider using for VSCode. I’ve attached comments explaining what each one does.
Oh, don’t forget that you can make other customizations to VSCode too, like installing custom themes and icon themes, and using your own monospace font for your editor.
I use the Gruvbox Material Theme, Material Icons, and Cartograph CF as my editor font.
Saving and Previewing Changes
Once you’ve applied all the settings that you wanted, make sure to save your settings.json file and restart VSCode. If everything was done correctly, your editor should now look something like this:
Doesn’t it look so much better?
Wait A Second… My Layout Still Doesn’t Look Like Yours!
Yup! That’s right.
VSCode has tons of customizations, but it still has its limits. The rest of the layout and UI changes here were made using an extension called Customize UI.
If you’re happy with the way everything looks right now, or if you would rather not install an extension, you can stop right now and move on.
However, if you want to clean up your UI even more, join me in part two of this tutorial where I show you how you can use the Customize UI extension to use inline title bars, custom UI fonts, custom font sizes and spacings in our Explorer, and more.
See you then!
