VS Code Interface Explained: Activity Bar, Sidebars, Panel, and Status Bar

The Visual Studio Code window has six main areas. If you can name each one, you will find every tool, setting, and shortcut much faster.

Those six areas are the Editor, Primary Side Bar, Secondary Side Bar, Activity Bar, Status Bar, and Panel. Here is what each one does and where to find it.

The six areas at a glance

The editor takes up most of the window. Every other area can be toggled, resized, or moved.

Activity Bar

The Activity Bar is the narrow vertical strip on the far left. It contains five icons by default. Each opens a view in the Primary Side Bar.

• Explorer (Ctrl+Shift+E on Windows/Linux, Cmd+Shift+E on macOS) -- the file tree
• Search (Ctrl+Shift+F / Cmd+Shift+F) -- find and replace across files
• Source Control (Ctrl+Shift+G / Cmd+Shift+G) -- Git staging, commits, and branches
• Run and Debug (Ctrl+Shift+D / Cmd+Shift+D) -- launch configurations and breakpoints
• Extensions (Ctrl+Shift+X / Cmd+Shift+X) -- install and manage extensions

Click an icon to open that view. A small badge on the icon shows counts: uncommitted changes for Source Control, available extension updates for Extensions.

Right-click the Activity Bar to move the Primary Side Bar to the right, hide specific views, or hide the Activity Bar itself.

Primary Side Bar

The Primary Side Bar sits between the Activity Bar and the editor. It displays whichever view you selected in the Activity Bar.

The most important view here is the Explorer, which shows your project's file tree. At the bottom of the Explorer you will find collapsible sections for Outline (symbols in the current file) and Timeline (local file history and Git commits).

Toggle the Primary Side Bar with Ctrl+B on Windows and Linux, or Cmd+B on macOS.

Secondary Side Bar

The Secondary Side Bar sits on the right side of the editor, opposite the Primary Side Bar. By default it contains the Chat view for Copilot.

You can drag any view from the Primary Side Bar into the Secondary Side Bar. Right-click the Activity Bar and select Move Primary Side Bar Right to swap the two sidebars.

To open the Secondary Side Bar from the keyboard, use Ctrl+Alt+B on Windows and Linux, or Cmd+Option+B on macOS.

Status Bar

The Status Bar is the horizontal bar at the bottom of the window. From left to right it shows:

• Git branch -- click to switch branches
• Problems count -- click to open the Problems panel
• Language mode -- shows the language of the active file. Click to change it
• Line and column -- click to jump to a specific line (Ctrl+G opens the line dialog)
• Indentation -- spaces or tabs, and tab size. Click to change
• Encoding -- file encoding. Click to reopen with a different encoding
• End of line sequence -- LF or CRLF
• Notifications bell -- click to open the Notifications center

The Status Bar gives you at-a-glance context without opening a menu. Click any item for quick actions.

Panel

The Panel is below the editor region. It contains four views by default:

• Problems -- errors and warnings from linters, compilers, and language services
• Output -- logs from VS Code services and extensions
• Debug Console -- interactive console for evaluating expressions during debugging
• Terminal -- your system shell, integrated directly into the editor

Toggle the Panel with Ctrl+J on Windows and Linux, or Cmd+J on macOS. Drag the top edge of the Panel to resize it, or right-click the Panel title area to move it to the left or right side of the window.

How the areas work together

Open a file. The editor shows the code. The Explorer in the Primary Side Bar shows where the file lives.

The Status Bar tells you the language, line, and Git branch. The Panel below holds the terminal where you run your project.

When you need AI help, the Secondary Side Bar has Chat ready. When you need to commit, the Source Control view is one Activity Bar click away.

Every area serves one purpose. You can hide any area you do not need. On a small screen, toggle the sidebars and Panel to give the editor maximum space.

Moving and customizing the layout

Right-click the Activity Bar to swap the Primary and Secondary Side Bars. Drag any view from one sidebar to the other. Drag the Panel divider to resize it.

The View > Appearance menu lets you toggle the Activity Bar, Status Bar, Side Bar, and Panel individually. The View > Editor Layout menu offers preset grid layouts for splitting the editor.

VS Code remembers your layout. When you close and reopen the editor, everything returns to where you left it.

Next steps

Now that you know the layout, learn how to manage files and folders in the Explorer. If you want to work keyboard-first, start with the Command Palette.