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.
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.
I feel your pain. This worked for me:
cmd + shift + P / ctrl + shift + P
"customizeUI.stylesheet": {
".editor-actions": "display: none !important;",
},
It is gone!
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;",
},
Gitlens icons can be hidden within Gitlens' settings:
"gitlens.menus": {
"editorGroup": {
"blame": false,
"compare": false
},
},
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.
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"
}