jsx-eslint/eslint-plugin-react

react/boolean-prop-naming interface does not work

Open

#3.285 geöffnet am 9. Mai 2022

Auf GitHub ansehen
 (14 Kommentare) (21 Reaktionen) (0 zugewiesene Personen)JavaScript (8.630 Stars) (2.797 Forks)batch import
enhancementhelp wantedtypescript

Beschreibung

The react/boolean-prop-naming rule does not work when using an interface with TypeScript but it works with a type

This shows an error like it should:

type Props = {
  done: boolean; // Shows error
}

This doesn't show an error like it should:

interface Props {
  done: boolean; // No error
}

My usage of the rule:

"react/boolean-prop-naming": [
      "error",
      {
        "rule": "^(is|has)[A-Z]([A-Za-z0-9]?)+",
        "message": "It is better if your prop ({{ propName }}) starts with `is` or `has`"
      }
    ],

Versions:

  • eslint - 8.15.0
  • eslint-plugin-react 7.29.4

Contributor Guide

Tech Stack
javascripttypescriptreact
Domain
developer experiencefrontend
Issue Type
bug
SchwierigkeitGeschätzte Implementierungsschwierigkeit für neue Contributors, von 1 für sehr kleine Änderungen bis 5 für Expertenarbeit.
3
Geschätzte ZeitEin grober Zeitrahmen, um zu recherchieren, zu implementieren, zu testen und einen Pull Request vorzubereiten.
half day
AktivitätsstatusWie verfügbar das Issue gerade wirkt: frisch, aktiv, stale, blockiert oder wartet auf Maintainer-Input.
active
KlarheitWie klar das Issue die erwartete Änderung, Akzeptanzkriterien und den nächsten Schritt erklärt.
clear
Voraussetzungen
Basic knowledge of ESLint plugin architectureUnderstanding of TypeScript ASTFamiliarity with react/boolean prop naming rule
EinsteigerfreundlichkeitEin Score von 1 bis 100, der schätzt, wie zugänglich dieses Issue für First-Time Contributors ist.
40
Research-Richtung
Investigate the implementation of the react/boolean prop naming rule in the eslint plugin react repository. The bug is that the rule fails to detect boolean props when using TypeScript interfaces but works with type aliases. Look at the rule's source code, likely in lib/rules/boolean prop naming.js, to understand how it extracts prop types. Check if it uses TypeScript's type checker differently for interfaces vs types. Add a test case with an interface to reproduce the issue and then modify the rule to handle TSInterfaceDeclaration nodes similarly to TSTypeAliasDeclaration. Review any existing comments or linked issues for additional context.