`react/jsx-closing-bracket-location` not working

[Richienb]

Currently, the rule requires tags to be aligned:

https://github.com/xojs/eslint-config-xo-react/blob/e29b624ba20b00f7ada7889fcc7d936f8035b94e/index.js#L86-L92

In this situation, no amount of tabs would achieve that (line 6):

{via ? <div style={{
	display: 'flex',
	flexDirection: 'column',
	textAlign: 'center',
}}
       >
	<div>{destination}</div>
	<div>via {via}</div>
</div> : <span>{longName}</span>}

7 spaces worth of space are needed which can't be represented in tabs.

[Richienb]

This appears to fix the problem:

'react/jsx-closing-bracket-location': [
	'error',
	{ 
-		nonEmpty: 'tag-aligned',
+       nonEmpty: 'line-aligned',
		selfClosing: false
	}
],

[sindresorhus]

That allows for code like this though:

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

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

[sindresorhus]

Are you sure this is just not a bug/limitation in the rule?

[Richienb]

Are you sure this is just not a bug/limitation in the rule?

Yes, there is a limitation in the rule which means tag-aligned can't always give good alignment without having to use spaces.

[sindresorhus]

can't always give good alignment

But neither can line-aligned.

[sindresorhus]

I think you should open an issue eslint-plugin-react.

[ljharb]

To clarify: the rule was originally written with the airbnb config in mind, which requires parens around multiline jsx, so you'd always write it like this, whether you're using spaces or tabs:

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

There's likely to be edge cases for scenarios that weren't holistically considered. (Further discussion about closing-bracket-location can happen on the linked issue)