feat(v-bind-style): add sameNameShorthand option (#2381)

Co-authored-by: Flo Edelmann <git@flo-edelmann.de>

Author: waynzh

docs/rules/v-bind-style.md

@@ -32,16 +32,20 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
 
 ## :wrench: Options
 
-Default is set to `shorthand`.
-
 ```json
 {
-  "vue/v-bind-style": ["error", "shorthand" | "longform"]
+  "vue/v-bind-style": ["error", "shorthand" | "longform", {
+    "sameNameShorthand": "ignore" | "always" | "never"
+  }]
 }
 ```
 
 - `"shorthand"` (default) ... requires using shorthand.
 - `"longform"` ... requires using long form.
+- `sameNameShorthand` ... enforce the `v-bind` same-name shorthand style (Vue 3.4+).
+  - `"ignore"` (default) ... ignores the same-name shorthand style.
+  - `"always"` ... always enforces same-name shorthand where possible.
+  - `"never"` ... always disallow same-name shorthand where possible.
 
 ### `"longform"`
 
@@ -59,6 +63,38 @@ Default is set to `shorthand`.
 
 </eslint-code-block>
 
+### `{ "sameNameShorthand": "always" }`
+
+<eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'shorthand', { 'sameNameShorthand': 'always' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div :foo />
+
+  <!-- ✗ BAD -->
+  <div :foo="foo" />
+</template>
+```
+
+</eslint-code-block>
+
+### `{ "sameNameShorthand": "never" }`
+
+<eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'shorthand', { 'sameNameShorthand': 'never' }]}">
+
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div :foo="foo" />
+
+  <!-- ✗ BAD -->
+  <div :foo />
+</template>
+```
+
+</eslint-code-block>
+
 ## :books: Further Reading
 
 - [Style guide - Directive shorthands](https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands)

lib/rules/v-bind-style.js

@@ -6,6 +6,41 @@
 'use strict'
 
 const utils = require('../utils')
+const casing = require('../utils/casing')
+
+/**
+ * @typedef { VDirectiveKey & { name: VIdentifier & { name: 'bind' }, argument: VExpressionContainer | VIdentifier } } VBindDirectiveKey
+ * @typedef { VDirective & { key: VBindDirectiveKey } } VBindDirective
+ */
+
+/**
+ * @param {VBindDirective} node
+ * @returns {boolean}
+ */
+function isSameName(node) {
+  const attrName =
+    node.key.argument.type === 'VIdentifier' ? node.key.argument.rawName : null
+  const valueName =
+    node.value?.expression?.type === 'Identifier'
+      ? node.value.expression.name
+      : null
+  return Boolean(
+    attrName &&
+      valueName &&
+      casing.camelCase(attrName) === casing.camelCase(valueName)
+  )
+}
+
+/**
+ * @param {VBindDirectiveKey} key
+ * @returns {number}
+ */
+function getCutStart(key) {
+  const modifiers = key.modifiers
+  return modifiers.length > 0
+    ? modifiers[modifiers.length - 1].range[1]
+    : key.argument.range[1]
+}
 
 module.exports = {
   meta: {
@@ -16,60 +51,113 @@ module.exports = {
       url: 'https://eslint.vuejs.org/rules/v-bind-style.html'
     },
     fixable: 'code',
-    schema: [{ enum: ['shorthand', 'longform'] }],
+    schema: [
+      { enum: ['shorthand', 'longform'] },
+      {
+        type: 'object',
+        properties: {
+          sameNameShorthand: { enum: ['always', 'never', 'ignore'] }
+        },
+        additionalProperties: false
+      }
+    ],
     messages: {
       expectedLonghand: "Expected 'v-bind' before ':'.",
       unexpectedLonghand: "Unexpected 'v-bind' before ':'.",
-      expectedLonghandForProp: "Expected 'v-bind:' instead of '.'."
+      expectedLonghandForProp: "Expected 'v-bind:' instead of '.'.",
+      expectedShorthand: 'Expected same-name shorthand.',
+      unexpectedShorthand: 'Unexpected same-name shorthand.'
     }
   },
   /** @param {RuleContext} context */
   create(context) {
     const preferShorthand = context.options[0] !== 'longform'
+    /** @type {"always" | "never" | "ignore"} */
+    const sameNameShorthand = context.options[1]?.sameNameShorthand || 'ignore'
 
-    return utils.defineTemplateBodyVisitor(context, {
-      /** @param {VDirective} node */
-      "VAttribute[directive=true][key.name.name='bind'][key.argument!=null]"(
-        node
-      ) {
-        const shorthandProp = node.key.name.rawName === '.'
-        const shorthand = node.key.name.rawName === ':' || shorthandProp
-        if (shorthand === preferShorthand) {
-          return
-        }
+    /** @param {VBindDirective} node */
+    function checkAttributeStyle(node) {
+      const shorthandProp = node.key.name.rawName === '.'
+      const shorthand = node.key.name.rawName === ':' || shorthandProp
+      if (shorthand === preferShorthand) {
+        return
+      }
 
-        let messageId = 'expectedLonghand'
-        if (preferShorthand) {
-          messageId = 'unexpectedLonghand'
-        } else if (shorthandProp) {
-          messageId = 'expectedLonghandForProp'
-        }
+      let messageId = 'expectedLonghand'
+      if (preferShorthand) {
+        messageId = 'unexpectedLonghand'
+      } else if (shorthandProp) {
+        messageId = 'expectedLonghandForProp'
+      }
+
+      context.report({
+        node,
+        loc: node.loc,
+        messageId,
+        *fix(fixer) {
+          if (preferShorthand) {
+            yield fixer.remove(node.key.name)
+          } else {
+            yield fixer.insertTextBefore(node, 'v-bind')
+
+            if (shorthandProp) {
+              // Replace `.` by `:`.
+              yield fixer.replaceText(node.key.name, ':')
 
-        context.report({
-          node,
-          loc: node.loc,
-          messageId,
-          *fix(fixer) {
-            if (preferShorthand) {
-              yield fixer.remove(node.key.name)
-            } else {
-              yield fixer.insertTextBefore(node, 'v-bind')
-
-              if (shorthandProp) {
-                // Replace `.` by `:`.
-                yield fixer.replaceText(node.key.name, ':')
-
-                // Insert `.prop` modifier if it doesn't exist.
-                const modifier = node.key.modifiers[0]
-                const isAutoGeneratedPropModifier =
-                  modifier.name === 'prop' && modifier.rawName === ''
-                if (isAutoGeneratedPropModifier) {
-                  yield fixer.insertTextBefore(modifier, '.prop')
-                }
+              // Insert `.prop` modifier if it doesn't exist.
+              const modifier = node.key.modifiers[0]
+              const isAutoGeneratedPropModifier =
+                modifier.name === 'prop' && modifier.rawName === ''
+              if (isAutoGeneratedPropModifier) {
+                yield fixer.insertTextBefore(modifier, '.prop')
               }
             }
           }
-        })
+        }
+      })
+    }
+
+    /** @param {VBindDirective} node */
+    function checkAttributeSameName(node) {
+      if (sameNameShorthand === 'ignore' || !isSameName(node)) return
+
+      const preferShorthand = sameNameShorthand === 'always'
+      const isShorthand = utils.isVBindSameNameShorthand(node)
+      if (isShorthand === preferShorthand) {
+        return
+      }
+
+      const messageId = preferShorthand
+        ? 'expectedShorthand'
+        : 'unexpectedShorthand'
+
+      context.report({
+        node,
+        loc: node.loc,
+        messageId,
+        *fix(fixer) {
+          if (preferShorthand) {
+            /** @type {Range} */
+            const valueRange = [getCutStart(node.key), node.range[1]]
+
+            yield fixer.removeRange(valueRange)
+          } else if (node.key.argument.type === 'VIdentifier') {
+            yield fixer.insertTextAfter(
+              node,
+              `="${casing.camelCase(node.key.argument.rawName)}"`
+            )
+          }
+        }
+      })
+    }
+
+    return utils.defineTemplateBodyVisitor(context, {
+      /** @param {VBindDirective} node */
+      "VAttribute[directive=true][key.name.name='bind'][key.argument!=null]"(
+        node
+      ) {
+        checkAttributeSameName(node)
+        checkAttributeStyle(node)
       }
     })
   }