You: write a hello world plugin for vscode in javascript
JARVIS:* Sure, here is a simple example of a "Hello World" extension for Visual Studio Code using JavaScript:
const vscode = require('vscode');
/**
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
let disposable = vscode.commands.registerCommand('extension.helloWorld', function () {
vscode.window.showInformationMessage('Hello World!');
});
context.subscriptions.push(disposable);
}
exports.activate = activate;
function deactivate() {}
module.exports = {
activate,
deactivate
}This code creates a new command extension.helloWorld that, when executed, shows an information message in the VS Code window with the text "Hello World!". The activate function is called when your extension is activated and the deactivate function is called when your extension is deactivated.
You: great, thanks, where do I have to put it so I can test it?
JARVIS:* To test your new "Hello World" extension in Visual Studio Code, follow these steps:
- Open Visual Studio Code.
- Press
Ctrl+Shift+Pto open the Command Palette. - Type
Extensions: Open Extensions Folderand pressEnter. This will open the extensions folder in a new VS Code window. - In the extensions folder, create a new folder for your extension, e.g.,
hello-world. - Inside the
hello-worldfolder, create a new file calledpackage.jsonwith the following content:
{
"name": "hello-world",
"displayName": "Hello World",
"description": "A simple Hello World extension for Visual Studio Code",
"version": "0.0.1",
"publisher": "Your Name",
"engines": {
"vscode": "^1.0.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:extension.helloWorld"
],
"main": "./extension.js",
"contributes": {
"commands": [{
"command": "extension.helloWorld",
"title": "Hello World"
}]
}
}-
Also in the
hello-worldfolder, create a new file calledextension.jsand paste the JavaScript code I provided earlier. -
Save all files and close VS Code.
-
Reopen VS Code and press
Ctrl+Shift+Pto open the Command Palette. -
Type
Hello Worldand pressEnter. You should see a pop-up message saying "Hello World!".
Please replace "Your Name" with your actual name in the publisher field of the package.json file.
You: I don't see my extension in the command palette
JARVIS:* I apologize for the confusion. To test your extension, you need to run it in an Extension Development Host window. Here are the steps:
- Open Visual Studio Code.
- Open your extension's folder (the
hello-worldfolder) in VS Code. - Press
F5or go to the Debug view (the bug icon on the left sidebar) and click the green 'Start Debugging' button. This will open a new VS Code window titled[Extension Development Host]. - In the new window, press
Ctrl+Shift+Pto open the Command Palette. - Type
Hello Worldand pressEnter. You should see a pop-up message saying "Hello World!".
The [Extension Development Host] window is a fully-functioning VS Code window where your extension is loaded. Any changes you make to your extension's code will be reflected in this window after you save the files and press F5 again.
You: how can I use the extension in a normal vscode window?
JARVIS:* To use your extension in a normal Visual Studio Code window, you need to package and install it. Here are the steps:
-
Install the
vscecommand-line tool. This is the Visual Studio Code Extension Manager. You can install it with npm by runningnpm install -g vscein your terminal. -
Open a terminal in your extension's folder (the
hello-worldfolder). -
Run
vsce package. This will create a.vsixfile in your extension's folder. -
Open Visual Studio Code.
-
Go to the Extensions view (the square icon on the left sidebar).
-
Click the
...button in the upper-right corner of the Extensions view and selectInstall from VSIX.... -
Navigate to your extension's folder, select the
.vsixfile, and clickInstall. -
After the installation is complete, your extension will be available to use in all VS Code windows. You can run your
Hello Worldcommand from the Command Palette.
Please note that you need Node.js and npm installed on your machine to use the vsce command-line tool.
You: amazing, it works, how can I create a command that has access to the current editor file and can modify it?
JARVIS:* To create a command that can access and modify the current editor file, you can use the vscode.window.activeTextEditor object, which represents the currently active text editor. Here's an example of a command that inserts "Hello, World!" at the current cursor position:
const vscode = require('vscode');
/**
* @param {vscode.ExtensionContext} context
*/
function activate(context) {
let disposable = vscode.commands.registerCommand('extension.insertHelloWorld', function () {
const editor = vscode.window.activeTextEditor;
if (editor) {
const position = editor.selection.active;
editor.edit(editBuilder => {
editBuilder.insert(position, 'Hello, World!');
});
}
});
context.subscriptions.push(disposable);
}
exports.activate = activate;
function deactivate() {}
module.exports = {
activate,
deactivate
}And update your package.json file to include the new command:
{
"name": "hello-world",
"displayName": "Hello World",
"description": "A simple Hello World extension for Visual Studio Code",
"version": "0.0.1",
"publisher": "Your Name",
"engines": {
"vscode": "^1.0.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:extension.helloWorld",
"onCommand:extension.insertHelloWorld"
],
"main": "./extension.js",
"contributes": {
"commands": [
{
"command": "extension.helloWorld",
"title": "Hello World"
},
{
"command": "extension.insertHelloWorld",
"title": "Insert Hello World"
}
]
}
}Now, when you run the Insert Hello World command, it will insert "Hello, World!" at the current cursor position in the active editor.