Manage extensions in Visual Studio Code (2023)

Increase the power of Visual Studio Code through extensions

The features that Visual Studio Code includes out of the box are just the beginning. VS Code extensions allow you to add languages, debuggers, and tools to your installation to support your development workflow. VS Code's rich extensibility model allows extension authors to plug directly into the VS Code user interface and contribute functionality through the same APIs that VS Code uses. This article explains how to find, install, and manage VS Code extensions onVisual Studio code market.

search extensions

You can find and install extensions from VS Code. Open the Extensions view by clicking the Extensions icon on theactivity baron the side of the VS Code or on the noSee: Extensionsdomain (⇧⌘X(Windows,LinuxCtrl+Shift+X)).

Manage extensions in Visual Studio Code (1)

This will show you a list of the most popular VS Code extensions on theVS Code Market.

Manage extensions in Visual Studio Code (2)

Each listed extension includes a short description, publisher, download count, and a five-star rating. You can select the extension item to display the extension details page where you can get more information.

Observation:If your computer's Internet access is through a proxy server, you will need to configure the proxy server. To seeproxy server supportfor details.

install an extension

To install an extension, select theinstall on pcbutton. After the installation is complete, theinstall on pcthe button will change toit doesgear button

Search and install an extension

For example, let's install the popularALL featuredextension. This extension highlights text like 'TODO:' and 'FIXME:' in your source code so you can quickly find undone sections.

Manage extensions in Visual Studio Code (3)

In the Extensions view (⇧⌘X(Windows,LinuxCtrl+Shift+X)), type 'everything' in the search box to filter the Marketplace listings for extensions with 'everything' in the title or metadata. you must see theALL featuredextension in the list.

Manage extensions in Visual Studio Code (4)

An extension is uniquely identified by its publisher and extension IDs. If you select theALL featuredextension, you will see the extension details page where you can find the extension ID, in this case,wayou.vscode-all-highlight. Knowing the extension ID can be useful if you have multiple extensions with similar names.

Manage extensions in Visual Studio Code (5)

Select theinstall on pcand VS Code will download and install the extension from the Marketplace. When the installation is complete, theinstall on pcThe button will be replaced by ait doesgear button

Manage extensions in Visual Studio Code (6)

To see the TODO Highlight extension in action, open any source code file and add the text 'TODO:' and you will see the text highlighted.

The TODO Highlight extension provides commands,TODO-Highlight: list of highlighted notesmiTODO-Highlight: toggle highlight, which you can find in the command palette (⇧⌘P(Windows,LinuxCtrl+Shift+P)). oTODO-Highlight: toggle highlightThe command allows you to quickly disable or enable highlighting.

(Video) Visual Studio Code Tutorial - How to add extension packs (VSCODE)

Manage extensions in Visual Studio Code (7)

The extension also provides settings to modify its behavior, which you can find in the settings editor (⌘,(Windows,LinuxCtrl+,)). For example, you may want to make the text search case insensitive and you can uncheck the boxTodohighlight: case sensitivesettings.

Manage extensions in Visual Studio Code (8)

If an extension doesn't provide the functionality you want, you can alwaysuninstallthe extent ofit doesbutton context menu.

Manage extensions in Visual Studio Code (9)

This was just one example of how to install and use an extension. VS Code Marketplace has thousands of extensions that support hundreds of programming languages ​​and tasks. Everything from full language support toJava,Piton,O, miC++to simple extensions thatcreate GUID, change thecolor theme, or addvirtual petsto the publisher.

extension details

On the extension details page, you can read the README for the extension and review the extension:

  • resource contributions- The extension's additions to VS Code, such as settings, commands and keyboard shortcuts, language grammars, debugger, etc.
  • Change Log- The CHANGELOG extension repository if available.
  • dependencies- List if the extension depends on some other extension.

Manage extensions in Visual Studio Code (10)

If an extension is an extension pack, theextension packThe section will show which extensions will be installed when you install the package.extension packsBundle separate extensions together so they can easily be installed all at once.

Manage extensions in Visual Studio Code (11)

Filter and show commands for extensions

You can filter the Extensions view with thefilter extensionscontextual menu.

Manage extensions in Visual Studio Code (12)

There are filters to display:

  • The list of currently installed extensions
  • The list of deprecated extensions that can be updated
  • The list of currently enabled/disabled extensions
  • The list of recommended extensions according to your workspace
  • The list of popular extensions around the world

