Reputation: 3337

How can I temporarily maximize an editor group in VS Code?

I like the split view mode in VS Code but one thing I can't figure out is how to maximize a split view temporarily.

I would like to be able to maximize a split window (as in on one of the windows of a split) for a moment and then restore the layout when I am done with it.

Upvotes: 50

Answers (7)

blented

Reputation: 2797

You can also bind workbench.action.toggleMaximizedPanel

which will maximize any pane. ctrl + shift + p > keyboard settings then paste the code to bind.

Upvotes: -1

True

Reputation: 447

'Command+K, Command+M': toggle maximize the tab group, works for splitted editor.

Related shortcuts for Mac:

'Command+B': toggle visiable side pannel
'Command+J': toggle visiable bottom pannel
'Command+K, z': toggle zen mode

But none of the three above changes the splitted editor view.

Upvotes: -1

Mark

Reputation: 180875

It looks like v1.84 (October 2023) will have a new command for toggling the maximization of the current editor group which appears to be exactly what you want:

workbench.action.toggleMaximizeEditorGroup

"View: Toggle Maximize Editor Group"

Bound by default to Ctrl+K Ctrl+M

See Commit: Add editor group maximize toggle action. Available in the Insiders Build now.

There is a new command View: Toggle Maximize Editor Group (kb(workbench.action.toggleMaximizeEditorGroup)) to maximize an editor group. This will hide all other groups and adds a button to the tab bar, allowing the user to restore the previous layout. When changing the setting workbench.editor.doubleClickTabToToggleEditorGroupSizes to maximize, users can double-click on an editor tab to maximize and unmaximize the editor group.

Also note that part of this v1.84 update is the REMOVAL of the older commands:

View: Maximize Editor Group
View: Unmaximize Editor Group

v1.38 has a new command:

workbench.action.toggleEditorWidths

which can be useful here. It is unbound to a keybinding by default.

Say you bind it like so:

{
    "key": "ctrl+alt+b",
    "command": "workbench.action.toggleEditorWidths"
}

Then use it once to maximize one of the splits - after that switching focus to either one will maximize that one easily. Basically, using the workbench.action.toggleEditorWidths command once will do the work of manually dragging the separator bar for you.

Before v1.38

From the July 2018 Release Notes: Automated maximize of minimized editors.

To get this to work you have to first manually minimize one of the splits (or editors in an editor group).

Drag the separator bar between the editors as far left (or right) as it will go.

Or use the command View: Maximize Editor Group.

Then clicking in or otherwise focussing (perhaps with workbench.action.focusLeftGroup or similar) the other split will maximize it.

Note: You can always maximize the active editor via View: Maximize Editor Group (workbench.action.minimizeOtherEditors) or reset all editor sizes via View: Reset Editor Group Sizes (workbench.action.evenEditorWidths).

Upvotes: 71

Nor.Z

Reputation: 1349

Or, Just double click at the file name in the split panel's _tab title bar_
(the one inside your split panel, not the top most one of your window).

For the ambiguity of maximization:
- this maximize-extends the split panel size,
- not maximize-fullscreen the panel.
If you want "fullscreen" (workaround) -- hide the SideBar
- by default hotkey ctrl+b & ctrl+alt+b
- or cmd View: Maximize Editor Group and Hide Side Bars workbench.action.maximizeEditor
- (just search for the cmd)
If you want "fullscreen" - zen mode
- ctrl+k z
- ref: Is it possible to make an editor split full-screen in VSCode?

_{^{In some peoples' cases, may not work. But in my case, worked before & works in Version: 1.83.1 OS: Windows 10 x64}}
For more info about new version 1.84: another answer post

Upvotes: 9

starball

Reputation: 50215

You can double click the tab title/handle of any editor in the editor group to toggle maximization of that editor group (note that if the editor is in preview mode, then double clicking it will first cause it to not be in preview mode (see also How can I prevent VS Code from replacing a newly opened, unmodified (preview) tab with a subsequently opened one?)).

According to this maintainer comment, since VS Code 1.84, you can also right click the tab title/handle of any editor in the editor group to toggle maximization of that editor group, and there will be a "Maximize Group" option.

In VS Code 1.84, the behaviour can be changed with the workbench.editor.doubleClickTabToToggleEditorGroupSizes setting. Quoting from the defaultSettings.json pseudo file:

// Controls how the editor group is resized when double clicking on a tab. This value is ignored when `workbench.editor.showTabs` is not set to `multiple`.
//  - maximize: All other editor groups are hidden and the current editor group is maximized to take up the entire editor area.
//  - expand: The editor group takes as much space as possible by making all other editor groups as small as possible.
//  - off: No editor group is resized when double clicking on a tab.
"workbench.editor.doubleClickTabToToggleEditorGroupSizes": "expand",

The same setting exists pre-VS Code 1.84 since version 1.80 (it was added in PR #185966), but is a boolean for enabling/disabling expansion and not full maximization, which wasn't added until VS Code 1.84:

// Controls whether to maximize/restore the editor group when double clicking on a tab. This value is ignored when `workbench.editor.showTabs` is disabled.
"workbench.editor.doubleClickTabToToggleEditorGroupSizes": true,

In VS Code 1.84, the commands View: Maximize Editor Group and View: Unmaximize Editor Group can be used in the command palette, and are both bound by default to the chord ctrl/cmd+k,ctrl/cmd+m (they use the maximizedEditorGroup when clause to be context-sensitive). Before VS Code 1.84, the maximization command would cause expansion and not full maximization.

There's also the View: Toggle Editor Group Sizes command, which toggles expansion (see the "expand" option of workbench.editor.doubleClickTabToToggleEditorGroupSizes instead of full maximization). It's not bound to a keyboard shortcut by default, but you can add a keybinding using its command ID, workbench.action.toggleEditorWidths.

There's also the View: Maximize Editor Group and Hide Side Bars command, which can be bound with workbench.action.maximizeEditor.

Note: you might also want to check out the Zen Mode feature. Also In VS Code, how can I toggle maximization of the current workbench part / editor group?.

Upvotes: 3