Developing VS Code extensions

TL;DR

If you want to skip the guide and go straight to the code, check out the repo. Otherwise, read on!

What is VS Code?

I hope that most of you at least heard about VS Code. For those who didn’t — VS Code is a lightweight, cross-platform development environment created by Microsoft, that runs on Electron. VS Code describes itself as just a code editor but with various extensions that the user can install it comes near to being a fully integrated development environment (IDE).

Why build an extension?

Just for fun 🤹‍♀️

There’s a lot you can do with Extension API to play and experiment with how VS Code looks and works. Was there something that kept triggering you? You can change it. Something that was missing? You can add it. And on top of that, you can play a little with TypeScript and there’s no such thing as too much TypeScript fun.

Learning 📚

There’s always a bit of knowledge that comes with writing code. So by creating an extension not only will you learn how VS code works but also you will gain some overall programming skills.

Fame ⭐

You can create an extension that everyone will love and end up giving something back to the community. And there’s a lot of GitHub stars coming along with that.

How to create an extension?

To generate an extension there are two tools needed — yeoman, that helps to kickstart a new project, and vscode-generator-code, which is a generator build with yeoman by VS Code team. The generator scaffolds a project ready for development. I’m assuming that you have npm already installed. And VS Code. Although, I once saw someone creating a VS Code extension in Notepad++, so maybe VS Code is not a mandatory thing 🙃.

yo code!
  • What type of extension is it going to be? In this article, I will only describe the first kind — TypeScript extension.
  • What will be the name of it? Use your imagination. I will go with test. Literally no imagination, sorry 🤭.
  • What will be the identifier? Can be the same as the name.
  • What’s the description? It can be filled later on.
  • What’s the publisher name? You can type anything for now. Your handle for example. I’ll provide a decent explanation later in the article.
  • Should it initialize a git repository? Why not.

What’s inside of the extension?

Let’s go through the project structure and see what was generated.

Generated files structure
  • Information needed by VS Code to create an extension — at the top
  • Information needed by npm to download proper dependencies and build the project — at the bottom
  • main: tells what’s the extension entry point, where to find it
  • engines: states which versions of VS Code the extension will support
  • categories: allows to set the type of the extension. It can be one of the following:
Languages, Snippets, Linters, Themes, Debuggers, Formatters, Keymaps, Other
  • contributes: things specified in there will be exposed to the user configuration entries, for example, new commands that will be added to the command palette or new keybindings
  • activationEvents: specifies when the activation event happens — when the extension will be loaded to VS Code. In contrast to some other IDEs that require a lot of time and annoyance to start, VS Code starts almost immediately, like in a couple of seconds, even if you have hundreds of extensions installed. That’s because VS Code loads the extensions in a lazy way — only if they are needed. So if you specify the activation event as onCommand it will be loaded after the first usage. But if you want the extension to be loaded from the beginning you have to set it to * . It contributes to the goal of having VS Code as lightweight as possible.
  • If it’s the first time of running this command — the activate function has not been executed since VS Code was launched — then activate is called
  • The activate function will register the command
  • If the command the user called is already registered then that command itself is executed

A little bit more complex example

Hello World example was cool, but nothing really happened here 😴. So, I’ve come up with some more or less real-life extension. It’s still very simple, but I’ll use more of VS Code Extensions API.

Publishing the extension

Okay, so there’s a working extension, but now I’d like people to start using it. Especially, since I know some that may benefit from this 🙊

npm install -g vsce

Creating a VSIX deployment package

This is the first way of sharing your extension. VSIX package it’s a .vsix file that contains one or more Visual Studio extensions. Once you have it you can send this package to whoever you want.

vsce package

Publishing an extension to the VS Code marketplace.

The first thing needed to do is to create a new publisher – an identity who can publish extensions to the Visual Studio Code Marketplace. To do it you need to have something called a personal access token (PAT) from Azure DevOps. If you don’t have an account in there, create one. It’s free. Once you have one and you’re on your organization page, find your avatar (or acronym) in the top right corner and go to the Security page. Notice the big blue button with a New Token label and click it. It will open a modal where are basically three things you need to do:

  1. Provide a name for the token
  2. Choose All accessible organizations in the Organizations dropdown
  3. In the Scopes section find Marketplace and check all the checkboxes
vsce create-publisher <publisher-name>
vsce publish -p <token>
vsce login

Wrapping up

VS Code is great 🎉 It’s lightweight, fully customizable and makes a nice playground to do cool stuff.

References

Docs with examples

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store