diff --git a/lib/rules/require-default-prop.js b/lib/rules/require-default-prop.js
index 313574a14..b5d2564e8 100644
--- a/lib/rules/require-default-prop.js
+++ b/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,26 +167,23 @@ 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
+ }
+ })
}
}
}
@@ -188,11 +191,33 @@ module.exports = {
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) => {
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 9671c00d4..c31f2d6af 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -1537,6 +1537,28 @@ module.exports = {
* @returns { { [key: string]: Property | undefined } }
*/
getWithDefaultsProps,
+ /**
+ * Gets the default definition nodes for defineProp
+ * using the props destructure with assignment pattern.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, {prop: AssignmentProperty , expression: Expression} | undefined> }
+ */
+ getDefaultPropExpressionsForPropsDestructure,
+ /**
+ * Checks whether the given defineProps node is using Props Destructure.
+ * @param {CallExpression} node The node of defineProps
+ * @returns {boolean}
+ */
+ isUsingPropsDestructure(node) {
+ const left = getLeftOfDefineProps(node)
+ return left?.type === 'ObjectPattern'
+ },
+ /**
+ * Gets the props destructure property nodes for defineProp.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, AssignmentProperty | undefined> }
+ */
+ getPropsDestructure,
getVueObjectType,
/**
@@ -3144,6 +3166,68 @@ function getWithDefaultsProps(node) {
return result
}
+/**
+ * Gets the props destructure property nodes for defineProp.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, AssignmentProperty | undefined> }
+ */
+function getPropsDestructure(node) {
+ /** @type {ReturnType<typeof getPropsDestructure>} */
+ const result = Object.create(null)
+ const left = getLeftOfDefineProps(node)
+ if (!left || left.type !== 'ObjectPattern') {
+ return result
+ }
+ for (const prop of left.properties) {
+ if (prop.type !== 'Property') continue
+ const name = getStaticPropertyName(prop)
+ if (name != null) {
+ result[name] = prop
+ }
+ }
+ return result
+}
+
+/**
+ * Gets the default definition nodes for defineProp
+ * using the props destructure with assignment pattern.
+ * @param {CallExpression} node The node of defineProps
+ * @returns { Record<string, {prop: AssignmentProperty , expression: Expression} | undefined> }
+ */
+function getDefaultPropExpressionsForPropsDestructure(node) {
+ /** @type {ReturnType<typeof getDefaultPropExpressionsForPropsDestructure>} */
+ const result = Object.create(null)
+ for (const [name, prop] of Object.entries(getPropsDestructure(node))) {
+ if (!prop) continue
+ const value = prop.value
+ if (value.type !== 'AssignmentPattern') continue
+ result[name] = { prop, expression: value.right }
+ }
+ return result
+}
+
+/**
+ * Gets the pattern of the left operand of defineProps.
+ * @param {CallExpression} node The node of defineProps
+ * @returns {Pattern | null} The pattern of the left operand of defineProps
+ */
+function getLeftOfDefineProps(node) {
+ let target = node
+ if (hasWithDefaults(target)) {
+ target = target.parent
+ }
+ if (!target.parent) {
+ return null
+ }
+ if (
+ target.parent.type === 'VariableDeclarator' &&
+ target.parent.init === target
+ ) {
+ return target.parent.id
+ }
+ return null
+}
+
/**
* Get all props from component options object.
* @param {ObjectExpression} componentObject Object with component definition
diff --git a/tests/lib/rules/require-default-prop.js b/tests/lib/rules/require-default-prop.js
index 3ac13bcb8..e352eddf3 100644
--- a/tests/lib/rules/require-default-prop.js
+++ b/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
+ }
+ ]
+ }
]
})