Create Extensions for VS Code - Part 1

I wanted to develop a *VS Code extension * to solve one of my daily problems, so I started to look at VS Code API

They have really awesome documentation and sample extensions which are really helpful.

I could run my first Hello world extension in less than 5 minutes.

It is very easy and super simple, come on let's see how to develop one.

Installation

Install the following Node modules for Kick Starting new extension Yeoman and VS Code Extension Generator

npm install -g yo generator-code

Create New Extension

Execute this command yo code and select New Extension -Typescript (Which is most recommended one) to create a new extension then answer questions. It will create a Hello World *boilerplate * and also Install required node modules.

Extension File Structure

This auto-generated extension has dozen of files, refer following images to know more about file structure.

But we are going to focus on only two files in major which are

• src/exntension.ts
• package.json

Run Extension

Running extension is pretty simple, Just go to debug menu from the left side menu or hit Ctrl+Shift+D keybinding, Then click Run Extension.

It will open a new window where your extension will be running, To confirm that you can see "Hello World" on the right bottom.

Okay, But How Does it work?

VS code Extension is all event-based, we need to define all our commands (actions) in package.json

Package.json

you can *package.json * files in the root dir, which holds the all the events inside of contributes -> commands, In this case, we have only one command which is extension.helloWorld

"contributes": {
        "commands": [
            {
                "command": "extension.helloWorld",
                "title": "Hello World"
            }
        ]
}

We enable our events by adding our commands into activationEvents

"activationEvents": [
    "onCommand:extension.helloWorld"
]

main property holds file path which will be executed at first, once the extension is activated

"main": "./out/extension.js"

Extension.ts

Good to see that, this file has very detailed comments for better understanding.

• function activate(context: vscode.ExtensionContext) - This Function executed at first when extension gets activated and our all business logic will lie here.

• vscode.commands.registerCommand('extension.helloWorld', () => {}) - Registering extension.helloWorld event with callback function.

• vscode.window.showInformationMessage('Hello World!'); - It makes message box on the right bottom

Finally, we should push our registered command into context.subscriptions

*Congratulations for your first vs code extension * 🎉🎉🎉🎉🎉

In the next article, I will explain how to implement the most common extension feature such as menus, settings, keybindings and status message bar.

If you have any issues or question please comment, I am glad to help you :D

Thank you !!!

This article originally published on Hashnode

Read Part two on Dev Blog or in Dev.to

Comments

[Thamaraiselvam]

@Lauret Brieu part two is published, dev.to/thamaraiselvam/create-exten...

[Thamaraiselvam]

Thanks for the comment @laurentbrieu , it will be in a couple of days.

[maryimana butom]

Hi 🖐🏿. Thank you for this publication. I feel I'm gonna enjoy the next part 🤗.

Edit: /I figured out that I'm discovering and learning from a 2019 publication, for me that proves how useful and concise your publication. Thank you again .
I hope you still out there to read my comment 😁
🙏🏿/

[AnfossiStudio]

Thank you very much ❤

[Thamaraiselvam]

Thank you so much for your comment. It means a lot 🙏🙏🙏

[Freeviw Official]

i really appreciate it