Vscode QoL tools

Inspiration

We are a team of 4 first-term students. We wanted to create an extension that supports programmers by improving code readability. We decided on a VS Code extension because we believe that having the capability in the IDE improves workflow.

What it does

Our extension allows users to highlight snippets of code and pin them to the top of the current text editor window. The snippet moves as you scroll, allowing the user to reference the code. Also, when the user doesn't need the snippet, it can be collapsed. We also included an error notification feature that plays sounds when the user makes an error or fixes it.

How we built it

We started by using the provided CLI templating tool from VSCode to make an extension. We then started to use the vscode api to create our extension. We wanted to make our snippet appear in the active text editor, but that is not possible on stable VS Code. This is when the challenges started.

Challenges we ran into

We realized that the extension we wanted to create was not possible on the stable version of VS Code, so we had to transfer our project to VS Code Insider. Inside lets you use proposed API which we need to succesfully create our extension. However, getting the proposed API's to work in our project was a multi-hour process. Since the documentation for the proposed API's are basically nonexistent, we had to read the actual commit present in the git repo.

Accomplishments that we're proud of

We are proud that we managed to make something that sorta a works even with all of the difficulties that we encountered. The fact that we had to use experimental API's to make our extension function was really interesting and taught us new things.

What we learned

We learned about how to create and implement a VS Code extension. Even though our current extension cannot be available on the stable extension store, we still created something that interacts with the IDE and changes the user's experience.

What's next for Vscode QoL tools

We are hoping to continue to add new features to our extension, such as a fuzzy finder or a git commit CLI comment tool. But firstly, we need to improve the performance of our current features. Once the API's are available on the stable VS Code, we can publish it there.

How to access our extension

Download the .vsix file from our GitHub pre-release and open VS Code Insiders. Go to the extension tab and click the ellipses at the bottom of the menu, go to Install from VSIX. Find the file that you downloaded and install it. You will now have our extension on VS Code Insiders. Now open a code file and launch the extension development host by pressing F5. The extension should be working now!