7 Unnecessary VSCode Extensions You Should Uninstall Now

The number of VSCode extensions you have installed is one of the main reasons why you might find the editor slow and power-hungry, as every new extension added increases the app’s memory and CPU usage. It’s important to keep this number as low as possible to minimize this resource consumption, and also reduce the chance of the extensions clashing with one another or with native functionality.

There are a significant number of extensions in the Marketplace that provide functionality VSCode already has built-in. Typically, they were developed at a time when the feature was yet to be added, but now that this is no longer the case, they are now largely redundant additions, and some of them have been deprecated for this reason.

Below, we cover a list of these integrated VSCode features and extensions that provide them. Uninstalling these now dispensable extensions will increase your editor’s performance and efficiency.

We’ll be listing settings that control the behavior of these features. If you don’t know how to change settings, this guide will help.

Related: 10 Must-Have VSCode Extensions for Web Development

1. Auto closing of HTML tags

When you add a new HTML tag, this feature automatically adds the corresponding closing tag.

Extensions

These extensions add the auto-closing feature to VSCode:

• Auto Close Tag (8.6M downloads): “Automatically add HTML/XML close tag, same as Visual Studio IDE or Sublime Text”.
• Close HTML/XML Tag (284K downloads): “Quickly close last opened HTML/XML tag”.

Feature

These settings enable/disable the auto-closing of tags in VSCode:

• HTML: Auto Closing Tags: “Enable/disable autoclosing of HTML tags”. It is true by default.
• JavaScript: Auto Closing Tags: “Enable/disable automatic closing of JSX tags”. It is true by default.
• TypeScript: Auto Closing Tags: “Enable/disable automatic closing of JSX tags”. It is true by default.

Add the following to your settings.json file to turn them on:

settings.json

{
  "html.autoClosingTags": true,
  "javascript.autoClosingTags": true,
  "typescript.autoClosingTags": true
}

Note: VSCode doesn’t have native auto-closing support for .vue files. You can enable it by installing the Vue Languages Features (Volar) extension.

2. Auto trimming of trailing whitespace

An auto-trimming feature removes trailing whitespace from all the lines of a file, ensuring more consistent formatting.

Extensions

The extensions let you trim trailing whitespace from a file:

• Trailing Spaces (1.2M downloads): “Highlight trailing spaces and delete them in a flash!”.
• AutoTrim (27.5K downloads): “Trailing whitespace often exists after editing lines of code, deleting trailing words, and so forth. This extension tracks the line numbers where a cursor is active, and removes trailing tabs and spaces from those lines when they no longer have an active cursor”.

Feature

VSCode has a built-in setting that can automatically remove trailing spaces from a file. Instead of requiring a command or highlight, it automatically trims the file when it is saved, making it a background operation you no longer have to think about.

Here’s the setting:

• Files: Trim Trailing Whitespace: “When enabled, will trim trailing whitespace when saving a file”. It’s false by default.

Add this to your settings.json file to enable auto trimming:

settings.json

{
  "files.trimTrailingWhitespace": true,
}

You might want to turn this setting off for Markdown files since you have to put two or more spaces at the end of a line to create a hard line break in the output, as stated in the CommonMark specification. Add this to your settings.json file to do so.

settings.json

{
  "[markdown]": {
    "files.trimTrailingWhitespace": false
  }
}

Alternatively, you can simply use a backslash (\) instead of spaces to create a hard line break.

3. Path autocompletion

The path autocompletion feature provides a list of files in your project to choose from when importing a module or linking a resource in HTML.

Extensions

These extensions add the path autocompletion feature to VSCode:

1. Path IntelliSense (8.5M downloads): “Visual Studio Code Plugin that autocompletes filenames”.
2. Path Autocomplete (1.2M downloads): “Provides path completion for Visual Studio Code and VS Code for the web”.

Feature

VS Code already has native path autocompletion. When you’re about to type in a filename to import (typically when the opening quote is typed), a list of files in the project will be suggested, from which selecting one will automatically insert the filename.

4. Settings Sync

Ever since cross-device syncing support was added to VSCode, we no longer have to turn to third-party extensions for this.

Extensions

This is by far the most popular extension for syncing VSCode settings:

• Settings Sync (3.5M downloads): “Synchronize Settings, Snippets, Themes, File Icons, Launch, Keybindings, Workspaces, and Extensions Across Multiple Machines Using GitHub Gist”.

Feature

You can read all about the built-in Settings Sync feature here.

Here are the Setting Sync options shown in the Settings UI.

You can link the settings data with a Microsoft or GitHub account, and you can customize what settings are saved.

5. Snippets for HTML and CSS

These extensions help you save time by adding common HTML and CSS snippets using abbreviations you can easily recall.

Extensions

These extensions bring convenient HTML and/or CSS snippets to VSCode:

• HTML Snippets (8.7M downloads): “Full HTML tags including HTML5 snippets”.
• HTML Boilerplate (1.9M downloads): “A basic HTML5 boilerplate snippet generator”.
• CSS Snippets (105K downloads): “Shorthand snippets for CSS”.

Feature

Emmet is a built-in VSCode feature that provides HTML and CSS snippets like these extensions. As stated in the official VSCode Emmet guide, it is enabled by default in html, haml, pug, slim, jsx, xml, xsl, css, scss, sass, less, and stylus files.

