close tag of A span multi lines

[hisland]

Prettier 1.15.1
Playground link

--parser html

Input:

<div id="error_sample"><a href="/coop.html">aaaaa</a><a href="/coop.html">my close tag span multi line</a><a href="/coop.html">aaaaa</a></div>
<div id="ok_sample"><a href="/coop.html">aaaaa</a> <a href="/coop.html">has whitesapce around me, i'am ok</a> <a href="/coop.html">aaaaa</a></div>

<a href="/coop.html">this is a long long long long long long long long long long long line</a>
<div class="halo">this is a long long long long long long long long long long long line</div>

Output:

<div id="error_sample">
  <a href="/coop.html">aaaaa</a
  ><a href="/coop.html">my close tag span multi line</a
  ><a href="/coop.html">aaaaa</a>
</div>
<div id="ok_sample">
  <a href="/coop.html">aaaaa</a>
  <a href="/coop.html">has whitesapce around me, i'am ok</a>
  <a href="/coop.html">aaaaa</a>
</div>

<a href="/coop.html"
  >this is a long long long long long long long long long long long line</a
>
<div class="halo">
  this is a long long long long long long long long long long long line
</div>

Expected behavior:
see the output above, '#ok_sample'

[hawkrives]

@hisland It's because <a> is an inline tag, so if Prettier added whitespace to the HTML it would show up in your browser – see https://prettier.io/blog/2018/11/07/1.15.0.html#whitespace-sensitive-formatting for more detail

[paolovanini]

It's the same in 1.15.2.
(sorry but I don't know how to link the playground)

Prettier 1.15.2

--parser html
--single-quote

Input:

<p>'print-width' parameter is set to 80</p>
<p>if line lenght/width is under 81 characters: closing 'a' tag is fine</p>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 79 characters</a>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 80 characters</a>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 81 characters</a>
<p>if line lenght/width is over 81 characters: closing 'a' tag is broken over 2 lines:</p>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 82 characters</a>

Output:

<p>'print-width' parameter is set to 80</p>
<p>if line lenght/width is under 81 characters: closing 'a' tag is fine</p>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 79 characters</a>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 80 characters</a>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 81 characters</a>
<p>
  if line lenght/width is over 81 characters: closing 'a' tag is broken over 2
  lines:
</p>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"
  >line is 82 characters</a
>

Expected behavior:
for example, I should not see "</a" in line 11 and ">" in line 12 but the whole closing tag "</a>" should be on line 11

[ikatyang]

@paolovanini It sounds like the same concept as #5377, can you move your comment there?

[paolovanini]

@ikatyang : I don't think it's the same issue. It's not a problem with the alignment of a tag and its corresponding closing tag but that the single closing a tag (</a>) it's divided in 2 different lines.

[hisland]

through the spec, I know that end-tag can contain white-space, so
</a> or
</a > or
</a
> are valid end-tag!
my editor syntax highlighting take me wrong,

[paolovanini]

@hisland : that kind of formatting could be valid according to the spec but I never seen in use before :-)
However, the real problem is the consistency with other closing tags: why only "</a>" tag should be formatted like that by Prettier but "</p>", "</div>" and other closing tags should behave differently? :-)

[ikatyang]

@hisland Sounds like this issue can be closed?

@paolovanini #5377 is about using --jsx-bracket-same-line in html-like parser, they look like the same concept to me (do not put > alone on the next line). Did I miss something?

[hisland]

@paolovanini the link can answer your doubt

[hisland]

@ikatyang , this issue can be closed, but I don't think it is the same as #5377, because it is about the end-tag span two lines, it seems weird though it is valid!

[ikatyang]

I'm confused. What's the difference between

• "do not put > alone on the next line"

and

• "the single closing a tag (</a>) it's divided in 2 different lines", or
• "the end-tag span two lines"

?

[ikatyang]

why only </a> tag should be formatted like that by Prettier but </p>, </div> and other closing tags should behave differently?

Oh, I should understand your issue now. As mentioned by @hawkrives, it's because <a> is an inline element and we don't want to break your code, see Whitespace-sensitive formatting for more info. And if you don't care about those whitespaces, just use --html-whitespace-sensitivity ignore:

Prettier 1.15.2
Playground link

--html-whitespace-sensitivity ignore
--parser html

Input:

<p>'print-width' parameter is set to 80</p>
<p>if line lenght/width is under 81 characters: closing 'a' tag is fine</p>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 79 characters</a>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 80 characters</a>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 81 characters</a>
<p>if line lenght/width is over 81 characters: closing 'a' tag is broken over 2 lines:</p>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 82 characters</a>

Output:

<p>'print-width' parameter is set to 80</p>
<p>if line lenght/width is under 81 characters: closing 'a' tag is fine</p>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 79 characters</a>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 80 characters</a>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">line is 81 characters</a>
<p>
  if line lenght/width is over 81 characters: closing 'a' tag is broken over 2
  lines:
</p>
<a href="xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx">
  line is 82 characters
</a>

[hisland]

Yeah ! That's what I need, because I style tag-a as a block-element, which don't care the whitespace around it. Thank You Very Much!

[paolovanini]

@ikatyang : the option you suggested seems to resolve my problems with the closing tags:.
--html-whitespace-sensitivity ignore
(and I learned a lot about the spec of a closing 'a' tag and white-spacing too ;-))
Thanks for your help! :-)