jsx-eslint/eslint-plugin-react

Rule proposal: jsx-padded-children

Open

#2,045 opened on Nov 13, 2018

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

Description

Something similar to padded-blocks where it disallows code similar to this:

<div>

  <img />
</div>

Depending on the setting the following should not throw a warning:

// jsx-padded-children: [2, "always"]
<div>

  <img />

</div>

// jsx-padded-children: [2, "never"]
<div>
  <img />
</div>

Not sure if anyone ever would pick up always, that's why I'm also down for jsx-no-padded-children or something like that

Contributor guide

Tech stack
javascriptreact
Domain
developer experience
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
ESLint plugin developmentReact JSX
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
50
Research direction
The issue proposes a new rule `jsx padded children` similar to ESLint's `padded blocks`. To implement, study how existing rules like `jsx indent` are structured in the `src/rules/` directory. Look at the test files and documentation in `docs/rules/`. The maintainers may provide guidance on the rule name and configuration options. No linked PRs or assignees exist, so this is available for a first time contributor.