Have you ever developed a VS Code Extension?

#opensource #vscode #extensions #tutorial

Hello everyone and welcome back to MonDEV!

Ready for a new week full of good code? This week, let's focus on project ideas, and I ask you: have you ever developed an extension for VSCode?

I've often thought about it, but it hadn't happened to me until last week, even though I knew sooner or later I would delve into it, partly out of curiosity and the desire to experiment, and partly because I love developing tools that can be useful to other developers. So a few days ago, quite randomly, I created my test-extension, which we'll find out later is something quite familiar actually.

Probably to have fun with a project like this, the extension doesn't need to be huge, but something small can still be very satisfying. Alternatively, if you have a project that you've already developed and that is developed for CLI, it probably can be adapted to a project of this kind quite well.

First of all, to get started, you start by creating a project; you can do this by running this command:

npx --package yo --package generator-code -- yo code

The script will ask you some questions to create the project, after which it will create the folder and install all the necessary dependencies.

Once the project is created, there are two main files you'll start working with: package.json and src/extension.ts.

In the package.json file, in addition to the usual information about the installed packages, runnable scripts, etc., there are some keys that allow you to configure your extension. Specifically, within a newly created project, you'll find the activationEvent array, which will currently be empty, where you can insert all the events that can activate your extension; you'll then find the contribute.commands array, which will contain the command your-extension-name.helloworld. This array of commands is what allows you to add commands to the VSCode command palette, where we launch who knows how many commands every day. I leave here the documentation for the contributions section, which extends well beyond commands. A couple of suggestions to delve into in this case could be the menus, keybindings, and snippets sections.

The src\extension.ts file is instead the real heart of our extension, where the code resides that is executed when it runs. You'll immediately see the activate() function. This function is called when the extension is first activated, and indeed just below you can see the registration of the command we mentioned earlier, in the package.json. Inside the callback of the vscode.commands.registerCommand function, you'll find all the code executed when the registered command is called from the palette. If you want to test the extension, simply press F5 from within this file.

In extensions, everything starts from the vscode library; some examples to get started orienting yourself can be these:

vscode.commands: contains all the functions related to commands, allowing their registration, listing, or even direct execution
vscode.window: a very comprehensive class that essentially contains every element that can appear in the window: the methods showQuickPick or showInputBox allow you to receive additional input from the command palette, showTextDocument allows you to open the editor of a specific file, showInformationMessage simply opens the message at the bottom left.
vscode.workspace: provides access to the current workspace. An example that can be useful is the constant vscode.workspace.rootPath which contains the root of your project if you want to work with the file system

One further small note: the extension is written and built with TypeScript. If you need to add files that are not handled by the TypeScript Compiler, you'll have to implement copying these files yourself.

Ops I did it again...

I told you earlier that I started from an existing codebase to build my extension. This is because I'm preparing the VSCode extension of Make Js Component! This is so I can always have it at hand for those who want to use it without needing to remember the command or necessarily go through the terminal and its wizard. The repo is already public and you can find it here but as you can see it is not yet published on the VSCode store nor is it properly organized to receive contributions. If you want to encourage the evolution of the project, you can still leave a star, I'll definitely appreciate it a lot, or contribute to the starting library, since I hope to bring most of its functionality to the extension soon, as long as it maintains its immediacy. I'll definitely let you know when the actual extension is published.

In the meantime, I hope this little Monday spark was interesting for you and that maybe you'll want to try creating your own extension, starting from here. If you do, let me know! I'm always on the lookout for new ideas and projects, as you can well imagine! ;) And I'm still happy if I can offer a good suggestion!

Now I'll leave you, wishing you a good start to the week!
Happy Coding! 0_1