How to setup Side by Side Editing Layout in vs code

How to setup Side by side editing Layout in VS Code

.
You can open as many editors as you like side by side vertically and horizontally. If you already have one editor open, there are multiple ways of opening another editor to the side of the existing one:

Alt click on a file in the Explorer.
Ctrl+\ to split the active editor into two.
Open to the Side (Ctrl+Enter) from the Explorer context menu on a file.
Click the Split Editor button in the upper right of an editor.
Drag and drop a file to any side of the editor region.
Ctrl+Enter (macOS: Cmd+Enter) in the Quick Open (Ctrl+P) file list.

Whenever you open another file, the editor that is active will display the content of that file. So if you have two editors side by side and you want to open file 'foo.cs' into the right-hand editor, make sure that editor is active (by clicking inside it) before opening file 'foo.cs'.

By default editors will open to the right-hand side of the active one. You can change this behavior through the setting workbench.editor.openSideBySideDirection and configure to open new editors to the bottom of the active one instead.

When you have more than one editor open you can switch between them quickly by holding the Ctrl (macOS: Cmd) key and pressing 1, 2, or 3.

Tip: You can resize editors and reorder them. Drag and drop the editor title area to reposition or resize the editor.

VS Code Basic Layout Inception

.
VS Code comes with a simple and intuitive layout that maximizes the space provided for the editor while leaving ample room to browse and access the full context of your folder or project. The UI is divided into five areas:

Editor - The main area to edit your files. You can open as many editors as you like side by side vertically and horizontally.
Side Bar - Contains different views like the Explorer to assist you while working on your project.
Status Bar - Information about the opened project and the files you edit.
Activity Bar - Located on the far left-hand side, this lets you switch between views and gives you additional context-specific indicators, like the number of outgoing changes when Git is enabled.
Panels - You can display different panels below the editor region for output or debug information, errors and warnings, or an integrated terminal. Panel can also be moved to the right for more vertical space.
Each time you start VS Code, it opens up in the same state it was in when you last closed it. The folder, layout, and opened files are preserved.

Open files in each editor are displayed with tabbed headers (Tabs) at the top of the editor region. To learn more about tabbed headers, see the Tabs section below.

Tip: You can move the Side Bar to the right hand side (View > Move Side Bar Right) or toggle its visibility (Ctrl+B).

.
Happy Coding.
osman forhad
Full-Stack Developer💻 (Mobile App & Web App)
developer.osmanforhad@gmail.com