Attribute Sort
Provides sorting of HTML and XML Attributes. When enabled (true) it will sort attributes in an alpha-numeric order. Sorting is ignored on tags which contain Liquid output and tag type tokens as attributes. The rule also accepts a list of attribute names and when provided will be sorted according to order passed.
false
Take the following tag with several attributes defined in no specific order. When the rule is enabled (ie: true) the sorting order of these attributes will change. Attributes will be alphabetically sorted (A-Z).
- default
- recommended
- warrington
- strict
- prettier
<div
id="x"
data-c="true"
data-b="100"
class="xxx"
data-a="foo"></div>
<div
id="x"
data-c="true"
data-b="100"
class="xxx"
data-a="foo"></div>true
Take the following tag with several attributes defined in no specific order. When the rule is enabled (ie: true) the sorting order of these attributes will change. Attributes will be alphabetically sorted (A-Z).
- default
- recommended
- warrington
- strict
- prettier
<!-- After formatting -->
<div
class="xxx"
data-a="foo"
data-b="100"
data-c="true"
id="x"></div>
<!-- After formatting -->
<div
class="xxx"
data-a="foo"
data-b="100"
data-c="true"
id="x"></div>string[]
In addition to alphabetical sorting using boolean true, developers may prefer to control the sorting behavior of Æsthetic. The attributeSort rule accepts a string list of attribute names. When provided, markup attributes will be sorted according to the list entries and then alphabetically. Custom sorting will sort in the same order passed. Click the rules tab to inspect the sorting logic being used in the below sample.
- default
- recommended
- warrington
- strict
- prettier
<div
data-z
data-a
id="x"
data-d
data-c
data-b
data-e
class="xx">
<div
data-z
data-a
id="x"
data-d
data-c
data-b
data-e
class="xx"></div>
</div>
<div
id="x"
class="xx"
data-b
data-z
data-a
data-c
data-d
data-e>
<div
id="x"
class="xx"
data-b
data-z
data-a
data-c
data-d
data-e></div>
</div>