How I Made a VS Code Extension for My Dev Tool—CodeCrate

🧠 Why I Built the Extension

When I first launched CodeCrate and started getting feedback for it, there was mainly one thing I was asked for: it was a VS Code extension, because most people write code in VS Code, and continuously context switching between browser and editor can become a pain.

And honestly I was feeling the same, and that is the reason why I decided that I should build an extension for VS Code so everyone can easily use CodeCrate without context switching.

---

🎯 Goal

The goals for the extension were simple: users should be easily able to use their snippets through the command palette or snippet shortcuts like we usually use rafce for React, but in this case, users can set these, edit these, and use these.

Also, users can easily save any piece of code just by first selecting it and using the shortcut Alt+Shift+S, and they also have full access to use and delete their snippets through the command palette.

---

⚙️ How It Works

The first thing was to authenticate the user; for that, first I check if the user is authenticated or not.

If not, then I show a message to ask the user to sign in with a link. In that link, there will be a token generated for the user that the user can copy and then paste inside VS Code. You can see this in the demo:

Then it fetches and loads all of their current snippets that they have saved so the user can use these through the shortcuts.

Then it registers the command to save snippets through the shortcut Alt+Shift+S.

It registers the command with a shortcut of Alt+Shift+B to see and search through all the snippets, and also they can use and delete them if they want.

You can see the demo of all that too:

The token that the user pastes expires after 60 days, so I have added the condition that whenever the API responds with Unauthorized, it will again prompt the same message to sign in so there won’t be any kind of issues.

---

🧩 Challenges

There were many challenges when building this; the first was authentication flow.

First, the tokens that were generated to authenticate were created using a custom JWT template to extend their lifetime, and because the extension was obviously supposed to communicate with the server of CodeCrate, the APIs were directly getting the user ID from the request. auth because I am using Clerk.

But in the case of the extension, I was just sending the JWT token from the headers, and for that reason, I created separate APIs in CodeCrate to communicate with the extension, where first I was authenticating the token that was sent with every request.

The second challenge was loading the snippets because normally in VS Code extensions that provide premade snippets, they are loaded through a package. json.

But in this case, all the snippets were dynamic, so this was not an option, so I used the registerCompletionItemProvider function of VS Code to load all the snippets dynamically.

The last challenge I faced was packaging and publishing the extension.

This was my first time building and publishing the extension.

First, there were some errors while bundling the extension because I was using webpack (it was a mistake because of how many errors and issues I faced), and then publishing was also a bit tricky because of the long process, but still, at the end of the day, the extension was complete and published.

---

📚 What I Learned

I learned many things in the process of building this extension because it was the first time I created an extension.

So in the process I learned the whole process of building the extension.

Like how to authenticate, how you register commands, load snippets, and communicate with the server of the main CodeCrate, and also how to package and publish the extension.

It was a great learning process overall.

---

🚀 Final Thoughts

I built this extension because I felt the real need for developers to have this kind of tool to make themselves more efficient.

If you want to use the extension, you can go to https://marketplace.visualstudio.com/items?itemName=DuraidMustafa.codecrate or just search CodeCrate in the extension marketplace of VS Code and download it; it is completely free.

If you have any suggestions for improvement, you can let me know on my Twitter/X handle, https://x.com/DuraidMustafa_, or you can visit my own site, https://www.duraidmustafa.com/.