I built a VSCode extension to easily embed links into markdown

16 Jun 22
|Project, Node.js

Purpose and Goal

After starting my blog and wiki, I've been writing a lot more markdown. When writing markdown, I found myself constantly adding links.

The syntax to add a link in markdown is:

[Alt Text](https://mylink.com)

It's fairly straightforward and easy to remember. The issue I had was that constantly tabbing out to add links made me lose my train of thought and disrupted my workflow.

So I decided to create a VSCode extension that allows me to easily add links without ever leaving my markdown to search for the appropriate link.


Demo gif

  • Highlight the text you want to add a link to.
  • Use the command palate to launch the extension or bind it to a hotkey.
  • Modify and confirm your search.
  • Choose the appropriate link.

Thought Process

The one-stop shop for links is, undoubtedly, Google. Keeping that in mind, I decided to use the Google Custom Search API to populate the results.

I also made use of VSCode's QuickPick for the main UI.

I Did An Oopsie

After committing my code in order to package it for the Microsoft Extension store, about 2 hours later I got an email from a company called GitGuardian, which I'd never heard of before.

email from GitGuardian

I'd committed my Google Search API Key to a public repository—a very big no-no.

To fix this, I had to use environment variables, something I'd used before in my work but never really had to set up myself.

I installed the dotenv package for Node.js and managed to fix it, learning quite a bit in the process.

Closing Thoughts & Final Improvements

This was a fun little project and the first time I'd ever coded an extension. The fact that extensions are not a common project meant that StackOverflow wasn't as good a resource as it normally was.

Instead, I really had to dig through the documentation to figure out what I was looking for and it was very satisfying when it finally worked.

Work on a project that you'll actually use...
- literally every tutorial ever.

This was also the first time I built something that I actually use and that's something I'm pretty proud of.

Before I worked on this project, I looked around and couldn't find anything like this, so I'm sure there's a use case for it for others as well. Unfortunately, the Google Search API only allows a maximum of 100 queries a day, so promoting it doesn't interest me a lot.

Thanks for reading till the end!