Minimal VScode UI!
Tags: vscode, minimal, ui, productivity
Published: 2023-02-12 09:59:40

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1r0d543hpuettih1q97p.png)

To This!

![After](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3v9vcp59lgw3bhz56xfs.png)


## TL;DR
Take a look at my `settings.json` file on [dotfiles repo](https://github.com/andrew-george/dotfiles)

...

## 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](https://marketplace.visualstudio.com/items?itemName=andrewberty.noir-theme-bundle) -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](https://github.com/kidp2h/MonoLisaFont)

Now our workspace looks like this

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d2ylv47biaut53smtnur.png)



...
## 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+\\)**
```json
  "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)**
```json
  "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`
```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
```json
  "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*
```json
  "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
```json
  "breadcrumbs.enabled": false
```


Look at that, Much cleaner huh!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eze6vtw6qp3cebbbwftn.png)


...
### Now let's get a bit picky
...
## Explorer

To remove indentation guide,
```json
  "workbench.tree.renderIndentGuides": "none"
```

To hide open editors panel,
```json
  "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,
```json
  "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,
```json
  "editor.bracketPairColorization.enabled": false
```

I will also turn off brackets guides
```json
  "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
```json
  "editor.guides.indentation": false
```
...
### Smooth Cursors
They simply feel nicer and less robotic
```json
  "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,
```json
  "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)

```json
  "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

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v15yxicbrgb3abd7dzmb.png)


VScode Custom title bar looks way nicer, but let's clean it up a bit
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/92w7kuqbu9c51gw8cyci.png)

...
### Menu toolbar
You can hide it totally, but I prefer to set it to toggle so I can quickly access it through **Alt** key
```json
  "window.menuBarVisibility": "toggle",
```
...
### Layout Controls

You can set its type to 'menu' to convert it to small three dots menu
```json
  "workbench.layoutControl.type": "menu"
```

I will totally hide it,
```json
  "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,
```json
  "window.title": " "
```

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5kej6sbrqdlhy2by9czf.png)


...
## 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](https://marketplace.visualstudio.com/items?itemName=be5invis.vscode-custom-css)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mg3d9oc9m57br5jg1jl7.png)



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

2. Add to `settings.json`:

```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 **URL**s. 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`

3. Go to specified path and make a new `custom.css` file and add these lines
```css
.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*

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

7. Voila!

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo9xmjli55rb4e0bo271.png)



> *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](https://marketplace.visualstudio.com/items?itemName=hoovercj.vscode-settings-cycler)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j0ask3yje7mf4r3jalx9.png)



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
```json
"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)**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/j3zotowst9hy2amrf096.png)



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