[resolved] [HTML] allow corresponding option to jsxBracketSameLine

Note: Read this comment to make sure you’re up-to-speed on what this issue is and is not about: https://github.com/prettier/prettier/issues/5377#issuecomment-628213559

---

For React/JSX - Prettier has an option to allow tags to close on the same line as the declaration, rather then on a new line: jsxBracketSameLine: true:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}>
  Click Here
</button>

jsxBracketSameLine: false:

<button
  className="prettier-class"
  id="prettier-id"
  onClick={this.handleClick}
>
  Click Here
</button>

With Prettier 1.15.1, at least for the Angular parser, there is no corresponding option, so all HTML is formatted like this: Input:

<my-component class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
		      [foo]="bar">
</my-component>

Output:

<my-component
    class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
	[foo]="bar"
>
</my-component>

Playground link

It would be nice to have a flag to set it such that the output of the above would be:

<my-component
    class="wcd-flex-1 dialog-contents wcd-scroll-vertical"
	[foo]="bar">
</my-component>

[alexander-akait]

And so, it took 2 weeks. No negative reaction from maintainers (most of positive or neutral). I think it’s time for us to move on. I hope no one will be angry (including prettier maintainers).

I think consolidating of the bracketSameLine option is the best solution here. In fact, we don’t even create a new option. It’s just an improvement.

Roadmap (should be done in one PR):

1. Deprecate jsxBracketSameLine (soft, only deprecation message, logic should not be changed, the jsxBracketSameLine option only affected on jsx).
2. Implement the new bracketSameLine option (for HTML, JSX, Vue, Angular, using bracketSameLine: true sets jsxBracketSameLine to true too).
3. Improve tests (need tests for HTML, Vue, Angular) and docs.

I ask you to refrain from unnecessary/spam/off topic/etc comments so that we do not lose this comment. You can express emotions using emoji ⭐ And yes, PR welcome.

[matt328]

I don’t think I’ve ever seen any markup language with the closing brackets on a separate line. I’d like to see angleBracketSameLine or some equivalent.