Vscode: 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
}

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

Reproduces without extensions: Yes

Some captures:

1. Face to face with Vim

1. 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 https://github.com/Microsoft/vscode/issues/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]

:wave: Hi everyone!

:thinking: I have some (silly :sweat_smile:) 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 :rofl:

I haven't seen any errors yet :man_shrugging: 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_ :pray:

[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! :clap:

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: https://github.com/Microsoft/vscode/issues/42253

[therealpeterhua]

Agreed, huge waste of space right now. A related issue, and possible alternative solution: https://github.com/Microsoft/vscode/issues/42253

[therealpeterhua]

Agreed, huge waste of space right now. A related issue, and possible alternative solution: https://github.com/Microsoft/vscode/issues/42253

[therealpeterhua]

Agreed, huge waste of space right now. A related issue, and possible alternative solution: https://github.com/Microsoft/vscode/issues/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.

[jinyaozhuzhu]

👋 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_ 🙏
are you doubi（逗比）？

[liquidvisual]

This seems like such a basic feature. Why has it not been implemented yet?

[EliasCK]

Would love this! And then possibly an option to only show tabs if multiple files are open?

If I could configure vscode, to always open files in a new window (no tabs), and then only add tabs if I drag in a file to an existing window or open a folder/project. That would be amazing.

[wangchou]

I tried Custom CSS and JS Loader extension with

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

(vscode version: 1.35.1)

Then, I found the tab bar is gone but the editor area size didn't change.
The editor area only moved up 35px... and generated new blank space at bottom.

Any other workaround?

[sepehrHosseini]

This os how I removed the blank space in the bottom of the screen:

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

 .editor-container,
 .editor-instance > div,
 .monaco-editor.mac,
 .overflow-guard,
 .editor-scrollable {
     height: 100% !important;
 }

[TamasBarta]

@sepehrHosseini I tried something similar, but that caused the last line to be visible, which disappears when the last pixel of it would be covered by the status bar. Does your solution solve this?

[wangchou]

@sepehrHosseini
I tried the css. On my mac (vscode 1.35.1), the empty space at bottom just didn't go away... 😢

I also found there is a pull request for hiding tabs. (https://github.com/microsoft/vscode/pull/70140)

Currently, I use smaller zoom level, bigger tree.indent and bigger font-size to make tabs smaller.

[sepehrHosseini]

@TamasBarta No actually, I have the same problem, but it's better than having a 30px useless tab bar 😊

@wangchou That's weird, I've selected every element to the editor itself, don't know why it's not working 🤔 , can you check it with _VSCode Developer tools_ (Option+CMD+I) to see that which element is causing this behavior?
Thanks for sharing the PR 👍

[wangchou]

@sepehrHosseini Sorry, I was wrong. It did increase editor area slightly. But the empty space is still there. Not sure which setting / extension causes this... It's too complex, so I'm trying live a peaceful life with tabs bar, now. 😿 Thanks~

with css off

with css on

[sepehrHosseini]

@wangchou Great 🎉
Yes, it appears that when you apply height: 100% on these elements the last line gets disappeared when it's near the bottom of the view.

[saivan]

I have to chime in here too and say please. The header area is distracting, and it doesn't really serve a huge purpose for me, I can always just bring back the tab bar if I need that information

[ghost]

Seems like an interesting idea, I'd definitely try this one out.

[stevenvachon]

Do it.

[toger5]

This would be really great to have!

[fr3fou]

any news regarding this? it's been 2 years

[mokhosh]

@sepehrHosseini this one breaks settings search bar, and removing it doesn't seem to have any negative effect:

.monaco-editor.mac

[roboslone]

Oh please, do it! Tab bar is even visible in Zen mode :(

[stevenvachon]

This is one of the few things keeping me from seriously contemplating a switch from Sublime Text 3. 🤷

[Tysiachnyi]

so what?

[ZayRTun]

any updates? I tried the css plugin to hide it but the plugin is not working in the latest vs code version. this feature would be really nice.