Track active coding time across files and folders with live status bar feedback, idle detection, and interactive visual analytics directly within VS Code.
Installation
Launch VS Code Quick Open (Ctrl+P), paste the following command, and press enter.
Dev Time Visualizer is a powerful Visual Studio Code extension that helps developers understand and optimize their coding workflow. It automatically tracks your active coding time per file, folder, and language, and presents the metrics in a clean, theme-aware dashboard with interactive charts.
✨ Key Features
⏱️ Automatic & Smart Time Tracking: Automatically tracks active coding time per file with zero manual configuration.
🛑 Idle & Focus Detection: Automatically pauses tracking when VS Code loses focus or after a period of user inactivity to eliminate false 8-hour logs.
📊 Status Bar Feedback: Displays live coding duration directly in the VS Code status bar (e.g. $(clock) 1h 24m today). Click to open the dashboard.
🎨 Theme-Native Visual Dashboard: Beautiful, responsive UI built with native VS Code CSS variables that seamlessly match any light, dark, or high-contrast theme.
📈 Interactive Charts:
Daily Activity Timeline: Bar chart showing coding time over past days.
Language Breakdown: Donut chart showing time spent across tech stacks (TypeScript, Python, Go, CSS, etc.).
Project / Folder Distribution: Horizontal breakdown of time across workspace modules.
🔍 Searchable File Logs: Instant filterable table with file paths, languages, dates, and durations.
📅 Date Range Filtering: Easily switch between Today, Last 7 Days, Last 30 Days, and All Time.
📥 CSV Export: One-click export of full tracking history into CSV format for external analysis or client reporting.
🚀 How to Use
1. Automatic Tracking
As soon as you open and edit files, the extension starts tracking your time automatically. Look at the bottom status bar to see your current day's total!
2. Open the Analytics Dashboard
You can open the dashboard in two easy ways:
Click the Status Bar item ($(clock) 45m) in the bottom bar.
Or press Ctrl+Shift+P (or Cmd+Shift+P on macOS) and run:
Time Tracker: Open Dashboard / Report
3. Filter & Export
Use the date range buttons at the top of the dashboard (Today, 7 Days, 30 Days, All Time).
Click 📥 Export CSV to save your tracking data.
⚙️ Extension Settings
Setting
Default
Description
timeTracker.idleTimeout
120
Inactivity threshold (in seconds) before tracking automatically pauses.
timeTracker.showStatusBarItem
true
Toggle visibility of the live timer in the bottom status bar.
🔒 Commands
Time Tracker: Open Dashboard / Report (time-tracker.generateReport)
Time Tracker: Reset All Tracked Data (time-tracker.resetData)
Enjoy using Dev Time Visualizer to improve your developer productivity and gain clear visibility into your coding habits!
