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

Don't print Angular attribute values that are single template/string literals, on new lines (#18378)

Browse Source 
Co-authored-by: fisker <lionkay@gmail.com>
This commit is contained in:
Ravindu Liyanapathiranaandfisker authored and fisker committed 2026-01-15 05:54:16 +08:00
1 parent 1d05c4cf2a
commit fa6f533e0f
8 files changed
+178 -51
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/angular/18378.md
+30
View File
@@ -0,0 +1,30 @@
#### Don't print Angular attribute values that are single template/string literals, on new lines (#18378 by @ravindUwU)
<!-- prettier-ignore -->
```html
<!-- Input -->
<component
[property]="`
template
literal
`"
/>
<!-- Prettier stable -->
<component
[property]="
`
template
literal
`
"
/>
<!-- Prettier main -->
<component
[property]="`
template
literal
`"
/>
```
src/language-html/embed/utilities.js
+3 -1
View File
@@ -24,7 +24,9 @@ function shouldHugJsExpression(ast, options) {
(rootNode.type === "ObjectExpression" ||
rootNode.type === "ArrayExpression" ||
((options.parser === "__vue_expression" ||
options.parser === "__vue_ts_expression") &&
options.parser === "__vue_ts_expression" ||
options.parser === "__ng_binding" ||
options.parser === "__ng_directive") &&
(rootNode.type === "TemplateLiteral" ||
rootNode.type === "StringLiteral")))
);
tests/format/angular/angular/__snapshots__/format.test.js.snap
+6 -18
View File
@@ -1091,9 +1091,7 @@ printWidth: 1
[target]="
1
"
[target]="
'hello'
"
[target]="'hello'"
[target]="
a(
1,
@@ -1330,9 +1328,7 @@ printWidth: 1
[target]="{
longlonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglonglong: true,
}"
[error]="
'We couldn\\\\\\'t find anything with that name.'
"
[error]="'We couldn\\\\\\'t find anything with that name.'"
*ngIf="
form
.controls
@@ -10074,33 +10070,25 @@ bindon-ngModel
"
>
<app-happy-hero
*ngSwitchCase="
'happy'
"
*ngSwitchCase="'happy'"
[hero]="
currentHero
"
></app-happy-hero>
<app-sad-hero
*ngSwitchCase="
'sad'
"
*ngSwitchCase="'sad'"
[hero]="
currentHero
"
></app-sad-hero>
<app-confused-hero
*ngSwitchCase="
'confused'
"
*ngSwitchCase="'confused'"
[hero]="
currentHero
"
></app-confused-hero>
<div
*ngSwitchCase="
'confused'
"
*ngSwitchCase="'confused'"
>
Are
you
tests/format/angular/attribute-value-hugging/__snapshots__/format.test.js.snap
+71
View File
@@ -0,0 +1,71 @@
// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
exports[`attribute-value-hugging.html format 1`] = `
====================================options=====================================
parsers: ["angular"]
printWidth: 80
| printWidth
=====================================input======================================
<!-- #17729 -->
<div
[foo]="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
[foo1]="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
[foo2]="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
[string]="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
[add]="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
[number]="100000000000000000000000000000000000000000000000000000000000000000000000000"
[shortTemplate]="\`1
2\`"></div>
<div
*foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
*foo1="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
*foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
*string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
*add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
*number="100000000000000000000000000000000000000000000000000000000000000000000000000"
*shortTemplate="\`1
2\`"></div>
=====================================output=====================================
<!-- #17729 -->
<div
[foo]="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
[foo1]="
\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
"
[foo2]="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
[string]="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
[add]="
'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
"
[number]="
100000000000000000000000000000000000000000000000000000000000000000000000000
"
[shortTemplate]="\`1
2\`"
></div>
<div
*foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
*foo1="
\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
"
*foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
*string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
*add="
'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
"
*number="
100000000000000000000000000000000000000000000000000000000000000000000000000
"
*shortTemplate="\`1
2\`"
></div>
================================================================================
`;
tests/format/angular/attribute-value-hugging/attribute-value-hugging.html
+21
View File
@@ -0,0 +1,21 @@
<!-- #17729 -->
<div
[foo]="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
[foo1]="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
+`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
[foo2]="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo + bar} template literal value`"
[string]="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
[add]="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
[number]="100000000000000000000000000000000000000000000000000000000000000000000000000"
[shortTemplate]="`1
2`"></div>
<div
*foo="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
*foo1="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
+`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
*foo2="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo + bar} template literal value`"
*string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
*add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
*number="100000000000000000000000000000000000000000000000000000000000000000000000000"
*shortTemplate="`1
2`"></div>
tests/format/angular/attribute-value-hugging/format.test.js
+1
View File
@@ -0,0 +1 @@
runFormatTest(import.meta, ["angular"]);
tests/format/vue/vue/__snapshots__/format.test.js.snap
+39 -27
View File
@@ -1754,12 +1754,14 @@ semi: false
<template>
<MyComponent
:foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
:bar="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:foo1="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
:number="100000000000000000000000000000000000000000000000000000000000000000000000000"
:short-template="\`1
2\`"
/>
</template>
@@ -1768,19 +1770,21 @@ semi: false
<template>
<MyComponent
:foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
:bar="
:foo1="
\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
"
:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:add="
'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
"
:num="
:number="
100000000000000000000000000000000000000000000000000000000000000000000000000
"
:short-template="\`1
2\`"
/>
</template>
@@ -1798,12 +1802,14 @@ trailingComma: "es5"
<template>
<MyComponent
:foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
:bar="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:foo1="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
:number="100000000000000000000000000000000000000000000000000000000000000000000000000"
:short-template="\`1
2\`"
/>
</template>
@@ -1812,19 +1818,21 @@ trailingComma: "es5"
<template>
<MyComponent
:foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
:bar="
:foo1="
\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
"
:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:add="
'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
"
:num="
:number="
100000000000000000000000000000000000000000000000000000000000000000000000000
"
:short-template="\`1
2\`"
/>
</template>
@@ -1842,12 +1850,14 @@ trailingComma: "none"
<template>
<MyComponent
:foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
:bar="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:foo1="\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
+\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`"
:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
:number="100000000000000000000000000000000000000000000000000000000000000000000000000"
:short-template="\`1
2\`"
/>
</template>
@@ -1856,19 +1866,21 @@ trailingComma: "none"
<template>
<MyComponent
:foo="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo} template literal value\`"
:bar="
:foo1="
\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
"
:baz="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:foo2="\`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${foo + bar} template literal value\`"
:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:add="
'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
"
:num="
:number="
100000000000000000000000000000000000000000000000000000000000000000000000000
"
:short-template="\`1
2\`"
/>
</template>
tests/format/vue/vue/expression-binding.vue
+7 -5
View File
@@ -2,11 +2,13 @@
<template>
<MyComponent
:foo="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo} template literal value`"
:bar="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
+`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
:baz="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo + bar} template literal value`"
:src="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:foo1="`${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`
+`${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${template} ${literal}`"
:foo2="`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog ${foo + bar} template literal value`"
:string="'loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog literal string value'"
:add="'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' + 'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'"
:num="100000000000000000000000000000000000000000000000000000000000000000000000000"
:number="100000000000000000000000000000000000000000000000000000000000000000000000000"
:short-template="`1
2`"
/>
</template>