Note: This article has been partially AI-generated.
I provided the bullet points, opinions, and examples to ChatGPT3.5 and generated the article. I may or may not have cleaned the article a bit after this.

AI generated articles have the ai-generated tag and might be manually re-edited in the future

I've recreated the chat before writing the article. Here's the link

My Experience Writing a Visual Studio Code Plugin with ChatGPT Assistance

Introduction

Embarking on the journey of creating a Visual Studio Code (VSCode) plugin was both exciting and challenging. To expedite the process, I decided to leverage ChatGPT for assistance. In this article, I'll share my insights, highlighting the advantages and challenges encountered during this development endeavour.

My plan is to create a plugin that given a class was able to link me to the test classes covering it. The plugin is expected to find those classes either by:

1. using an exact path (ie. /path/to/class/SomeClass.php is linked to /tests/Feature/path/to/class/SomeClassTest.php)
2. or by checking around the codebase for the @covers tags (my favourite option)

Perfect Bootstrap with ChatGPT

Starting from scratch in the world of VSCode plugin development can be intimidating. However, with ChatGPT's assistance, I found the perfect bootstrap. The initial set of files provided by ChatGPT allowed me to quickly set up the basic structure of my plugin. Within just 10 minutes, I had a test extension installed in a workspace, ready for testing.

ChatGPT provided me with the packages.json, tsconfig.json and even LICENSE.md when asked about it. When vcse package asked for a missing icon.png I just asked for a list of possible websites, landed on iconfinder.com and downloaded a free one

Navigating Errors and Challenges

While ChatGPT proved to be an invaluable resource, it wasn't without its hiccups. Many errors stemmed from instances where ChatGPT provided incorrect code or became confused with certain commands. This necessitated the application of my own experience and common sense to rectify issues and move forward.

At one point he asked me to use vscode module in extension.ts

import * as vscode from 'vscode';

But forgot to tell me to install @types/vscode.

Even so, when asked about the error it was quick to point out that I needed to install it.

The Challenge of Logic Implementation

Despite the initial success in setting up the project, one of the notable challenges was the difficulty in coaxing ChatGPT to generate the specific logic required for my VSCode plugin in TypeScript. Despite asking multiple times and in various ways, I struggled to make ChatGPT produce the precise code snippets needed for the intricate logic of the plugin.

If you're curious, this the last attempt before I gave up. It taught me how to create a command "linkTests" and it is a good attempt at creating the text decoration.

import * as vscode from 'vscode';

export function activate(context: vscode.ExtensionContext) {
  let disposable = vscode.commands.registerCommand('extension.linkTests', () => {
    const editor = vscode.window.activeTextEditor;
    if (editor) {
      const document = editor.document;
      const selection = editor.selection;
      const text = document.getText(selection);
      const coversRegex = /@covers\s+(\S+)/;
      const matches = coversRegex.exec(text);

      if (matches && matches.length > 1) {
        const coveredClass = matches[1];
        const testClassName = `${coveredClass}Test`;

        // Create a clickable link
        const link = `[See Tests: ${testClassName}](command:extension.openTestFile?${encodeURIComponent(JSON.stringify({ file: testClassName }))})`;

        // Create a text decoration to display above the class name
        const decoration = vscode.window.createTextEditorDecorationType({
          before: {
            contentText: link,
            color: new vscode.ThemeColor('editorLineNumber.foreground'),
            margin: '0 0 0 3em',
          },
        });

        // Get the position of the class name and add the decoration
        const position = new vscode.Position(selection.start.line - 1, 0);
        editor.setDecorations(decoration, [new vscode.Range(position, position)]);
      } else {
        vscode.window.showWarningMessage('No @covers tag found in the selected text.');
      }
    }
  });

  // Register a command to open the test file when the link is clicked
  vscode.commands.registerCommand('extension.openTestFile', (args) => {
    if (args && args.file) {
      vscode.workspace.openTextDocument(args.file).then((doc) => {
        vscode.window.showTextDocument(doc);
      });
    }
  });

  context.subscriptions.push(disposable);
}

export function deactivate() {}

Even if what I wanted was similar to what Yet-Another-PHPUnit does here:

and what I got was:

Definitely not the expected result.

Conclusion

ChatGPT was quite honest from the start. Its first sentence in the first answer he gave was

Creating a full-fledged VSCode plugin involves a fair amount of code, but I can provide you with a basic outline to get you started.

In conclusion, ChatGPT served as an excellent accelerator for the initial stages of developing a VSCode plugin. The provided files allowed for a swift setup, and the real-time error resolution was a boon. However, challenges arose when it came to intricate logic implementation, where human experience and intuition played a crucial role in overcoming the limitations of AI assistance.

Despite the hurdles, the collaboration with ChatGPT demonstrated the potential for AI-powered assistance in code development, shedding light on both its strengths and areas where human input remains indispensable. As the journey continues, finding the right balance between AI assistance and human intuition will likely be the key to unlocking the full potential of code development with tools like ChatGPT.