Rule Proposal `vue/attribute-order`

Please describe what the rule should do:

Provide a template rule to enforce placing vue-specific attributes before other properties in a template tag.

What category of rule is this? (place an “X” next to just one item)

[X] 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 will warn about:

Configuration

‘vue/closing-bracket-location’: [‘alphabetical’ | ‘vue-first’]

Examples:

// bad
<a
  v-tooltip
  class="btn external-url"
  data-container="body"
  target="_blank"
  rel="noopener noreferrer nofollow"
  :title="title"
  :aria-label="title"
  :href="externalUrl">

// good
<a
  v-tooltip
  :title="title"
  :aria-label="title"
  :href="externalUrl"
  class="btn external-url"
  data-container="body"
  target="_blank"
  rel="noopener noreferrer nofollow">

[michalsnik]

https://vuejs.org/v2/style-guide/#Element-attribute-order-recommended is the best point of reference how the config should look like 😃

[michalsnik]

No, it hasn’t been taken forward yet. Feel free to submit PR with proposed changes - so we can challenge it 😃

Another idea for possible settings:

'vue/attributes-order': [2, {
  groups: {
    CUSTOM_CONDITIONALS: ['v-show', 'v-cloak', 'v-if', 'v-else-if', 'v-else'],
    SOME_OTHER_GROUP: ['v-once', 'v-pre'],
  },
  order: [
    'CUSTOM_CONDITIONALS',
    'SOME_OTHER_GROUP',
    'OTHER_ATTRS'
  ],
}]

I think it would be even easier to set-up 😃