How to hide the VS Code bar with file name, breadcrumbs, and action buttons?

Question

I'd like to hide the toolbar visible in the screenshot:

I can hide the menu bar by going into full-screen mode, but I haven't been able to get rid of the bar with the file name, run button, split, etc.

Is that possible?

I tried to look in settings but all you can do apparently is disable the various icons (like the breadcrumbs) and what I'd like is for the bar to disappear completely so that I see more of the code.

Vaccinate

that will give you 1 line of code extra, a huge win, if you set the font size a point smaller you have the same result, then your next question would be that you can't see the editor menu and you cant close tabs – Faubert

Please clarify your specific problem or provide additional details to highlight exactly what you need. As it's currently written, it's hard to tell exactly what you're asking. – Oller

Well, I'd still like that extra line of code. – Vaccinate

You can turn on Zen Mode using View: Toggle Zen Mode in the command palette. Does this work for you? – Beelzebub

Answer 1

VS Code 1.84 answer

It's coming. You can thank Benjamin Simmonds for their Pull Request, Allow to hide editor title section entirely (tabs, breadcrumbs) (#33607) #195222, which got merged and is scheduled for the October 2023 release. It changes the workbench.editor.showTabs setting from a boolean to an enum, which you can set to "none", which purportedly causes tabs and breadcrumbs to both be hidden. Setting it to "single" will cause only the breadcrumbs to be shown.

If you can't wait, then the new feature is available in the latest VS Code Insiders.

For Zen Mode, use the zenMode.showTabs setting.

Pre-VS-Code-1.84 answer

This feature doesn't exist at the time of this writing. You can get part of what you're looking for with the following settings in a settings.json file:

"workbench.editor.showTabs": false,
"breadcrumbs.enabled": false,

The full feature is covered by this feature-request issue ticket: Allow to hide editor title section entirely (tabs, breadcrumbs) #33607. Give it a thumbs up to show support for it, subscribe to it to get notified about discussion and updates. Please avoid making noisy comments like "+1" / "bump".

In that issue ticket, people suggest other workarounds such as:

• Using extensions to customize the CSS of the VS Code installation (see also this)
• Manually deleting the DOM elements using devtools every time

For Zen Mode, use the zenMode.hideTabs setting.

Vaclava

Answer 2

Go to File > Preferences > Settings > in the search box type Breadcrumbs > untick Breadcrumbs: Enabled

Squalor

The breadcrumbs are already disabled. All that achieves is to hide the path visible on the toolbar but does not hide the toolbar itself. – Vaccinate

i dont think you can hide the group editor itself – Squalor