DEV Community

Cover image for Building a VSCode Extension: Part One
Corey O'Donnell
Corey O'Donnell

Posted on • Edited on • Originally published at codebycorey.com

Building a VSCode Extension: Part One

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

Top comments (19)

Collapse
 
mjgs profile image
Mark Smith

Hi Corey - nice idea, I built something similar a few days ago, curious to see how your Vscode version turns out.

Here’s mine:

dev.to/mjgs/eleventy-blog-template...

Collapse
 
codebycorey profile image
Corey O'Donnell

Awesome, I'll check it out.

Collapse
 
codingcoop profile image
CodingCoop

Looking forward to following this! I been wanting to make an extension to show KintoHub related services running in the cloud within VSCode.

ZERO experience on VSCode extensions, so definitely looking forward to this series!

Collapse
 
codebycorey profile image
Corey O'Donnell

I have zero experience with it also.

It's a learning experience for me. I hope that I help someone else by learning in public.

Collapse
 
nepalilab profile image
Nepali Lab

Looks like a fun project. I've never seen someone build a VS Code extension. This is great.

Collapse
 
codebycorey profile image
Corey O'Donnell

Yeah, I am pretty excited. I am hoping that sharing this journey might help someone else.

Collapse
 
kulu123z profile image
KULDIP MOCHI

yeah, you are saying right, It helps us

Collapse
 
michaelcurrin profile image
Michael Currin • Edited

Hi I recently wrote my first extension as well and so put together resources around what I learnt.

Here are some links to docs and sample repos. I also cover some more exporting and publishing

michaelcurrin.github.io/dev-cheats...

Collapse
 
jeansberg profile image
Jens Genberg

I just had an idea to write my first VS Code extension based on my Github hackathon idea, so this is very good timing! :)

Collapse
 
codebycorey profile image
Corey O'Donnell

Nice, hopefully everything I share can help you with your journey.

Collapse
 
justlearner505 profile image
omaro grant

This sounds awesome cant wait to see it. I never made an extension before so i'm pumped about this project.

Collapse
 
codebycorey profile image
Corey O'Donnell

Awesome. I hope everything I share will help you!

Collapse
 
jorawarsinghnijjar profile image
Jorawar Singh Nijjar

Looks like nice plan! Good Luck.

Collapse
 
codebycorey profile image
Corey O'Donnell

Thank you!

Collapse
 
deveshlashkari profile image
Devesh Lashkari

Great! Best of luck.

Collapse
 
codebycorey profile image
Corey O'Donnell

Thank you! Will be a fun experience.

Collapse
 
theonlybeardedbeast profile image
TheOnlyBeardedBeast

Add beautifuld dnd from atlassian and you have it done in one day

Collapse
 
codebycorey profile image
Corey O'Donnell

Thanks, I just looked into it and that package looks like a good fit.

Collapse
 
harshanas profile image
Harshana Serasinghe

Amazing. Looking forward for the next part of the tutorial. Good Luck :)