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.
Default:
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")
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.