Have you ever written a VisualStudio Code extension? Do you want to? Or you are just curious how Microsoft can handle so many extensions in VSCode ecosystem without breaking the main product. Or maybe, you felt inspired to contribute to some open-source project, and you are already on the hunt for something interesting. If the answer to any of these questions is ‘YES’, I am ready to share my experiences with developing codegroove- VSCode extension for tracking and analyzing coding time.
The source code for codegroove can be found here
The motivation
There are people on this planet who have a problem with estimating time spent on activities. If you also suffer from that, you probably know that this week you again won’t meet your weekly goals, you will be stressing out about deadlines, you will get paid too less for the project that you underestimated. There is no other way to become better at this than tracking time spent and analyzing it. That’s why I was looking for a solution that would do it for me. The problem was: most of them needed some sort of token from third party website, the metrics were saved in some database and there was no mention what exactly is saved there, they would stop tracking the moment you stop typing, which for coding is not the optimal solution, or even worse- you should manually stop them, and last but not least- charts were displayed on some website that you purposefully should visit. To answer all these obstacles, I created codegroove.
How is it different from other solutions?
- There are no tokens- you just install it, and it works
- Your data is not going anywhere, it’s saved locally on your computer in a csv file
- You don’t need to go anywhere outside you code editor to see your analytics, go to Show and Run commands (Ctrl + Shift + P) and type ‘show stats’, it will open in another tab
- Only data that you need: your daily/ monthly/ yearly stats per projects and languages
- I know developing is not always coding, so you have 15 minutes of inactivity time, after that the session will be saved, you can open new session by any activity in VSCode
The process
The tools
In order to write and publish any extension, you will need:
- Node as a runtime
- Git for easy version control
- Yeoman and generator-code for creating an extension package
- vsce for publishing
Extension structure
The main file that will be responsible to run whatever your extension is doing is extension.ts (or js if you are writing in vanilla js) with two functions: activate and deactivate. In codegroove, the activate function is instantiating and initiating my main CodeTimer and File Operator classes. It’s also registering command to instantiate StatsGenerator class that would read the data from file and create webview panel with some charts.
The second part of extension magic is happening in package.json, where you provide information about the publisher and extension itself, and about your commands.
The rest of the project is totally up to you. As you can see, I am actually using only 3 classes: CodeTimer that deals with tracking your coding sessions based on VSCode events, and displays current session elapsed time, FileOperator which deals with creating directories and files, writing, appending and reading those files, and StatsGenerator which creates webview panel, and is applying script that generates charts and styles to it. Sounds simple, doesn’t it?
Was it really that simple? The obstacles.
It was a symphony of bugs, actually! And a lot of fun 🙂 Although, the mechanics of the extension are pretty simple and the VSCode API documentation is very helpful- it’s context and workspace is a different world than what you usually encounter.
- You have to navigate through events you see for the first time and understand how they work in order to not open a new session on every keystroke e.g.
- Second of all- every time you open a new project the previous state is gone, status bar is gone, and a new context opens, so dealing with state is your primary concern in this scenario.
- You should also remember that every user can have VSCode installed in a different folder, so that would mean navigating through VSCode workspace in order to save and read files.
- There was also a consideration of saving data in a json file, as it is very easy to read from, but considering that there will be lots of data to store, and I don’t really want to read data before storing anything, I chose to use csv. Csv-parser is only reading the file, when you want to see the stats, and plain text takes up less storage, so it seemed like a more efficient way.
- Creating webview panel is one thing, but adding styles and script to it and ensuring proper data flow is another.
- Working with chart.js for the first time was fun and challenging.
- The process ended with some issues around publishing, but good old Stackoverflow came to the rescue. It seems that Microsoft User Id number is not your publisher id that vsce needs to register your token.
- Last but not least, there were some problems with files in a production that were invisible in development mode. I would suggest before publishing to package your extension and install it locally from vsix file in order to check if everything is working as intended
Continued development
The extension is an open-source project, and everyone is welcomed to contribute to it. In the nearest future I will add issues that need some help or are good for first timers.
I would definitely want to enhance the UI of charts. I would also want to add a dropdown menu for choosing your inactivity time before saving the session, and choosing if you want to see time elapsed in session or day/ month/ year. The second part is adding completely new feature which is some music player integration.
Why the whole ecosystem is not crashing?
As an extension developer you actually don’t mess with the VSCode source code in any way. The team is giving you API and some guides on how to make your extension more performant and accessible. That’s why I strongly encourage you to try making one on your own. You can’t break anything, you don’t really need to know JavaScript, because it can be a theme extension. Very informative guide on how to reason about building it can be found in VSCode Youtube channel
Summary
This was a great learning experience. I was able to build something that is actually not only useful for me, but probably for many other developers. Check myself against the new environment of VSCode API and new libraries. I am excited to maintain this project in the future and continue to give back to the community this way. I highly encourage you to check out codegroove as it is available in VSCode Marketplace, leave a star in my repository, contribute if you will, and stay tuned for the next one!