Rule enhancement: vue/attributes-order

[sense-it-gmbh]

Please describe what the rule should do:

Enforce alphabetic order within attributes of same block (eg DEFINITION, LIST_RENDERING, see rule details). This concerns mainly the custom attributes and directives, events and global attributes (OTHER_DIRECTIVES, OTHER_ATTR, GLOBAL, EVENTS).

This could be an optional rule-option.

What category should the rule belong to?

• Enforces code style
• Warns about a potential error
• Suggests an alternate way of doing something
• Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

<!-- ✓ GOOD -->
<my-component
  a-custom-prop="value"
  :another-custom-prop="1 + 1"
  :blue-color="false"
  boolean-prop-again
  z-prop="Z"
  @change="someMethod"
  @input="someOtherMethod"
>
  <!-- content -->
</my-component>

<!-- ✗ BAD -->
<my-component
  z-prop="Z"
  :another-custom-prop="1 + 1"
  :blue-color="false"
  boolean-prop-again
  a-custom-prop="value"
  @input="someOtherMethod"
  @change="someMethod"
>
  <!-- content -->
</my-component>

Additional context

[erindepew]

If no one has picked this up yet I can grab it, it's an enhancement to the rule I added a while back here anyway #209

[erindepew]

It's been a while since I've contributed 😄 so I'm sure I missed a step or two in there, but the code works.
Also I know the example above had it sorting on the function name, but for the actual attribute sorting it goes off of the key name. For consistency sake it would make more sense to keep it just to the key names and not the values. e.g.

  z-prop="Z"
  :another-custom-prop="1 + 1"
  :blue-color="false"
  boolean-prop-again
  a-custom-prop="value"
  @input="someOtherMethod"
  @change="someMethod"
>

would be incorrect because @change should come before @input

[sense-it-gmbh]

Also I know the example above had it sorting on the function name

Hm, as far as I remember I intended to sort first by type (event, prop, directive, condition) and second by key-name (without :). I never intended to sort by value which would not make sense at all on dynamic values like user input.

Did I get something wrong or did you @erindepew ?

[erindepew]

🤔I think we agree on this @sense-it-gmbh and maybe I was just confused by the initial example. Mind taking a look at the tests I wrote for this and see if it all works the way you were expecting?

[sense-it-gmbh]

🤔I think we agree on this @sense-it-gmbh and maybe I was just confused by the initial example. Mind taking a look at the tests I wrote for this and see if it all works the way you were expecting?

I tried but I'm afraid I don't know enough about how these work so I cant really tell whether they are as expected.

[erindepew]

So you can review either the documentation I added:
https://github.com/vuejs/eslint-plugin-vue/pull/1022/files#diff-042799d8ab84dca42fc7dd1aa33dbb03R114
Or the tests https://github.com/vuejs/eslint-plugin-vue/pull/1022/files#diff-b1c806eb1ceb57105d9b7236f347d207R296

But it's fine, your example works and this will give you the output you're expecting. I just misspoke above.