js-beautify icon indicating copy to clipboard operation
js-beautify copied to clipboard

Configurable position and order of HTML attributes

Open Casimodo72 opened this issue 2 years ago • 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

Casimodo72 avatar Nov 15 '23 17:11 Casimodo72