testea/test-repo
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix inline comment forcing element to break in html (#19304)

Browse Source
This commit is contained in:
Konv Suu authored and GitHub committed 2026-06-09 04:20:19 +08:00
1 parent 0bfc38f638
commit adeca1aea1
8 files changed
+241 -50
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/html/19304.md
+16
View File
@@ -0,0 +1,16 @@
#### Keep an inline comment attached to the preceding node (#19304 by @kovsu)
<!-- prettier-ignore -->
```html
<!-- Input -->
<p><b>x</b><!-- comment --></p>
<!-- Prettier stable -->
<p>
<b>x</b
><!-- comment -->
</p>
<!-- Prettier main -->
<p><b>x</b><!-- comment --></p>
```
src/language-html/print/children.js
+12
View File
@@ -126,6 +126,18 @@ function printBetweenLine(prevNode, nextNode) {
return "";
}
/**
* <div>{{ x }}<!-- comment --></div>
* ~
*/
if (
nextNode.kind === "comment" &&
nextNode.isLeadingSpaceSensitive &&
!nextNode.hasLeadingSpaces
) {
return softline;
}
if (
!nextNode.isLeadingSpaceSensitive ||
preferHardlineAsLeadingSpaces(nextNode) ||
tests/format/angular/angular/__snapshots__/format.test.js.snap
+6 -12
View File
@@ -3018,10 +3018,8 @@ parsers: ["angular"]
}}
<span
><!--
--><span>{{ a }}</span
><!--
--><span>{{ b }}</span
><!--
--><span>{{ a }}</span><!--
--><span>{{ b }}</span><!--
--></span>
<span>
{{ aNormalValue | aPipe }}:
@@ -3745,10 +3743,8 @@ trailingComma: "es5"
}}
<span
><!--
--><span>{{ a }}</span
><!--
--><span>{{ b }}</span
><!--
--><span>{{ a }}</span><!--
--><span>{{ b }}</span><!--
--></span>
<span>
{{ aNormalValue | aPipe }}:
@@ -3919,10 +3915,8 @@ trailingComma: "none"
}}
<span
><!--
--><span>{{ a }}</span
><!--
--><span>{{ b }}</span
><!--
--><span>{{ a }}</span><!--
--><span>{{ b }}</span><!--
--></span>
<span>
{{ aNormalValue | aPipe }}:
tests/format/html/comments/__snapshots__/format.test.js.snap
+158 -36
View File
@@ -166,6 +166,146 @@ parsers: ["html"]
================================================================================
`;
exports[`comment-after-element.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
parsers: ["html"]
printWidth: 80 (default) |
=====================================input======================================
<p><b>x</b><!-- glued comment --></p>
<p><b>x</b> <!-- comment with leading space --></p>
<p><span>hello</span><!-- a comment that is quite long enough to wrap around the line --></p>
<p>text<!-- glued comment after text --></p>
=====================================output=====================================
<p>
<b>x</b>
<!-- glued comment -->
</p>
<p>
<b>x</b>
<!-- comment with leading space -->
</p>
<p>
<span>hello</span>
<!-- a comment that is quite long enough to wrap around the line -->
</p>
<p>
text
<!-- glued comment after text -->
</p>
================================================================================
`;
exports[`comment-after-element.html - {"htmlWhitespaceSensitivity":"strict"} format 1`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "strict"
parsers: ["html"]
printWidth: 80 (default) |
=====================================input======================================
<p><b>x</b><!-- glued comment --></p>
<p><b>x</b> <!-- comment with leading space --></p>
<p><span>hello</span><!-- a comment that is quite long enough to wrap around the line --></p>
<p>text<!-- glued comment after text --></p>
=====================================output=====================================
<p><b>x</b><!-- glued comment --></p>
<p
><b>x</b>
<!-- comment with leading space --></p
>
<p
><span>hello</span
><!-- a comment that is quite long enough to wrap around the line --></p
>
<p>text<!-- glued comment after text --></p>
================================================================================
`;
exports[`comment-after-element.html - {"printWidth":"Infinity"} format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: Infinity
=====================================input======================================
<p><b>x</b><!-- glued comment --></p>
<p><b>x</b> <!-- comment with leading space --></p>
<p><span>hello</span><!-- a comment that is quite long enough to wrap around the line --></p>
<p>text<!-- glued comment after text --></p>
=====================================output=====================================
<p><b>x</b><!-- glued comment --></p>
<p>
<b>x</b>
<!-- comment with leading space -->
</p>
<p><span>hello</span><!-- a comment that is quite long enough to wrap around the line --></p>
<p>text<!-- glued comment after text --></p>
================================================================================
`;
exports[`comment-after-element.html - {"printWidth":1} format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: 1
| printWidth: 1
=====================================input======================================
<p><b>x</b><!-- glued comment --></p>
<p><b>x</b> <!-- comment with leading space --></p>
<p><span>hello</span><!-- a comment that is quite long enough to wrap around the line --></p>
<p>text<!-- glued comment after text --></p>
=====================================output=====================================
<p>
<b
>x</b
><!-- glued comment -->
</p>
<p>
<b
>x</b
>
<!-- comment with leading space -->
</p>
<p>
<span
>hello</span
><!-- a comment that is quite long enough to wrap around the line -->
</p>
<p>
text<!-- glued comment after text -->
</p>
================================================================================
`;
exports[`comment-after-element.html format 1`] = `
====================================options=====================================
parsers: ["html"]
printWidth: 80 (default) |
=====================================input======================================
<p><b>x</b><!-- glued comment --></p>
<p><b>x</b> <!-- comment with leading space --></p>
<p><span>hello</span><!-- a comment that is quite long enough to wrap around the line --></p>
<p>text<!-- glued comment after text --></p>
=====================================output=====================================
<p><b>x</b><!-- glued comment --></p>
<p>
<b>x</b>
<!-- comment with leading space -->
</p>
<p>
<span>hello</span
><!-- a comment that is quite long enough to wrap around the line -->
</p>
<p>text<!-- glued comment after text --></p>
================================================================================
`;
exports[`conditional.html - {"htmlWhitespaceSensitivity":"ignore"} format 1`] = `
====================================options=====================================
htmlWhitespaceSensitivity: "ignore"
@@ -1626,26 +1766,20 @@ See console log:
--></ul>
<span
><!--
--><span>a</span
><!--
--><span>b</span
><!--
--><span>a</span><!--
--><span>b</span><!--
--></span>
<span
><!-- 1
--><span>a</span
><!-- 2
--><span>b</span
><!-- 3
--><span>a</span><!-- 2
--><span>b</span><!-- 3
--></span>
<span
><!--
1 --><span>a</span
><!--
2 --><span>b</span
><!--
1 --><span>a</span><!--
2 --><span>b</span><!--
3 --></span
>
@@ -1764,26 +1898,20 @@ See console log:
--></ul>
<span
><!--
--><span>a</span
><!--
--><span>b</span
><!--
--><span>a</span><!--
--><span>b</span><!--
--></span>
<span
><!-- 1
--><span>a</span
><!-- 2
--><span>b</span
><!-- 3
--><span>a</span><!-- 2
--><span>b</span><!-- 3
--></span>
<span
><!--
1 --><span>a</span
><!--
2 --><span>b</span
><!--
1 --><span>a</span><!--
2 --><span>b</span><!--
3 --></span
>
@@ -2054,26 +2182,20 @@ See console log:
--></ul>
<span
><!--
--><span>a</span
><!--
--><span>b</span
><!--
--><span>a</span><!--
--><span>b</span><!--
--></span>
<span
><!-- 1
--><span>a</span
><!-- 2
--><span>b</span
><!-- 3
--><span>a</span><!-- 2
--><span>b</span><!-- 3
--></span>
<span
><!--
1 --><span>a</span
><!--
2 --><span>b</span
><!--
1 --><span>a</span><!--
2 --><span>b</span><!--
3 --></span
>
tests/format/html/comments/comment-after-element.html
+4
View File
@@ -0,0 +1,4 @@
<p><b>x</b><!-- glued comment --></p>
<p><b>x</b> <!-- comment with leading space --></p>
<p><span>hello</span><!-- a comment that is quite long enough to wrap around the line --></p>
<p>text<!-- glued comment after text --></p>
tests/format/html/prettier_ignore/__snapshots__/format.test.js.snap
+1 -2
View File
@@ -12,8 +12,7 @@ parsers: ["html"]
=====================================output=====================================
123<!--prettier-ignore-->456
<span></span
><!--prettier-ignore--><span></span>
<span></span><!--prettier-ignore--><span></span>
================================================================================
`;
tests/format/vue/interpolation/__snapshots__/format.test.js.snap
+35
View File
@@ -40,6 +40,41 @@ parsers: ["vue"]
================================================================================
`;
exports[`comment-after-interpolation.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80 (default) |
=====================================input======================================
<template>
<legend>{{ $t('package') }}<!-- #238 --></legend><!-- this gets ugly -->
<legend>{{ $t('package') }}</legend> <!-- this is ok -->
<legend>{{ $t('package') }}<!-- comment after interpolation comment after interpolation --></legend>
<legend><b>inline</b>{{ $t('package') }}<!-- glued comment --></legend>
</template>
=====================================output=====================================
<template>
<legend>{{ $t("package") }}<!-- #238 --></legend>
<!-- this gets ugly -->
<legend>{{ $t("package") }}</legend>
<!-- this is ok -->
<legend>
{{
$t("package")
}}<!-- comment after interpolation comment after interpolation -->
</legend>
<legend><b>inline</b>{{ $t("package") }}<!-- glued comment --></legend>
</template>
================================================================================
`;
exports[`parenthesized.vue format 1`] = `
====================================options=====================================
parsers: ["vue"]
tests/format/vue/interpolation/comment-after-interpolation.vue
+9
View File
@@ -0,0 +1,9 @@
<template>
<legend>{{ $t('package') }}<!-- #238 --></legend><!-- this gets ugly -->
<legend>{{ $t('package') }}</legend> <!-- this is ok -->
<legend>{{ $t('package') }}<!-- comment after interpolation comment after interpolation --></legend>
<legend><b>inline</b>{{ $t('package') }}<!-- glued comment --></legend>
</template>