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.