VSCode: Is there a way to hide top action menu bar? - visual-studio-code

Question

In VSCode, is there a way to hide the top action menu bar that appears in the tabs row? I rarely use it and I find that it crowds the already limited space available to browse through open tabs. Moreover, its presentation is also inconsistent, especially when split panes are activated.
I'm not sure if I am referring to this VSCode functionality properly, so here's a screenshot demonstrating what I'm talking about (file names had to be blurred out due to NDA reasons):
Thank you.

Answer 1

Update 2022-09-28
An issue to address this feature has been completed and it will arrive with the next release. It is already available on the Insiders version.
This closed issue references another feature request different from the original one referenced on this answer.
Context
It is called editor actions and, within the standard/native VSCode settings, you cannot hide it.
A setting to hide this annoying bar is an open issue at VScode's GitHub since March 2018.
Fixes
Removing the whole bar
I feel your pain. This worked for me:
Install the Customize UI extension.
Open your user settings JSON:
cmd + shift + P / ctrl + shift + P
Add this setting:
"customizeUI.stylesheet": {
".editor-actions": "display: none !important;",
},
It is gone!
Removing specific icons, by position
The foremost left icon is the number 1.
Example in plain CSS:
.menu-item-action-item-icon-1,
.menu-item-action-item-icon-3 {
display: none !important;
}
Example using Customize UI extension:
"customizeUI.stylesheet": {
".menu-item-action-item-icon-1": "display: none !important;",
".menu-item-action-item-icon-3": "display: none !important;",
},
Removing just Gitlens icons
Gitlens icons can be hidden within Gitlens' settings:
"gitlens.menus": {
"editorGroup": {
"blame": false,
"compare": false
},
},

Answer 2

I came up with a slightly different approach: instead of hiding the buttons, move them down one level to the breadcrumb bar:
This is done using the Customize UI extension with the following configuration:
"customizeUI.stylesheet": {
".tabs-and-actions-container": {
"background-color": "inherit",
},
".tabs-and-actions-container .editor-actions": {
"position": "absolute",
"top": "100%",
"right": "0px",
"height": "22px !important",
"z-index": "1",
"background-color": "inherit",
},
".tabs-and-actions-container .editor-actions .action-item": {
"margin-right": "3px !important",
},
".tabs-and-actions-container .editor-actions .action-item a": {
"font-size": "13px",
},
".tabs-and-actions-container .editor-actions .action-item .codicon": {
"width": "13px",
"height": "13px",
},
".tabs-and-actions-container .tab:last-child": {
"margin-right": "0 !important",
},
".title.tabs.show-file-icons": {
"overflow": "unset !important",
},
}
This solution is theme-independent, so it should work for all colour combinations. The background color for the buttons is always the same as the background color of the tab bar. If you use only one static theme, you could hard-code the background-color for the .tabs-and-actions-container .editor-actions selector to the exact color of the breadcrumb bar for a more seamless design. However, this does not work when switching themes.
The only drawback to this solution is that the buttons overflow the rightmost breadcrumb information, but I'm fine with that. At least the tab bar does not resize anymore, while I still have those buttons.

Answer 3

Hi there 👋🏼 I removed the GitLens plugin and it disappeared

Answer 4

For anyone using Customize UI and not getting the icons to disappear after targeting ".editor-actions", I was able to get the action icons to disappear by selecting ".monaco-toolbar":
"customizeUI.stylesheet": {
".monaco-toolbar": "display: none !important"
}