Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Require JSX closing tag to be aligned with the opening tag (react/jsx-closing-tag-location) #1358

Closed
feross opened this issue Aug 14, 2019 · 8 comments

Comments

@feross
Copy link
Member

feross commented Aug 14, 2019

This rule checks all JSX multiline elements with children (non-self-closing) and verifies the location of the closing tag. The expectation is that the closing tag is aligned with the opening tag on its own line.

https://github.com/yannickcr/eslint-plugin-react/blob/master/docs/rules/jsx-closing-tag-location.md

The following patterns are considered warnings:

<Hello>
  marklar
  </Hello>
<Hello>
  marklar</Hello>

The following are not considered warnings:

<Hello>
  marklar
</Hello>
<Hello>marklar</Hello>
@feross
Copy link
Member Author

feross commented Aug 14, 2019

I know this is not controversial so I am going to ship it in standard 14. No ecosystem repos fail.

@feross feross closed this as completed in 71134bf Aug 14, 2019
@MatanBobi
Copy link

@feross Doesn't this collide with indent/jsx-indent rule?

@feross
Copy link
Member Author

feross commented Sep 11, 2019

@MatanBobi I don't believe so. Can you explain how?

@joke2k
Copy link

joke2k commented Sep 11, 2019

@feross I think that @MatanBobi means using non-self-closing tag with return:

  render () {
    return <div>
      Closing tag below where should be?
    </div>
  }

With this rule, this style raises an error (not aligned to open tag) and if I try to --fix it:

  render () {
    return <div>
      Closing tag below where should be?
           </div>
  }

which raises react/jsx-indent-problem and is ugly.

The only way to fix it is putting all in one line:

  render () {
    return <div>Closing tag below where should be?</div>
  }

but is not really sustainable.

@feross
Copy link
Member Author

feross commented Sep 11, 2019

@joke2k The intended style is to add parens anytime you have a multiline JSX statement.

  render () {
    return (
      <div>
        Closing tag below where should be?
      </div>
    )
  }

I'm not sure why the autofixer isn't doing that for you. Looks like we need to play with the JSX rules some more to get what we want.

@feross feross reopened this Sep 11, 2019
@feross
Copy link
Member Author

feross commented Sep 11, 2019

Re-opening so we can investigate fixing this for standard 15. Help wanted!

@feross feross modified the milestones: standard 14, standard 15 Sep 11, 2019
@MatanBobi
Copy link

@joke2k You got exactly what I meant, thanks for the wide explanation.

@feross feross modified the milestones: standard 15, standard 16 Oct 22, 2020
@feross
Copy link
Member Author

feross commented Oct 29, 2020

I believe this is fixed in standard 16.

@feross feross closed this as completed Oct 29, 2020
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Oct 30, 2021
suchitg8 pushed a commit to suchitg8/standard that referenced this issue Apr 9, 2022
kaiwang0119 added a commit to kaiwang0119/standard that referenced this issue Aug 26, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Projects
Archived in project
Development

No branches or pull requests

3 participants