Add "line-aligned" to react/jsx-closing-tag-location

[Cooya]

It would be quite nice to have the option "line-aligned" in the rule react/jsx-closing-tag-location, same as in the rule https://github.com/jsx-eslint/eslint-plugin-react/blob/master/docs/rules/jsx-closing-bracket-location.md.

With this option, the following code would be accepted :

const test = <div>
	Hello World
</div>;

And this one would be denied :

const test = <div>
	Hello World</div>;

[ljharb]

I'm confused - how does closing-bracket-notation not already cover this case?

[Cooya]

With 'react/jsx-closing-bracket-location': ['error', 'tag-aligned'] in eslintrc.js, this is accepted :

const test = <div>
	Hello World</div>;

This as well :

<h4><span>
</span></h4>

It could be fixed with something like 'react/jsx-closing-tag-location': ['error', 'tag-aligned']. react/jsx-closing-tag-location without option is too harsh to be used.

[ljharb]

I suppose we could. At this point, i tend to think the only non-harmful style is that multiline jsx is wrapped in parens, and the opening tag starts on a new line, and the closing tag is aligned with the opening tag, and the closing paren is on a line by itself - but since we support line-aligned elsewhere it’d be reasonable to support it here.

[Cooya]

Yes, the rule react/jsx-closing-tag-location imposes the following syntax :

const test = (
	<div>
		Hello World
	</div>
);

but I would rather have the possibility to do it without parens :

const test = <div>
	Hello World
</div>;

It is simpler and shorter.

[ljharb]

it's more ambiguous, and not as aligned, which to me makes it much less simpler (and "shorter" isn't something that's good to optimize for).

[Cooya]

Yet it is implemented in the very similar rule jsx-closing-bracket-location :

// 'jsx-closing-bracket-location': [1, 'line-aligned']
var x = <Hello
  firstName="John"
  lastName="Smith"
/>;

var x = function() {
  return <Say
    firstName="John"
    lastName="Smith"
  >
    Hello
  </Say>;
};

For me, it makes sense to have the same options in jsx-closing-tag-location.

[ljharb]

Indeed; it was implemented there before I maintained this plugin.

To be clear, I added the "help wanted" label which means it'll be included once a PR is ready.

[kimtaejin3]

@Cooya @ljharb I would love to work on this

[ljharb]

@kimtaejin3 go for it