g-plane / markup_fmt

Configurable HTML, Vue, Svelte, Astro, Angular, Jinja, Twig, Nunjucks and Vento formatter with dprint integration.
https://dprint.dev/plugins/markup_fmt/
MIT License
91 stars 4 forks source link

Add support for Angular templates #15

Closed tunibjork closed 2 months ago

tunibjork commented 5 months ago

I've been using markup_fmt together with dprint to format html files in an Angular project for a while and it has been working fairly well with some minor quirks — mostly related to how code gets formatted inside interpolation blocks (anything between {{ and }}).

Now that a new control flow syntax has been introduced, it would be great to have support for this (and Angular in general) especially when it comes to indentation and splitting the closing brackets into different lines.

As an example, this:

@if (loading$ | async) {
  <div class="loader"></div>
}

gets formatted like this:

@if (loading$ | async) {
<div class="loader"></div>
}

Any possibility to have support for Angular templates? Not sure how much of an effort it would be but it would be greatly appreciated — I'd really like to avoid going back to prettier for html formatting...

g-plane commented 5 months ago

It's possible but I haven't learned Angular before so I need to read Angular documentation.

tunibjork commented 5 months ago

Happy to provide assistance with anything but writing rust (unfortunately...)

Forgot to mention that html in Angular can optionally be placed inside the .ts file, as a string literal in the template property of the @Component() decorator. Would be extra nice to support that as well, but I know it is probably not as easy.

g-plane commented 5 months ago

There're nothing can do at markup_fmt's side for string literal in template property, because those code are processed by other plugins such as dprint-plugin-typescript or dprint-plugin-biome.

tunibjork commented 5 months ago

Ah of course, that makes sense. I will ask there.

g-plane commented 2 months ago

Please note that I won't add support for the previous *ngIf, ngSwitch and *ngFor syntaxes because of complexity.