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

Fix vue attributes indention (#7781)

Browse Source
This commit is contained in:
fisker Cheung authored and GitHub committed 2020-03-17 22:30:24 +02:00
1 parent 9d9e46c8c5
commit aacb5fa75f
4 files changed
+442 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

changelog_unreleased/vue/pr-7781.md
+51
View File
@@ -0,0 +1,51 @@
#### Fix indentation of Vue expressions ([#7781](https://github.com/prettier/prettier/pull/7781) by [@fisker](https://github.com/fisker))
<!-- prettier-ignore -->
```vue
<!-- Input -->
<template>
<MyComponent v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>
<!-- Prettier stable -->
<template>
<MyComponent
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>
<!-- Prettier master -->
<template>
<MyComponent
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
:attr="
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 1` +
`loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog string 2`
"
/>
</template>
```
src/language-js/printer-estree.js
+1
View File
@@ -601,6 +601,7 @@ function printPathNoParens(path, options, print, args) {
parent.type === "ThrowStatement" ||
(parent.type === "JSXExpressionContainer" &&
parentParent.type === "JSXAttribute") ||
(n.operator !== "|" && parent.type === "JsExpressionRoot") ||
(n.type !== "NGPipeExpression" &&
((parent.type === "NGRoot" && options.parser === "__ng_binding") ||
(parent.type === "NGMicrosyntaxExpression" &&
tests/html_vue/__snapshots__/jsfmt.spec.js.snap
+356 -24
View File
@@ -1007,7 +1007,7 @@ trailingComma: "none"
<MyComponent
:attr="
\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
"
/>
</template>
@@ -1027,7 +1027,7 @@ trailingComma: "none"
<MyComponent
:src="
'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
"
/>
</template>
@@ -1080,7 +1080,7 @@ printWidth: 80
<MyComponent
:attr="
\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
"
/>
</template>
@@ -1100,7 +1100,7 @@ printWidth: 80
<MyComponent
:src="
'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
"
/>
</template>
@@ -1154,7 +1154,7 @@ semi: false
<MyComponent
:attr="
\`\${first} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\` +
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
\`\${second} loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog \${template} \${literal}\`
"
/>
</template>
@@ -1174,7 +1174,7 @@ semi: false
<MyComponent
:src="
'first loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog' +
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
'second loooooooooooooooooooooooooooooooooooooooooooooooooooooooooooog'
"
/>
</template>
@@ -1843,15 +1843,15 @@ trailingComma: "none"
<pre class="woot">
123{{
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
}}123
123{{
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
}}123
</pre
>
@@ -1948,15 +1948,15 @@ printWidth: 80
<pre class="woot">
123{{
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
}}123
123{{
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
}}123
</pre
>
@@ -2054,15 +2054,15 @@ semi: false
<pre class="woot">
123{{
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
}}123
123{{
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq ||
wqeqwwqwqweqweqwewwq
}}123
</pre
>
@@ -3136,3 +3136,335 @@ semi: false
================================================================================
`;
exports[`v-if.vue 1`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80
trailingComma: "none"
| printWidth
=====================================input======================================
<template>
<root>
<and v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && short_1 && short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"></and>
<and v-if="
(long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && (short_1 && short_2) ) &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"></and>
<or v-if="
long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 ||short_1 || short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"></or>
<or v-if="
(long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 || (short_1 || short_2) ||
long_long_long_long_long_long_long_condition_3) ||
long_long_long_long_long_long_long_condition_4
"></or>
<mixed v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || ((short_1 && short_2) &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4)
"></mixed>
<mixed v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || short_1 && short_2 &&
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"></mixed>
</root>
</template>
=====================================output=====================================
<template>
<root>
<and
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
></and>
<and
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
></and>
<or
v-if="
long_long_long_long_long_long_long_condition_1 ||
long_long_long_long_long_long_long_condition_2 ||
short_1 ||
short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"
></or>
<or
v-if="
long_long_long_long_long_long_long_condition_1 ||
long_long_long_long_long_long_long_condition_2 ||
short_1 ||
short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"
></or>
<mixed
v-if="
(long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2) ||
(short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4)
"
></mixed>
<mixed
v-if="
(long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2) ||
(short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3) ||
long_long_long_long_long_long_long_condition_4
"
></mixed>
</root>
</template>
================================================================================
`;
exports[`v-if.vue 2`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80
| printWidth
=====================================input======================================
<template>
<root>
<and v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && short_1 && short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"></and>
<and v-if="
(long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && (short_1 && short_2) ) &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"></and>
<or v-if="
long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 ||short_1 || short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"></or>
<or v-if="
(long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 || (short_1 || short_2) ||
long_long_long_long_long_long_long_condition_3) ||
long_long_long_long_long_long_long_condition_4
"></or>
<mixed v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || ((short_1 && short_2) &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4)
"></mixed>
<mixed v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || short_1 && short_2 &&
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"></mixed>
</root>
</template>
=====================================output=====================================
<template>
<root>
<and
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
></and>
<and
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
></and>
<or
v-if="
long_long_long_long_long_long_long_condition_1 ||
long_long_long_long_long_long_long_condition_2 ||
short_1 ||
short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"
></or>
<or
v-if="
long_long_long_long_long_long_long_condition_1 ||
long_long_long_long_long_long_long_condition_2 ||
short_1 ||
short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"
></or>
<mixed
v-if="
(long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2) ||
(short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4)
"
></mixed>
<mixed
v-if="
(long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2) ||
(short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3) ||
long_long_long_long_long_long_long_condition_4
"
></mixed>
</root>
</template>
================================================================================
`;
exports[`v-if.vue 3`] = `
====================================options=====================================
parsers: ["vue"]
printWidth: 80
semi: false
| printWidth
=====================================input======================================
<template>
<root>
<and v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && short_1 && short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"></and>
<and v-if="
(long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && (short_1 && short_2) ) &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"></and>
<or v-if="
long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 ||short_1 || short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"></or>
<or v-if="
(long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 || (short_1 || short_2) ||
long_long_long_long_long_long_long_condition_3) ||
long_long_long_long_long_long_long_condition_4
"></or>
<mixed v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || ((short_1 && short_2) &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4)
"></mixed>
<mixed v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || short_1 && short_2 &&
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"></mixed>
</root>
</template>
=====================================output=====================================
<template>
<root>
<and
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
></and>
<and
v-if="
long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2 &&
short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"
></and>
<or
v-if="
long_long_long_long_long_long_long_condition_1 ||
long_long_long_long_long_long_long_condition_2 ||
short_1 ||
short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"
></or>
<or
v-if="
long_long_long_long_long_long_long_condition_1 ||
long_long_long_long_long_long_long_condition_2 ||
short_1 ||
short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"
></or>
<mixed
v-if="
(long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2) ||
(short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4)
"
></mixed>
<mixed
v-if="
(long_long_long_long_long_long_long_condition_1 &&
long_long_long_long_long_long_long_condition_2) ||
(short_1 &&
short_2 &&
long_long_long_long_long_long_long_condition_3) ||
long_long_long_long_long_long_long_condition_4
"
></mixed>
</root>
</template>
================================================================================
`;
tests/html_vue/v-if.vue
+34
View File
@@ -0,0 +1,34 @@
<template>
<root>
<and v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && short_1 && short_2 &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"></and>
<and v-if="
(long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 && (short_1 && short_2) ) &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4
"></and>
<or v-if="
long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 ||short_1 || short_2 ||
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"></or>
<or v-if="
(long_long_long_long_long_long_long_condition_1 || long_long_long_long_long_long_long_condition_2 || (short_1 || short_2) ||
long_long_long_long_long_long_long_condition_3) ||
long_long_long_long_long_long_long_condition_4
"></or>
<mixed v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || ((short_1 && short_2) &&
long_long_long_long_long_long_long_condition_3 &&
long_long_long_long_long_long_long_condition_4)
"></mixed>
<mixed v-if="
long_long_long_long_long_long_long_condition_1 && long_long_long_long_long_long_long_condition_2 || short_1 && short_2 &&
long_long_long_long_long_long_long_condition_3 ||
long_long_long_long_long_long_long_condition_4
"></mixed>
</root>
</template>