You can sort the list of extensions bynumber of installationsoEvaluationin ascending or descending order. You can learn more about extension search filtersUnder of.

You can run display commands for additional Extensions through the... See and more actionsbutton.

Manage extensions in Visual Studio Code (13)

Through this context menu, you can control extension updates, enable or disable all extensions, and use theextension bisectorutility to isolate problematic extension behavior.

Manage extensions in Visual Studio Code (14)

Find an extension

You can clear the search box at the top of the Extensions view and type the name of the extension, tool, or programming language you're looking for.

For example, typing 'python' will open a list of Python language extensions:

Manage extensions in Visual Studio Code (15)

(Video) Unlock the power of VS Code's Extensions

If you know the exact identifier of an extension you are looking for, you can use the@I would go:prefix, for example@id:octref.vetur. Also, to filter or sort the results, you can use thefiltermitidycommands, detailed below.

manage extensions

VS Code makes it easy to manage your extensions. You can install, disable, update, and uninstall extensions through the Extensions view, thecommand palette(commands have theExtensions:prefix) or command line options.

List of installed extensions

By default, the Extensions view will show the extensions you currently have enabled, all extensions recommended for you, and an expanded view of all disabled extensions. you can use theshow installed extensionscommand, available atcommand palette(⇧⌘P(Windows,LinuxCtrl+Shift+P)) or themore actions(...) dropdown menu, to clear any text in the search box and display the list of all installed extensions, including those that have been disabled.

Uninstall an extension

To uninstall an extension, select theit doesgear button to the right of an extension entry, then chooseuninstallin the drop down menu. This will uninstall the extension and ask you to reload VS Code.

Manage extensions in Visual Studio Code (16)

disable an extension

If you don't want to remove an extension permanently, you can temporarily disable it by clicking the gear button to the right of an extension's entry. You can disable an extension globally or just for your current workspace. You will be prompted to reload VS Code after disabling an extension.

If you want to quickly disable all installed extensions, there is aDisable all installed extensionscommand notcommand palettemimore actions(...) suspense menu.

The extensions remain disabled for all VS Code sessions until you enable them again.

Activate an extension

Also, if you have disabled an extension (it will be in thedisabledsection of the list and markeddisabled), you can reactivate it with theEnableoActivate (workspace)commands no menu suspense.

Manage extensions in Visual Studio Code (17)

there is also aEnable all extensionscommand notmore actions(...) suspense menu.

Automatic update of extensions

VS Code checks for extension updates and installs them automatically. After an update, you will be prompted to reload VS Code. If you prefer to update your extensions manually, you can disable automatic updating with theDisable automatic update of extensionscommand that sets theextensions.autoUpdate settingsforfalse. If you don't want VS Code to check for updates, you can set theextensions.autoCheckUpdatessetting to false.

Update an extension manually

If you have automatic extension updating turned off, you can quickly check for extension updates using theShow deprecated extensionscommand that uses the@Out of timefilter. This will display all available updates for currently installed extensions. Select theTo updatefor the outdated extension and the update will be installed and you will be prompted to reload VS Code. You can also update all your outdated extensions at once withUpdate all extensionsdomain. If you also have automatic checking for updates turned off, you can use theCheck for extension updatesCommand to check which of your extensions can be updated.

recommended extensions

You can view a list of recommended extensions usingShow recommended extensions, which defines the@recommended filter. Extension recommendations can be:

  • Workspace Recommendations- Recommended by other users in your current workspace.
  • Other recommendations- Recommended based on recently opened files.

See the section below to learn how to do it.contributerecommendations to other users in their project.

ignoring the recommendations

To dismiss a recommendation, select on the extension item to open the Details page, then select theit doesgear button to display the context menu. Select theignore recommendationmenu option. Ignored recommendations will no longer be recommended to you.

Manage extensions in Visual Studio Code (18)

configure extensions

VS Code extensions can have very different configurations and requirements. Some extensions contributeDefinitionsto VS Code, which can be modified in the config editor. Other extensions may have their own configuration files. Extensions may also require the installation and configuration of additional components, such as compilers, debuggers, and command line tools. See the README for the extension (visible on the Details page of the Extensions view) or go to the extension page atVS Code Market(click the extension name on the details page). Many extensions are open source and have a link to their repository on their Marketplace page.

Management of command line extensions

To facilitate VS Code automation and configuration, it is possible to enumerate, install and uninstall VS Code extensions.command line. When identifying an extension, provide the full name of the formeditor.extension, for examplems-python.python.

