How to set up multiple extensions on VSCode

How do you share multiple extensions between colleagues or friends who are working on the same project?

How to set up multiple extensions on VSCode

How do you share multiple extensions between colleagues or friends who are working on the same project?


1. VSCode Workspaces

VSCode workspaces allow us to recommend which extensions the user can install. All we have to do is commit an extensions.json file at the .vscode/ directory. A popup will appear when we open the project and we can choose to install any or all of the extensions with a simple click.

Managing Extensions in Visual Studio Code
Discover, add, update, disable and uninstall Visual Studio Code extensions (plug-ins) through the Extension Marketplace.

Pros:

  • offers a one-click installation in the editor
  • we can customize specific extensions for each project (e.g. TSLinter for typescript projects or crates for rust projects)

Cons:

  • requires a .vscode folder or workspace

2. Expansion Pack

VSCode allows us to package expansion packs in the form of a .vsix VSCode extension (optionally publish it on the marketplace).

E.g. @category:"extension packs" on the extension market place.

Pros:

  • User can just search on the market place and install

Cons:

  • Troublesome to implement - need to generate the extension template, then add the extensions, then package it
  • Uninstalling the extension pack will uninstall every single extension in the pack regardless of whether it was preinstalled or not
  • We have to maintain a market place account

3. Installing via the CLI

VSCode has a --install-extension command where you can install extensions through their marketplace id.

example: code --install-extension dbaeumer.vscode-eslint --install-extension dbaeumer.vscode-eslint

Pros:

  • 0 maintenance of any marketplace accounts or code
  • Could be stored and shared with anyone easily

Cons:

  • VSCode needs to exist on the system PATH (i.e. zip versions need extra work)

Fin

Using .vscode workspaces to manage extensions seems to be the most elegant solution. It adds a bit of clutter to your project via a dotfile, but you could customize different extensions for different projects. If a project requires GraphQL, you could add a related extension. If a project is VueJS based, you could add the extension too. The decluttering of extensions will then fall on to the individual developers.

Photo by Lisa Fotios from Pexels