VS Code Extension: Unwanted Recommendations

This article will show you how we currently support developers, in case they need different VS Code extensions in different projects (workspaces/folders). Especially, we solve the issue that there is no automated way to disable specific extensions for specific projects or at least notify the user about these unwanted extensions.

I have created a VS Code extension, which supports the developers for this specific need.

Overview

This blog is separated into the following topics:

• Explaining VS Code
• Why would you need unwanted recommendations extension?
• How to use unwanted recommendations extension
• What does unwanted recommendations extension do?
• What does it look like?
• Limitations & Alternative extension
• TL;DR - Summary & future
• Links to related issues
• Feedback welcome

So, let's go!

Explaining VS Code

Working with VS Code usually means having a set of extensions, to improve your coding experience. Extensions are installed globally per user/machine (you can sync settings across devices using a user account). When you switch a workspace/folder, the same extensions are still enabled by default. If you want to disable an extension, you have the option to do so either globally or per workspace/folder.

When you work in bigger teams, you might want to share specific settings with other developers. This works already for VS Code settings, using the .vscode/settings.json file, which will configure the workspace automatically for every developer. This is called workspace settings and also appears in the specific tab of "Settings" within the UI:

However, until now, there is no such automated workflow for extensions, which would allow developers to configure using extension "A" in Project 1, but disable it for Project 2.

NOTE: The VS Code team seems to be working on a concept for sharing "profiles" across developers, also including extensions and hopefully their state. See remarks at the end of this article

Why would you need unwanted recommendations extension?

Maybe your tech stack is way different between projects, or you have suggestions to disable specific extensions in new projects. For example, you use different frontend frameworks or backend technologies.

Example case: Vue.js

You might work with Vue 2 and Vetur. But now Vue 3 recommends using the extension Volar instead.
Volar recommends disabling specific extensions like Vetur and (@builtin) Typescript Language Features.


If you are still maintaining Vue 2 code, while digging into Vue 3 to build new projects, you don't want to globally disable these extensions. Also, it's not just about you, there might be other developers as well.
How do you teach them to disable these extensions?
Until there is a solution from Microsoft and the VS Code team, this extension might be able to help you:

How to use unwanted recommendations extension

I have created a VS Code extension, which helps out when you need to make sure that specific extensions are disabled for a given workspace. Let's get things done now:

1) Install the extension in VS Code

Simply search for "GARAIO" or "Unwanted recommendations" in the VS Code integrated extension marketplace. Or go to this marketplace page of the extension.

2) Configure unwanted extensions

This extension allows you to put unwanted extensions, into the .vscode/extensions.json file, which also seems to support the property unwantedRecommendations. (kind of - the property is auto-completed and documented, but nothing happens with those extensions yet)

Put the ids of the VS Code extensions you recommend to disable, in this property's array.

Every extension has an ID, you can find it on the cog-icon

Following is an example to recommend our Unwanted recommendations and Volar extension and to NOT recommend (disable) Vetur, Typescript Vue Plugin and (@builtin) Typescript Language Features

.vscode/extensions.json

{
    "recommendations": [
        "GARAIOAG.garaio-vscode-unwanted-recommendations",
        "vue.volar"
    ],
    "unwantedRecommendations": [
        "vscode.typescript-language-features",
        "octref.vetur",
        "vue.vscode-typescript-vue-plugin"
    ]
}

Note: This extension is only handling the unwantedRecommendations.
The recommendations are already handled by VS Code, which brings up pop-up notifications when opening a workspace/folder.

 

Sharing with others

To make sure every developer in your team has installed this extension, I have already added it to the recommendations in the above code example. So if a developer hasn't the extension yet, VS Code will recommend an installation of it.

GIT: If you want to share these recommendations with other developers in your team, make sure to commit to this file and push it to your repository.

3) Restart VS Code / done

Reopen the configured workspace/folder and await the notifications. (see screenshots below)

What does unwanted recommendations extension do?

• When opening the workspace/folder, this extension will automatically run if the .vscode/extensions.json file exists.
• If there are any unwantedRecommendations, it will go through them and check if the extension is enabled.
• If the extension is enabled, it will show a warning message including information to disable the extension manually.
• When all extensions are checked, a popup will also ask to show all extensions which should be disabled in the existing extension gallery.

After the user disabled all unwanted extensions, the workspace should work fine, even after restarts/reboots. A short confirmation message will show this.

What does it look like?

In the following, you can find screenshots showing the different scenarios.

If unwantedRecommendations are defined

1. When opening a workspace/folder, this extension checks all configured unwantedRecommendations and reports the still enabled extensions: 
   
   

2. After clicking "yes" on the provided popup, it will bring you to the extensions, to disable them manually:
   (the marketplace list will be already filtered to the specific extensions)
    

3. You / the developer can now disable the extensions manually
   - preferably using the Disable (Workspace) action!
   
   

4. On the next restart/reload of VS Code, the extension will check again and notify that all is fine
   (if all unwantedRecommendations-extensions are disabled)
    

No unwanted recommendations defined

Furthermore, when there is no extension defined as unwantedRecommendations, this extension will show the following information:

1. No unwantedRecommendations configured within extension.json 

2. When manually checking using the command (see below) and no extensions.json file exists: 

    

Extension command: Execute the check manually

You can also execute the check manually, using the VS Code command:
Open the command palette (CTRL+SHIFT+P) and search for Check for unwanted recommendations (extensions)

Limitations

When I created the extension, my first goal was to automatically disable the extensions.
Unfortunately, this seems impossible, at least not in the running instance of VS Code. It looks like it would always need a restart, which is not the best experience in my eyes.

This was not well documented, with this issue, we clarified the situation about this option and they already improved  the description:

So this works only for this running instance, so you would always have to start your workspace/folder as follows. (assuming you are in the project directory)

Alternative extension

There is another extension called "Disable Extensions", which disables the extension in an above-explained way when opening a workspace. But because of the limitations, it will only work with an additional reload of VS Code.

My special thanks go to "muzaisimao" and his "Disable Extensions"-extension. It inspired me, to write my own extension which is based on it.

TL;DR - Summary

So, this was a lot. To sum it up, with the extension "unwanted recommendations" you can get the following help:

• Configuration is super easy and re-uses VS Code's .vscode/extensions.json file
• The extension will check and report, during every workspace opening.
• You get notified if there are extensions enabled that are unwanted.
• Automatic filtering for only those extensions will help the developer to disable them manually for the given workspace.
• A developer has to do this only once per workspace as long as the recommendations are not changed.
  
  

Future - What to expect

• If the extension could automatically disable these extensions, the user would not have to do it manually (probably not possible)
• Whenever VS Code Team finishes the "profiles" feature, we might be able to load profiles with the workspaces, hopefully supporting automatically enabling and disabling the wanted extensions. There are still discussions ongoing on the issues.

Links to related issues/extensions

Related extensions:

• My extension: "Unwanted recommendations"
• Extension alternative: "Disable Extensions"

Documentation:

• Vue 3: Volar takeover mode

Related issues:

• Volar - Discussions: Takeover mode
• VS Code: Feature Request: Enable/disable extensions from config file
• VS Code: Disabling extension issues
• VS Code: Profile export/import issues
• VS Code: All issues with label user-profile

Feedback welcome

Please let me know if this extension is of any use to you.
I am available for any questions and discussions on GitHub.