`vue/attributes-order` allow to differentiate between static and dynamic attributes

[drik98]

What rule do you want to change?

vue/attributes-order

Does this change cause the rule to produce more or fewer warnings?

More depending on the config. If the config does not change it should be equal.

How will the change be implemented? (New option, new default behavior, etc.)?

New option. Currently only OTHER_ATTR can be used for attributes, no matter if they are static or dynamic (using v-bind). I'd like to differentiate between those two types. We like to have our static attributes first and our dynamic attributes second. I'd imagine you could give the option to use something like OTHER_ATTR_STATIC and OTHER_ATTR_DYNAMIC where as OTHER_ATTR would become an alias for [ 'OTHER_ATTR_STATIC', 'OTHER_ATTR_DYNAMIC' ] so current configs do not break.

Please provide some example code that this change will affect:

  <div
    prop-one="prop"
    :prop-two="prop"
    prop-three="prop">

What does the rule currently do for this code?

  <div
    prop-one="prop"
    :prop-two="prop"
    prop-three="prop">

What will the rule do after it's changed?

using the config

{
  "vue/attributes-order": ["error", {
    "order": [
      "DEFINITION",
      "LIST_RENDERING",
      "CONDITIONALS",
      "RENDER_MODIFIERS",
      "GLOBAL",
      ["UNIQUE", "SLOT"],
      "TWO_WAY_BINDING",
      "OTHER_DIRECTIVES",
      "OTHER_ATTR_STATIC",
      "OTHER_ATTR_DYNAMIC",
      "EVENTS",
      "CONTENT"
    ],
    "alphabetical": false
  }]
}

it should change to

  <div
    prop-one="prop"
    prop-three="prop"
    :prop-two="prop">

[CamilleDrapier]

Just an idea in the same vein; In case this is considered, maybe it could be nice to further allow differentiation for "boolean/true attributes" as well (OTHER_ATTR_TRUE), such as the following:

 <div
    prop-a="prop"
    :prop-b="prop"
    prop-c="prop"
    prop-d
    :prop-e="prop"
>

would become (with alphabetical sorting enabled):

 <div
    prop-d
    prop-a="prop"
    prop-c="prop"
    :prop-b="prop"
    :prop-e="prop"
>

[FloEdelmann]

@CamilleDrapier See #1870 and in particular https://github.com/vuejs/eslint-plugin-vue/issues/1870#issuecomment-1109670173.

That issue should probably be implemented together with this one.

[drik98]

I just got around to test it and it works really great. Thank you very much for implementing my request!!