Venkat - An inline code snippet execution extension for VS Code (Made in GPT-4)

Venkat Subramaniam is a legendary speaker on the tech conference circuit whose presentations are famous for executing arbitrary code snippets and showing the results as a tooltip directly in the editor.

This makes it really great for videos or talks as you don't need a second output terminal to run your code and you can just continue explaining what you're doing.
The results go away afterwards, so you don't need to worry about that.

He even published a dedicated free course back in 2013 explaining how he does it using the TextMate editor.

Mark wanted to use a similar effect in his LearnDataWithMark videos, so we were unsuccessfully looking for a VS Code extension that does it.

Learn Data with Mark - YouTube

Weekly 5-7 minute videos on data and LLMs.

youtube.com

So what else could we do at 10pm than fire up ChatGPT4 to help us build one ourselves.
Keep in mind that we've never built a VS Code extension before, nor are we that good at Typescript.

We were following in the footsteps of Simon Willisons, who pointed out that with the assistance of GPT4, he's now able to take on and complete ambitious projects in a few hours instead of a few days.

GPT-4 did an excellent job, guiding us through the initial setup of all the package.json and launch.json files and putting together a minimal example for executing selected Python code.

Initially, just passing the code directly to the interpreter and capturing the result.

import * as vscode from 'vscode';
import { exec } from 'child_process';

export function activate(context: vscode.ExtensionContext) {
    let disposable = vscode.commands.registerCommand('extension.executePythonAndComment', async () => {
        let editor = vscode.window.activeTextEditor;
        if (editor) {
            let document = editor.document;
            let selection = editor.selection;
            let code = document.getText(selection);

            exec(`python -c "${code}"`, (error, stdout, stderr) => {
                if (error || stderr) {
                    console.log(`error: ${error ? error.message : stderr}`);
                    return;
                }
                editor.edit(editBuilder => {
                    let position = new vscode.Position(selection.end.line + 1, 0);
                    editBuilder.insert(position, `# Result: ${stdout}`);
                });
            });
        }
    });
    context.subscriptions.push(disposable);
}

We evolved it to run the whole file up to the end of the current line, which made it necessary to write out the content to a file and execute that file.
This design choice fortuitously opened up the opportunity to support different languages and not have to fiddle around with escaping symbols to avoid shell expansion.

Within two hours we had a working prototype and were happy.

GPT also provided us with instructions to package and publish the extension.
Somewhat surprisingly, it also did a better job of explaining the registration and publication process than the official documentation.

The most tricky part was selecting an icon, but we think we came up with a good one in the end!

Now you can install Venkat from the VS Code Marketplace.

This was fun, so we continued to add a few more features - of course, GPT-4 helped us with all the steps because what do we know :)

• executing selection or code up to the current line
• Language support for Python, Javascript, Typescript, PHP, Ruby, Java, Kotlin
• supporting multiline outputs
• inserting result as a comment or showing as info message (configurable)
• selecting the inserted result so it can be deleted or copied with a single keystroke
• configuring extra languages

We'd love for you all to try Venkat out, give us feedback or contribute to the project (e.g., by adding extra languages or features)