Enforce/disallow v-bind same name shorthand style

[FloEdelmann]

Please describe what the rule should do:

v-bind same name shorthand was added in Vue 3.4 and is supported since #2355/#2357. A new rule (e.g. vue/v-bind-same-name-style) or a new option of the existing vue/v-bind-style rule should be added that allows always enforcing that shorthand where possible, or always disallow it.

What category should the rule belong to?
[x] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

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

"sameNameShorthand": "always"

<template>
  <!-- ✓ GOOD -->
  <div :foo />
  <div v-bind:foo />

  <div :foo="bar" />
  <div :foo='bar' />
  <div v-bind:foo="bar" />
  <div v-bind:foo='bar' />

  <!-- ✗ BAD -->
  <div :foo="foo" />
  <div :foo='foo' />
  <div v-bind:foo="foo" />
  <div v-bind:foo='foo' />
</template>

"sameNameShorthand": "never"

<template>
  <!-- ✓ GOOD -->
  <div :foo="foo" />
  <div :foo='foo' />
  <div v-bind:foo="foo" />
  <div v-bind:foo='foo' />

  <div :foo="bar" />
  <div :foo='bar' />
  <div v-bind:foo="bar" />
  <div v-bind:foo='bar' />

  <!-- ✗ BAD -->
  <div :foo />
  <div v-bind:foo />
</template>

Additional context:

• Support v-bind same name shorthand #2355
• Upgrade vue-eslint-parser and add support for v-bind same-name shorthand #2357
• Support for Vue.js 3.4 #2326

[waynzh]

I’d be happy to help out with this one!
And I've noticed that the AST structure generated by both ways seems to be the same, as per the eslint-vue-parser. It looks like we can't differentiate them just by checking the directive.value.

Would love to get some insights on how we might tell them apart and get it working. Any thoughts?

[ota-meshi]

Thank you.

Would love to get some insights on how we might tell them apart and get it working.

We already have a function that checks if v-bind same-name shorthand.

eslint-plugin-vue/lib/utils/index.js

Line 3043 in 959858c

function isVBindSameNameShorthand(node) {

[waynzh]

We already have a function that checks if v-bind same-name shorthand.

So it's done through range comparison, that makes sense! Thanks for the reference.