DEV Community

Andrew Berty
Andrew Berty

Posted on

Minimal VScode UI!

#vscode #minimal #ui #productivity

UIs can be really distracting or overwhelming for some of us. Personally I love minimal yet functional and accessible UIs.

I will take you in a quick tour with my VScode setup, specifically for the purpose of making it cleaner and functional.

...

You will witness it being taken from this!

Before

To This!

After

TL;DR

Take a look at my settings.json file on dotfiles repo

...

Now Let's get into details and get some stylistic opinions out of the way

...

Themes

I preferably use dark themes, I don't code much in sunlight or outdoors.

So, I've used many popular ones like Dracula, Night Owl, Tokyo Night and many others, I loved them all, but as you can expect -and probably as you already here- I like to customize everything to my liking, so I started tweaking some popular ones, just clean up or darken them a bit.

So, I gathered up a collection of popular ones and made them into one bundle called Noir and published it to marketplace which you can check here -for absolutely free-

I will use one of them which is Noir Owl

...

Fonts

I really love ligatures, It is a deal breaker for me. I just get confused with those unligaturized equality checks <=,>=,...

I never liked Fira Code actually which may sound strange as I just mentioned ligatures. I'm switching between Cascadia Code and JetBrains Mono all the time.

Lately, I found about Monolisa and I really loved it, tried the free tier version, It lacked ligatures. Then I found a patched version with some ligatures, although they are not the native ligatures, but it just gets the job done. You can get it from this repo

Now our workspace looks like this

Image description

...

Now, For the reason you're all here, let's de-clutter this UI!

So, we will start with the most basic ones and then move some extra steps after.

...

Activity Bar (ctrl+\) 

  "workbench.activityBar.visible": false
Enter fullscreen mode Exit fullscreen mode

you can always access activity bar menus through shortcuts like: Explorer (ctrl+shift+E), Source Control (ctrl+shift+G), Extensions (ctrl+shift+X), etc...

...

Sidebar (ctrl+B) 

  "workbench.sideBar.location": "right"
Enter fullscreen mode Exit fullscreen mode

I prefer to place it to the right so when I toggle it my code doesn't jump as much as if it were at its default left position

...

Status Bar

I don't find anything interesting in status bar anyway, so I just always keep it hidden and you can always toggle it from command palette: Toggle Status Bar Visibility or just add that line to your settings.json

  "workbench.statusBar.visible": false
Enter fullscreen mode Exit fullscreen mode

...

Minimap

I find it easier to zoom out or scroll with track pad so, I also keep minimap panel hidden

  "editor.minimap.enabled": false
Enter fullscreen mode Exit fullscreen mode

...

Scrollbars

For the same previous reason of track pad scrolling I also hide my vertical and horizontal scrollbars with all highlights it may show as being a Overview Ruler

Note: Feel free to keep whatever you find useful, I just like to hide them all

  "editor.hideCursorInOverviewRuler": true,
  "editor.overviewRulerBorder": false,
  "editor.scrollbar.horizontal": "hidden",
  "editor.scrollbar.vertical": "hidden",
  "color-highlight.markRuler": false,
Enter fullscreen mode Exit fullscreen mode

...

Breadcrumbs

When it comes to files navigation, I have two ways.
If I want to take a look of the whole tree structure and hierarchy of files and folders, I just toggle my sidebar on (ctrl+B).
If I know a certain file name I want to open I simply press (ctrl+P) which opens a quick input to search by file name

either ways, I don't need Breadcrumbs, So I always keep it hidden

  "breadcrumbs.enabled": false
Enter fullscreen mode Exit fullscreen mode

Look at that, Much cleaner huh!

Image description

...

Now let's get a bit picky

...

Explorer

To remove indentation guide,

  "workbench.tree.renderIndentGuides": "none"
Enter fullscreen mode Exit fullscreen mode

To hide open editors panel,

  "explorer.openEditors.visible": 0
Enter fullscreen mode Exit fullscreen mode

I like that source control changes files colors in explorer according to status of the repository, but files multiple colors drive me nuts. I like to check only for the icons ('M', 'A', rounded dot, etc...)

So, to disable the files colors but keep the small icons,

  "explorer.decorations.colors": false
Enter fullscreen mode Exit fullscreen mode

...

Editor

Brackets

I actually find colored bracket pairs feature quite useful. We won't disable it, but I just see that highlighting a faded border on my active bracket is more than enough for me to identify my scope so,

Turn off their coloring,

  "editor.bracketPairColorization.enabled": false
Enter fullscreen mode Exit fullscreen mode

I will also turn off brackets guides

  "editor.guides.highlightActiveBracketPair": false,
  "editor.guides.bracketPairsHorizontal": false,
Enter fullscreen mode Exit fullscreen mode

...

Indentation Guides

I'm just not a fan of those Indentation guides, VScode highlighting features actually help more and not as popping as those guides. You can keep them, but I always keep them off

  "editor.guides.indentation": false
Enter fullscreen mode Exit fullscreen mode

...

Smooth Cursors

They simply feel nicer and less robotic

  "editor.cursorBlinking": "phase",
  "editor.cursorSmoothCaretAnimation": "on",
Enter fullscreen mode Exit fullscreen mode

...

Active Line Highlights

They look nice and maybe useful for some people, if you want to turn it off, just add this,

  "editor.renderLineHighlight": "none"
Enter fullscreen mode Exit fullscreen mode