Example:

code --extensions-dir <dir>set root pathforextensionscode --list-extensionsList of installed extensions.code --show-versionsLists installed extension versions, when --list-extension is used.código --install-extension (<extension-id> | <extension-vsix-path>)Install an extension.código --uninstall-extension (<extension-id> | <extension-vsix-path>)Uninstall an extension.code --enable-proposed-api(<extension-id>)Enable proposed API functionsforextensions You can receive one or more extension IDs forenableindividually.

You can see the plugin ID on the plugin details page under Market Information.

(Video) How To Create And Deploy A VSCode Extension

Manage extensions in Visual Studio Code (19)

Extension display filters

The Extensions view search box supports filters to help you find and manage extensions. You may have seen filters like@installedmi@recommendedif you used the commandsshow installed extensionsmiShow recommended extensions. In addition, filters are available that allow you to sort by popularity or ratings and search by category (eg 'Linters') and tags (eg 'knot'). You can see a complete list of all filters and order the commands by typing@in the extensions search box and browsing the suggestions:

Manage extensions in Visual Studio Code (20)

These are the Extensions display filters:

  • @integrated- Show extensions that come with VS Code. Grouped by type (Programming Languages, Themes, etc.).
  • @Disabled- Show disabled installed extensions.
  • @installed- Show installed extensions.
  • @Out of time- Show outdated installed extensions. A newer version is available on the Marketplace.
  • @activated- Show installed extensions enabled. Extensions can be individually enabled/disabled.
  • @recommended- Show recommended extensions. Grouped as specific workspace or general purpose.
  • @category- Show extensions belonging to the specified category. Below are some of the supported categories. For a complete list, type@categoryand follow the options in the list of suggestions:
    • @category:temas
    • @category:formatadores
    • @category:linters
    • @category:snippets

These filters can also be combined. For example: use@installed @category:themesto see all installed themes.

If no filters are provided, the Extensions view shows currently installed and recommended extensions.

ordering

You can sort the extensions with the@tidyfilter, which can take the following values:

  • install on pc- Sort by number of Marketplace installations, in descending order.
  • Evaluation- Sort by Marketplace rating (1-5 stars), in descending order.
  • Name- Sort alphabetically by extension name.

Manage extensions in Visual Studio Code (21)

categories and tags

Extensions can definecategoriesmiLabeldescribing its features.

Manage extensions in Visual Studio Code (22)

You can filter by category and tag usingcategory:miqualification:.

The supported categories are:[Programming languages, snippets, linters, themes, debuggers, formatters, keymaps, SCM providers, other, extension packs, language packs, data science, machine learning, visualization, notebooks, education, testing]. They can be accessed via IntelliSense in the extensions search box:

Manage extensions in Visual Studio Code (23)

Note that you must enclose the category name in quotes if it is more than one word (for example,category: "SCM Providers").

Tags can contain any string and are not provided by IntelliSense, so check the Marketplace for useful tags.

Install from a VSIX

You can manually install a VS Code extension packaged in a.vsixArchive. Using theInstall from VSIXfrom the Extensions view command drop-down menu or the commandExtensions: Install from VSIXcommand notcommand palette, point at.vsixArchive.

You can also install using VS Code--install-extensioncommand line option by providing the path to the.vsixArchive.

code --install-extension myextension.vsix

Can you provide the--install-extensionmultiple times on the command line to install multiple extensions at once.

For more information on packaging and post extensions, check out ourpost extensionsarticle in the extension API.

Recommended workspace extensions

A good set of extensions can make working with a particular workspace or programming language more productive, and you'll often want to share this list with your team or colleagues. You can create a recommended list of extensions for a workspace with theExtensions: Set recommended extensions (workspace folder)domain.

In a single folder workspace, the command creates aextensions.jsonfile located on the desktop.vscodefolder where you can add a list of extension identifiers ({publisherName}.{extensionName}).

(Video) Visual Studio Code 2022 | Web Dev Setup | Top Extensions, Themes, Settings, Tips & Tricks

In amultiroot workspace, the command will open your.code-workspacefile where you can list the extensions inextensions.recommendations. You can still add extension recommendations to individual folders in a multiroot workspace using theExtensions: Set recommended extensions (workspace folder)domain.

An exampleextensions.jsoncould be:

{ "recommendations": ["dbaeumer.vscode-eslint","esbenp.prettier-vscode"]}

which recommends a linter extension and a code formatter extension.

