VSCode hide top-right icons

Question

I\'m a big fan of VScode\'s minimalist approach, but one thing is bugging me. I would like to hide editor-tab icons.

The icons are from extensions: gi

Answer 1

Gitlens icons can be disabled within the extension settings:

https://github.com/eamodio/vscode-gitlens/issues/669#issuecomment-540975432

Answer 2

Building on @teraoka's answer, you might like to keep a script to do this since the setting will revert each time VSCode updates itself

Using a Git-bash / cygwin:

#!/bin/bash

cd /c/Users/noel/appdata/local/Programs/Microsoft\ VS\ Code/resources/app/out/vs/workbench/
cp workbench.desktop.main.css workbench.desktop.main.css.`date +%Y%m%d%H%M`
echo ".editor-actions { display: none }" >> workbench.desktop.main.css

Answer 3

I faced the same problem and Alex's answer helped me a lot (showing the icons on hover only).

But I still had an issue, especially when coding in a small window:

Let's say I want to open the file "styles.css" using the tabs bar:

As soon as my mouse enters the tabs zone, the menu shows up (because of the hover trick) and I can't click my tab because it's below the icons:

So I came up with this idea:

Showing the icons bar below the tabs (not over the tabs) when hovering

Here is the result:

Here is how I did it:

.tabs-and-actions-container .editor-actions {
    display: none !important;
    position: absolute;
    top: 35px;
    right: 0;
    z-index: 1;
    background-color: #2D2D2D;
}
.tabs-and-actions-container:hover .editor-actions {
    display: flex !important;
}
.title.tabs.show-file-icons {
    overflow: unset !important;
}

Answer 4

Here is a better extension for this. Customize UI

Answer 5

Extension Custom CSS and JS Loader

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

Optionally, show them on hover:

.tabs-and-actions-container:hover .editor-actions {
    display: flex !important;
}

Answer 6

Without extensions

1. Open default css file that vs-code reads to render its window

cd /usr/share/code/resources/app/out/vs/workbench
sudo vim workbench.desktop.main.css # or whatever editors but vs-code

2. Add this line at the end and save it

.editor-actions { display: none }

To identify class names of elements,

just press ctrl + shift p and type toggel developer tools