Skip to content

VS Code — Editor Tab Height & Save More Space

VS Code Editor Tab Height & Save More Space

If you work with a lot of open editor tabs and want to save as much screen space as possible, VS Code comes with a new option that allows you to adjust the height of the editor tabs.

We’ll also gonna be looking at a few more ways to tweak the editor section to save even more screen space.

🎥 As we’re talking about visual stuff, I strongly suggest you check out this video for a showcase of this functionality:

Editor Tab Height

Press CTRL + , (comma) to open the Settings tab.

Or go to File -> Preferences -> Settings.

Then search for editor tab height and select the compact mode.


VS Code Editor Tab Height setting


VS Code Editor Tab Height setting set on Compact

As can be seen in the two pictures above, all the tabs have been compacted, saving some screen space.

At first glance, the difference may not be noticeable, but if you look closely, you can see that the space above the tab’s title has been significantly reduced.

You can also use the window.density.editorTabHeight ("default"|"compact") setting in your settings.json file.

Save even more screen space

To save even more screen space, you can use the window.density.editorTabHeight in combination with other two settings.

workbench.editor.wrapTabs (boolean)

workbench.editor.tabSizing ("shrink"|"fixed")

VS Code Editor Tab Height Settings save more screen space

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.