⌨ DotType

A distraction-free typing practice extension for Visual Studio Code.

Open any .type file, paste your text, and start training — no browser tab required.

What It Does

DotType turns a plain .type file into a focused typing session right inside your editor. Paste an article, a code snippet, a poem — anything — and the extension renders it character by character. Type through it, see your mistakes in real time, and pull up a stats report when you're done.

Everything is stored locally in the .type file itself, so your practice text is always there when you reopen the file.

Features

• Live stats bar — WPM, CPM, accuracy and progress update as you type
• Per-character feedback — correct characters turn green, mistakes turn red with a wavy underline
• No backspace — you move forward only, which builds real muscle memory
• Session stats modal — WPM, CPM, accuracy, elapsed time and a "most missed letters" breakdown
• Persistent practice text — pasted text is saved to the .type file automatically
• File icon — .type files show the DotType icon in the Explorer (see setup below)

Getting Started

1. Install the extension

Install from the VS Code Marketplace, or clone this repo and press F5 to run it in a development host.

2. Create a .type file

touch practice.type

Or use File → New File and save with the .type extension. VS Code will open it in the DotType editor automatically.

3. Paste your practice text

The first time you open an empty .type file, a modal appears asking you to paste your text. Paste anything — the text is saved to the file so it's ready next time.

4. Type

Click the editor area (or press any key) and start typing. The cursor blinks at your current position. Correct characters light up green; mistakes show in red. There is no backspace — keep going.

5. View your stats

Press Ctrl+Alt+T at any time to open the stats panel. It appears automatically when you finish the text.

Keyboard Shortcuts

DotType ships a custom icon theme so .type files show the DotType icon in the Explorer sidebar.

To activate it:

1. Open the Command Palette — Ctrl+Shift+P
2. Select DotType Icons

To revert, select any other icon theme from the same list.

Project Structure

dottype/
├── extension.js               # Extension entry point & custom editor provider
├── package.json               # Manifest — commands, keybindings, icon theme
└── icons/
    ├── dottype.svg            # File icon (used in Explorer)
    └── dottype-icon-theme.json  # Maps *.type → dottype.svg

How It Works

DotType registers a Custom Text Editor for *.type files. When VS Code opens one of these files, the extension renders a full-page webview instead of the default text editor.

The webview handles all typing logic in plain JavaScript — no frameworks. When the session ends or the paste modal is submitted, the webview sends a message back to the extension host, which writes the content to the file using WorkspaceEdit and saves it.

The stats panel (Ctrl+Alt+T) is wired to a VS Code command that posts a message to the active webview, keeping the extension host and the webview in sync.

Development

Prerequisites

• Node.js 18 or later
• VS Code 1.74 or later

Run locally

git clone https://github.com/hassaanhaider88/DotType
cd DotType
npm install

Open the folder in VS Code and press F5. A new Extension Development Host window opens with DotType active.

Packaging

npm install -g @vscode/vsce
vsce package

This produces a .vsix file you can install with:

code --install-extension dottype-x.x.x.vsix

Tips

Use real content. Typing through material you actually want to read (documentation, blog posts, book excerpts) is more useful than synthetic word lists. Save different .type files for different topics.

Shorter sessions are fine. A 2–3 minute focused session on a dense paragraph does more than a 10-minute run through easy words.

Revisit your misses. The "Most Missed" chips in the stats panel show which characters trip you up most. Use that to pick your next practice text.

License

MIT — see LICENSE for details.