Allow to hide editor title section entirely (tabs, breadcrumbs)

[faustinoaq]

• VSCode Version: 1.15.0
• OS Version: Manjaro Linux x64 Gellivara

Steps to Reproduce:

1. Configure settings.json

{
  "workbench.editor.showTabs": false
}

2. Tabs are hidden but tabs section still fill the space.

Reproduces without extensions: Yes

Some captures:

1. Face to face with Vim

2. Proposed setting:

{
  "workbench.editor.showTabs": "none | one | all"
}

With "workbench.editor.showTabs": "none" then

[fabiospampinato]

I think you might achieve what you want today via a third party extension and some custom CSS.

[faustinoaq]

This extension modifies some VS Code files so use it at your own risk.

Yes, Custom CSS and JS Loader is useful and risky.

[cpxPratik]

Also is there any way to shorten height of tabs (file's tab headings), ? Tabs are noticeably tall and waste screen space. I can't find issue related to it. Surely, someone must have notice it.

[fabiospampinato]

@faustinoaq there's actually barely any risk involved with it. In case anything breaks a simple re-installation of VSC would fix it.

@cpxPratik Unless they fix #459 the only option remains to use the extension.

[skyhirider]

Has this been added yet? The more space for actual text the better.

[TwatBurglar]

Has this been added yet? The more space for actual text the better.

[thany]

Second that.
The tabs are useless to me. They waste valuable screen real estate. The open files show in the side bar perfectly fine.

[charlesferreira]

Still waiting for this feature. I really love other editor's ability to go full screen and zero bars/tabs/menus distraction. I can achieve that in like Jetbrains' IDEs and it's totally awesome.

Please, guys. I'm loving VS Code, but the tab bar, beyond not being able to hide them, is too large!

[well1791]

👋 Hi everyone!

🤔 I have some (silly 😅) workaround if you just work with one project all day (and you don't want to bother yourself with Custom CSS and JS Loader plugin).

1. Toggle Developer Tools
2. Inspect the row
3. Delete the element 🤣

I haven't seen any errors yet 🤷‍♂️ but (as you have already guessed), it only works during your current session.

Anyway, I just hope the VS Code team still consider this feature-request 🙏

[DimitarNestorov]

@well1791 don't you have an empty space between your code and terminal? Like so:

Not really a workaround, you're not getting that screen real estate back

[well1791]

@DimitarNestorov good catch! 👏

Didn't noticed that! However, it doesn't bother me as I don't look at that part too often.

[fuzihaofzh]

You can use the plugin "Custom CSS & JS" and use the following code

.title.show-file-icons {
    display: none !important;
}

[thany]

That's not really a solution. The extension needs permission for VSCode to change itself, which is frankly terrifying. This needs a proper fix.

[therealpeterhua]

Agreed, huge waste of space right now. A related issue, and possible alternative solution: #42253

[therealpeterhua]

Agreed, huge waste of space right now. A related issue, and possible alternative solution: #42253

[therealpeterhua]

Agreed, huge waste of space right now. A related issue, and possible alternative solution: #42253

[therealpeterhua]

Agreed, huge waste of space right now. A related issue, and possible alternative solution: #42253

[isti115]

Has anyone figured out how to actually make that space usable after hiding the tab div?
I couldn't make it fill the extra height using just CSS, so I guess that something is calculated in JS that would need to be changed as well.

[isti115]

Wow, I've become so desperate over the last few days that I finally managed to write a script that pushes the window off the top of the screen, thus hiding the (to me useless) title bar and tab bar!
All the other elements (Activity Bar, Status Bar and maybe minimap, but I like to keep that one around sometimes) can be hidden in VSCode, so I guess that this is solved for me as long as the window is at the top of the screen. :)

For reference here is the AutoHotKey code that worked for me, but you could call the DLL from any of your favorite languages.

SetTitleMatchMode, 2
WinTitle := "Visual Studio Code"

; --- WinMove version

; WinMove, %WinTitle%, , 0, -64, 1280, 1504

; -- DLL version

WinGet, id, , %WinTitle%
Result := DllCall("SetWindowPos", "uint", id, "uint", HWND_TOP, "Int", 0, "Int", -64, "Int", 1280, "Int", 1504, "UInt", 0x400)

ps.: The 0x400 corresponds to the SWP_NOSENDCHANGING flag that prevents the window from realizing that it has been resized and jumping back on screen.

[OceanBelongsToMe]

pleaseeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee

[OceanBelongsToMe]

@tejasvi can you tell me your solution？

[Aqa-Ib]

At least let the user hide it on Zen Mode.
Thanks

[laralove143]

better solution, have a pixel number setting for tab size instead of just normal/large.. this way we can just put 0 to disable it, this is how other sizes are handled anyway like the scrollbar, anything limiting this?

[SichangHe]

Working workaround (hack)

I just spent a few hours and final have a working configuration using Custom CSS and JS Loader.
Disclaimer: this configuration is licensed under an MIT license (don't blame me if you get hacked! 😄)

I'll paste it here as well:

/* # Hide tab bar and float utility buttons to the right. */
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.title.tabs.show-file-icons {
    float: right;
    z-index: 1;
}

#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.title.tabs.show-file-icons>div.tabs-and-actions-container>div.monaco-scrollable-element>div.tabs-container {
    display: none;
}

/* ## Force the editor area to use full height. */
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container,
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div,
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard>div.monaco-scrollable-element.editor-scrollable.vs,
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard>div.monaco-scrollable-element.editor-scrollable.vs>div.lines-content.monaco-editor-background>div.view-lines.monaco-mouse-cursor-text {
    height: 100% !important;
}

#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard {
    height: 100% !important;
    position: absolute;
}