An extension is identified by its publisher name and its extension identifier.editor.extension. You can see the name on the extension details page. VS Code will provide autocompletion for extensions installed within these files.

Manage extensions in Visual Studio Code (24).

VS Code prompts the user to install recommended extensions when a workspace is first opened. The user can also review the list with theExtensions: Show recommended extensionsdomain.

Manage extensions in Visual Studio Code (25)

Next steps

Here are some topics you might find interesting...

  • extension API- Start learning about the VS Code Extension API.
  • your first extension- Try creating a simple Hello World extension.
  • Marketplace Publishing- Publish your own extension on the VS Code Marketplace.

common questions

Where are the extensions installed?

Extensions are installed in an extensions folder per user. Depending on your platform, the location will be in the following folder:

  • windows %USER PROFILE%\.vscode\extensions
  • MacOS ~/.vscode/extensions
  • linux ~/.vscode/extensions

You can change the location by starting VS Code with the--extensions-dir <dir>command lineoption.

Every time I try to install an extension I get an ETIMEDOUT connection error

You might see this error if your machine is going through a proxy server to access the Internet. Watch theproxy server supportsection in the configuration topic for more details.

Can I download an extension directly from the Marketplace?

Some users prefer to download an extension once from the Marketplace and install it multiple times from a local share. This is useful when there are connectivity issues or if your development team wants to use a fixed set of extensions.

To download an extension, go to the details page of the specific extension within theMercado. On that page there is adownload extensionlink noResourcessection, located on the right side of the page.

Once downloaded, you can install the extension via theInstall from VSIXcommand from the Extensions view command drop-down menu.

Can I stop VS Code from providing extension recommendations?

Yes, if you prefer VS Code not to show extension recommendations in the Extensions view or via notifications, you can modify the following settings:

  • extensions.showRecomendacionesOnlyOnDemand- Set to true to remove theRECOMMENDEDsection.
  • extensions.ignoreRecommendations- Set to true to mute extension recommendation notifications.

oShow recommended extensionsThe command is always available if you want to see the recommendations.

Can I trust Marketplace extensions?

The Marketplace runs a virus scan on each released extension pack to ensure its security. Virus scanning is performed for each new extension and for each extension update. Until verification is fully completed, the extension will not be published on the Marketplace for public use.

Marketplace also prevents plugin authors from hacking official publisher names like Microsoft and RedHat.

If a malicious extension is reported and verified or a vulnerability is found in an extension dependency:

  1. The extension is removed from the Marketplace.
  2. The extension is added to a removal list so that if it was installed, VS Code will automatically uninstall it.

The Marketplace also provides resources for making an informed decision about which extensions to install:

  • Ratings and reviews- Read what others think about the extension.
  • questions and answers- Review existing questions and the editor's response level. You can also contact the extension editors if you have questions.
  • Problems, repository and license- Check that the publisher has provided them to you and that they have the support you expect.

If you see an extension that looks suspicious, you can report it to the Marketplace with thereport abuselink at the bottom of the extensionMore informationsection.

(Video) 25 VS Code Productivity Tips and Speed Hacks

12/07/2022

Videos

1. Visual Studio Code Extensions to Improve Your Productivity
(freeCodeCamp.org)
2. Visual Studio Code and C#: Getting started using these 6 extensions
(Everything C#)
3. 5 Tools that make you Code Faster | using VSCode Extensions
(Apna College)
4. LIVE 🔴: Build your first VS Code extension
(Visual Studio Code)
5. Visual Studio Code - Project Manager Extension
(CompuMatter, LLC)
6. 🔴 Top VS Code Tips, Tricks & Extensions to supercharge your workflow
(Visual Studio Code)
Top Articles
Latest Posts
Article information

Author: Jeremiah Abshire

Last Updated: 26/04/2023

Views: 5809

Rating: 4.3 / 5 (74 voted)

Reviews: 81% of readers found this page helpful

Author information

Name: Jeremiah Abshire

Birthday: 1993-09-14

Address: Apt. 425 92748 Jannie Centers, Port Nikitaville, VT 82110

Phone: +8096210939894

Job: Lead Healthcare Manager

Hobby: Watching movies, Watching movies, Knapping, LARPing, Coffee roasting, Lacemaking, Gaming

Introduction: My name is Jeremiah Abshire, I am a outstanding, kind, clever, hilarious, curious, hilarious, outstanding person who loves writing and wants to share my knowledge and understanding with you.