A VS Code extension that tracks your coding session time and syncs with your Laravel application backend. Monitor your productivity, track project time, and gain insights into your coding habits with seamless Laravel integration.
- 🕒 Real-time tracking: Automatically tracks your coding time while you work
- 📊 Status bar indicator: Shows current session time in the VS Code status bar
- ⏸️ Smart idle detection: Pauses tracking when you're away from the editor
- 📦 Batch synchronization: Efficiently sends data to your Laravel API in configurable batches
- 🔄 Offline support: Stores data locally when your API is unavailable and syncs when reconnected
- 📈 Built-in statistics: View your coding statistics and manage local data
- 🔐 Laravel Sanctum integration: Secure authentication with Laravel Sanctum tokens
- 🎯 Project & file tracking: Automatically detects project name and current file
Follow this step-by-step guide to integrate the VS Code extension with your Laravel application.
# Navigate to your Laravel project
cd /path/to/your-laravel-project
# Install Laravel Sanctum
composer require laravel/sanctum
# Publish Sanctum configuration and migrations
php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
# Run migrations to create personal access tokens table
php artisan migrateAdd Sanctum middleware to your app/Http/Kernel.php:
// In app/Http/Kernel.php
'api' => [
\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],Run the artisan command to generate all necessary files for the coding tracker:
php artisan make:coding-trackerThis command will create:
- Migration:
database/migrations/xxxx_create_coding_sessions_table.php - Model:
app/Models/CodingSession.php - Controller:
app/Http/Controllers/CodingSessionController.php - Request:
app/Http/Requests/StoreCodingSessionRequest.php - Routes: Adds API routes to
routes/api.php
php artisan migrateCreate a user and generate an API token:
php artisan tinkerIn the Tinker console:
// Create a user (if you don't have one)
$user = \App\Models\User::create([
'name' => 'Your Name',
'email' => 'your@email.com',
'password' => bcrypt('your-password')
]);
// Generate API token
$token = $user->createToken('vscode-coding-tracker')->plainTextToken;
echo $token;Copy the generated token - you'll need it for VS Code configuration.
-
Install the Extension:
- Open VS Code
- Go to Extensions (Ctrl+Shift+X / Cmd+Shift+X)
- Search for "Laravel Coding Time Tracker"
- Install the extension
-
Configure Settings:
- Open VS Code Settings (Ctrl+, / Cmd+,)
- Search for "Coding Tracker"
- Set the following values:
- API URL:
http://your-laravel-app.test/api/coding-sessions(replace with your Laravel app URL) - API Key: Paste the token generated in Step 5
- API URL:
- Start coding in VS Code
- Check the status bar for the coding time indicator:
⏰ Coding: Xm - After 5 minutes of activity, data should sync to your Laravel application
- Check your database to verify sessions are being stored
-
API URL (
codingTracker.apiUrl): Your Laravel API endpoint URL- Example:
http://localhost:8000/api/coding-sessions - Example:
https://yourapp.com/api/coding-sessions
- Example:
-
API Key (
codingTracker.apiKey): Your Laravel Sanctum authentication token- Generated using
$user->createToken('vscode-coding-tracker')->plainTextToken
- Generated using
- Idle Minutes (
codingTracker.idleMinutes): Minutes of inactivity before considering user idle (default: 5) - Batch Seconds (
codingTracker.batchSeconds): Seconds to accumulate before sending a batch (default: 300, minimum: 60)
Access these commands via the Command Palette (Ctrl+Shift+P / Cmd+Shift+P):
- Laravel Coding Tracker: Show Coding Statistics - Display your coding time statistics
- Laravel Coding Tracker: Reset Local Statistics - Clear all local tracking data
- Laravel Coding Tracker: Open Settings - Quick access to extension settings
The extension sends POST requests to your Laravel API endpoint with the following structure:
{
"sessions": [
{
"started_at": "2023-10-18T10:30:00.000Z",
"duration_seconds": 300,
"project": "my-laravel-project",
"file": "/path/to/current/file.php"
}
]
}Your Laravel controller should accept this format and respond with a 2xx status code:
// Expected response
HTTP/1.1 200 OK
Content-Type: application/json
{
"message": "Sessions recorded successfully",
"recorded_sessions": 1
}The generated migration creates a coding_sessions table with the following structure:
Schema::create('coding_sessions', function (Blueprint $table) {
$table->id();
$table->foreignId('user_id')->constrained()->onDelete('cascade');
$table->timestamp('started_at');
$table->integer('duration_seconds');
$table->string('project')->nullable();
$table->text('file')->nullable();
$table->timestamps();
});-
Activity Detection: The extension monitors:
- File changes and edits
- File saves
- Editor focus changes
- Window focus changes
-
Time Accumulation: Active time is accumulated in 60-second intervals
-
Batch Creation: Sessions are created when:
- The batch threshold is reached (default: 5 minutes)
- User becomes idle (default: 5 minutes of inactivity)
-
API Synchronization: Sessions are sent to your Laravel API endpoint with Bearer token authentication
-
Persistence: Failed uploads are stored locally and retried automatically
The extension includes an artisan command to generate all necessary Laravel files:
php artisan make:coding-trackerThis command creates:
- Migration for
coding_sessionstable CodingSessionmodel with relationshipsCodingSessionControllerwith validationStoreCodingSessionRequestfor request validation- API routes in
routes/api.php
After setup, you can view your coding sessions in several ways:
// Get all sessions for a user
$sessions = \App\Models\CodingSession::where('user_id', auth()->id())
->orderBy('started_at', 'desc')
->get();
// Get today's total coding time (in seconds)
$todayTotal = \App\Models\CodingSession::where('user_id', auth()->id())
->whereDate('started_at', today())
->sum('duration_seconds');// GET /api/coding-sessions - List sessions
// GET /api/coding-sessions/stats - Get statistics- Local Storage: All data is stored locally until successfully synced
- No Third Parties: No data is sent to any third-party services
- Full Control: You have complete control over your API endpoint and data handling
- Secure Authentication: Uses Laravel Sanctum for secure API authentication
To contribute or modify this extension:
-
Clone the repository:
git clone https://github.com/Heyosseus/vscode-coding-tracker.git cd vscode-coding-tracker -
Install dependencies:
npm install
-
Open in VS Code:
code . -
Start development:
- Press
F5to launch Extension Development Host - Make changes and test in the development environment
- Press
-
Build for production:
npm run package
- Check VS Code status bar for the coding indicator
- Verify API URL and API key in settings
- Check browser developer console for errors
- Verify Laravel application is running
- Check API URL format (include
/api/coding-sessions) - Ensure CORS is configured for your domain
- Verify Sanctum token is valid
- Run
php artisan migrateto ensure tables exist - Check Laravel logs in
storage/logs/laravel.log - Verify user has valid Sanctum token
This project is licensed under the MIT License - see the LICENSE file for details.
- Fork the repository
- Create your feature branch (
git checkout -b feature/amazing-feature) - Commit your changes (
git commit -m 'Add some amazing feature') - Push to the branch (
git push origin feature/amazing-feature) - Open a Pull Request
This extension is provided as-is for educational and personal use.