-
-
Notifications
You must be signed in to change notification settings - Fork 694
Description
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.