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

vuejs · Jan 28, 2024 · c4be00b · c4be00b
1 parent 959858c
commit c4be00b
Show file tree

Hide file tree

Showing 2 changed files with 297 additions and 41 deletions.
diff --git a/lib/rules/v-bind-style.js b/lib/rules/v-bind-style.js
@@ -6,6 +6,56 @@
 '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) {
+  /** @returns {string | null} */
+  function getAttributeName() {
+    // not support VExpressionContainer e.g. :[attribute]
+    if (node.key.argument.type === 'VIdentifier') {
+      return node.key.argument.rawName
+    }
+
+    return null
+  }
+
+  /** @returns {string | null} */
+  function getValueName() {
+    if (node.value?.expression?.type === 'Identifier') {
+      return node.value.expression.name
+    }
+
+    return null
+  }
+
+  const attrName = getAttributeName()
+  const valueName = getValueName()
+  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 +66,114 @@ 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 shorthand same name.',
+      unexpectedShorthand: 'Unexpected shorthand same name.'
     }
   },
   /** @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 checkPropForm(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 checkPropSameName(node) {
+      if (sameNameShorthand === 'ignore' || !isSameName(node)) return
+
+      const preferShorthand = sameNameShorthand === 'always'
+      const isShortHand = utils.isVBindSameNameShorthand(node)
+      if (isShortHand === preferShorthand) {
+        return
+      }
+
+      let messageId = 'unexpectedShorthand'
+      if (preferShorthand) {
+        messageId = 'expectedShorthand'
+      }
+
+      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
+      ) {
+        checkPropSameName(node)
+        checkPropForm(node)
       }
     })
   }

diff --git a/tests/lib/rules/v-bind-style.js b/tests/lib/rules/v-bind-style.js
@@ -12,6 +12,9 @@ const tester = new RuleTester({
   languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
 })
 
+const expectedShorthand = 'Expected shorthand same name.'
+const unexpectedShorthand = 'Unexpected shorthand same name.'
+
 tester.run('v-bind-style', rule, {
   valid: [
     {
@@ -34,7 +37,7 @@ tester.run('v-bind-style', rule, {
     {
       filename: 'test.vue',
       code: '<template><div v-bind:foo="foo"></div></template>',
-      options: ['longform']
+      options: ['longform', { sameNameShorthand: 'ignore' }]
     },
 
     // Don't enforce `.prop` shorthand because of experimental.
@@ -55,6 +58,72 @@ tester.run('v-bind-style', rule, {
       filename: 'test.vue',
       code: '<template><div .foo="foo"></div></template>',
       options: ['shorthand']
+    },
+    // same-name shorthand: never
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo="foo" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo="foo" /></template>',
+      options: ['longform', { sameNameShorthand: 'never' }]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: `
+      <template>
+      <div :foo.prop="foo" />
+      <div .foo="foo" />
+      </template>
+      `,
+      options: ['shorthand', { sameNameShorthand: 'never' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo.prop="foo" /></template>',
+      options: ['longform', { sameNameShorthand: 'never' }]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :foo-bar="fooBar" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }]
+    },
+    // same-name shorthand: always
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>',
+      options: ['longform', { sameNameShorthand: 'always' }]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: `
+      <template>
+      <div :foo.prop />
+      <div .foo />
+      </template>
+      `,
+      options: ['shorthand', { sameNameShorthand: 'always' }]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo.prop /></template>',
+      options: ['longform', { sameNameShorthand: 'always' }]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :foo-bar/></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }]
     }
   ],
   invalid: [
@@ -120,6 +189,89 @@ tester.run('v-bind-style', rule, {
       output: '<template><div v-bind:foo /></template>',
       options: ['longform'],
       errors: ["Expected 'v-bind' before ':'."]
+    },
+    // same-name shorthand: never
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo /></template>',
+      output: '<template><div :foo="foo" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo /></template>',
+      output: '<template><div v-bind:foo="foo" /></template>',
+      options: ['longform', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: '<template><div :foo.prop /></template>',
+      output: '<template><div :foo.prop="foo" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo /></template>',
+      output: '<template><div .foo="foo" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo /></template>',
+      output: '<template><div v-bind:foo.prop /></template>',
+      options: ['longform', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand, "Expected 'v-bind:' instead of '.'."]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :foo-bar /></template>',
+      output: '<template><div :foo-bar="fooBar" /></template>',
+      options: ['shorthand', { sameNameShorthand: 'never' }],
+      errors: [unexpectedShorthand]
+    },
+    // same-name shorthand: always
+    {
+      filename: 'test.vue',
+      code: '<template><div :foo="foo" /></template>',
+      output: '<template><div :foo /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-bind:foo="foo" /></template>',
+      output: '<template><div v-bind:foo /></template>',
+      options: ['longform', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      // modifier
+      filename: 'test.vue',
+      code: '<template><div :foo.prop="foo" /></template>',
+      output: '<template><div :foo.prop /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div .foo="foo" /></template>',
+      output: '<template><div .foo /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
+    },
+    {
+      // camel case
+      filename: 'test.vue',
+      code: '<template><div :foo-bar="fooBar" /></template>',
+      output: '<template><div :foo-bar /></template>',
+      options: ['shorthand', { sameNameShorthand: 'always' }],
+      errors: [expectedShorthand]
     }
   ]
 })