How to split an editor in VS Code/NotePad++/Vim

A paned window, the so-called "pane", helps read and write source code. It can show source codes written in different files together. It can also save us from switching tabs and finding file names in tabs. And then panes enable us to read and write source codes side by side.

But in many code editors, a single pane is the default layout of an editor. And it is not easy to know how to split an editor or add a new pane. Some editors have keyboard shortcuts for splitting an editor. Others have only menus. Let's look at how to split an editor.

Visual Studio Code | Ctrl + \

Editor Layout menu of Visual Studio Code

There are three ways to split an editor in Visual Studio Code. Menu, keyboard shortcuts, and command palette. When splitting an editor, a new pane shows the same file as the original.

  • "View" - "Editor Layout" - "Split Right"

Keyboard shortcuts

  • Split an editor to the right: Ctrl + \
  • Split an editor to the bottom: Ctrl + K, Ctrl + \

Command palette

  • (After Shift + Ctrl + p), input "split" or "columns" and then select "View: Split Editor" or "View: Split Editor Up"

Visual Studio Code can also add a new blank pane by choosing "Two Columns" or "Three Rows" in the menu.

Notepad++ | "Move to Other View" menu

Move to Other View menu of Notepad++

Notepad++ can split an editor by the right-click menu. In Notepad++, "View" means a pane.

  • Right-click - "Move Document" - "Move to Other View" or "Clone to Other View"

If we want to split a single pane, we choose "Clone to Other View".

Vim | Ctrl + w, v

Keyboard shortcuts of Vim

Vim can split an editor using keyboard shortcuts or commands.

Keyboard shortcuts

  • Split an editor vertically: Ctrl + w, v
  • Split an editor horizontally: Ctrl + w, s
  • Close a current pane: Ctrl + w, c or Ctrl + w, q

Commands

  • Split an editor vertically: :split or :sp
  • Split an editor horizontally: :vsplit or :vs
  • Close a current pane: :close or :clo

Vim can also add a new blank pane by the commands :new or :vnew.

Read it easy | Click a button

New Pane button of Read it easy

Read it easy can add a new blank pane by just clicking a button. We don't often finish reading source code with a file. If we need to read codes back and forth between several files, panes are helpful because they can show all the source codes we need on the screen.

Three panes layout of Read it easy

Panes save us from memorizing the source codes we've read because they are always visible on the screen. This is another helpful function of panes. They mitigate the suffering when we read many lines of source code.