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

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]

@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.

[joke2k]

@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.