Fix false positives for type-only defineProps in `vue/require-default…

…-prop` rule (#1592) * Fix false positives for type-only defineProps in `vue/require-default-prop` rule * fix test
vuejs · Aug 3, 2021 · 8672712 · 8672712
1 parent 476b444
commit 8672712
Show file tree

Hide file tree

Showing 3 changed files with 67 additions and 10 deletions.
diff --git a/lib/rules/require-default-prop.js b/lib/rules/require-default-prop.js
@@ -175,6 +175,12 @@ module.exports = {
           withDefaults &&
           withDefaultsExpressions
         ) {
+          if (prop.required) {
+            continue
+          }
+          if (prop.types.length === 1 && prop.types[0] === 'Boolean') {
+            continue
+          }
           if (!withDefaultsExpressions[prop.propName]) {
             context.report({
               node: prop.node,

diff --git a/tests/lib/rules/require-default-prop.js b/tests/lib/rules/require-default-prop.js
@@ -235,7 +235,7 @@ ruleTester.run('require-default-prop', rule, {
       code: `
       <script setup lang="ts">
       interface Props {
-        foo: number
+        foo?: number
       }
       defineProps<Props>()
       </script>
@@ -251,7 +251,7 @@ ruleTester.run('require-default-prop', rule, {
       code: `
       <script setup lang="ts">
       interface Props {
-        foo: number
+        foo?: number
       }
       withDefaults(defineProps<Props>(), {foo:42})
       </script>
@@ -267,7 +267,7 @@ ruleTester.run('require-default-prop', rule, {
       code: `
       <script setup lang="ts">
       interface Props {
-        foo: number
+        foo?: number
       }
       defineProps<Props>({
         foo:{
@@ -281,6 +281,53 @@ ruleTester.run('require-default-prop', rule, {
         ...parserOptions,
         parser: require.resolve('@typescript-eslint/parser')
       }
+    },
+    {
+      // https://github.com/vuejs/eslint-plugin-vue/issues/1591
+      filename: 'test.vue',
+      code: `
+      <template>
+        <div>
+          {{ required }}
+          {{ optional }}
+        </div>
+      </template>
+
+      <script setup lang="ts">
+      import { defineProps, withDefaults } from 'vue';
+
+      interface Props {
+        required: boolean;
+        optional?: boolean;
+      }
+
+      const props = withDefaults(defineProps<Props>(), {
+        optional: false,
+      });
+      </script>
+      `,
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions: {
+        ...parserOptions,
+        parser: require.resolve('@typescript-eslint/parser')
+      }
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script setup lang="ts">
+      interface Props {
+        optional?: boolean;
+      }
+
+      const props = defineProps<Props>();
+      </script>
+      `,
+      parser: require.resolve('vue-eslint-parser'),
+      parserOptions: {
+        ...parserOptions,
+        parser: require.resolve('@typescript-eslint/parser')
+      }
     }
   ],
 
@@ -503,7 +550,7 @@ ruleTester.run('require-default-prop', rule, {
             code: `
             <script setup lang="ts">
             interface Props {
-              foo: number
+              foo?: number
             }
             withDefaults(defineProps<Props>(), {bar:42})
             </script>

diff --git a/tests/lib/utils/index.js b/tests/lib/utils/index.js
@@ -1,13 +1,13 @@
 'use strict'
 
-const babelEslint = require('babel-eslint')
 const espree = require('espree')
 const utils = require('../../../lib/utils/index')
 const assert = require('assert')
 
 describe('getComputedProperties', () => {
   const parse = function (code) {
-    return babelEslint.parse(code).body[0].declarations[0].init
+    return espree.parse(code, { ecmaVersion: 2020 }).body[0].declarations[0]
+      .init
   }
 
   it('should return empty array when there is no computed property', () => {
@@ -112,7 +112,8 @@ describe('getComputedProperties', () => {
 
 describe('getStaticPropertyName', () => {
   const parse = function (code) {
-    return babelEslint.parse(code).body[0].declarations[0].init
+    return espree.parse(code, { ecmaVersion: 2020 }).body[0].declarations[0]
+      .init
   }
 
   it('should parse property expression with identifier', () => {
@@ -137,7 +138,8 @@ describe('getStaticPropertyName', () => {
 
 describe('getStringLiteralValue', () => {
   const parse = function (code) {
-    return babelEslint.parse(code).body[0].declarations[0].init
+    return espree.parse(code, { ecmaVersion: 2020 }).body[0].declarations[0]
+      .init
   }
 
   it('should parse literal', () => {
@@ -275,7 +277,8 @@ describe('getMemberChaining', () => {
 
 describe('getRegisteredComponents', () => {
   const parse = function (code) {
-    return babelEslint.parse(code).body[0].declarations[0].init
+    return espree.parse(code, { ecmaVersion: 2020 }).body[0].declarations[0]
+      .init
   }
 
   it('should return empty array when there are no components registered', () => {
@@ -335,7 +338,8 @@ describe('getRegisteredComponents', () => {
 
 describe('getComponentProps', () => {
   const parse = function (code) {
-    const data = babelEslint.parse(code).body[0].declarations[0].init
+    const data = espree.parse(code, { ecmaVersion: 2020 }).body[0]
+      .declarations[0].init
     return utils.getComponentProps(data)
   }