Skip to content

Rule Proposal: require-custom-props #2735

Open
@alexerisov

Description

@alexerisov

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.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions