Typed Handlebars

A VS Code extension that provides TypeScript autocomplete for Handlebars templates based on corresponding .d.ts files.

Features

• File-specific type loading - template.hbs automatically loads types from template.d.ts
• Intelligent autocomplete - Complete support for interfaces, types, classes, and enums
• Property completion - Type {{User. to see all available properties
• Type-aware suggestions - Different icons for interfaces, classes, enums, and functions

How It Works

The extension matches Handlebars template files with their corresponding TypeScript declaration files:

cpc.hbs    ←→    cpc.d.ts
user.hbs   ←→    user.d.ts
admin.hbs  ←→    admin.d.ts

Usage

1. Create a .d.ts file with your type definitions:

// user.d.ts
export interface User {
  id: number;
  name: string;
  email: string;
}

export type Status = 'active' | 'inactive';

2. Create a matching .hbs file with the same name:

{{!-- user.hbs --}}
<div>
  <h1>{{User.name}}</h1>
  <p>ID: {{User.id}}</p>
  <p>Email: {{User.email}}</p>
  <p>Status: {{Status}}</p>
</div>

3. Start typing in your .hbs file:
   • Type {{ to see available types
   • Type {{User. to see User properties

Supported TypeScript Features

• ✅ Interfaces and their properties
• ✅ Type aliases with object properties
• ✅ Classes and their properties
• ✅ Enums and their values
• ✅ Function declarations

Installation

Search for "Typed Handlebars" in the VS Code Extensions marketplace or install via command:

code --install-extension @monest/typed-handlebars

Development

# Install dependencies
bun install

# Compile TypeScript
bun run compile

# Package for publishing
bun run package

License

MIT