Getting started

with VSCode-Extension Development

Why VSCode ?

Light-weighted and available for different platform

 

Edit, build and debug with ease

 

Visual Studio Code allows you to edit code in a wide variety of programming languages.

 

Customize every feature to your liking and install any number of third-party extensions

 

 

0
 Advanced issue found
 

Pre-requisites

Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications

0
 Advanced issue found
 
npm install -g yo
npm install -g yo generator-code

Yomen

VSCode extension generator

VSCode

Yeoman is a generic scaffolding system allowing the creation of any kind of app. It allows for rapidly getting started on new projects and streamlines

Generator skeleton

Hello World Toaster walkthrough

0
 Advanced issue found
 

package.json

extension.ts

Synonym Finder extension

Demo

Synonym Finder extension

import * as vscode from 'vscode';

const findSynonym = (context: vscode.ExtensionContext) =>{
	let disposable = vscode.commands.registerCommand('extension.findSyn', () => {
		vscode.window.showInformationMessage('Find syn activated!');
	});

	context.subscriptions.push(disposable);
}

export function activate(context: vscode.ExtensionContext) {
	console.log('Congratulations, your extension "findSynonym" is now active!');
	
	findSynonym(context);
}

export function deactivate() {}

Get started

Create synonym finder extension

const editor = vscode.window.activeTextEditor;
	if(!editor){
		vscode.window.showErrorMessage("Editor doesnot exist")
		return
	}
const text = editor.document.getText(editor.selection);

Get active text from editor

Use fetch for api-call

const response = await fetch(
  `https://api.datamuse.com/words?ml=${text.replace(" ", "+")}`
);
const data = await response.json();
import fetch from "node-fetch";
yarn add node-fetch && yarn add @types/node-fetch

Introduction about QuickPick

Refrence from vscode-extension-samples

const quickPick = vscode.window.createQuickPick();
		quickPick.items = data.map((x:any) => ({ label: x.word }));
		quickPick.onDidChangeSelection(([item]) => {
			if(item){
				//keep replacement text
			}
		});
		quickPick.onDidHide(() => quickPick.dispose());
		quickPick.show();
	
editor.edit(edit => {
	edit.replace(editor.selection, item.label);
});

Replace selected text in editor

Key binding

"keybindings": [
    {
      "command": "extension.insertConsole",
      "key": "shift+ctrl+l",
      "mac": "shift+cmd+l"
    },
    {
       "command": "extension.deleteAllConsole",
       "key": "shift+ctrl+d",
       "mac": "shift+cmd+d"
	},
	{
       "command": "extension.quicPickExample",
       "key": "shift+ctrl+p",
       "mac": "shift+cmd+p"
	}
]

Demo

Console-me extension & code walkthrough

Publish

"publisher": "Aish"

Add publisher name

Create account and create personal access token

npm install -g vsce

Install vsce

vsce create-publisher (publisher name)

Create publisher name

vsce login (publisher name)

Publish!

vsce publish -p <token>
https://marketplace.visualstudio.com/items?itemName=Aish.replace-with-syn

Published!

Reference & Links

Thankyou!

https://marketplace.visualstudio.com/items?itemName=Aish.try

 

https://github.com/aishwarya4shrestha/console-me

0
 Advanced issue found
 
Made with Slides.com