What is an extension pack?
This is lifted straight from the VS Code API docs but it does a perfect job of summarising what an extension pack is:
An Extension Pack is a set of extensions that will be installed together. This enables easily sharing your favourite extensions with other users or creating a set of extensions for a particular scenario like PHP development to help a PHP developer get started with VS Code quickly.
Why do it?
I’ll start with a little back story if you’ll allow me. I joined Wealth Wizards as a Junior Software Engineer about 5 months ago, this is my 1st programming job and pairing was an integral part of my on-boarding, without I’d have really, really struggled. An issue that occurred a few times in my 1st week was my editor of choice (VS Code) not honouring our editorconfig files and not respecting our ES Lint rules. This was fixed fairly easily. (As a side note: Wealth Wizards are happy for any software engineer to use the editor they please but I think about half of us here use VS Code.)
About 2 months ago we had new Junior Software Engineer (yes, no longer the noob). After an initial week or 2, us 2 juniors started pair programming. We got on great! We blasted though story after story after story, our code flew though our QA and validation processes. (We work in the financial industry with strict regulation so all our numbers and features are checked by financial advisors working in-house.) We were quicker than anyone expected 2 noobs to be.
Inspired by our remarkable pairing success we started encouraging pairing for all of our software engineers. This lead to 1 of my colleagues suggesting a funky new VS Code extension: VS Code Live Share. It’s kind of a Google Docs for code and it immediately overcame the issue we’d seen when pairing previously.
More of our software engineers started using VS Code when pairing so we had more people facing similar issue to the ones I faced shortly after joining.
If only there was a way of giving new starters or software engineers new to VS Code a quick, easy way of getting the setup they need.
Well there is: a VS Code Extension Pack.
As described earlier a VS Code Extension Pack is just a list of extensions that will be installed. You install one extension pack, VS Code pulls the other extensions listed. The Wealth Wizards extension pack can be found here: WW Extension Pack.
How to do it?
There’s a lot of blog posts about this and some really good documentation from Microsoft. I’ll share a rough outline of what I did and provide links for things that are a bit more in depth.
- Install
yoandvsce. Yo is an npm package (npmjs.com) used to generate a code template for the extension pack and vsce (npmjs.com) is used to build and publish extension - Run
yo codeand selectNew Extension Packto generate the extension pack template, this also generates a few useful files with additional info. - Edit the
"extensionPack":array inpackage.jsonwith the publisher and extension details of the extensions you want (see below). - Build the extension:
vsce package. This will build an*.vsixfile that you can pass around your organisation as needed if you don’t intend to publish your extension pack. Or, optionally: - Using
vsce publish <version>you can publish the extension pack to the VS Code marketplace.
The above list is really just a summary of this blog post from Microsoft.
Publishing the extension is just as easy. Again, I’ll sum up the steps I took but here’s a link to the docs from Microsoft.
- Sign up at Azure DevOps Services here.
- Set up an organisation. At Wealth Wizards that was done for me by 1 of our platform engineers.
- Generate a
Personal Access Tokenunder your account settings > Security > Personal Access Token - Use
vsceto login to that publisher so the extension can be published:vsce login (publisher name) - Publish the extension:
vsce publish minor
That’s a really quick summary of what I did but the blogs and docs from Microsoft go in to a lot more detail.
That’s it though, a really easy way to on board new engineers or people new to VS Code by publishing a list of useful extension. I hope that helps.
If you’re interested here’s the Wealth Wizards Extension Pack on the VS Code Marketplace and here’s a link to the Github repo.
Links
