GPT-4 teaches me how to create a VSCode extension

create_and_test_vscode_extension.md

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:

1. Open Visual Studio Code.
2. Press Ctrl+Shift+P to open the Command Palette.
3. Type Extensions: Open Extensions Folder and press Enter. This will open the extensions folder in a new VS Code window.
4. In the extensions folder, create a new folder for your extension, e.g., hello-world.
5. Inside the hello-world folder, create a new file called package.json with 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"
        }]
    }
}

6. Also in the hello-world folder, create a new file called extension.js and paste the JavaScript code I provided earlier.

7. Save all files and close VS Code.

8. Reopen VS Code and press Ctrl+Shift+P to open the Command Palette.

9. Type Hello World and press Enter. 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:

1. Open Visual Studio Code.
2. Open your extension's folder (the hello-world folder) in VS Code.
3. Press F5 or 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].
4. In the new window, press Ctrl+Shift+P to open the Command Palette.
5. Type Hello World and press Enter. 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:

1. Install the vsce command-line tool. This is the Visual Studio Code Extension Manager. You can install it with npm by running npm install -g vsce in your terminal.

2. Open a terminal in your extension's folder (the hello-world folder).

3. Run vsce package. This will create a .vsix file in your extension's folder.

4. Open Visual Studio Code.

5. Go to the Extensions view (the square icon on the left sidebar).

6. Click the ... button in the upper-right corner of the Extensions view and select Install from VSIX....

7. Navigate to your extension's folder, select the .vsix file, and click Install.

8. After the installation is complete, your extension will be available to use in all VS Code windows. You can run your Hello World command 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.