HBS Neat

Format HTML files containing Handlebars syntax with confidence.

Most formatters break when they encounter {{#if}}, {{#each}}, or {{> partials}} inside HTML — they either crash, mangle your templates, or silently produce incorrect output. Handlebars Formatter solves this by intelligently separating Handlebars expressions from HTML before formatting, then restoring them precisely — so Prettier can do its job without ever seeing a single {{.

Features

Format HTML + Handlebars together

Works on .html files that contain Handlebars syntax. Block tags like {{#if}}, {{#each}}, and {{> partials}} are preserved on their own lines. Inline expressions like {{variable}} stay exactly where they belong.

Handles complex attribute expressions

Handlebars inside HTML attributes — including conditional class names — are handled correctly without breaking the tag structure:

<!-- Before -->
<p class="card__leading{{#if classLeading}} {{classLeading}}{{/if}}">{{{leading}}}</p>

<!-- After -->
<p class="card__leading{{#if classLeading}} {{classLeading}}{{/if}}">{{{leading}}}</p>

Keeps block tags readable

Nested block helpers are formatted with proper indentation and never collapsed into a single line:

<!-- Before -->
{{#each items as |item|}}{{> _partials/_item data=item }}{{> _partials/_item data=item }}{{/each}}

<!-- After -->
{{#each items as |item|}} {{> _partials/_item data=item }} {{> _partials/_item data=item }} {{/each}}

Supports all Handlebars syntax

Force format via Command Palette

Use Format HTML with Handlebars from the Command Palette (Ctrl+Shift+P) to force-format the current file regardless of your workspace's default formatter setting.

Usage

Format on demand

Open any .html or .hbs file and press Shift+Alt+F.

Format on save

Add this to your .vscode/settings.json:

{
  "[html]": {
    "editor.defaultFormatter": "buiquockhai.hbs-neat",
    "editor.formatOnSave": true
  },
  "[handlebars]": {
    "editor.defaultFormatter": "buiquockhai.hbs-neat",
    "editor.formatOnSave": true
  }
}

Command Palette

Press Ctrl+Shift+P and run:

Format HTML with Handlebars

This bypasses the default formatter and always uses this extension directly.

Configuration

Configure in your settings.json:

{
  "hbsFormatter.printWidth": 100,
  "hbsFormatter.tabWidth": 2,
  "hbsFormatter.useTabs": false,
  "hbsFormatter.singleQuote": false
}

Supported File Types

• .html — HTML files with embedded Handlebars syntax
• .hbs — Handlebars template files
• .handlebars — Handlebars template files

How It Works

Standard HTML formatters fail on Handlebars because {{...}} is not valid HTML. This extension uses a placeholder technique to work around that:

1. Extract — All {{...}} expressions are replaced with safe placeholders before formatting. Block-level tags outside HTML attributes are wrapped in HTML comments so Prettier preserves their line position.
2. Format — Prettier formats the resulting valid HTML using the html parser.
3. Restore — All placeholders are replaced back with the original Handlebars expressions, character-perfect.

Expressions inside HTML attributes (like conditional class names) are handled separately from expressions in the document body, ensuring neither case produces invalid HTML for Prettier to choke on.

Requirements

• Visual Studio Code ^1.80.0
• Node.js ^18.0.0
• prettier (bundled — no separate install required)

Known Limitations

• Deeply nested Handlebars expressions within <script> or <style> tags may not format perfectly.
• Custom block helpers with unusual syntax may not be recognized as block-level tags.
• Files with syntax errors will not be formatted — an error message will appear in the bottom-right corner.

Release Notes

• Initial release
• Format .html and .hbs files containing Handlebars syntax
• Placeholder technique for safe HTML parsing
• Inline and block-level expression handling
• Attribute-safe placeholder logic
• Configurable formatting options via settings
• Force-format command via Command Palette

License

MIT © hbs-neat