VS Code Extension resources

I've written my first VS Code extension and am excited about the results. I'm using my extension daily and found it a great way to learn TypeScript - by practice rather than just theory.

The ecosystem and community around VS Code extensions is great and once you understand the tools and flow it is fun to build and extension.

I'd like to contribute to the community by sharing steps and resources I've compiled around extension development. From writing your first extension or using a template, to installing and running and then finally sharing with the world.

https://michaelcurrin.github.io/dev-cheatsheets/cheatsheets/vscode-extensions/

Here is a snippet from the summary of how to make a new extension, assuming you have Node.js installed and are in a directory like ~/repos/ already.

$ npx yo code

The generated project has some explanatory docs but I'd hope you'll read the material in my link above.

In Resources, I've included links to some extensions I used as a reference for making my own. I started off by running a fully-fuctional extension locally from a cloned repo then tweaked it and reverse-engineered it. Then I took the best parts for my own repo. I did this a few times to absorb experience and code from each. I found learning by example helped me a lot here but you can of course build up functionality piecemeal.

The amazing thing about extensions is that they are open source and so any extension you find or install is available for you to inspect the code. From extensions that insert emojis to giving your encouraging messages to letting you run containers easier, there is so much variety. I've listed extensions I use for work and personal coding here in a gist.

Please respect licenses and give credit where it is due.

I would also like to mention that im my nee Auto Commit Message extension, which I've linked on the Resources page, I've made exporting and then installing the extension globally
part of my NPM workflow, so that can use my extension as soon as I have made a code change. See package.json
file and the build and ext commands respectively. Note that you need vsce installed globally or in your dev dependencies for the first command.

Here is a sample from there. Intended for macOS or Linux.

{
  "scripts": {
    "build": "mkdir -p build && vsce package --out build/",
    "ext": "npm run build && code --install-extension $(ls -t build/* | head -n1) --force"
  }
}

I use ls to sort build output .vsix files by time and then install the latest one. Sorting name doesn't work for higher semver versions.

I hope these script commands can help others who are looking for something convenient.

Questions

What extensions are you working on?

What is missing from my links?