When you start typing an Emmet abbreviation, a suggestion will pop up with auto-completion options. You’ll also see a preview of the expansion as you type in the VSCode’s suggestion documentation fly-out (if it is open).

As you saw in the demo, this:

ol>li*3>p.rule$

was expanded to this:

<ol>
  <li>
    <p class="rule1">r</p>
  </li>
  <li>
    <p class="rule2"></p>
  </li>
  <li>
    <p class="rule3"></p>
  </li>
</ol>

Notice how similar the abbreviations are to CSS selectors. This is by design; as stated on the official website, Emmet syntax is inspired by CSS selectors.

6. Bracket pair colorization

Bracket pair coloring is a popular syntax highlighting feature that colors brackets differently based on their order. It makes it easier to identify scope and helps in writing expressions that involve many parentheses, such as single-statement function composition.

Extensions

Until VSCode had it built-in, these extensions helped enable the feature in the editor:

1. Bracket Pair Colorizer 2 (5.4M downloads): “A customizable extension for colorizing matching brackets”. It has now been deprecated.
2. Rainbow Brackets: (1.9M downloads): “A rainbow brackets extension for VS Code”.

Feature

After seeing the demand for bracket pair coloring and the performance issues involved in adding the feature as an extension, the VSCode team decided to integrate it into the editor. In this blog, they say that the native bracket pair coloring feature is more than 10,000 times faster than Bracket Pair Colorizer 2.

Here’s the setting to enable/disable bracket pair colorization.

• Editor > Bracket Pair Colorization: “Controls whether bracket pair colorization is enabled or not”. It is true by default, there’s been some debate about whether this should be the case here.

You can enable this by adding the following to your settings.json

settings.json

{
  "editor.bracketPairColorization.enabled": true
}

There is a maximum of 6 colors that can be used for successive nesting levels. Although each theme will have its maximum. For example, the Dracula theme has 6 colors by default, but the One Dark Pro theme has only 3.

Nevertheless, you can customize the bracket colors for any theme with the workbench.colorCustomizations setting.

  "workbench.colorCustomizations": {
    "[One Dark Pro]": {
      "editorBracketHighlight.foreground1": "#e78009",
      "editorBracketHighlight.foreground2": "#22990a",
      "editorBracketHighlight.foreground3": "#1411c4",
      "editorBracketHighlight.foreground4": "#ddcf11",
      "editorBracketHighlight.foreground5": "#9c15c5",
      "editorBracketHighlight.foreground6": "#ffffff",
      "editorBracketHighlight.unexpectedBracket.foreground": "#FF2C6D"
    }
  },

We specify the name of the theme in square brackets ([ ]), then we assign values to the relevant properties. The editorBracketHighlight.foregroundN property sets the color of the Nth set of brackets, and 6 is the maximum.

Now this will be the bracket pair colorization for One Dark Pro:

7. Auto importing of modules

With an auto-importing feature, when a function, variable, or some other member of a module is referenced in a file, the module is automatically imported into the file, saving time and effort.

If the module files are moved, the feature will help automatically update them.

Extensions

Here are some of the most popular extensions providing the feature for VSCode users:

• Auto Import (2.7M downloads): “Automatically finds, parses, and provides code actions and code completion for all available imports. Works with Typescript and TSX”.
• Move TS (606K downloads): “extension for moving typescript files and folders and updating relative imports in your workspace”.

Feature

You can enable or disable auto-importing modules in VSCode with the following settings.

• JavaScript > Suggest: Auto Imports: “Enable/disable auto import suggestions”. It is true by default.
• TypeScript > Suggest: Auto Imports: “Enable/disable auto import suggestions”. It is true by default.
• JavaScript > Update Imports on File Move: “Enable/disable automatic updating of import paths when you rename or move a file in VS Code”. The default value is prompt, meaning that a dialog is shown to you, asking if you want to update the imports of the moved file. Setting it to alwayswill cause the dialog to be skipped, and never will turn off the feature entirely.
• TypeScript > Update Imports on File Move: “Enable/disable automatic updating of import paths when you rename or move a file in VS Code”. Like the previous setting, it has possible values of prompt, always, and never, and the default is prompt.

You can control these settings with these settings.json properties:

{
  "javascript.suggest.autoImports": true,
  "typescript.suggest.autoImports": true,
  "javascript.updateImportsOnFileMove.enabled": "prompt",
  "typescript.updateImportsOnFileMove.enabled": "prompt"
}

You can also add this setting if you want your imports to be organized any time the file is saved.

"editor.codeActionsOnSave": {
    "source.organizeImports": true
}

This will remove unused import statements and arrange import statements with absolute paths on top, providing a hands-off way to clean up your code.

Conclusion

These extensions might have served a crucial purpose in the past, but not anymore for the most part, as much of the functionality they provide have been added as built-in VSCode features. Remove them to reduce the bloat and increase the efficiency of Visual Studio Code.

Ayibatari Ibaba

Ayibatari Ibaba is a software developer with years of experience building websites and apps. He has written extensively on a wide range of programming topics and has created dozens of apps and open-source libraries.