Stencil for Code

Learn code by typing it. Transform any code file into an interactive typing practice session with visual feedback and progress tracking.

What is Stencil for Code?

Stencil for Code is a VS Code extension that helps developers learn new programming languages, frameworks, and coding patterns through kinesthetic learning. Instead of just reading code, you type it line-by-line, building muscle memory and deeper understanding.

Perfect for:

• Learning new programming languages
• Understanding unfamiliar codebases
• Teaching programming concepts
• Practicing syntax and code structure
• Building typing muscle memory for code patterns

Why Use This?

Research shows that kinesthetic learning (learning by doing) significantly improves retention compared to passive reading. When you type code:

• You notice details you'd normally skip
• You build muscle memory for syntax patterns
• You engage multiple senses (visual + motor)
• You slow down to understand each line
• You remember better and longer

Features

Interactive Typing Practice

• Ghost Text Display: See the reference code with visual styling
• Progress Tracking: See your progress in the status bar

Smart Features

• Auto-Save Progress: Resume your session later from where you left off
• Skip Lines: Press Ctrl+Enter to skip challenging lines
• Multi-Language Support: Works with any programming language VS Code supports
• Customizable Styling: Adjust ghost text opacity and colors

How to Use

Quick Start

1. Open any code file in VS Code (JavaScript, Python, TypeScript, etc.)

2. Start Stencil Mode:

   • Press Ctrl+Alt+S (Windows/Linux) or Cmd+Alt+S (Mac)
   • Or use Command Palette (Ctrl+Shift+P) → "Stencil for Code: Start Stencil"

3. Type the code:

   • You'll see the reference code with ghost styling
   • The current line to type is bold with a blue border
   • Type on the blue-highlighted input line below
   • Press Enter to validate each line

4. Get Feedback:

   • Correct: Line advances automatically
   • Wrong: Red background appears, fix and press Enter again

5. Stop anytime:

   • Press Ctrl+Alt+Q or use Command Palette → "Stencil for Code: Stop Stencil"

Keyboard Shortcuts

Example Workflow

1. Find a code example you want to learn (GitHub, tutorial, documentation)
2. Copy it into a new file in VS Code
3. Press Ctrl+Alt+S to start stencil mode
4. Type each line carefully, pressing Enter after each
5. Watch your progress in the status bar
6. Learn through muscle memory and focused attention

Visual Feedback

The extension uses smart visual cues to guide you:

• Completed Lines: Normal text (100% opacity, solid)
• Current Reference Line: Bold text with blue left border (75% opacity)
• Input Line: Light blue background (where you type)
• Error Line: Red background (when you type incorrectly)
• Upcoming Lines: Ghost text (40% opacity, italic)

Settings

Customize the experience in VS Code Settings:

{
  "stencilcode.ghostOpacity": 0.3,
  "stencilcode.ghostColor": "#808080",
  "stencilcode.errorColor": "#FF0000",
  "stencilcode.showProgressInStatusBar": true,
  "stencilcode.autoSaveProgress": true
}

Use Cases

1. Learning New Languages

Copy code examples and type them out to understand syntax and patterns.

2. Code Review Practice

Type through code you're reviewing to deeply understand changes.

3. Teaching Programming

Teachers can use this to create interactive typing exercises for students.

4. Interview Preparation

Practice typing common algorithms and data structures.

5. Framework Learning

Type through framework examples to build familiarity with APIs.

Requirements

• Visual Studio Code version 1.85.0 or higher
• Any programming language supported by VS Code

Installation

Install from the VS Code Marketplace:

1. Open VS Code
2. Go to Extensions (Ctrl+Shift+X)
3. Search for "Stencil for Code"
4. Click Install

Or install from .vsix file:

code --install-extension stencil-for-code-0.1.0.vsix