/* # Show the bottom bar even if it is toggled off. */
body>div.file-icons-enabled.reduce-motion.monaco-workbench.chromium.nosidebar.nopanel.noauxiliarybar.maximized.vs.nostatusbar>div.monaco-grid-view>div>div>div.monaco-scrollable-element>div.split-view-container>div:nth-child(4),
body>div.file-icons-enabled.reduce-motion.monaco-workbench.chromium.nopanel.noauxiliarybar.nostatusbar.maximized.vs>div.monaco-grid-view>div>div>div.monaco-scrollable-element>div.split-view-container>div:nth-child(4) {
    bottom: 0px;
    height: unset !important;
    top: unset !important;
    display: unset;
}

#workbench\.parts\.statusbar {
    height: unset !important;
}

/* ## Show the horizontal scrollbar */
#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard>div.monaco-scrollable-element.editor-scrollable.vs>div.visible.scrollbar.horizontal,
body>div.file-icons-enabled.reduce-motion.monaco-workbench.chromium.nopanel.noauxiliarybar.maximized.vs.nostatusbar.nosidebar>div.monaco-grid-view>div>div>div.monaco-scrollable-element>div.split-view-container>div:nth-child(3)>div>div>div.monaco-scrollable-element>div.visible.scrollbar {
    bottom: 12px !important;
}

If it does not work for you, perhaps you need to delete some classes in the code above (maybe your vscode does not have those classes so the elements are not correctly selected).

• The tab bar is hidden
• The buttons on the right hand side floats (I find them useful)
  • To hide it completely, you want to set

#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.title.tabs.show-file-icons

to display: none; instead of float: right;

• You need to toggle the status bar off
  • But it still shows, because I hacked it to always show (I find it useful, plus that space should have been blank anyway)
  • By toggling the status bar off, vscode is tricked to render (potentially) one more line ("solving" the problem of not rendering enough lines and having a blank area at the bottom)
• The horizontal scroll bar is bumped up (it should have been blocked by the status bar), but only showing a little bit because I want it short. If you want it taller, set

#workbench\.parts\.editor>div.content>div.grid-view-container>div>div>div>div.monaco-scrollable-element>div.split-view-container>div>div>div.editor-container>div>div>div.overflow-guard>div.monaco-scrollable-element.editor-scrollable.vs>div.visible.scrollbar.horizontal,
body>div.file-icons-enabled.reduce-motion.monaco-workbench.chromium.nopanel.noauxiliarybar.maximized.vs.nostatusbar.nosidebar>div.monaco-grid-view>div>div>div.monaco-scrollable-element>div.split-view-container>div:nth-child(3)>div>div>div.monaco-scrollable-element>div.visible.scrollbar

to bottom: 20px !important; or something instead of bottom: 12px !important;

Hopefully, this is helpful! I got 2 more lines (had 34) in my vscode 🎉
Please give suggestions if improvements can be made. Please give proper credit if you share.

Steven Hé (Sīchàng)

[SichangHe]

Just realized that I did not support Zen mode, which many people want. Fixed it.

[kklot]

I just found out that I could live with zooming out the whole windows interface until the tab height/status bar height is what you wanted (~vim tab/status bar for me), at at the same time increase the editor and terminal font size.

Only drawback is font size of other stuffs would be too small to read (extension, outlines,...), but I rarely look at them anyway. But I'd be great if we increase the font size of UI as well - anyone know where to change the UI font size?

[starball5]

Related on Stack Overflow: How to hide the VS Code bar with file name, breadcrumbs, run java, split editor and more actions?

[a-constantin]

I decided to try out vscode again today, haven't used it since the PR that added this very basic feature was rejected for reasons I still don't understand four years ago, so I guess I'll try again in a few more years.

[maxpatiiuk]

Rather than simply hiding the title section, I decided to still make the title action buttons available just in case, but without preventing the editor from occupying the rest of the area:

CSS (for the Custom CSS and JS Loader extension) if you want to do similar:

.title.show-file-icons {
    position: absolute !important;
    top: 0;
    right: 0;
    z-index: 10;
    opacity: 0.5;
}

.title.show-file-icons:hover {
    opacity: 1;
}

.title.show-file-icons .label-container {
    display: none !important;
}

[vanyauhalin]

@benibenj, we're with you in our thoughts, do it. ❤️

[vanyauhalin]

@benibenj, we had no doubts, good job. ❤️

[benibenj]

Hiding the editor title is now available in our newest insider build. You can give our nightly preview releases a try from: https://code.visualstudio.com/insiders/

The workbench.editor.showTabs setting has been changed to support the following options: multiple, single, none

[kklot]

Perfect