Minimal VScode UI!

Andrew Berty — Sun, 12 Feb 2023 09:59:40 +0000

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!

To This!

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

...

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

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"

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

...

Minimap

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

  "editor.minimap.enabled": false

...

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,

...

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

Look at that, Much cleaner huh!

...

Now let's get a bit picky

...

Explorer

To remove indentation guide,

  "workbench.tree.renderIndentGuides": "none"

To hide open editors panel,

  "explorer.openEditors.visible": 0

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

...

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

I will also turn off brackets guides

  "editor.guides.highlightActiveBracketPair": false,
  "editor.guides.bracketPairsHorizontal": false,

...

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

...

Smooth Cursors

They simply feel nicer and less robotic

  "editor.cursorBlinking": "phase",
  "editor.cursorSmoothCaretAnimation": "on",

...

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"

...

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"

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

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

...

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",

...

Layout Controls

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

  "workbench.layoutControl.type": "menu"

I will totally hide it,

  "workbench.layoutControl.enabled": false

...

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": " "

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

...

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

We will install an extension called Custom CSS and Js Loader

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

Add to settings.json:

  // enter a url for your custom css file following notes below
  "vscode_custom_css.imports": ["{URL}"]

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

Go to specified path and make a new custom.css file and add these lines

.tabs-and-actions-container {  
    display: none !important;  
}

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

Restart VScode with Administrator permissions
From command palette (ctrl+shift+p) enable custom CSS and JS
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”.
Voila!

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

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"}
      ]
    }
  ],

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)

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

DEV Community: Andrew Berty