jsx-eslint/eslint-plugin-react

Bug: jsx-closing-bracket-location autofix removes whitespace character

Open

#1,501 opened on Oct 26, 2017

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

Description

<div>
  foo </div>

Renders a space in HTML: <div>foo </div>

After fix is applied, it becomes:

<div>
  foo 
</div>

Note that there IS a space after foo in the output, however this space will typically be linted off by no-trailing-spaces rule, and even if it's not linted out of your source code, it will be ignored by React's JSX parser, meaning the output HTML will be <div>foo</div> 100% of the time.

tl;dr

<div>foo </div> becomes <div>foo</div>

Contributor guide

Tech stack
javascriptreact
Domain
frontenddeveloper experiencetooling
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.
half day
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
Investigate the `jsx closing bracket location` rule's autofix code. The bug is that when moving the closing bracket to a new line, a trailing space is lost. The fix should preserve the space character before the closing bracket. Look at the rule's implementation in the repo, likely in `lib/rules/jsx closing bracket location.js`. Write a test case matching the issue example and ensure the autofix keeps the space intact.