I promised myself I’d blog regularly, but it’s been a while since my last post because I couldn’t figure out what to write about. I had a few ideas, but I struggled to organize them into a proper blog post. So, I haven’t written anything for a while. But today, I decided to share something I’ve been working on recently—a Visual Studio Code extension I developed. Let me tell you the story behind it.

Recently, I’ve been working on a project that started as a simple proof of concept. Over time, it grew into something more modular. At some point, I needed to reuse a function in another part of the project. Normally, TypeScript would be my go-to solution for this kind of work. But since I wanted to get things up and running quickly, I skipped TypeScript.

While thinking about how to document my code, I decided to use JSDoc. I’d always been a bit reluctant to use JSDoc because it takes up a lot of space in the code, making it harder to focus on the actual implementation. Let me quickly explain what JSDoc is for those unfamiliar with it.

JSDoc is a documentation tool for JavaScript that uses a specific syntax written inside comments. With it, you can describe functions, their parameters, return types, and what they do. Once you write this documentation, tools like Visual Studio Code can display the information when you hover over the function. Here’s a quick example:

/**
 * Performs addition.
 * @param {number} a - The first number
 * @param {number} b - The second number
 * @returns {number} The sum
 */
function add(a, b) {
  return a + b;
}

If you export this add function and use it in another file, hovering over it will show the details from the JSDoc. It’s super handy for understanding what the function does, its parameters, and its return value.

However, there was one big downside for me. JSDoc takes up too much space in the code. If I wrote a 10-line function with 10 lines of JSDoc above it, it became difficult to focus on the function itself. That’s why I was hesitant to use it.

Then, I had an idea. What if JSDoc comments could fold automatically? They’d appear as a single line and only expand when I needed to read them. That way, they wouldn’t clutter my code, and I could still benefit from JSDoc. I searched for extensions that could do this but couldn’t find one. So, I thought, why not build it myself?

One day, while shopping with my wife, we stopped at a Starbucks, and I started working on the extension. Visual Studio Code has an excellent Extension API with great documentation, and with a bit of research (and AI help), I got started.

The extension runs whenever you open a JavaScript file. It scans the code, finds JSDoc comments, and automatically folds/collapses them into a single line. You can click the small ▼ icon next to the folded comment to expand it if needed. This way, JSDoc comments take up much less space in your code.

Normally, when I build small tools like this, I stash them away in private repos on GitHub, where they collect dust. But this time, I thought, “Maybe someone else will find this useful,” so I published it on the VS Code Marketplace. I named it JSDoc Folder.

After publishing, I didn’t share it anywhere. I just created a GitHub repo for it and listed it on the marketplace. The next day, I saw that 5–6 people had already downloaded it, which made me so happy. It meant that someone out there found it useful.

Later that day, I got a GitHub notification. Someone who used the extension opened an issue with a suggestion to improve it. Initially, my extension folded JSDoc comments into two lines, leaving the /** on the first line and a brief description on the second. This user suggested folding everything into a single line, saying it would save even more space and be more practical. It made sense, so I implemented their suggestion and released an updated version.

This experience showed me the beauty of open source. I built this extension to solve my own problem, but knowing it helped others made me incredibly happy. Getting feedback from someone who used it was also super motivating.

This wasn’t my first open-source project. I previously built a CLI tool that archives files changed between two Git branches into a ZIP file. It was something I needed for my workflow, and since I often needed to connect to client FTP servers and didn’t want to mess up existing files, I published it as an npm package (git-diff-zip). It didn’t gain much traction, though—just a few downloads here and there.

As I write this post, JSDoc Folder has been downloaded 32 times. It’s a small extension, but knowing it’s helping people makes me really happy.

That’s all for now. If you’d like to try out the JSDoc Folder extension, you can download it from the VS Code Marketplace. If you have any suggestions or want to check out the project, feel free to visit its GitHub repo.