Skip to content

VS Code: Editor Tab Scrollbar Visibility

VS Code Editor Tab Scrollbar Visibility Thumbnail

If you work with a lot of open tabs, you eventually run out of visual space on the tab bar, and VS Code will show a scrollbar to let you know that you can scroll through your tabs.

But by default, that scrollbar only becomes visible when you hover your mouse over the tab area.

In this post, I’ll show you how to make that scrollbar always visible, or hide it entirely if you think it just gets in the way.

It’s worth noting that if you’re using the setting "workbench.editor.wrapTabs": true, the scrollbar won’t appear because the tabs will be wrapped across multiple lines. If you prefer to keep all your tabs on a single line, then this post is for you.

Let’s get started 🙌

Contents hide
1. Editor Tab Scrollbar Visibility
1.1. Comments

▶️If you prefer a video instead, I got you covered:

Editor Tab Scrollbar Visibility

  1. Press CTRL + , (comma) or CMD + , on macOS to open the Settings
  2. Search for workbench.editor.titleScrollbarVisibility

From the dropdown menu, you have three options:

  1. auto — is the default value and only shows the scrollbar when you hover your mouse over the editor tab
  2. visible — keeps the scrollbar always visible
  3. hidden — hides the scrollbar completely

You can also directly modify your settings.json file by adding the following line:

"workbench.editor.titleScrollbarVisibility": "hidden" // auto / visible / hidden

That’s it! 🎉

Now you know how to change the visibility of the editor tab scrollbar.

Happy coding đź’ś

Let me know what you think about this article in the comments section below.

If you find this article helpful, please share it with others and subscribe to the blog to support me, and receive a bi-monthly-ish e-mail notification on my latest articles.   
  

Comments