@ape-egg/prettier-plugin-vibe

⚠️ Early alpha — subject to change. A development-only formatting plugin for Vibe. It evolves alongside Vibe and will reach a stable release once the framework settles.

Prettier plugin for Vibe templates. Prettier sees Vibe's control-flow directives (<!-- if -->, <!-- each -->, <!-- else -->, <!-- /if -->) as plain HTML comments, so it leaves their contents flat. This plugin teaches Prettier to treat a directive pair as a block and indent its body, while leaving everything else to Prettier's own HTML formatter.

<!-- before -->
<!-- if items.length -->
<item-row>@[item.name]</item-row>
<!-- /if -->

<!-- after -->
<!-- if items.length -->
  <item-row>@[item.name]</item-row>
<!-- /if -->

Install

bun add -d @ape-egg/prettier-plugin-vibe
# or
npm install -D @ape-egg/prettier-plugin-vibe

Usage

Add it to your Prettier config:

{
  "plugins": ["@ape-egg/prettier-plugin-vibe"]
}

That's it. prettier --write (and editor format-on-save) now indent directive blocks in .html files. All other formatting — attributes, elements, wrapping — is unchanged; the plugin wraps Prettier's built-in HTML parser and printer rather than replacing it.

What it does

• Indents block directives. if / else if / else / each written on their own line get their body indented one level; the directive comments themselves stay at the block level.
• Leaves inline directives alone. A directive embedded in a text flow (e.g. inflicts<!-- if x --> more<!-- /if -->.) is kept inline, so no rendering-significant whitespace is introduced.
• Never breaks @[…] expressions across an attribute or splits them as tags — expression boundaries (including nested brackets and quoted strings) are recognised exactly as Vibe's runtime recognises them, so they can't derail tag detection.
• Idempotent. Formatting an already-formatted file is a no-op.

Notes

• Works under Prettier's default htmlWhitespaceSensitivity: "css" — it does not require (or want) "ignore", which would move/remove whitespace that affects rendering.
• A directive is treated as a block when it borders whitespace or a tag on both sides, and as inline when it directly abuts text. This rule is stable across repeated formatting.