Fix false positives for default with type Function in `vue/no-depreca…

…ted-props-default-this` rule (#1522)
vuejs · Jun 25, 2021 · 94db4a6 · 94db4a6
1 parent 28dec65
commit 94db4a6
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 0 deletions.
diff --git a/lib/rules/no-deprecated-props-default-this.js b/lib/rules/no-deprecated-props-default-this.js
@@ -73,6 +73,27 @@ module.exports = {
         scopeStack = scopeStack.upper
       }
     }
+
+    /**
+     * @param {Expression|SpreadElement|null} node
+     */
+    function isFunctionIdentifier(node) {
+      return node && node.type === 'Identifier' && node.name === 'Function'
+    }
+
+    /**
+     * @param {Expression} node
+     * @returns {boolean}
+     */
+    function hasFunctionType(node) {
+      if (isFunctionIdentifier(node)) {
+        return true
+      }
+      if (node.type === 'ArrayExpression') {
+        return node.elements.some(isFunctionIdentifier)
+      }
+      return false
+    }
     return utils.defineVueVisitor(context, {
       onVueObjectEnter(node) {
         for (const prop of utils.getComponentProps(node)) {
@@ -86,6 +107,11 @@ module.exports = {
           if (!def) {
             continue
           }
+          const type = utils.findProperty(prop.value, 'type')
+          if (type && hasFunctionType(type.value)) {
+            // ignore function type
+            continue
+          }
           if (def.value.type !== 'FunctionExpression') {
             continue
           }

diff --git a/tests/lib/rules/no-deprecated-props-default-this.js b/tests/lib/rules/no-deprecated-props-default-this.js
@@ -96,6 +96,31 @@ ruleTester.run('no-deprecated-props-default-this', rule, {
         }
         </script>
       `
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/1464
+      filename: 'test.vue',
+      code: `
+      <template>
+        <button @click="printMessage">Print message</button>
+      </template>
+
+      <script>
+
+      export default {
+        name: 'App',
+        props: {
+          message: String,
+          printMessage: {
+            type: Function,
+            default() {
+              console.log(this.message);
+            }
+          }
+        }
+      }
+      </script>
+      `
     }
   ],