How to Hide File Tab Close Button in VS Code

April 18, 2021

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:

file close icon in vs code

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.

preferences open user settings

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 :)

vs code file icon hidden


👋 I'm Ashik Nesin • Sr. Frontend Engineer @Chargebee 👨‍💻• I write about modern Javascript & building web apps

© 2021 Nesin Technologies LLP