@if(showFooter)
<footer class="border-t border-gray-200">
<div class="container mx-auto py-8">
@each(section in sections)
<h3>{{section.title}}</h3>
<ul>
@each(item in section.items)
<li><a href="{{item.href}}">{{item.label}}</a></li>
@end
</ul>
@end
</div>
</footer>
@end

@if(showFooter)
  <footer class="border-t border-gray-200">
    <div class="container mx-auto py-8">
      @each(section in sections)
        <h3>{{ section.title }}</h3>
        <ul>
          @each(item in section.items)
            <li><a href="{{ item.href }}">{{ item.label }}</a></li>
          @end
        </ul>
      @end
    </div>
  </footer>
@end

npm install --save-dev prettier prettier-edge

Prettier auto-detects the plugin for .edge files when it is a project dependency — no .prettierrc changes required.

npx prettier --write "resources/views/**/*.edge"

<button {{
  $props
    .merge({ type: 'button', class: ['btn', 'btn-primary'] })
    .toAttrs()
}}>
  {{{ await $slots.main() }}}
</button>

@!input.control({
  type: 'email',
  name: 'email',
  required: true,
  placeholder: 'Subscribe to our newsletter',
})

<div
  class="container mx-auto px-5 lg:px-10 py-24 lg:border-x border-woodsmoke-900 relative"
>
  …
</div>

<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
  <path d="M12 2L2 7l10 5 10-5-10-5z" fill="currentColor" />
  <circle cx="12" cy="12" r="3" />
  <g transform="translate(4,4)">
    <rect width="16" height="16" rx="2" />
  </g>
</svg>

Example .prettierrc:

{
  "printWidth": 100,
  "singleQuote": true,
  "bracketSameLine": true,
  "edgeAttributeQuotes": "preserve",
  "edgeBlankLinesInBlocks": 2
}

See docs/adr/0008-options-surface.md for the rationale and the list of Prettier options deliberately ignored.

Most Prettier IDE integrations pick the plugin up automatically once it is installed. In VS Code the standard Prettier extension is enough — point editor.defaultFormatter at it for .edge files.

// .vscode/settings.json
{
  "[edge]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode",
    "editor.formatOnSave": true
  }
}

Early release. Validated against two production AdonisJS sites — 256 of 256 templates round-trip cleanly. Files that fail to parse are written back unchanged, never corrupted.

The plugin owns its HTML printer end-to-end; it does not delegate to Prettier's html parser. HTML semantics — entity preservation, boolean attributes, <!DOCTYPE>, CDATA, conditional comments, processing instructions, SVG self-closing — are handled in this codebase. See docs/adr/0001-pipeline-shape.md for why.

• Additional ecosystem tags as user reports surface them.
• Public edgeKnownBlockTags / edgeKnownInlineTags config, if community templates show a real need.

The pipeline runs in this order, each stage scoped to one job:

The architecture decisions are documented as ADRs under docs/adr/.

npm test                                                  # 75 unit + corpus fixtures
UPDATE_SNAPSHOTS=1 npm test                               # regenerate expected.edge files
EDGE_SMOKE_DIRS=/path/to/views npm test                   # parse-only check against real templates
EDGE_DEBUG_PARSE=1 npm test                               # log parse errors instead of swallowing

Fixtures live under test/fixtures/:

• units/<category>/<name>/{input,expected}.edge — focused cases. Optional options.json overrides Prettier options.
• corpus/<project>/<file>.edge — whole real-world files. Each one is asserted to parse cleanly and be idempotent. A sibling <file>.expected.edge makes the baseline frozen.

To add a new test case, drop a file in the right place and run UPDATE_SNAPSHOTS=1 npm test. Review the diff in the generated expected.edge before committing.

MIT