How to Hide File Tab Close Button in VS Code

VS Code is build using Electron which means pretty much everything is build using web technologies that can be customized.

Most of the time we won't be using the close icon to close the particular file in VS Code but we'll be using shortcut instead (Cmd + W or Ctrl + W)

Let's see how to hide the close icon:

Recommended method: Configure settings ⭐

Apparently, we can do it pretty easily by configuring settings.json itself.

You can open the "Preferences: Open User Settings" in the command palette or with the keyboard shortcut Cmd + P

Just add the following configuration:

{
  "workbench.editor.tabCloseButton": "off"
}

Alternative method: Install & Setup Customize UI

We'll need to install Customize UI using which we can easily maintain the custom CSS changes.

Once we installed the extension, it'll prompt us to enable Monkey Patch and we need to enable it.

Configure settings.json & add custom CSS

Now open the "Preferences: Open User Settings" in the command palette.

Just paste in the following setting to hide the close icon using CSS.

{
  "customizeUI.titleBar": "inline",
  "customizeUI.stylesheet": {
    // hide close icon in file tab
    ".editor .title .actions-container .action-item a": "visibility:hidden;",
    // if you want to show dirty indicator then you can add the following style
    ".editor .title .dirty .actions-container .action-item a": "visibility:initial;"
  }
}

Once we save it, it'll ask us to reload the window. On refreshing the window the styles would be reflected :)