New Prettier rule: htmlWhitespaceSensitivity

[danyball]

I would like to discuss the rule htmlWhitespaceSensitivity: 'ignore' to format code from this

to that

[01231]

Yes please! 🙏🏼

[raphaellueckl]

I'm against it because of this explanation: https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting

This can lead to major problems during coding. From the code-reading perspective, I like it more though. I noticed that you added this to the "Code Examples" and that is great, but I would not introduce that as a prettier rule for our whole codebase.

[LucaMele]

Agree with @raphaellueckl and i share your opinions about better to read

[danyball]

Nice explanation at that link. I have googled a bit to fix this crazy format (closing-tag-line-wrap of >):

.... but just found an open issue without solution : https://github.com/prettier/prettier/issues/5377

Lets wait a few weeks (till 1.6.20) and close this issue if theres no solution till than.

[danyball]

245 comments on the prettier issue.... and no solution :D Lets wait a few more weeks.

[danyball]

There is hope on this issue :) Prettier will implement a new config bracketSameLine which will solve that. But we have to wait a few more weeks till they have released that feature.

[raphaellueckl]

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.

This looks like something that we do not want, right? We wanted the tag to be tab-aligned for better visibility. When they now do this:

<div>
  <axa-button
       icon="download"
       variant="teal"
       disabled>This is an extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemely long button text</axa-button>
</div>

This looks so "unclosed". I would way more like the way from your first example, where you visually see that a group is closed.

<div>
  <axa-button
       icon="download"
       variant="teal"
       disabled>This is an extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemely long button text</axa-button
  >
</div>

Or maybe even:

<div>
  <axa-button
       icon="download"
       variant="teal"
       disabled>This is an extreeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeemely long button text<
  /axa-button>
</div>

[raphaellueckl]

voteclose