How to Split the VS Code Editor to View Two Files Side by Side

Writing code often means looking at two things at once: the function you are editing and the file that calls it, your code and its test, or the old version next to the new one. Flipping back and forth between tabs wastes time and breaks your train of thought. VS Code’s split editor solves this by showing two (or more) files side by side in the same window, and it takes about two seconds to set up.

This guide covers every way to split the editor, how to split in the direction you prefer, how to move and resize editors, and the small settings that make split view genuinely comfortable.

Quick Answer

To split the VS Code editor, open a file and press Ctrl+\ (or Cmd+\ on macOS), or drag the file’s tab to the right edge of the editor area, or right-click the tab and choose Split Right or Split Down. The same file opens beside itself, and you can then open a different file in the new pane. Each pane scrolls independently, so you can compare or edit two files at the same time.

Method 1: The Keyboard Shortcut

The fastest route is the built-in shortcut:

1. Click into the file you are working on.
2. Press Ctrl+\ on Windows or Linux, or Cmd+\ on macOS.
3. A second editor group appears on the right showing the same file.
4. Open another file from the Explorer, Quick Open (Ctrl+P) or the tab bar, and it appears in the active pane.

Seeing the same file twice is more useful than it sounds: you can read the top of a long file in one pane while editing the bottom in the other, and changes appear in both instantly because it is one document, not a copy.

Method 2: Drag a Tab to Split

If you prefer the mouse, drag any open tab towards the right side of the editor area. A shaded preview shows where the new pane will appear; drop the tab and it splits. Dragging to the bottom edge splits downward instead, stacking the editors. This is also how you move a file between existing panes: drag its tab onto the pane you want it in. On wide monitors, this drag-and-drop approach is often the most natural way to arrange three files across the screen.

Method 3: Right-Click and Menu Options

Right-clicking a tab reveals Split Right and Split Down commands directly. There is also a small split icon at the top-right of the editor toolbar, next to the file name, which splits with one click. If you want a file to always open beside the current one, hold Alt while clicking it in the Explorer, or select it and press Ctrl+Enter in Quick Open; both open the file in a new group to the side without disturbing your current layout.

Choosing Between Split Right and Split Down

Side-by-side columns suit wide screens and comparing code, since lines are short and two columns fit comfortably. Splitting down, with one editor above the other, suits laptops and very long lines, such as minified data or wide tables. You can change the default direction for the split shortcut in settings with workbench.editor.openSideBySideDirection, and the VS Code editor basics documentation explains editor groups and layout options in full. A practical trick: split right for code-versus-code, split down when one pane holds a terminal-like output or a Markdown preview.

Working Comfortably in Split View

• Jump between panes with Ctrl+PageDown style shortcuts or simply click; the active pane has the brighter tab.
• Resize panes by dragging the divider between them.
• Compare two files properly by selecting both in the Explorer, right-clicking, and choosing Compare Selected, which opens a true diff view. That is the same idea as reviewing changes before a commit, which our walkthrough of using git diff to see exactly what changed before committing covers from the terminal side.
• Split a Markdown file and open the preview in the second pane to watch the rendered result as you type.
• Close a pane by closing all its files, or press Ctrl+W repeatedly; the layout collapses automatically.

Layouts Beyond Two Columns

VS Code supports several editor groups at once, and the View > Editor Layout menu offers presets such as two columns, three columns and a grid. On an ultrawide monitor, three columns (code, tests, documentation) is a genuinely productive setup. You can also move an editor group into a floating window in recent versions, which helps when a second physical monitor is available.

Common Mistakes to Avoid

• Thinking the split created a copy. Both panes show the same file; editing one edits the other because there is only one document.
• Losing track of the active pane. New files open in whichever pane is active, so click the pane you want before opening a file.
• Splitting on a small screen with a large font. If two columns feel cramped, split down instead, or reduce the editor font size slightly.
• Forgetting preview tabs. Single-clicking a file opens it as a temporary preview tab that gets replaced by the next click. Double-click to pin it before arranging a layout.

Your Layout Survives Restarts, and How to Reset It

VS Code remembers your editor layout when you close the program, so a carefully arranged split view is still there when you return the next day. That is convenient, but it also means a messy arrangement can follow you around. If the layout ever feels tangled, use View > Editor Layout > Single to collapse everything back to one group, then rebuild your splits deliberately. You can also close an entire editor group at once from its tab bar rather than closing files one by one.

It is worth knowing that editor groups behave like small independent worlds: each has its own active file, its own back-and-forward navigation history, and its own place for newly opened files. Clicking a group before opening a file is the habit that keeps split view predictable instead of surprising.

A final habit worth building is to give each pane a job before you start: reference on the left, editing on the right, for example. Deciding the roles in advance stops the slow drift into five half-used panes that helps no one, and makes the layout a deliberate tool rather than an accident.

Conclusion

Splitting the editor is one of those tiny VS Code skills that pays off every single day. Learn the Ctrl+\ shortcut, drag tabs when your hand is already on the mouse, and pick right or down splits based on your screen. Whether you are comparing files, keeping tests beside code, or reading the top of a file while editing the bottom, side-by-side editors keep everything in view and your thoughts in order.

Frequently Asked Questions

What is the shortcut to split the editor in VS Code?

Press Ctrl+\ on Windows or Linux, or Cmd+\ on macOS. The current file opens in a new editor group beside itself, and you can then open a different file in either pane.

How do I split the editor vertically instead of horizontally?

Right-click the file’s tab and choose Split Down, or drag the tab to the bottom edge of the editor area. You can also change the default split direction in settings if you prefer stacked editors most of the time.

Can I view the same file in both panes?

Yes, and it is very handy for long files. Both panes show the same document and scroll independently, so you can read one section while editing another, with changes appearing in both at once.

How do I compare two different files side by side?

Either split the editor and open one file in each pane, or select both files in the Explorer, right-click, and choose Compare Selected for a line-by-line diff view that highlights every difference.

How do I go back to a single editor?

Close the files in one pane and it disappears, or drag all tabs into one group. The View > Editor Layout menu also has a single-column option that resets the layout in one click.