How to Split Screen in Visual Studio Code

Boost your productivity in Visual Studio Code by learning how to view multiple files side-by-side. This guide provides a quick and clear walkthrough of the various methods to split your editor screen—including keyboard shortcuts, mouse actions, and menu commands—allowing you to compare code and multitask efficiently.

Method 1: Use Keyboard Shortcuts (Fastest)

The quickest way to split your editor is by using a keyboard shortcut while focused on the file you want to split.

This command instantly duplicates your current active file into a new editor group to the right.

Method 2: Click the Split Editor Button

Visual Studio Code features a dedicated UI button for splitting the screen.

  1. Look at the top-right corner of your open editor window (above the code, near the tab bar).
  2. Click the Split Editor Right icon, which looks like a small page split down the middle.
  3. Your editor will split horizontally, opening the current file in a new pane.

Method 3: Drag and Drop Tabs

You can manually position your files exactly where you want them using your mouse.

  1. Click and hold the tab of the file you want to move.
  2. Drag the tab toward any margin of the editor window (left, right, top, or bottom).
  3. Wait for the blue highlight overlay to appear, indicating where the file will land.
  4. Release the mouse button to drop the file into the new split pane.

Method 4: Use the Command Palette

If you prefer using the Command Palette, you can access all split-screen layout options from there.

  1. Open the Command Palette by pressing Ctrl + Shift + P (Windows/Linux) or Cmd + Shift + P (macOS).
  2. Type Split Editor into the search bar.
  3. Select View: Split Editor (or choose directional options like View: Split Editor Orthogonal to split vertically or horizontally).

How to Change the Split Layout Direction

By default, VS Code splits screens vertically (side-by-side). If you prefer a horizontal layout (top-to-bottom), you can toggle the orientation: