Rule proposal: indentation of closing bracket

[lencioni]

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="..."
/>

[jonathanong]

aside: from self-closing brackets, i would always like a space before it.

Yes;

<div />

No:

<div/>

[mathieumg]

Would be a welcome rule. I personally use:

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

<MyComponent
  myProp="..."
/>

[yannickcr]

I think it can be an option for #14

[lencioni]

Great work on adding this rule. However, I think it should support the following style:

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

<MyComponent
  myProp="..."
/>

This way you can clearly see where each component begins and ends based on the indentation. This style is especially beneficial when you have nesting:

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

Would you be open to adding this as an option to this rule? Should I open a different issue?

[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. :)