Skip to content

Enforcing props destructuring #2688

Closed
@Ericlm

Description

@Ericlm
Contributor

Please describe what the rule should do:
The role of this rule would be to suggest props destructuring. It could also warns on its usage if necessary.

What category should the rule belong to?

[X] Enforces code style (layout)
[ ] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

Provide 2-3 code examples that this rule should warn about:

// vue/prefer-props-destructuring

const props = defineProps<>({...}) // 🚨

const {...} = defineProps<>({...}) // 👍

Additional context

Activity

markbrockhoff

markbrockhoff commented on Mar 31, 2025

@markbrockhoff

I agree that a rule to enforce a default style for declaring props (especially with defaults) should be provided. At the moment there are two ways for defining default values on props:

const { foo = "bar" } = defineProps<{ foo?: string }>(); // Destructuring with default assignment

const props = withDefaults(defineProps<{ foo?: string }>(), { foo: "bar" }); // Wrapping defineProps with withDefaults

I'd suggest creating a configurable rule allowing the project to decide which style to use for concistency. So either destructuring should be prefered or the opposite, where props should not be destructured and withDefaults be used.

mrleblanc101

mrleblanc101 commented on Apr 14, 2025

@mrleblanc101

Since reactive props destructuring has been added in Vue 3.5, I think a rule for this is important for code consistency !
I see that @waynzh has worked pushed some commit about props destructuring on main

waynzh

waynzh commented on Apr 14, 2025

@waynzh
Member

This is certainly a useful rule. It's pretty straightforward, given that a function already exists to identify usage of prop destructuring.

ZexTech

ZexTech commented on Apr 30, 2025

@ZexTech
esfahanweb

esfahanweb commented on May 5, 2025

@esfahanweb
ota-meshi

ota-meshi commented on May 5, 2025

@ota-meshi
Member

Please do not comment on your problem on a closed issue.
Open a new issue and provide details about your problem and a reproduction repository.

locked as resolved and limited conversation to collaborators on May 5, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

      Development

      Participants

      @esfahanweb@ota-meshi@mrleblanc101@Ericlm@waynzh

      Issue actions

        Enforcing props destructuring · Issue #2688 · vuejs/eslint-plugin-vue