Recently I decided to take a critical look at my VS Code setup and look for improvements in my workflow and get rid of no longer used extensions. I found out that I had a bunch of extensions installed that are not or no longer needed.

Since extensions can cause performance issues, increase your CPU usage, and can have conflicts with other extensions or native functionality it’s best to limit the extensions to only the ones you need.

What shocked me most is that there are still posts here on Medium, dev.to, Reddit and other platforms recommending these extensions despite some of them having a clear deprecation notice at the top of the download page.

How to Edit Settings

Before we go through the list of extensions it’s good to mention that many of these extensions exist natively in Visual Studio Code. You can enable/disable or control the behavior of these features through the settings menu.

The settings can be controlled through the UI or through a JSON configuration, for the purposes of this article, we will use the JSON version since that is much simpler to copy over from here.

You can open up the settings.json for your global Visual Studio Code Settings through the command palette (⇧⌘P). Type in settings and select “Preferences: Open User Settings (JSON)”.

1. Auto Rename Tag — 10.5M Downloads

This insanely popular extension has over 10.5 million downloads at the time of writing this article. I see this extension come up in every recommended extension blog post.

However, VS Code offers the same functionality with an internal setting. By enabling the following setting your tags will auto-rename without the need for third-party extensions.

"editor.linkedEditing": true

view raw linked-editing.json hosted with ❤ by GitHub

2. Auto Close Tag — 8M Downloads

Another very popular extension by the same author as the previous extension. The functionality of this extension has also been added to VS Code over time.

You can enable this setting independently for HTML and for JSX in JavaScript or TypeScript with the following settings:

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

view raw auto-closing.json hosted with ❤ by GitHub

3. Auto Import — 2.5M Downloads

This extension automatically finds, parses, and provides code actions and code completion for all available imports in Typescript and TSX.

There are actually a bunch of settings in VS Code that help us automatically arrange our imports. We can use auto-import suggestions for both JavaScript/TypeScript, update imports when files are moved, and organize imports with absolute paths on top.

	"javascript.suggest.autoImports": true,
	"typescript.suggest.autoImports": true,
	"javascript.updateImportsOnFileMove.enabled": "always",
	"typescript.updateImportsOnFileMove.enabled": "always",
	"source.organizeImports": true

view raw auto-import.json hosted with ❤ by GitHub

4. Settings Sync — 3.4M Downloads

This extension was a lifesaver for me to keep my VS Code setup synced across machines. However, VS Code has added this feature natively almost two years ago already.

For more information on how to set it up read the official VS Code documentation.

5. Trailing Spaces — 1.1M Downloads

This extension highlights training spaces and allows you to delete them all with a command.

VS Code has a setting that when enabled removes all trailing spaces when you save the file. This way you don’t have to think of them and there’s no need for a highlight or command. You can enable the setting like this:

"files.trimTrailingWhitespace": true,

view raw trailing-spaces.json hosted with ❤ by GitHub

6. Path Intellisense — 8M Downloads

This extension autocompletes paths and filenames and has over 8 million downloads. There is a counterpart of this extension by the same developer for NPM module autocompletion with almost 5 million downloads.

Like many features, however, VS Code added native support for these features a while back. These features are turned on by default and require no settings to be enabled.

7. NPM — 5.6M Downloads

This extension lets you run NPM scripts with a command. There are more extensions like this for Gulp, Make, etc. They can be useful, but once again VS Code has already provided a native way of handling this. VS Code has a feature called Task Auto Detection.

Tasks can be auto-detected or custom-made to run automatically on be activated through the command palette or by pressing a key-binding.

https://javascript.plainenglish.io/how-to-automatically-run-commands-in-visual-studio-code-300f2e4f144c

8. HTML Snippets — 8.4M Downloads

This extension allows you to quickly place HTML snippets with a shorthand. The same concept goes for the following two extensions:

• CSS Snippets
• HTML Boilerplate

These extensions all offer shorthand versions, which are already natively supported by VS Code. VS Code has Emmet built in. Emmet is an amazing tool for quickly writing out HTML and CSS with easy-to-remember shorthands.

Additionally, Emmet offers a boilerplate HTML template out of the box and allows you to define your own custom snippets as well.

9. HTMLTagWrap — 415K Downloads

This extension and other similar ones allow you to select some HTML code and wrap it in a tag. This can be useful and saves you a few seconds here and there throughout the day.

VS Code offers this as well through Emmet with a command. Just open the command palette with CTRL/CMD + Shift + P and look for Emmet: Wrap with abbreviation. Then you can type any emmet abbreviation you want, this could be a single tag, multiple nested tags, tags with classes or IDs.

10. Lorem Ipsum — 473K Downloads

This extension lets you quickly insert blocks of Lorem Ipsum text into your markup.

This is already supported by the inclusion of Emmet. You can type lorem and press the tab key to generate a 30-word paragraph. Or if you need multiple blocks you can write something like this to suit your needs.

ul>li*3>p>lorem

view raw lorum.txt hosted with ❤ by GitHub

This will generate an unordered list with 3 list items, each containing a paragraph of 30 words.

11. Bracket Pair Colorizer (1 & 2) — 5.2M Installs

Bracket Pair Colorizer and its successor together have over 11M installs. This together with many other popular bracket colorizer extensions showed the VSCode team that this is a must-have feature.

This led to the team implementing bracket pair colorizer into the VS Code core, which made it 10.000x faster according to them.

Bracket pair coloring can be enabled by enabling the following setting:

"editor.bracketPairColorization.enabled": true

view raw bracket-color.json hosted with ❤ by GitHub

Complete List of Settings

Here’s the complete list of settings mentioned above.

	{
	"editor.linkedEditing": true,
	"html.autoClosingTags": true,
	"javascript.autoClosingTags": true,
	"typescript.autoClosingTags": true,
	"javascript.suggest.autoImports": true,
	"typescript.suggest.autoImports": true,
	"javascript.updateImportsOnFileMove.enabled": "always",
	"typescript.updateImportsOnFileMove.enabled": "always",
	"source.organizeImports": true,
	"files.trimTrailingWhitespace": true,
	"editor.bracketPairColorization.enabled": true
	}

view raw settings.json hosted with ❤ by GitHub

Conclusion

Visual Studio Code has an amazing marketplace of extensions that can make your life easier. Before installing one of them it is good to first look if it isn’t already natively supported. With the monthly release updates packed with improvements and features Visual Studio Code will make more extensions unnecessary over time. Taking a few minutes out of your day once a month to read the release notes will help you catch this early on and will make you more proficient in using your editor.