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.
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
(@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)
Typescript Vue Plugin and
(@builtin) Typescript Language Features
Note: This extension is only handling the
recommendationsare 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
- 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.
unwantedRecommendations are defined
When opening a workspace/folder, this extension checks all configured
unwantedRecommendationsand reports the still enabled extensions:
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)
You / the developer can now disable the extensions manually
- preferably using the Disable (Workspace) action!
On the next restart/reload of VS Code, the extension will check again and notify that all is fine
unwantedRecommendations-extensions are disabled)
No unwanted recommendations defined
Furthermore, when there is no extension defined as
unwantedRecommendations, this extension will show the following information:
When manually checking using the command (see below) and no
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)
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.
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)
code. --disable-extension vscode.typescript-language-features
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.
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
- 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
- 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