...

Left Side

I dont actually need any of the parts in the left side of the editor, (line number, fold caret, glyph margin)

  "editor.glyphMargin": false,
  "editor.lineNumbers": "off",
  "editor.showFoldingControls": "never"
Enter fullscreen mode Exit fullscreen mode

Note: I will show you how to toggle any of them in a moment

...

Window Title bar

I'm on windows, So native title bar in windows is pretty ugly

Image description

VScode Custom title bar looks way nicer, but let's clean it up a bit
Image description

...

Menu toolbar

You can hide it totally, but I prefer to set it to toggle so I can quickly access it through Alt key

  "window.menuBarVisibility": "toggle",
Enter fullscreen mode Exit fullscreen mode

...

Layout Controls

You can set its type to 'menu' to convert it to small three dots menu

  "workbench.layoutControl.type": "menu"
Enter fullscreen mode Exit fullscreen mode

I will totally hide it,

  "workbench.layoutControl.enabled": false
Enter fullscreen mode Exit fullscreen mode

...

Window Title

If you checked the settings for window title you will find that it is formed of bunch of variables which may look something like this ${dirty}${activeEditorShort}${separator}${rootName}${separator}${profileName}${separator}${appName}

If you tried to remove all of them in order to hide the window title, you still left with 'Visual Studio Code' title

So, a little hack is to set it to a single space so it would be invisible. or add this,

  "window.title": " "
Enter fullscreen mode Exit fullscreen mode

At the moment we are in a workspace that looks like this.

Image description

...

Tab bar

unfortunately, VScode has no native solution if you want to totally hide the tab bar. its only setting of toggling off show tabs also leaves you with a single tab of your active document name.

Now, We have to get a bit hacky

  1. We will install an extension called Custom CSS and Js Loader

Image description

which simply allows us to add our custom css to the VScode UI

  1. Add to settings.json: 
  // enter a url for your custom css file following notes below
  "vscode_custom_css.imports": ["{URL}"]
Enter fullscreen mode Exit fullscreen mode

VERY IMPORTANT: Items in vscode_custom_css.imports must be URLs. Plain file paths are NOT URLs.

  • Windows File URL Example: file:///C:/Users/MyUserName/Documents/custom.css
    • The C:/ part is REQUIRED.
  • MacOS and Linux File URL Example: file:///Users/MyUserName/Documents/custom.css
  1. Go to specified path and make a new custom.css file and add these lines 
.tabs-and-actions-container {  
    display: none !important;  
}
Enter fullscreen mode Exit fullscreen mode

Note: if you already typed a full url in json file, you can hold ctrl button and click on the url and VScode is smart enough to detect that there is no such file and will ask to create it for you and immediately opens it in your window

  1. Restart VScode with Administrator permissions
  2. From command palette (ctrl+shift+p) enable custom CSS and JS

  3. Click on the restart notification to restart VScode

    • SPECIAL NOTE: If Visual Studio Code complains about that it is corrupted, simply click “Don't show again”.

  4. Voila!

Image description

Note: You can always use ctrl+tab and ctrl+shift+tab to switch tabs and ctrl+W to close tab and many other shortcuts you can configure in keyboard shortcuts menu

Extension Commands

  • Enable Custom CSS and JS_: It enables custom CSS and JS URLs listed in “vscode_custom_css.imports”, an array containing URLs of your custom CSS and JS files, in your user settings.
  • Disable Custom CSS and JS_: It will disable custom CSS.
  • Reload Custom CSS and JS_: Disable and then re-enable it.

You can read all notes on the extension repo or marketplace page!

Note: Not the perfect solution, As it leaves an empty area at the bottom of the editor, but it get the job done

...

Almost Done,

...

Last extension we can use to customize some VScode commands that are not there natively. Like, what if I want to toggle that line number visibility with a keyboard shortcut, VScode does not have that.

We can use Settings Cycler

Image description

It simply allows your to create custom commands in settings.json file. So we can now implement our line numbers toggle example

In settings.json we can configure our extension with something like this

"settings.cycle": [
    {
      "id": "lineNumbers",
      "values": [
          { "editor.lineNumbers": "off" },
          {"editor.lineNumbers": "on"}
      ]
    }
  ],
Enter fullscreen mode Exit fullscreen mode

Now, we created a custom command named settings.cycle.lineNumbers which we can assign to a keyboard shortcut through keyboard shortcuts menu (ctrl+K ctrl+S)

Image description

Now, the shortcut (Alt+L) for example, is to toggle our custom command

For more info check the extension repo or marketplace page

...

AND, That was it.

let me know if you know any tips and tricks that can be useful, and till the next time

Top comments (3)

Collapse
 
eckelon profile image
JA Samitier •

this is great, thank you!

Collapse
 
andrewgeorge profile image
Andrew Berty •

Glad you liked it! 🙌

Collapse
 
modmars profile image
modMars •

Dotfiles repo is gone :/

Read next

samyc2002 profile image

Neovim for beginners

Samriddha Chattopadhyay -

madza profile image

12 Open Source Projects You Will Be Amazed to Discover 🔥🧑‍💻

Madza -

safdarali profile image

10 VS Code Extensions To Boost Your Productivity as a Web Developer

Safdar Ali -

fabina_sari_45567fe65dc6a profile image

Payments Recruiter Tips: Dos and Don’ts for Job Seekers

Fabina Sari -