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 (2,797 forks)batch import
acceptedhelp wantednew rule

Repository metrics

Stars
 (8,630 stars)
PR merge metrics
 (No merged PRs in 30d)

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

Research direction
Implement a new ESLint rule called jsx padded children that enforces or disallows blank lines between JSX children, similar to the existing padded blocks rule. Study the existing rule implementations in eslint plugin react for patterns, especially rules that lint JSX structures. Use the AST selectors to target JSXElement children and check for blank lines between them.
Tech stack
javascript
Domain
frontend
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.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptESLint plugin development
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
70