Build And Publish A VS Code Extension Using Javascript

In this post, i will show you how to build and publish a vs code extension. We are gonna build a simple extension that translates text to any language. Let's get straight to it.

The first thing you need to do is to make sure you have Git and Node.js installed. Then we will have to install Yeoman and VS Code Extension Generator, we can install the using this command:

npm install -g yo generator-code

Once it is installed, run this command:

yo code

This will prompt you some options similar to the image below

This will create a new extension project in the current directory. Open the project in VS Code, and it should look like this:

In the 'extension.js' file, replace the code in there to the code below

// The module 'vscode' contains the VS Code extensibility API
// Import the module and reference it with the alias vscode in your code below
const vscode = require('vscode');

// this method is called when your extension is activated
// your extension is activated the very first time the command is executed

/**
 * @param {vscode.ExtensionContext} context
 */
function activate(context) {

	// Use the console to output diagnostic information (console.log) and errors (console.error)
	// This line of code will only be executed once when your extension is activated
	console.log('Congratulations, your extension "easy-translator" is now active!');

	// The command has been defined in the package.json file
	// Now provide the implementation of the command with  registerCommand
	// The commandId parameter must match the command field in package.json
	let disposable = vscode.commands.registerCommand('easy-translator.easyTranslator', function () {
		// The code you place here will be executed every time your command is executed
		
		const editor = vscode.window.activeTextEditor;
		const selectedText = editor.selection
		const text = editor.document.getText(selectedText)


		const data = JSON.stringify([
			{
				"Text": text,
			}
		]);
		var XMLHttpRequest = require('xhr2');
		const xhr = new XMLHttpRequest();
		xhr.withCredentials = true;
		
		xhr.addEventListener("readystatechange", function () {
			if (this.readyState === this.DONE) {
				console.log(this.responseText);
				vscode.window.showInformationMessage(this.responseText);
				editor.edit(builder => builder.replace(selectedText, this.responseText))
			}
		});
		
		xhr.open("POST", "https://microsoft-translator-text.p.rapidapi.com/translate?to%5B0%5D=de&api-version=3.0&profanityAction=NoAction&textType=plain");
		xhr.setRequestHeader("content-type", "application/json");
		xhr.setRequestHeader("X-RapidAPI-Key", "YOUR-RAPIDAPI-KEY");
		xhr.setRequestHeader("X-RapidAPI-Host", "microsoft-translator-text.p.rapidapi.com");
		
		xhr.send(data);






		
		// Display a message box to the user
		// vscode.window.showInformationMessage('Hi guys, subscribe!');
	});

	context.subscriptions.push(disposable);
}

// this method is called when your extension is deactivated
function deactivate() {}

module.exports = {
	activate,
	deactivate
}

The code above will get a selected text, and convert that to german when the extension is run. Let's test this out.

To run this extension, press f5, this will open a new vs code window with the extension activated.

So to test this, select a text in the editor, and open your command pallete by running CMD+SHIFT+P(on mac) or CTRL+SHIFT+P(on windows), and run Hello World(you can change this name), this will then convert the text you selected into a json response, the response will contain the language of the text you selected and also the translated version of that text in german. The image below shows the process:

It is that easy to build a vs code extension, if you want to watch the full and detailed 20 minutes tutorial where i also show how to publish the extension to the vs code marketplace, click the video below: