Building a VSCode Extension: Part One

Subscribe to my newsletter and never miss my upcoming articles

I have been looking for a fun side project to work on in my free time. Building projects is the best way to actually improve your skills as a developer. I decided that I will try to document my journey publicly to help share my thoughts and decisions.

What am I going to build?

I have been spending a good amount of time working on my time management. Managing my daily tasks has been something I needed to improve. I currently write down what I plan to do for the day in a notebook. Notebooks are nice but it makes it difficult to organize the tasks besides by date and order. How can I dynamically group them by project, adjust priority as my day changes, roll them over to the next day without having to rewrite them? I decided to create a task manager built into VSCode.

I am sure there are other extensions that already do this but that is not the point. The plan is to use this as a learning experience and build something specifically for me. I get to determine what features are important and how they tie into my workflow.

Problems I am solving

  • I spend most of my day with VSCode open on my computer as a Programmer. It would be nice to have all my tasks for my projects in one place.
  • I want to have a board similar to Trello where I could easily click and drag to move tasks between statuses and adjust priorities.
  • Most of my daily notes are Markdown in a repository. Having the ability to link my notes through wiki links using something like Foam would be a plus.

Thinking through the Tech Stack

The tech stack I plan on using:

  • TypeScript
    • Vscode's API already uses it.
  • ReactJS
    • It might be a little overkill but why not.
  • Tailwind CSS
    • I want to easily be able to style the webview and I love using utility classes for styles.
  • Markdown
    • I already take my notes in Markdown and it would make it easier integrating with foam.
    • GitHub Markdown has a task like syntax I could utilize and then you are not forced to use the extension to manage your tasks.

Resources I will be using

Comments (2)

Pankaj Sanam's photo

Awesome! Can't wait to read the next part.

Corey O'Donnell's photo

Thank you. Hopefully I'll have the next part soon