Introduction

Introduction

Lets now look at the code

import * as vscode from 'vscode';
export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension "todo" is now active!');
	let disposable = vscode.commands.registerCommand('todo.helloWorld', () => {
		vscode.window.showInformationMessage('Hello  from sachins Todo!');
	});
	context.subscriptions.push(disposable);
}
export function deactivate() { }

Lets Look at the three command

• registerCommand
• showInformationMessage
• push

and make a custom example to understand whats happening.

vscode.commands.registerCommand("Name_extension.function_name",callback)

The callback will be an anonymous function so when we invoke the function this anon function will be called. So in our function we will call the vscode.window.showInformationMessage() function. This function will output a message and will have arguments which are buttons for it which we will see now.

vscode.commands.registerCommand("todo.askQuestion", () => {
			vscode.window.showInformationMessage("Hey this is sachin testing", "Yay?", "Nay?");
		}));

Next we need to use the context.subscriptions.push() function to ensure that all disposable objects from our creations gets removed when vscode like disables our extension and does not restart. So even if we don't add to subscription array it will work but may cause unintended consequences. Basically dispose of listener when its done.

The commands.registerCommand() returns a disposable object.

commands trigger actions in vscode. There are large number of inbuilt commands.

Creating new commands

To create a new command in our extension we will need to use commands.registerCommand() this registers our command id to a handler. What it means is that for our example command askQuestion() we bind a handle function which does something. In our case we have a anon function which runs the showInformationMessage() function.

A good example from docs added as well

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  const command = 'myExtension.sayHello';

  const commandHandler = (name: string = 'world') => {
    console.log(`Hello ${name}!!!`);
  };

  context.subscriptions.push(vscode.commands.registerCommand(command, commandHandler));
}

Now when ever we run the extension.Command_id the handler function gets executed.

Exposing command to command pallet

We now registered our command Id to a function. However we need to expose this to the command pallet. For this we need to add this to contribution in the package.json file.

This is how the section of Json looks like after registering askQuestion

"contributes": {
		"commands": [
			{
				"command": "todo.helloWorld",
				"title": "Hello World"
			},
			{
				"command": "todo.askQuestion", ---> the one we added
				"category": "todo",
				"title": "Ask Sachin"
			}
		]
	}

In contributions we can add category for the command which will show what extension is associated with the command in the command pallet eg todo:askQuestion

Next we need to add the function to activationEvents like this in package.json

activationEvents": [
		"onCommand:todo.helloWorld",
		"onCommand:todo.askQuestion",
		"onCommand:todo.welp"
	]

We need to add stuff at activation and contribution in package.json to expose the functions

The showInformationMessage can also accept user inputs. So we can say like this

function welp(): any {
		vscode.window.showInformationMessage("This is the welper", "yay", "nay", "boo");
	}

This will have 3 buttons. Now we can get response from it. The function showInformationMessage is of type thenable meaning it returns a promise

we can use async and await then as follows. Along with that we can make the response as follows.

context.subscriptions.push(
		vscode.commands.registerCommand("todo.askQuestion", async () => {
			const answer = await vscode.window.showInformationMessage(
				"Hey this is sachin Hows the day lads?",
				"Yay?",
				"Nay?"
			);

			if (answer === "Nay?") {
				vscode.window.showInformationMessage("Sorry to hear that bud :(");
			} else {
				console.log("Good to see you are happy ;)");
			}

		}));

Summary

• We make a function in extension.ts
• Register that function to "extension.name" using the registerCommand
• Push the registered command to context.subscription
• Go to packagae.json and add the regisregisteredted functions to activationEvents and categories