How to Customize the VS Code Layout, Sidebars, and Panels

The VS Code layout is divided into the Activity Bar, Primary and Secondary Side Bars, editor area, Panel, and Status Bar. You can move or hide these regions without changing project files or editor content.

Move the Primary Side Bar

The Primary Side Bar contains the Explorer, Search, Source Control, Run and Debug, and Extensions views. By default it sits on the left.

To move it, right-click the Activity Bar and select Move Primary Side Bar Right or Move Primary Side Bar Left. The Side Bar visibly moves to the selected edge.

You can also toggle the Side Bar's visibility with Ctrl+B (Windows/Linux) or Cmd+B (macOS).

Use the Secondary Side Bar

The Secondary Side Bar sits opposite the Primary Side Bar. If your Primary Side Bar is on the left, the Secondary Side Bar appears on the right, and vice versa.

Open View > Appearance > Secondary Side Bar, or run View: Toggle Secondary Side Bar Visibility from the Command Palette. The shortcut is Ctrl+Alt+B on Windows/Linux and Option+Cmd+B on macOS.

Drag any view header (like the Explorer or Source Control) from the Primary Side Bar and drop it into the Secondary Side Bar area.

When the view appears on the opposite side of the editor, the move succeeded. Drag it back if the arrangement is not useful.

Move the Panel

The Panel sits below the editor by default and contains the terminal, output, debug console, and problems. You can move it to four positions:

• Bottom (default)
• Left
• Right
• Top

To change the position, right-click the empty area at the top of the Panel (next to the tabs) and select Move Panel Left, Move Panel Right, Move Panel To Top, or Move Panel To Bottom.

Moving the Panel to the left or right gives you more vertical editor space. This is useful on widescreen monitors.

Run View: Toggle Panel from the Command Palette whenever you need to hide or restore it.

Move the Activity Bar

The Activity Bar is the icon strip at the outer edge of the Primary Side Bar. You can keep the default position, move it to the top or bottom of the Side Bar, or hide it.

Right-click the Activity Bar, open Activity Bar Position, and choose Default, Top, Bottom, or Hidden. In the top position, the icons appear in a horizontal row above the Side Bar.

Center the editor layout

Centered editor layout narrows the editor area and centers it in the window. This is useful on large or ultrawide monitors where full-width lines are hard to read.

Open the Command Palette and run View: Toggle Centered Layout. The editor shrinks to a comfortable reading width and centers itself.

You can resize the centered area by dragging its side borders. Run the toggle command again to return to the normal editor width.

Hide and show UI elements

Use the title bar's Customize Layout control or run these Command Palette commands:

• View: Toggle Activity Bar Visibility
• View: Toggle Primary Side Bar Visibility
• View: Toggle Secondary Side Bar Visibility
• View: Toggle Panel
• View: Toggle Status Bar Visibility
• View: Toggle Full Screen

The Primary Side Bar shortcut is Ctrl+B on Windows/Linux and Cmd+B on macOS. Full Screen uses F11 on Windows/Linux and Control+Cmd+F on macOS.

If a view is lost after rearranging the interface, run View: Reset View Locations. This restores view locations without deleting settings or project data. The current regions, movement controls, and reset command are documented in the official custom layout guide.

Use Zen Mode

Zen Mode hides everything except the editor and centers it on screen. Press Ctrl+K Z (Windows/Linux) or Cmd+K Z (macOS) to enter Zen Mode. Press Escape twice to exit.

You can customize Zen Mode in Settings:

• zenMode.hideActivityBar controls the Activity Bar.
• zenMode.hideStatusBar controls the Status Bar.
• zenMode.hideLineNumbers controls editor line numbers.
• zenMode.centerLayout controls centered layout.
• zenMode.fullScreen controls full-screen entry.

Change any of these in your settings if you prefer Zen Mode with line numbers or without full screen.

Customize the title bar

The title bar can show different information depending on your preferences. Configure it with the window.title setting:

json

{
  "window.title": "${dirty} ${activeEditorShort}${separator}${rootName}"
}

This shows whether the file has unsaved changes, the current file name, and the project folder name. Useful when you have multiple VS Code windows open.

Next steps

Once your layout is dialed in, learn how to change keyboard shortcuts to navigate your new layout faster. For more focused work, see how to use Zen Mode, Full Screen, and Centered Layout.