Description
What rule do you want to change?
vue/attributes-order
Does this change cause the rule to produce more or fewer warnings?
If the option is enabled (not by default), it'll produce more warnings than before.
How will the change be implemented? (New option, new default behavior, etc.)?
The change will be implemented by adding a new sortLineLength
boolean option to the vue/attributes-order
rule. This is a new, non-default option. When set to true
, it enables sorting attributes by line length within their configured groups.
Please provide some example code that this change will affect:
<div
id="id"
v-model="model"
very-long-attribute-name="value"
short="val"
@mouseover="handleMouseover"
@click="fn">
</div>
What does the rule currently do for this code?
Currently, if the attributes are in the correct groups as defined by the rule's configuration, and the alphabetical
option is not enabled, the rule does not report any warnings for this code.
What will the rule do after it's changed?
With the sortLineLength: true
option enabled, the rule will report warnings because the attributes within the "OTHER_ATTRS" and "EVENTS" groups are not sorted by length. It will suggest a fix to reorder them, expecting shorter attributes to come before longer ones, like this:
<div
id="id"
v-model="model"
short="val"
very-long-attribute-name="value"
@click="fn"
@mouseover="handleMouseover">
</div>
Additional context
This feature enhances code readability by creating a visual pyramid effect where attributes gradually increase in length, making it easier to scan through component attributes. The sortLineLength
and alphabetical
options are compatible. When both are true
, attributes are sorted by length first, then alphabetically as a tie-breaker.