Tabs in VS Code

One of the most missing features of VS Code is the tabs. Even though you can use shortcuts like Ctrl+Tab to navigate through files many people including me missing this feature. Microsoft listened to us and they started implementing this feature. We already have some visual designs / wireframes on how it will look.

First, this image indicates how tabs might look in VS Code:
image2

We are aiming for a lightweight, non distracting look, something that fits in well with the rest of VS Code. We haven’t yet drawn up what it would look like in a light theme. As you can see in the above image, tabs contain a close button to the left of the name. When the file contains unsaved changes we show a dirty indicator where the close button is. Hovering over a tab will show a tooltip with the full path for the file in the tab.

Preview tabs

To clearly distinguish preview tabs from open tabs we italicize the title in the tab as in the following wireframe.
image1

We discussed actions for promoting a preview tab to a full open tab:

  • Editing content inside the tab
  • Double clicking a file in the explorer
  • Double clicking the preview tab in the tab group

Overflow

Tabs open to the right of the active tab. If there is not enough room to show all of the tabs in a tab group we overflow the tabs. We do not truncate the name of the file inside the tab to make more room for more tabs. We show a chevron whenever there is an overflow. Clicking on that chevron will show a quick open dialog that lists all of the tabs in the tab group, allowing the user to find the tab they want to view. Clicking a tab that is currently in overflow will bring that tab into view.

Navigating tabs

The following commands allow users to navigate amongst tabs:

  • Ctrl-Tab shows a list of all tabs inside the active tab group:
    image3
  • Ctrl Alt Tab shows a list of all tabs inside all tab groups
    image4
  • Quick open shows the linear history of all tabs
    image5

Working files

We renamed working files to open editors to better reflect what this really is.

The list of open editors works identically to tabs. We just list them in the explorer rather than visualising them as tabs.

If a file is open in two or more editor groups we show this in the open editors list:
image6

Any editor that the user opens shows up in the open editors list. So for example, the diff editor shows up like so:
image7

Each group only contains one preview tab.

The chevron at the top right of the active editor group indicates whether or not there is a stack of editors.
image8

In this case, closing an editor will reveal the editor below it in the stack, rather than closing the editor completely. Closing an editor (for example with Ctrl-W) also removes the editor from the list of open editors. If you want to learn more follow this link: https://github.com/Microsoft/vscode/issues/224#issuecomment-213015687

Leave a Reply

Your email address will not be published. Required fields are marked *