Visual Studio Code (VS Code) provides various ways to split the editor window into multiple panes. This allows you to view and edit different parts of files side-by-side.
Table of Contents
Benefits of Splitting Editor Window
Here are some benefits of splitting the editor window in VS Code:
- Compare and edit two different parts of the same file side-by-side
- View two different files side-by-side
- Keep reference material visible while working on code
- View changes in real-time when working with others on the same files
Splitting the window helps improve productivity when working on long files or comparing code.
Ways to Split Editor Window
There are a few different ways to split the editor window in VS Code:
1. Keyboard Shortcut
Use the keyboard shortcut *Ctrl+* (Windows/Linux) or *Cmd+* (Mac) to split the active editor either horizontally or vertically.
If the editor is already split, using the shortcut will cycle through the split orientations – horizontal, vertical and no split.
2. Command Palette
Press Ctrl+Shift+P (Windows/Linux) or Cmd+Shift+P (Mac) to open the Command Palette.
Type “split” and choose “Split Editor” to split the active editor.
3. Context Menu
Right click on an editor tab and choose “Split Editor” from the context menu.
4. Drag and Drop Editor Tabs
You can drag and drop editor tabs to create new editor groups and split the window.
5. View Menu
From the View menu, choose “Split Editor” to split the active editor window.
Split Window Layouts
VS Code provides predefined layouts when working with split editors:
Horizontal Layout
Splits the editor horizontally with one pane above the other.
Vertical Layout
Splits the editor vertically with one pane to the left and other to the right.
Grid Layout
Creates a grid system with editors split horizontally and vertically.
You can cycle through the different layouts using the split editor shortcut *Ctrl+* after splitting the window.
The workbench.editor.splitInGroupLayout setting allows customizing the preferred split editor layout.
Adjust Splitter Position
You can adjust the position of the splitter to resize the split panes.
- To adjust horizontally split panes, hover over the vertical splitter bar and drag it up or down.
- For vertically split panes, hover over the horizontal splitter and drag left or right.
Additional Tips
- You can split an editor group multiple times to create a grid layout.
- Drag editor tabs between groups to rearrange layouts.
- Use Ctrl+1, Ctrl+2 etc to switch between editor groups.
- Close split panes with Ctrl+W when no longer needed.
Conclusion
Splitting the editor window is indispensable when working on complex files or comparing code in VS Code. Use the various options available to split editors horizontally or vertically. Adjust the split layouts and pane sizes for optimal viewing. The powerful split editor feature will boost your productivity when coding.
