Skip to content

Add sortLineLength option to vue/attributes-order rule #2758

Open
@0xA1337

Description

@0xA1337

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions