6

I love to keep things simple and minimal and that also applies to my code editor. There are some buttons in vscode i found annoying and i want to hide them. unfortunately i couldn't find the settings for these buttons.

enter image description here

Does anyone know how to hide these buttons?

Sahar
  • 89
  • 9
  • The top set of buttons are known as the `Layout` controls. There is a setting to disable them: `Workbench > Layout Control: Enabled` - uncheck it. – Mark Apr 11 '22 at 19:07
  • 1
    @Mark "workbench.layoutControl.enabled": false, Thanks for the tip! – Sahar Apr 11 '22 at 19:11
  • I had some success moving the second level icons [following this answer](https://stackoverflow.com/a/69788835/1134080), and it was perfect for me as I already had the Customize UI extension. There are also other answers that let you hide it completely, apply a hover effect, etc. – ADTC Aug 15 '22 at 08:23
  • It drives me absolutely insane that they made an editor made with web languages so hard to customise. – iono Nov 28 '22 at 16:39

3 Answers3

5

The top set of buttons are known as the Layout controls.

There is a setting to disable them: Workbench > Layout Control: Enabled - uncheck it.

For what they do, see https://stackoverflow.com/a/69329503/836330

I don't believe there is any way to remove the other buttons, especially the split and ... buttons. The > button may be added by an extension which may make its appearance optional though.

Mark
  • 143,421
  • 24
  • 428
  • 436
  • Yes you are right the ```>``` button is for code runner extension. ill just keep it. but the ```split``` and ```...``` are still there. im sure there us a way to hide them. – Sahar Apr 11 '22 at 19:21
2

Since VSCode 1.72 you can right-click an icon in the tab bar and choose to hide it from the context menu:

enter image description here

If you like the tab bar buttons in general and just dislike their position (because it makes editor tabs jump around), you can move them down to the breadcrumb bar, where they are smaller and do not take up that much space:

icons in 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.

carlfriedrich
  • 2,919
  • 1
  • 15
  • 29
1

You can actually hide the buttons by just right clicking on it and unchecked the checked ones in the box appearing. Again you can reset the setting likewise.

Priya Kumari
  • 43
  • 1
  • 4