Inspiration

It's very important to track your time while coding, to take breaks, and to get hydrated frequently. This inspired us to build a VS-Code extension to track the time developers spend coding and provide them with regular notifications about breaks and hydration.

What it does

• It provides a stopwatch with start, pause, and reset functionalities.
• The time the user spends coding for each day is stored into VS-Code storage.
• The sidebar displays how long the user was coding for the current day and the day before.
• Notifications about getting hydrated every 30 minutes and taking a break every 45 minutes.
• A Memes page to visit during breaks.
• Motivational Quotes with the notifications.

How we built it

We used Javascript and VS-Code API for the extension development.

Challenges we ran into

• There are very few resources available about VS-Code extension development with Javascript.
• Storing data and displaying it onto the sidebar requires building a TreeDataProvider which is complex.
• The Extension development environment doesn't provide error messages. It just stops working.
• Documentation of VS-Code API is in Typescript, so we needed to understand the Typescript first before implementation.

Accomplishments that we're proud of

• Everyone in the team was new to VS-Code Extension development but we were able to get the project ready in time with a rich list of features.
• Extension is deployed on the marketplace and verified by VS-Code. It's available for the world to use.
• The major part of the time went through reading VSCode-API documentation and figuring out the functions we need.
• For TianHui, it was her first time working with Javascript.

What we learned

• We were able to learn a lot of things. It was the first time we all were building the VS-Code extension. The team can now easily work on vs-code extension-related projects.
• We got to do a lot of peer programming and managed to teach each other a lot of things, such as coding best practices.
• We also learn about deployment with Azure DevOps.

What's next for Dev Friend

• We can provide bar charts on the sidebar displaying coding time for each day.
• Feature to capture the lines of code written by the user.

dev-friend.tech