VSCode: Is there a way to hide top action menu bar?

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:

1. Install the Customize UI extension.
2. Open your user settings JSON: cmd + shift + P / ctrl + shift + P
3. 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.