I've built a VS Code extension to help me use ChatGPT to code

1 comment

igormuba1.3 K2 years ago4 min read

ChatGPT for coding

I often use ChatGPT to help me with some tasks while coding. One problem is that sometimes the robot struggles to understand the file structure of the project and I need to explain it. If the bot understands the file structure it can provide whole snippets of code that even import and export modules more accurately, making the development process much faster and avoiding repetitive or manual tasks!

So I made a tool for it

Based off of that, and the fact that I wanted to learn something new, I made a VS Code extension to automate the process of explain the tree structure to ChatGPT by simply turning it into text. It reads the file structure and turns it into text. I did it because I found another extension that does the same, but I wanted to make one for myself because:

No one wants to copy the node_modules file structure, that would be thousands of line
Existing extensions used .gitignore to avoid copying node_modules
While fair enough, I'd like to customize the folders and file I'd like to be or not to be ignored

How the tool works

Suppose you open a project on VS Code and you need to copy the folder structure. I do that often for ChatGPT, but there could be many other reasons, such as explaining to colleagues (although a screenshot may be better in that case LOL).

First of all, it is highly recommended that you have a .structignore file on the root folder, that tells the extension what to ignore! Or else you may have a few, or even thousands, of lines that are not needed! Here is an example of my .structignore:

You either click the button to "Copy FS" or you ctrl+shift+P and run the command "Copy Folder Structure".

By clicking on the status bar button

By inputting the command

When you do that two things will happen:

The folder structre, represented as text, will be copied to the clipboard
It will also open the text on a new tab on VS Code, in case you want to edit something quickly before copying it again

Testing on ChatGPT

I copied the tree structure of the extension itself, as I wanted to test if that would be enough to give ChatGPT an understanding of the folder structure.

With a straightforward prompt I asked ChatGPT to explain to me, without me giving any context at all, if the bot could understand what the project is.

Here are the results:

It went surprisingly well. It immediately understood not only how the project is structured, but the bot also immediately understood it was a VS Code extension.

With the bot knowing this I could simply tell it what I want to do and it would tell me which files, and where they are, might be relevant for the task in hands.

I expect to save a few minutes a day of robot explanation to get help for coding with ChatGPT.

How it was coding it

It was my first VS Code extension. At first it had to understand the concepts of status bar drawing and commands, but in general it took me very little time. As you can see on the repository the code is very short and mostly boilerplate, it must have taken me under 2 hours to make this personal project.

Now that I know how to code VS Code extensions I imagine that any issues or quality of life improvements I can think of for myself can now become an extension to be shared with the world.