Focus Mode Pro

A Pomodoro-based focus system that lives inside VS Code. It puts a quiet timer in your status bar, blocks distracting file types while you're heads-down, tracks your daily streak, and celebrates milestones — without ever leaving the editor.

What it does

• Pomodoro timer in the status bar — 25 min focus / 5 min break by default. Single-click toggles pause/resume, double-click resets.
• Focus-time file blocker — opening .md, .txt, .pdf (or any extension you configure) during a session shows a warning and closes the file. Stops the "I'll just check the docs real quick…" tab spiral.
• Daily streaks — every completed focus session counts. Skip a day and the streak resets, just like the calendar habit trackers you already trust.
• Milestone notifications — at 3, 5, 10, and 20-day streaks you get a celebratory toast.
• Dashboard — Focus Mode: Show Dashboard opens a themed panel with your current streak, total sessions, next milestone, and live timer.
• Configurable — change durations and blocked extensions in your VS Code settings.json.
• Bonuses included — terminal-bell sound on session end, a small ASCII progress bar in the status bar, and full theme compatibility (the dashboard uses VS Code's theme variables, so dark/light/high-contrast all look right).

How it helps developers stay focused

Long-form coding requires uninterrupted blocks of attention. Focus Mode Pro pushes you toward two simple habits:

1. Time-box your work. A visible timer in the status bar makes time tangible. You stop "just one more thing"-ing and actually take the break, which sustains the next block.
2. Remove the obvious detours. Reading a README.md "for one second" almost never takes one second. The blocker turns those soft temptations into a deliberate choice — disable the extension, or wait 23 minutes.

The streak system layers a lightweight reward loop on top: each completed session is a small, durable win, and you can see the counter climb from any project you open.

Installation

Option 1 — Run from source (recommended for development)

1. Clone this folder onto your machine.
2. From inside focus-mode-pro/, install dependencies and compile:

   npm install
   npm run compile

3. Open the folder in VS Code: code .
4. Press F5. A second VS Code window labeled [Extension Development Host] opens with Focus Mode Pro already loaded.
5. In the dev host window, run Focus Mode: Start from the command palette (Cmd+Shift+P / Ctrl+Shift+P) — the timer appears in the status bar.

Option 2 — Install a packaged .vsix

1. Build the .vsix (see the packaging section below).
2. In VS Code, open the Extensions view, click the … menu, and choose Install from VSIX….
3. Pick the generated focus-mode-pro-1.0.0.vsix file.

Usage

Open the command palette (Cmd+Shift+P / Ctrl+Shift+P) and run any of:

Command	What it does
Focus Mode: Start	Begin a focus session.
Focus Mode: Pause / Resume	Pause if running, resume if paused.
Focus Mode: Reset	Stop and clear the timer back to idle.
Focus Mode: Show Dashboard	Open the streak/session dashboard.

Or interact with the status-bar timer directly:

• Single click → pause / resume
• Double click → reset

Configuration

Add any of these to your VS Code settings.json:

{
  // Focus session length, in minutes.
  "focus.duration": 25,

  // Break length, in minutes.
  "focus.breakDuration": 5,

  // File extensions that should be blocked from being opened.
  // Include the leading dot.
  "focus.blockedExtensions": [".md", ".txt", ".pdf"],

  // If true, blocked file types are blocked at all times.
  // If false (default), they're only blocked during focus sessions.
  "focus.blockAlways": false,

  // Play a terminal bell sound when a session ends.
  "focus.enableSound": true,

  // Render a small progress bar in the status-bar timer.
  "focus.showProgressBar": true
}

Settings update live — change a value and the next render reflects it.

Run locally (F5)

1. Open focus-mode-pro/ in VS Code.
2. Run npm install once.
3. Press F5. VS Code launches an Extension Development Host window with the extension already activated.
4. Use the commands above (or click the timer in the status bar) to try it out.
5. If you change source files, run Developer: Reload Window in the dev host to pick them up. (Or use npm run watch in a terminal so TypeScript recompiles on save.)

Package the extension (vsce package)

vsce is the official VS Code packaging tool. It's already listed as a devDependency.

# from inside focus-mode-pro/
npm install
npm run compile
npx vsce package

This produces focus-mode-pro-1.0.0.vsix. You can hand that file to a teammate or install it locally via Extensions › Install from VSIX….

Publish to the VS Code Marketplace

1. Create a publisher. Sign in at https://marketplace.visualstudio.com/manage and create a publisher ID. Set the same value in package.json under "publisher" (replacing your-publisher-id).
2. Get a Personal Access Token (PAT). From https://dev.azure.com/, create a PAT with the Marketplace › Manage scope.
3. Log in once locally:

   npx vsce login your-publisher-id
   # paste the PAT when prompted

4. Publish:

   npm run compile
   npx vsce publish

   Or to bump the version at the same time:

   npx vsce publish patch   # or: minor / major / 1.2.3

5. The new version appears on the Marketplace within a few minutes.

For the official walkthrough see https://code.visualstudio.com/api/working-with-extensions/publishing-extension.

Project structure

focus-mode-pro/
├── src/
│   ├── extension.ts   # activate/deactivate, command registration, dashboard
│   ├── timer.ts       # FocusTimer + status-bar rendering + click handling
│   ├── streak.ts      # StreakManager + globalState persistence + milestones
│   └── blocker.ts     # FileBlocker — closes blocked file types during focus
├── package.json       # commands, configuration schema, scripts
├── tsconfig.json
├── .vscodeignore
└── README.md

License

MIT.