Rule proposal: indentation of closing bracket

Similar to #14 and #15, it might be nice to have a rule that specifies the indentation of closing brackets for JSX.

For non-self-closing tags, I’ve seen three different patterns: on the same line as last prop (should maybe be handled by #14), on new line but same indentation as props, and on new line but same indentation as opening bracket.

Same line:

<MyComponent
  myProp="...">
  Children
</MyComponent>

New line, same indentation as props:

<MyComponent
  myProp="..."
  >
  Children
</MyComponent>

New line, same indentation as opening bracket:

<MyComponent
  myProp="..."
>
  Children
</MyComponent>

For self-closing tags, I’ve seen the same patterns, but one might want to be able to specify differences. For example, one might want to have non-self-closing be at same indentation as props, but self closing to be at same indentation as opening bracket:

<MyComponent
  myProp="..."
  >
  Children
</MyComponent>

<MyComponent
  myProp="..."
/>

[yannickcr]

Since v3.4.0 you can enforce different style for non-empty and self-closing tags.

You should be able to enforce this style with the following configuration:

"jsx-closing-bracket-location": [1, {
  "nonEmpty": "props-aligned", // Align the bracket with the last prop
  "selfClosing": "tag-aligned" // Align the bracket with the opening tag
}]

[lencioni]

Ah! I see. Thanks. I think I misread the documentation. 😃