Skip to content

Rule Proposal: Component props sort order #630

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
gwardwell opened this issue Nov 3, 2018 · 0 comments
Open

Rule Proposal: Component props sort order #630

gwardwell opened this issue Nov 3, 2018 · 0 comments

Comments

@gwardwell
Copy link

Please describe what the rule should do:
This rule should enforce sorting of component props. I would propose that you could set it to sort:

  • Alphabetically ascending and descending
  • Required props first or last

Ideally this rule would be an auto-fixing rule, so the individual developer wouldn't necessarily need to worry about manually ordering their props.

What category of rule is this? (place an "X" next to just one item)

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

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

Sort props alphabetically, Ascending:

export default {
    props: {
        ant: {
            type: String,
            required: false,
            default: '',
        },
        bird: {
            type: Boolean,
            required: true,
        },
        cat: {
            type: String,
            required: true,
        },
        elephant: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
}

Sort props alphabetically, descending:

export default {
    props: {
        elephant: {
            type: Boolean,
            required: false,
            default: false,
        },
        cat: {
            type: String,
            required: true,
        },
        bird: {
            type: Boolean,
            required: true,
        },
        ant: {
            type: String,
            required: false,
            default: '',
        },
    },
}

Sort props alphabetically, ascending, required first:

export default {
    props: {
        bird: {
            type: Boolean,
            required: true,
        },
        cat: {
            type: String,
            required: true,
        },
        ant: {
            type: String,
            required: false,
            default: '',
        },
        elephant: {
            type: Boolean,
            required: false,
            default: false,
        },
    },
}

Sort props alphabetically, descending, required first:

export default {
    props: {
        cat: {
            type: String,
            required: true,
        },
        bird: {
            type: Boolean,
            required: true,
        },
        elephant: {
            type: Boolean,
            required: false,
            default: false,
        },
        ant: {
            type: String,
            required: false,
            default: '',
        },
    },
}

Sort props alphabetically, ascending, required last:

export default {
    props: {
        ant: {
            type: String,
            required: false,
            default: '',
        },
        elephant: {
            type: Boolean,
            required: false,
            default: false,
        },
        bird: {
            type: Boolean,
            required: true,
        },
        cat: {
            type: String,
            required: true,
        },
    },
}

Sort props alphabetically, descending, required first:

export default {
    props: {
        elephant: {
            type: Boolean,
            required: false,
            default: false,
        },
        ant: {
            type: String,
            required: false,
            default: '',
        },
        cat: {
            type: String,
            required: true,
        },
        bird: {
            type: Boolean,
            required: true,
        },
    },
}

Why should this rule be included?
It would help improve the readability or medium to long property list, making the overall list of props in a component easier to reason about.

@FloEdelmann FloEdelmann changed the title Rule Proposal: Component property sort order Rule Proposal: Component props sort order Sep 28, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants