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:




Post a Comment

0 Comments