The VS Code Interface & Layout

VS Code's window is divided into five regions:

• Activity Bar — the narrow icon strip on the far left; switches between Explorer, Search, Source Control, Run & Debug, and Extensions.
• Side Bar — contextual panel that changes based on the active Activity Bar icon.
• Editor Groups — the central coding area; supports tabs, split views, and diff editors.
• Panel — the bottom strip; shows the Terminal, Output, Problems and Debug Console.
• Status Bar — the coloured strip at the very bottom with language mode, Git branch, errors/warnings and more.

Each icon in the Activity Bar opens a dedicated view in the Side Bar:

• 📁 Explorer — file tree, open editors, outline and timeline
• 🔍 Search — workspace-wide find & replace
• 🔀 Source Control — Git staging, diffs and commit
• ▶ Run & Debug — launch configurations and call stack
• 🧩 Extensions — marketplace browser
• ✦ Copilot Chat — AI sidebar (when Copilot is active)

You can open multiple editor groups side-by-side or stacked. Right-click a tab to Split Right, or use Ctrl+\. Drag tabs between groups freely. Use Ctrl+1 / Ctrl+2 to jump between groups.

Ctrl+\          Split editor right
Ctrl+K Ctrl+\   Split editor down
Ctrl+1 / 2 / 3  Focus editor group 1 / 2 / 3

The Minimap on the right side of the editor is a zoomed-out view of your file — click to jump instantly. Breadcrumbs above the editor show your file path and symbol location. The Outline view (Explorer panel) lists all symbols in the current file.

Nearly everything is movable. Drag the Activity Bar to the right, move the Panel to the side, or toggle any section via View › Appearance. Save your preferred layout with View › Appearance › Save Workspace Layout.