jsx-eslint/eslint-plugin-react

Rule Suggestion: Forbid Classes / Classnames

Open

#1,193 opened on May 13, 2017

View on GitHub
 (7 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
acceptedenhancementhelp wantednew rule

Description

We have a font-awesome <Icon> component that handles accessibility nicely. However, it's still really easy for people to write <i className="fa ...">. It would be nice if we could ban a class based on matching a regex. Obviously, it's tricky/impossible to ban every possible use if people are doing things at runtime, but it would be nice if I could say no to a fair number of cases where this comes up.

Contributor guide

Tech stack
javascriptreact
Domain
toolingfrontend
Issue type
feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
1-2 days
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
stale
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
JavaScriptESLintReact
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
35
Research direction
To implement this feature, a contributor should examine existing rules in the `lib/rules/` directory of the eslint plugin react repository to understand the pattern for rule creation. The issue discussion suggests adding a configurable option to match class names via regex, similar to the `no unknown property` rule. The contributor should also review the ESLint documentation on writing custom rules. The issue comments (e.g., from @ljharb) may contain additional requirements or constraints. The new rule should be named something like `no class name regex` and should support an option specifying a regex pattern.