vue/attributes-order: Prioritize v-if/v-else/v-else-if to v-for in SFC templates in Vue 3

[kleinfreund]

What rule do you want to change?

Prioritize conditionals (e.g. v-if, v-else, etc.) to v-for in the vue/attributes-order rule because conditionals are now prioritized to v-for in Vue 3 (see Vue 3 Migration Guide: v-if vs. v-for Precedence).

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

More for users that use the vue/attributes-order already. For other scenarios, this change shouldn’t produce much more or fewer warnings overall.

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

New default behavior (switch precedence of LIST_RENDERING and CONDITIONALS).

Please provide some example code that this change will affect:

<span v-if="condition" />

<span
  v-for="item in items"
  :key="item"
  v-else
/>

What does the rule currently do for this code?

<span v-if="condition" />

<span
  v-for="item in items"
  v-else
  :key="item"
/>

What will the rule do after it's changed?

<span v-if="condition" />

<span
  v-else
  v-for="item in items"
  :key="item"
/>

Additional context

Besides of this being in line with how this code will be treated by Vue 3, I also think it’s preferable that v-for and key would be grouped together now because they belong together semantically.

[haoqunjiang]

But there’s this essential rule already: https://eslint.vuejs.org/rules/no-use-v-if-with-v-for.html

[haoqunjiang]

🤔 but that rule didn’t check v-else, maybe we need to check for it too. Because I don’t think v-else v-for on the same node should be encouraged.

[kleinfreund]

Perhaps not. There are indeed scenarios in which this is ambiguous, but I think regardless of the existence of vue/no-use-v-if-with-v-for, the precedence should be changed in vue/attributes/order.

[FloEdelmann]

that rule didn’t check v-else, maybe we need to check for it too

@sodatea see #1939

[kleinfreund]

I don't think this proposal is relevant enough to keep open so I'm closing this for now.