feat: add option closing-bracket-newline for html beautify

[zhaojjiang]

This option is added to implement prettier's --bracket-same-line behavior.

Input code:

<div
  style="display: block;"
  width="100" height="200">
  aaaa
  <p>test content</p>
</div>

Output code:

<div
  style="display: block;"
  width="100"
  height="200"
>
  aaaa
  <p>test content</p>
</div>;

Description

• Source branch in your fork has meaningful name (not main)

Before Merge Checklist

These items can be completed after PR is created.

(Check any items that are not applicable (NA) for this PR)

• JavaScript implementation
• Python implementation (NA if HTML beautifier)
• Added Tests to data file(s)
• Added command-line option(s) (NA if
• README.md documents new feature/option(s)

[bitwiseman]

I'm not directly opposed to adding another config option for this setting, but this project has too many options already.

Similar to #1404 ... But for brace-style (which is currently not used in the html formatter except to be passed through to <script> contents).

[zhaojjiang]

I understand your concerns a little bit.

I opened this pr because js-beautify is the basic dependency of vscode built-in html-language-feature extension which used to format html code.

There is no other way to let vscode add this option, the only way I found is open a pr in js-beautify and then wait for vscode update its dependency!

I think this project should not be so cautious aboud adding new features, as mentioned above, this project is now a built-in feature of vscode, many html format issues in vscode are linked to this project.

[bitwiseman]

@zhaojjiang
The fact that this project is bundled in vscode means it needs to be even more cautious to not introduce breaking changes.

Do you want to take responsibility for potentially breaking millions of users?

[zhaojjiang]

hi, any plan for this option?

nowadays, I got another scene:

I use vue.volar as default vue formatter, and vue.volar format vue template code based on vscode built-in html-language-features -- which based js-beautify.
And then, I got conflict between vue eslint rule vue/html-closing-bracket-newline and html.format.wrapAttributes.

Eslint and prettier both support closing bracket newline control, And I hope js-beautify and vscode support this option too. -- I dont want to use prettier for some reasons, so I hope to solve all format rules by eslint and vscode build-in formatters.

[bitwiseman]

@zhaojjiang
Please change the name of the option to element-brace-style and the possible values to collapse and end-expand. The behavior will be same as what you have but will the possibility of additional values later.

Then I can merge.

[bitwiseman]

@zhaojjiang
Fast turn around thanks! One additional question: in your opinion, is end-expand the right name for the setting? Or would you suggest something else? I want it to be meaningful/descriptive.

I would have said expand but that could mean this kind of formatting:

<
  div
/>

Is that even a thing we need to be concerned about?

[zhaojjiang]

for most cases and developers,

<
  div
/>

is not an acceptable format, so we can ignore it.

In my opinion, element-brace-style should have only two state, so collapse and expand/end-expand is ok, the two words just opposite.

I'm not sure which additional values may be appended to this option later. If no, I prefer previous option name and boolean value, just a suggestion.

[Da-nie-elT]

Is this planned any time soon?

Coming from both react & php, having the > on the same line as the last multi-line attribute looks so off to me.