Can you recall the number of extensions you've installed in VS Code? For me, it's an astonishing 56. If you've noticed your VS Code becoming increasingly sluggish and resource-intensive, this count might be to blame. Each additional extension contributes to higher memory and CPU consumption.

Coding presents enough challenges without having to deal with performance issues. To optimize resource utilization and prevent potential conflicts among extensions or with built-in features, it's crucial to keep the number of extensions to a minimum.

Many extensions available in the Marketplace replicate functionalities that VS Code already offers natively. Often, these extensions were developed before specific features were integrated into VS Code, rendering them unnecessary now.

Below, I'll outline some features that are already incorporated into VS Code, along with the extensions that provide similar functionalities. By uninstalling these redundant extensions, you can enhance your editor's performance and efficiency. I'll also provide the relevant settings for each feature. If you're unfamiliar with modifying settings, this guide will assist you.

1. Auto Closing of HTML Tags

   When you insert a new HTML tag, this built-in feature automatically generates the corresponding closing tag.

   Extensions for this

   The following extensions provide auto-closing functionality in VS Code:

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

   Built-in Feature

   To manage auto-closing tags in VS Code, utilize these settings:

   • HTML: Auto Closing Tags: "Enable/disable autoclosing of HTML tags". Default is true.
   • JavaScript: Auto Closing Tags: "Enable/disable automatic closing of JSX tags". Default is true.
   • TypeScript: Auto Closing Tags: "Enable/disable automatic closing of JSX tags". Default is true.

   Add the following to your settings.json file to activate these settings.

2. Path Autocompletion

   This feature suggests files in your project when you are importing a module or linking a resource in HTML.

   Extensions for this

   These extensions enhance path autocompletion in VS Code:

   • Path IntelliSense (12.5M+ downloads): “Visual Studio Code Plugin that autocompletes filenames”.
   • Path Autocomplete (1.7M+ downloads): “Provides path completion for Visual Studio Code and VS Code for the web”.

   Built-in Feature

   VS Code already includes native path autocompletion. When you start typing a filename to import, a list of suggested project files appears for quick selection.

3. HTML and CSS Snippets

   These extensions streamline your workflow by allowing you to insert common HTML and CSS snippets using easily remembered abbreviations.

   Extensions for this

   These extensions add HTML and/or CSS snippets to VS Code:

   • HTML Snippets (10.1M+ downloads): “Full HTML tags including HTML5 snippets”.
   • HTML Boilerplate (3.2M+ downloads): “A basic HTML5 boilerplate snippet generator”.
   • CSS Snippets (225K+ downloads): “Shorthand snippets for CSS”.

   Built-in Feature

   Emmet is a built-in feature in VS Code that provides similar HTML and CSS snippets as these extensions. It is enabled by default for several file types, including html, jsx, and css.

   When typing an Emmet abbreviation, a suggestion will appear with auto-completion options, and a preview of the expansion shows up as you type.

4. Bracket Pair Colorization

   This feature visually differentiates matching brackets based on their nesting level, aiding in code readability.

   Extensions for this

   Before being integrated into VS Code, the following extensions enabled bracket pair colorization:

   • Bracket Pair Colorizer 2 (6.1M+ downloads): “A customizable extension for colorizing matching brackets”. Now deprecated.
   • Rainbow Brackets (1.9M downloads): “A rainbow brackets extension for VS Code”.

   Built-in Feature

   The bracket pair colorization feature has been added to VS Code, significantly improving performance compared to older extensions.

   Manage this feature with the following setting:

   • Editor > Bracket Pair Colorization: "Controls whether bracket pair colorization is enabled or not". Default is true.

5. Auto Importing of Modules

   This functionality automatically imports a module when its member is referenced in your code, saving time and effort.

   Extensions for this

   Here are some popular extensions providing auto-import capabilities:

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

   Built-in Feature

   Auto-import can be enabled or disabled in VS Code with the following settings:

   • JavaScript > Suggest: Auto Imports: "Enable/disable auto import suggestions". Default is true.
   • TypeScript > Suggest: Auto Imports: "Enable/disable auto import suggestions". Default is true.

   Additional settings allow you to manage imports on file moves and organize them upon saving.

Final Thoughts While these extensions may have been useful in the past, the integrated features of VS Code have rendered them obsolete. Uninstalling them can help reduce clutter and enhance your editor's performance.

Every Crazy Thing JavaScript Does If you want to avoid frustrating bugs and save time, check out Every Crazy Thing JavaScript Does, a compelling guide that explores the nuances of JavaScript.

Get your free copy here today.

Originally published at codingbeautydev.com