Custom Layout

Visual Studio Code comes with a simple user interface and convenient default layout. At the same time, VS Code provides options and settings to let you customize the UI layout to suit your preferences and work style. In this topic, we'll highlight various UI customizations so you can display views, editors, and panels in the way that's most productive for you.

This article starts by discussing Workbench customizations to rearrange UI elements such as the side bars, views, and panels. Later in the article, we'll cover customization of the Editor region with editor groups, split editors, and editor tabs.

Note

If you are new to VS Code, you may want to start with the user interface overview or take a look at the Tips and Tricks article.

Workbench

Layout density

Use layout density to control the spacing around major parts of the editor window. First, enable workbench.experimental.modernUI Open in VS Code Open in VS Code Insiders . Then, select the Customize Layout control in the title bar and choose an option under Layout Density:

  • Default: use the standard spacing between and within panels.
  • Compact: remove spacing between panels and reduce the spacing within panels.

Your selection applies immediately and persists when you restart VS Code. To reset the density to Default, along with the other layout settings, select Restore Defaults in Customize Layout.

You can also configure the density in the Settings editor with window.density.layout Open in VS Code Open in VS Code Insiders .

Primary Side Bar

By default, the Primary Side Bar is located on the left of the workbench and shows views such as the Explorer, Search, and Source Control views. You can quickly switch between views by selecting the icons in the Activity Bar.

Explorer view opened in the Primary Side Bar, located on the left of the screen.

To change the position of the Primary Side Bar, you can:

  • Right-click the Activity Bar and select Move Primary Side Bar Right
  • Run View: Toggle Primary Side Bar Position to switch the Primary Side Bar right and left
  • Use the View > Appearance > Move Primary Side Bar Right menu item
  • Set the Workbench > Side Bar: Location ( workbench.sideBar.location Open in VS Code Open in VS Code Insiders ) setting to right in the Settings editor

Secondary Side Bar

By default, VS Code shows views in the Primary Side Bar located to the left of the editor region. It can be useful to see two views open at the same time. To do this, you can use the Secondary Side Bar to show views opposite the Primary Side Bar. The Secondary Side Bar is always positioned opposite the Primary Side Bar, regardless if you switched the position of the Primary Side Bar.

When you first open a folder or multi-root workspace, the Secondary Side Bar is shown by default. In an empty window, it's hidden by default. You can configure this behavior with the workbench.secondarySideBar.defaultVisibility Open in VS Code Open in VS Code Insiders setting.

The following image shows the Explorer view in the Primary Side Bar and the Copilot Chat view in the Secondary Side Bar:

Explorer view in the Primary Side Bar and Copilot Chat view in the Secondary Side Bar.

If the Secondary Side Bar is hidden, you can show it by using the layout controls in the VS Code title bar. If the layout controls are not visible, right-click the VS Code title bar and select Layout Controls.

Title bar buttons to toggle main UI elements, with hover on Toggle Secondary Side Bar.

Alternatively, you can also open the Secondary Side Bar as follows:

  • Run the View: Toggle Secondary Side Bar Visibility command (or press ⌥⌘B (Windows, Linux Ctrl+Alt+B))
  • Use the View > Appearance > Secondary Side Bar menu item

At any time, you can drag and drop views and panels into the Primary or Secondary Side Bar. VS Code will remember the layout of views and panels across your sessions.

Drag and drop views and panels between the Primary and Secondary Side Bar

Note

You can reset views and panels back to their default locations with the View: Reset View Locations command.

Command Palette position

You can move the Command Palette to another location by grabbing the top edge with the mouse cursor and dragging it somewhere else. You can also select the Customize Layout control in the title bar, and then select one of the preconfigured Quick Input Positions.

Screenshot that shows the Command Palette in a different location, highlighting the Customize Layout control in the title bar and the preconfigured position options.

Activity Bar position

By default, the Activity Bar moves with the Primary Side Bar and remains on the outer edge of the workbench. You can also choose to hide the Activity Bar, or move it to the top or bottom of the Primary Side Bar.

The Activity Bar Position menu is available from the Activity Bar context menu, or under View > Appearance > Activity Bar Position has the options Default, Top, Bottom, or Hidden.

When the Activity Bar is in the top or bottom position, the Account and Manage buttons, usually at the bottom of the Activity Bar, move to the right side of the title bar.

Activity Bar in top position with Account and Manage buttons on the right of the title bar

Activity Bar size

The Activity Bar supports two sizes: the larger default size and a compact size that matches the classic Activity Bar appearance. To switch to compact mode, set workbench.activityBar.compact Open in VS Code Open in VS Code Insiders to true.

You can also toggle between sizes by right-clicking the Activity Bar and selecting Default or Compact from the Activity Bar Size submenu.

Screenshot of the Activity Bar context menu showing the Activity Bar Size submenu with Default and Compact options.

Note

The Activity Bar Size submenu only appears when the Activity Bar is in its default (side) position. If the Activity Bar is moved to the top or bottom, the size option is not available.

Customize Layout control

The VS Code title bar also has buttons to toggle the visibility of the main UI elements (Side bars and Panel region).

Title bar buttons to toggle main UI elements, with hover on Toggle Panel

The rightmost button brings up the Customize Layout dropdown, where you can further change the visibility and layout of various UI elements and includes several layout modes:

Customize Layout dropdown shown via the Customize Layout button in the title bar

The layout modes are:

  • Full Screen - Set the editor to fill the full display screen. View: Toggle Full Screen (⌃⌘F (Windows, Linux F11)).
  • Zen Mode - Hide all UI except for the editor area. View: Toggle Zen Mode (