8 super-popular VS Code extensions you do not really want anymore


Every extension you put in provides startup time, makes use of reminiscence, and offers you another factor that may break after an replace. Over the years, VS Code has absorbed many once-essential extensions by changing them with built-in options. That means you could be working an extension for one thing VS Code can already do natively, making your setup extra cluttered than it must be.

Before you put in one other extension, try this list of popular ones you may ditch proper now and see how VS Code can do the identical factor by itself.

Bracket Pair Colorizer

VS Code’s built-in bracket colours are ok to make this extension out of date

No doubt, Bracket Pair Colorizer (variations 1 and a couple of) was a staple from 2016 to 2021, with thousands and thousands of installs. It was a go-to extension for a lot of builders that made VS Code really feel dramatically higher the second you put in it. It coloured matching brackets, making deeply nested code a lot simpler to comply with.

You don’t want it anymore as a result of VS Code added native bracket pair colorization in model 1.60 and turned it on by default in 1.67. Eventually, the extension’s writer deprecated it as a result of the built-in model is way quicker.

Simply uninstall it in case you nonetheless have it, and bracket colours ought to already be working since they’re enabled by default. If not, head to Settings > Text Editor > Bracket Pair Colorization and ensure the setting is enabled. Also, if wanted, you may allow it via your settings.json file by including the next line:

"editor.bracketPairColorization.enabled": true

Settings Sync

VS Code can sync your total setup with no third-party extension

Settings Sync (developed by Shan Khan) was essential extension for customers who commonly moved between computer systems. It was fashionable from 2015 to mid-2020 and let customers synchronize their VS Code settings utilizing GitHub Gists, saving them from manually recreating their setup.

Then, VS Code launched built-in Settings Sync as a preview in late 2019 and made it secure in model 1.48 in 2020. It syncs settings, keybindings, snippets, extensions, and UI state, and it additionally works with Profiles.

To allow Settings Sync, click on the Accounts icon and choose Backup and Sync Settings, then select what you wish to sync and click on Sign in & Turn on. Select Sign in with GitHub to authenticate in your browser, or in case you’re already signed in, merely click on the Accounts icon and activate Settings Sync. Once enabled, the menu will present Settings Sync is On. Once this setting is on, you may select what VS Code precisely syncs.

Debugger for Chrome / Debugger for Edge

Browser debugging is now dealt with by VS Code with none extension

The Run and Debug menu shows Web App (Chrome) and Web App (Edge) options under Select debugger.

Remember when Microsoft itself provided extensions like Debugger for Chrome and Debugger for Edge for debugging net apps from contained in the editor? Both reached thousands and thousands of installs, however they’re now deprecated.

VS Code changed them with its built-in JavaScript Debugger round 2020–2021. It helps you to debug JavaScript and Typescript purposes immediately from the editor.

To choose a debugger, click on the Run and Debug icon, then click on the Run and Debug button. Choose Web App (Chrome) or Web App (Edge) from the Select debugger record.

Auto Close Tag

VS Code already is aware of when your HTML tags want closing

The VS Code Settings search shows Auto Closing Tags options for HTML, JavaScript, and TypeScript.

If you write HTML, there is a good probability you put in Auto Close Tag years in the past. It mechanically added the closing tag everytime you typed a gap one. To substitute it, VS Code launched built-in HTML auto-closing tags in model 1.16. Later, it additionally added native help for auto-closing tags in JSX.

This characteristic is turned on by default. If you turned it off, go to Settings > Extensions and seek for Auto Closing Tags to allow it for HTML, JavaScript, and TypeScript, or set html.autoClosingTags, javascript.autoClosingTags, and typescript.autoClosingTags to true in your settings.json file.

Auto Rename Tag

Linked Editing retains matching HTML tags in sync

The VS Code Settings page shows the Linked Editing option under Text Editor.

Auto Rename Tag is one other fashionable extension you will need to have used or heard of you probably have HTML expertise. It renames the closing tag as you edit the opening one. VS Code launched the identical characteristic in 2019 underneath a special identify, which was later rebranded as Linked Editing in model 1.44 (2020).

The Linked Editing characteristic works nicely for plain HTML. In JSX and TSX, help is determined by your TypeScript model and setup, so take a look at it in your personal initiatives earlier than you uninstall the extension.

It’s off by default, however you may allow it by going to Settings > Extensions and trying to find Linked Editing, or by including the next line to your settings.json file:

"editor.linkedEditing": true

Local History

VS Code can get well your previous edits with the built-in Local History characteristic

Local History settings are visible under Workbench in VS Code Settings.

The Local History extension was fashionable as a result of it stored snapshots of your recordsdata, letting you get well earlier variations with out counting on Git.

Local History doesn’t substitute Git. It’s useful for recovering latest modifications.

VS Code added its personal Local History in model 1.66 (2022). It is on by default. You can discover it within the Timeline view on the backside of the Explorer sidebar, the place you may evaluate an saved model with the present file or restore it. If disabled, you may handle it from Settings > Workbench.

HTML Boilerplate

Emmet can generate HTML boilerplate with a couple of keystrokes

The VS Code Settings page shows the Emmet Include Languages option under Extensions > Emmet.

There was a time when creating an HTML file meant both typing the boilerplate by hand or putting in an extension to generate it. However, VS Code launched Emmet (round 2016), a strong abbreviation engine that may generate HTML and CSS from brief expressions.

You’ve most likely used Emmet with out figuring out it. Remember typing ! to generate a primary HTML doc construction? That’s Emmet. It may even generate complicated buildings from brief abbreviations.

Emmet is enabled by default for HTML recordsdata. To use it with one other language, configure Include Languages underneath Settings > Extensions > Emmet.

Git History

Built-in Source Control and Timeline cowl a lot of the identical floor

VS Code shows code in the editor with the Source Control and Timeline views open on either side.

Git History grew to become fashionable as a result of it gave VS Code customers a neater method to discover Git commits, branches, and file historical past with out continuously leaping to the command line.

VS Code has now lined most of it with two built-in views. The Timeline view (arrived in 2020) exhibits per-file historical past, whereas the Source Control Graph (added in 2023) helps you to discover commits, branches, and comparisons.

Although Git History isn’t fully changed by VS Code’s built-in options, test them out to see in the event that they cowl your workflow nicely sufficient to ditch the extension.

You may have to wash your setup

You don’t must uninstall the whole lot without delay. Remove one extension, attempt its built-in substitute, and transfer on to the following. If one thing doesn’t work, you may at all times reinstall it. As VS Code keeps adding and improving features, it’s value searching its built-in options earlier than reaching for an additional extension.



Source link