How to Split Editors and Manage Tabs in VS Code

VS Code lets you see multiple files at once by splitting the editor into separate panes, called editor groups. You can arrange them side by side, stacked vertically, or in a grid. Each group has its own set of tabs.

Splitting the editor

Open a file, then split the editor to see another file next to it.

Now you have two files visible at once. Edit either one independently.

There are several other ways to split the editor:

• Alt+Click a file in the Explorer to open it in a new group to the side
• Press Ctrl+Enter on a file in Quick Open to open it to the side
• Select the Split Editor button in the upper right corner of the editor toolbar
• Drag and drop a file to any edge of the editor area. A shaded area shows where the new group will appear
• Right-click a file in the Explorer and choose Open to the Side

Editor groups

Each split pane is an editor group. Each group contains its own set of open tabs. You can have as many groups as you want, arranged vertically, horizontally, or both.

By default, new editor groups open to the right of the active one. To change this, set workbench.editor.openSideBySideDirection to down to open new groups below instead.

Switching between groups:

• Ctrl+1, Ctrl+2, Ctrl+3 on Windows/Linux (Cmd+1, Cmd+2, Cmd+3 on macOS) -- jump to a specific group
• Ctrl+Alt+Left / Right on Windows/Linux (Cmd+Option+Left / Right on macOS) -- move through groups sequentially

Resizing groups -- drag the border between groups.

Closing groups -- close the last tab in a group to close the group, or use Ctrl+K W on Windows/Linux (Cmd+K W on macOS) to close all editors in the active group.

Grid layout

You are not limited to a single row of side-by-side groups. Use View > Editor Layout to choose from preset grid arrangements: two columns, two rows, a 2x2 grid, and more.

To split vertically instead of horizontally, hold Alt while clicking the Split Editor button. This toggles the split orientation.

Drag and drop tabs to rearrange groups. Drag a tab from one group to another to move it. Drag a tab to an edge of the editor area to create a new group there.

Tabs

Each open file appears as a tab at the top of its editor group. Tabs show the file name and an icon for the file type. A dot on the tab means the file has unsaved changes.

Reordering tabs -- drag and drop any tab to a new position.

Closing tabs -- press Ctrl+W on Windows/Linux (Cmd+W on macOS) to close the active tab. Middle-click a tab to close it. Right-click a tab for more options: Close Others, Close to the Right, Close All, Close Saved.

Pinning tabs -- right-click a tab and select Pin. A pinned tab stays visible on the left side of the tab bar and cannot be closed with Close All. Use this for files you always want open, like a README or a configuration file.

Wrapped tabs -- enable workbench.editor.wrapTabs to let tabs wrap into multiple rows when there are too many to fit in one row.

Custom tab labels -- when you have multiple files with the same name open, use workbench.editor.customLabels.enabled and workbench.editor.customLabels.patterns to differentiate tabs. For example, show orders/index instead of just index.html for a file at src/orders/index.html.

Preview mode

When you single-click a file in the Explorer, it opens in preview mode. The tab title appears in italics. The file reuses an existing preview tab instead of creating a new one.

Preview mode is useful for browsing files quickly. You can click through several files without accumulating tabs. When you find the right file, double-click it or start editing to keep it open permanently.

To disable preview mode, set workbench.editor.enablePreview to false. To disable it only for Quick Open, set workbench.editor.enablePreviewFromQuickOpen to false.

Floating windows

Drag a tab out of the VS Code window to open it in its own floating window. This is useful on multi-monitor setups: keep your main editor on one screen and reference files on another.

Right-click a tab and choose Move into New Window or Copy into New Window. The floating window behaves like a normal editor window with its own tabs and layout.

To keep a floating window always on top, select the pin icon in its title bar.

Working without tabs

If you prefer to work without tabs, set workbench.editor.showTabs to single or none. With tabs disabled, the Open Editors section in the Explorer becomes your primary way to see and switch between open files.

Next steps

Now that you can arrange your editor, learn how to navigate code with breadcrumbs, Outline, and Sticky Scroll. To find any file instantly from the keyboard, use Quick Open.