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.
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.
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
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.
The following commands allow users to navigate amongst tabs:
- Ctrl-Tab shows a list of all tabs inside the active tab group:
- Ctrl Alt Tab shows a list of all tabs inside all tab groups
- Quick open shows the linear history of all tabs
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.
Each group only contains one preview tab.
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