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 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.
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.
- How to write an extension pack
https://code.visualstudio.com/blogs/2017/03/07/extension-pack-roundup - How to package the extension pack (skip all of the publishing parts)
https://code.visualstudio.com/api/working-with-extensions/publishing-extension#packaging-extensions - How to install the packaged VSIX extension pack
https://github.com/eamodio/vscode-gitlens/wiki/Installing-Prereleases-(vsix)
open the extension tab in vscode > click on the 3 dots on the top right corner > install from VSIX - Alternate way to install VSIX extension pack
code --install-extension demo-extension-pack-0.3.6.vsix
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
