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.
By default, VS Code shows all views in the Primary Side Bar located to the left of the editor region. If you like another place to display views, you can open the Secondary Side Bar to the right and drag and drop views into that side bar.
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.
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.
When the Panel alignment is Center, you can quickly toggle the Panel region to fill the entire editor area with the Maximize Panel Size chevron button in the upper right of the Panel region. The chevron button points downwards in the maximized panel to restore the panel to the original size.
Note: Besides customizing the overall Panel region display, individual panels may have their own layout customizations. For example, the Terminal lets you have multiple open tabs and split existing terminals.
VS Code has a default layout of views and panels in the Primary Side bar and Panel region but you can drag and drop views and panels between these regions. For example, you can drag and drop the Source Control view into the Panel region or put the Problems panel into the Primary Side bar:
Note: Remember that you can reset a view and panel back to its default location with the Reset Location context menu item or all views and panels with the general View: Reset View Locations command.
You can also add views and panels to existing view or panel to create groups. For example, you could move the Output panel to the Explorer view group by dragging over the Explorer Activity Bar item and then dropping into the view:
You are not limited to using the mouse for moving views and panels. You can also customize layouts via the keyboard with the View: Move View and View: Move Focused View commands, where dropdowns let you pick the UI element to move and the destination, either a location like the Side bar or Panel region or an existing view or panel to create a group.
Most VS Code views and panels have tool bars displayed on the top right of their UI. For example, the Search view has a tool bar with actions such as Refresh, Clear Search Results, etc.:
If you think a tool bar is too busy and you'd like to hide less frequently used actions, you can right-click on any action and select its Hide command (for example Hide 'Clear Search Results') or uncheck any of the actions from the dropdown. Hidden actions are moved to the ... More Actions menu and can be invoked from there.
You can customize the layout of the VS Code editor region independently of the workbench user interface. By default, the editor region displays useful features such as the minimap, breadcrumbs, editor tabs, and has optional UI such as Sticky Scroll. You can also adjust the layout of the editors themselves or move them into floating windows.
By default, each opened editor goes into the same editor group and adds a new editor tab to the right. You can create new editor groups in order to group similar or related files, or to allow side by side editing of the same file. Create a new editor group by dragging an editor to the side, or using one of the Split commands in the context menu to duplicate the current editor into a new editor group to the left, right, above, or below.
You can also show pinned editor tabs on a separate row above the regular editor tab bar by setting Workbench > Editor: Pinned Tabs On Separate Row. You can pin and unpin editors by dragging and dropping their tabs between the two rows.
When using multiple editors, it's common to have one or more that you want to always keep visible. The locked editor group feature, where an entire editor group is locked and visible, provides a stable display and any request to open a new editor will create it in another group. You can tell whether an editor group is locked by the lock icon in the editor group tool bar.
You can lock an editor group by selecting Lock Group from the editor tool bar More Actions ... dropdown or running the View: Lock Editor Group command.
The primary use case is for terminals in the editor area. For example, you might want to edit text on the left and have a terminal on the right that is always visible. When a terminal editor is created and moved to the side, it will automatically lock. This means that even when the terminal on the right is focused, opening a file will open it on the left side without needing to manually change focus first.
Please read the product-specific details in this privacy statement, which provide additional relevant information. This statement applies to the interactions Microsoft has with you and the Microsoft products listed below, as well as other Microsoft products that display this statement.
For individuals in the United States, please refer to our U.S. State Data Privacy Notice and the Washington State Consumer Health Data Privacy Policy for additional information about the processing of your personal data, and your rights under applicable U.S. State data privacy laws.
Most Microsoft sites use cookies, small text files placed on your device which web servers utilize in the domain that placed the cookie can retrieve later. We use cookies to store your preferences and settings, help with sign-in, provide personalized ads, and analyze site operations. For more information, see the Cookies and similar technologies section of this privacy statement.
If you have a privacy concern, complaint, or question for the Microsoft Chief Privacy Officer or EU Data Protection Officer, please contact us by using our web form. For more information about contacting Microsoft, including Microsoft Ireland Operations Limited, see the How to contact us section of this privacy statement.
Microsoft collects data from you, through our interactions with you and through our products. You provide some of this data directly, and we get some of it by collecting data about your interactions, use, and experiences with our products. The data we collect depends on the context of your interactions with Microsoft and the choices you make, including your privacy settings and the products and features you use. We also obtain data about you from third parties.
If you represent an organization, such as a business or school, that utilizes Enterprise and Developer Products from Microsoft, please see the Enterprise and developer products section of this privacy statement to learn how we process your data. If you are an end user of a Microsoft product or a Microsoft account provided by your organization, please see the Products provided by your organization and the Microsoft account sections for more information.
You have choices when it comes to the technology you use and the data you share. When we ask you to provide personal data, you can decline. Many of our products require some personal data to provide you with a service. If you choose not to provide data -required to provide you with a product or feature, you cannot use that product or feature. Likewise, where we need to collect personal data by law or to enter into or carry out a contract with you, and you do not provide the data, we will not be able to enter into the contract; or if this relates to an existing product you are using, we may have to suspend or cancel it. We will notify you if this is the case at the time. Where providing the data is optional, and you choose not to share personal data, features like personalization that use such data will not work for you.
We also obtain data from third parties. We protect data obtained from third parties according to the practices described in this statement, plus any additional restrictions imposed by the source of the data. These third-party sources vary over time and include:
The data we collect depends on the context of your interactions with Microsoft and the choices you make (including your privacy settings), the products and features you use, your location, and applicable law.
Interactions. Data about your use of Microsoft products. In some cases, such as search queries, this is data you provide in order to make use of the products. In other cases, such as error reports, this is data we generate. Other examples of interactions data include:
Content. Content of your files and communications you input, upload, receive, create, and control. For example, if you transmit a file using Skype to another Skype user, we need to collect the content of that file to display it to you and the other user. If you receive an email using Outlook.com, we need to collect the content of that email to deliver it to your inbox, display it to you, enable you to reply to it, and store it for you until you choose to delete it. Other content we collect when providing products to you include:
d3342ee215