Add support for props destructure to vue/require-default-prop rule (#2552)

Author: ota-meshi

lib/rules/require-default-prop.js

@@ -7,6 +7,7 @@
 /**
  * @typedef {import('../utils').ComponentProp} ComponentProp
  * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ * @typedef {import('../utils').ComponentTypeProp} ComponentTypeProp
  * @typedef {ComponentObjectProp & { value: ObjectExpression} } ComponentObjectPropObject
  */
 
@@ -137,18 +138,23 @@ module.exports = {
 
  /**
  * @param {ComponentProp[]} props
- * @param {boolean} [withDefaults]
- * @param { { [key: string]: Expression | undefined } } [withDefaultsExpressions]
+ * @param {(prop: ComponentObjectProp|ComponentTypeProp)=>boolean} [ignore]
  */
- function processProps(props, withDefaults, withDefaultsExpressions) {
+ function processProps(props, ignore) {
  for (const prop of props) {
- if (prop.type === 'object' && !prop.node.shorthand) {
+ if (prop.type === 'object') {
+ if (prop.node.shorthand) {
+ continue
+ }
  if (!isWithoutDefaultValue(prop)) {
  continue
  }
  if (isBooleanProp(prop)) {
  continue
  }
+ if (ignore?.(prop)) {
+ continue
+ }
  const propName =
  prop.propName == null
  ? `[${context.getSourceCode().getText(prop.node.key)}]`
@@ -161,38 +167,57 @@ module.exports = {
  propName
  }
  })
- } else if (
- prop.type === 'type' &&
- withDefaults &&
- withDefaultsExpressions
- ) {
+ } else if (prop.type === 'type') {
  if (prop.required) {
  continue
  }
  if (prop.types.length === 1 && prop.types[0] === 'Boolean') {
  continue
  }
- if (!withDefaultsExpressions[prop.propName]) {
- context.report({
- node: prop.node,
- messageId: `missingDefault`,
- data: {
- propName: prop.propName
- }
- })
+ if (ignore?.(prop)) {
+ continue
  }
+ context.report({
+ node: prop.node,
+ messageId: `missingDefault`,
+ data: {
+ propName: prop.propName
+ }
+ })
  }
  }
  }
 
  return utils.compositingVisitors(
  utils.defineScriptSetupVisitor(context, {
  onDefinePropsEnter(node, props) {
- processProps(
- props,
- utils.hasWithDefaults(node),
+ const hasWithDefaults = utils.hasWithDefaults(node)
+ const defaultsByWithDefaults =
  utils.getWithDefaultsPropExpressions(node)
- )
+ const isUsingPropsDestructure = utils.isUsingPropsDestructure(node)
+ const defaultsByAssignmentPatterns =
+ utils.getDefaultPropExpressionsForPropsDestructure(node)
+
+ processProps(props, (prop) => {
+ if (prop.type === 'type') {
+ if (!hasWithDefaults) {
+ // If don't use withDefaults(), exclude it from the report.
+ return true
+ }
+ if (defaultsByWithDefaults[prop.propName]) {
+ return true
+ }
+ }
+ if (!isUsingPropsDestructure) {
+ return false
+ }
+ if (prop.propName == null) {
+ // If using Props Destructure but the property name cannot be determined,
+ // it will be ignored.
+ return true
+ }
+ return Boolean(defaultsByAssignmentPatterns[prop.propName])
+ })
  }
  }),
  utils.executeOnVue(context, (obj) => {

tests/lib/rules/require-default-prop.js

@@ -351,6 +351,43 @@ ruleTester.run('require-default-prop', rule, {
  ...languageOptions,
  parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
  }
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ <script setup>
+ const {foo=42,bar=42} = defineProps({foo: Number, bar: {type: Number}})
+ </script>
+ `,
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ...languageOptions
+ }
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ <script setup>
+ const {foo,bar} = defineProps({foo: Boolean, bar: {type: Boolean}})
+ </script>
+ `,
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ...languageOptions
+ }
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ <script setup>
+ // ignore
+ const {bar = 42, foo = 42} = defineProps({[x]: Number, bar: {type: Number}})
+ </script>
+ `,
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ...languageOptions
+ }
  }
  ],
 
@@ -623,6 +660,46 @@ ruleTester.run('require-default-prop', rule, {
  }
  ]
  }
- ])
+ ]),
+ {
+ filename: 'test.vue',
+ code: `
+ <script setup>
+ const {foo,bar} = defineProps({foo: Boolean, bar: {type: String}})
+ </script>
+ `,
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ...languageOptions
+ },
+ errors: [
+ {
+ message: "Prop 'bar' requires default value to be set.",
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ <script setup>
+ const {foo,bar} = defineProps({foo: Number, bar: {type: Number}})
+ </script>
+ `,
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ...languageOptions
+ },
+ errors: [
+ {
+ message: "Prop 'foo' requires default value to be set.",
+ line: 3
+ },
+ {
+ message: "Prop 'bar' requires default value to be set.",
+ line: 3
+ }
+ ]
+ }
  ]
 })