Skip to content

Rule Proposal: require-custom-props #2735

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
alexerisov opened this issue Apr 8, 2025 · 0 comments
Open

Rule Proposal: require-custom-props #2735

alexerisov opened this issue Apr 8, 2025 · 0 comments

Comments

@alexerisov
Copy link

alexerisov commented Apr 8, 2025

Please describe what the rule should do:
This rule enforces the presence or absence of specific props for specific Vue components. It helps ensure consistency and adherence to project-specific conventions or deprecations by warning developers when required props are missing or when deprecated props are used.

What category should the rule belong to?
[ ] Enforces code style (layout)
[x] Warns about a potential error (problem)
[ ] Suggests an alternate way of doing something (suggestion)
[ ] Other (please specify:)

<template>
    <!-- ❌ Should warn: Prop `small` is not passed when it`s required -->
    <RedToast />

    <!-- ✅ Correct usage: `small` prop is passed -->
    <RedToast small />

    <!-- ❌ Should warn: `rounded` prop is deprecated, use `border-radius` instead -->
    <BaseButton rounded />

    <!-- ❌ Should warn: colored` prop is deprecated, use `red` instead -->
    <BaseButton colored />

    <!-- ✅ Correct usage: `red` and `border-radius` props used -->
    <BaseButton red border-radius="4" />
</template>

Additional context
This rule is highly configurable. Below is an example of how it can be configured in the ESLint settings:

// eslint.config.js
rules: {
  'vue/require-custom-props': ["warn", {
    require: [
      {
        component: 'RedToast',
        prop: 'small',
        message: 'Prop `small` is not passed when it`s required'
      },
      {
        component: 'BlueToast',
        prop: 'small',
        message: 'Prop `small` is not passed when it`s required'
      }
    ],
    "non-require": [
      {
        component: 'BaseButton',
        prop: 'rounded',
        message: '`rounded` prop is deprecated, use `border-radius` instead'
      },
      {
        component: 'BaseButton',
        prop: 'colored',
        message: '`colored` prop is deprecated, use `red` instead'
      }
    ]
  }]
}

This rule enables teams to enforce custom prop usage conventions specific to their design systems or codebase standards. It can also be useful during codebase updates to support a smooth migration from legacy components to newer ones by identifying deprecated props and enforcing usage of required ones in new components.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant