Hiding tabs completely in Visual Studio Code

I always disable tabs in code editors because they distract me.

Update Looks like there’s finally a built-in way of disabling tabs:

  "workbench.editor.showTabs": "none",
  "window.customTitleBarVisibility": "never"

So the hack explained below is no longer needed.

By default Visual Studio Code shows tabs like this:

Tabs in Visual Studio Code

We could disable the tabs in settings:

  "workbench.editor.showTabs": false

However, now instead of tabs there’s a bar with a file name that looks like one long tab and takes the same amount of space:

One long "tab" in Visual Studio Code

Unfortunately, it’s impossible to hide it without any hacks.

The only way to do it is by using the Custom CSS and JS Loader extension:

  1. Install the extension.
  2. Create a CSS file with the following:
.title.show-file-icons {
  display: none !important;
  1. Add the following to the Code config file:
  "vscode_custom_css.imports": [
  1. Open the command palette (Cmd+Shift+P), and select Reload Custom CSS and JS.

Finally, there are no distractions:

No tabs in Visual Studio Code

I found this solution in this GitHub comment.