Track the time spent on each file in your project and visualize the data with interactive charts. Get insights on how you manage your time across different files and folders directly within VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Dev Time Visualizer is a Visual Studio Code extension that helps you track and understand how much time you spend coding. With this extension, you can generate reports, view interactive charts, and reset your tracked time data whenever needed.
Features
Time Tracking: Automatically tracks the time you spend on each file.
Folder Analysis: See how much time you spend in different parts of your project.
Interactive Charts: View your time data in easy-to-read pie and bar charts.
Weekly Overview: Get a chart that shows your coding time for each day over the past week.
Detailed Reports: Generate reports with a breakdown of your time by date, file, and project.
Export Data: Save your reports as CSV files for further analysis or sharing.
Reset Time Data: Easily reset all tracked time data with a single click.
How to Use
1. Install the Extension
Open Visual Studio Code.
Click on the Extensions icon in the Activity Bar on the side of the window (or press Ctrl+Shift+X).
Search for "Time Tracker & Visualizer" and click the Install button.
2. Enable Time Tracking
Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette.
Type Dev Time Visualizer: Enable and select it. This will start tracking the time you spend on your files.
3. Generate a Report
Press Ctrl+Shift+P (or Cmd+Shift+P on macOS) to open the Command Palette again.
Type Dev Time Visualizer: Generate Report and select it. This will create a report and open it in a new tab.
4. View Your Report
The report will display:
Pie Chart: Shows time spent on different root folders of your project.
Bar Chart: Shows time spent on individual files.
Weekly Chart: Displays your coding time for each day over the last 7 days.
Detailed Table: Lists your coding time by date, root folder, subfolder, and file.
5. Reset Your Time Data
Click the Reset Time Data button in the status bar to reset all tracked time data to 0. This is useful if you want to start tracking from scratch or clear out old data.
6. Export Your Report
In the report view, you can click on the Export button to save your data as a CSV file. This allows you to share or analyze the data outside of Visual Studio Code.
Extension Settings
You can configure the following settings:
devTimeVisualizer.enable: Turn time tracking on or off.
devTimeVisualizer.report: Generate a time tracking report.
To change these settings, go to File > Preferences > Settings (Ctrl+, or Cmd+, on macOS) and search for "Dev Time Visualizer."
Additional Information
For more details on how to use Visual Studio Code extensions, you can check out:
