How to Split a Single Tab Horizontally in VS Code

If you have ever tried to view two different parts of the same file at the same time, you know how useful splitting an editor tab can be. However, VS Code's default behavior is to split editors vertically (side-by-side). If you want to split a single tab horizontally (top and bottom), it can be surprisingly tricky to find the right setting or shortcut.

In this guide, we will cover the quickest ways to split a single tab horizontally in VS Code, whether you prefer using your mouse, keyboard shortcuts, or the command palette.

Method 1: The "Alt" or "Option" Click (Fastest Mouse Method)

The absolute quickest way to split your current tab horizontally without digging into settings is using a simple modifier key:

  • Look at the top-right corner of your editor tab bar. You will see the Split Editor icon (it looks like a small split window).
  • Hold down the Alt key (Windows/Linux) or Option key (macOS).
  • Notice that the icon rotates! Click the icon while holding the key down.

This will instantly split your current tab horizontally, giving you a top and bottom view of the same file.

Method 2: Use the Command Palette

If you prefer using the Command Palette, VS Code has a dedicated command for this exact action:

  1. Open the Command Palette using Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (macOS).
  2. Type Split Editor Down.
  3. Select View: Split Editor Down from the list and press Enter.

This will duplicate your active tab into a new horizontal group directly below the current one.

Method 3: Keyboard Shortcuts

By default, VS Code uses the following keyboard shortcut combination to split an editor orthogonally (which defaults to horizontal if your current layout is vertical):

Windows/Linux: Ctrl+K followed by Ctrl+\

macOS: Cmd+K followed by Cmd+\

Customizing the Shortcut

If you want a single, dedicated shortcut to split down, you can bind it yourself:

  1. Open Keyboard Shortcuts (Ctrl+K Ctrl+S or Cmd+K Cmd+S).
  2. Search for workbench.action.splitEditorDown (labeled as "View: Split Editor Down").
  3. Double-click it and assign your preferred key combination (e.g., Ctrl+Alt+S).

Method 4: Splitting Within the Same Editor Group

If you want to split the editor inside the same tab group (so they don't create a completely new editor group column/row), you can use the "Split in Group" feature. To ensure this split is horizontal:

  1. Open your VS Code Settings (Ctrl+, or Cmd+,).
  2. Search for split in group layout.
  3. Find the setting Workbench > Editor: Split In Group Layout.
  4. Change this setting to horizontal (this configures the split panes to stack vertically, divided by a horizontal line).
  5. Now, trigger the command View: Split Editor in Group (or use the shortcut Ctrl+K Ctrl+Shift+\).

Understanding VS Code's Layout Terminology

A common point of confusion is how VS Code defines "Horizontal" vs "Vertical":

  • Vertical Split: The dividing line is vertical. This results in editors placed side-by-side (left and right).
  • Horizontal Split: The dividing line is horizontal. This results in editors placed top-and-bottom.

If your settings seem inverted, double-check that you aren't confusing the split axis with the editor placement!