beautifier/js-beautify

Configurable position and order of HTML attributes

Casimodo72 opened this issue · 0 comments

Description

Would a configuration of the position and order of HTML attributes be possible?

Context: I've used XamlStyler (well, it's for XAML not HTML) for over a year in a previous job and found that it produced the most readable, compact and consistent markup format - for our team at least.
Now I'm missing that for HTML.
Here's XamlStyler's attribute reordering Wiki for a quick look.

Input

E.g., if one writes HTML without thinking:

<img x-custom-attr-1="..." alt="..." class="..." [src]="..." id="..." />

Now, we would like some attributes to always appear on the line of the tag ("class" and "id").
Every following attribute would appear on a new line in the following order:

  1. Angular bindings ("[*]")
  2. built-in HTML attributes (i.e. not custom attributes)
  3. specific custom attributes ("x-*")

All of this is currently configurable with XamlStyler (for XAML).

Expected Output

The formatted HTML would be:

<img class="..." id="..."
    [src]="..."
    alt="..."
    x-custom-attr-1="..." />

Environment

OS: all