jsx-eslint/eslint-plugin-react

[Bug]: `react/jsx-newline` does not remove empty lines for surrounding tags

Open

#3663 opened on Dec 6, 2023

View on GitHub
 (2 comments) (0 reactions) (0 assignees)JavaScript (8,630 stars) (2,797 forks)batch import
enhancementhelp wanted

Description

Is there an existing issue for this?

  • I have searched the existing issues and my issue is unique
  • My issue appears in the command-line and not only in the text editor

Description Overview

react/jsx-newline with { "prevent": true } does not remove empty lines for surrounding tags.

Currently react/jsx-newline does not detect any lint errors for the following JSX:

<div>

  <span>
    hi
  </span>

</div>

Expected Behavior

The current detection feels like unintended behavior, as I would expect all newlines within JSX to be removed as follows:

<div>
  <span>
    hi
  </span>
</div>

If there is a different eslint rule that checks for this please let me know!

eslint-plugin-react version

v7.33.2

eslint version

v8.55.0

node version

v18.6.0

Contributor guide

Tech stack
javascriptreact
Domain
frontendtooling
Issue type
bug
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-3 hours
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
clear
Prerequisites
ESLint rule developmentAST traversalJavaScript
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
65
Research direction
Examine the rule implementation in `src/rules/jsx newline.js`. The current logic detects newlines within JSX elements but not empty lines between a parent tag and its children (e.g., surrounding tags). Check the `create` method and how it uses `context.getSourceCode().getText()` or similar to find newlines. Look at the test file `tests/lib/rules/jsx newline.js` for existing tests to understand expected behavior. The fix likely involves adding a check for newlines between the opening tag and the first child, and between the last child and closing tag.