Skip to content

Commit c436c03

Browse files
kamilicfisker
kamilic
authored and
fisker
committed
feat: implement --vue-indent-script-and-style mentioned at pr-#… (prettier#6157)
* feat: implement --vue-indent-script-and-style mentioned at pr-prettier#6077 * docs: --vue-indent-script-and-style * update new test case * feat: playground for --vue-indent-script-and-style * chores: Revert package.json version * Remove noisy snapshots
1 parent 507cef2 commit c436c03

10 files changed

Lines changed: 320 additions & 2 deletions

File tree

‎docs/options.md‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -307,6 +307,21 @@ Valid options:
307307
| ------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
308308
| `"css"` | <code>--html-whitespace-sensitivity <css&#124;strict&#124;ignore></code> | <code>htmlWhitespaceSensitivity: "<css&#124;strict&#124;ignore>"</code> |
309309

310+
## Vue files script and style tags indentation
311+
312+
_First available in v1.19.0_
313+
314+
Whether or not to indent the code inside `<script>` and `<style>` tags in Vue files. Some people (like [the creator of Vue](https://github.com/prettier/prettier/issues/3888#issuecomment-459521863)) don’t indent to save an indentation level, but this might break code folding in your editor.
315+
316+
Valid options:
317+
318+
- `"false"` - Do not indent script and style tags in Vue files.
319+
- `"true"` - Indent script and style tags in Vue files.
320+
321+
| Default | CLI Override | API Override |
322+
| ------- | ------------------------------- | --------------------------------- |
323+
| `false` | `--vue-indent-script-and-style` | `vueIndentScriptAndStyle: <bool>` |
324+
310325
## End of Line
311326

312327
_First available in 1.15.0_

‎src/language-html/options.js‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,5 +24,12 @@ module.exports = {
2424
description: "Whitespaces are considered insensitive."
2525
}
2626
]
27+
},
28+
vueIndentScriptAndStyle: {
29+
since: "1.19.0",
30+
category: CATEGORY_HTML,
31+
type: "boolean",
32+
default: false,
33+
description: "Indent script and style tags in Vue files."
2734
}
2835
};

‎src/language-html/printer-html.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,8 @@ function genericPrint(path, options, print) {
229229
})
230230
: isScriptLikeTag(node) &&
231231
node.parent.type === "root" &&
232-
options.parser === "vue"
232+
options.parser === "vue" &&
233+
!options.vueIndentScriptAndStyle
233234
? childrenDoc
234235
: indent(childrenDoc))(
235236
concat([

‎tests/html_vue_indent/__snapshots__/jsfmt.spec.js.snap‎

Lines changed: 229 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,229 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`inside-template.vue 1`] = `
4+
====================================options=====================================
5+
parsers: ["vue"]
6+
printWidth: 80
7+
vueIndentScriptAndStyle: true
8+
| printWidth
9+
=====================================input======================================
10+
<template>
11+
<style>
12+
br {
13+
background: #00abc9;
14+
}
15+
16+
div {
17+
background: #00abc9;
18+
}
19+
</style>
20+
21+
<script>
22+
console.log('hello');
23+
console.log('hello');
24+
</script>
25+
26+
<br />
27+
<footer>
28+
foo
29+
<br/>
30+
</footer>
31+
</template>
32+
33+
=====================================output=====================================
34+
<template>
35+
<style>
36+
br {
37+
background: #00abc9;
38+
}
39+
40+
div {
41+
background: #00abc9;
42+
}
43+
</style>
44+
45+
<script>
46+
console.log("hello");
47+
console.log("hello");
48+
</script>
49+
50+
<br />
51+
<footer>
52+
foo
53+
<br />
54+
</footer>
55+
</template>
56+
57+
================================================================================
58+
`;
59+
60+
exports[`inside-template.vue 2`] = `
61+
====================================options=====================================
62+
parsers: ["vue"]
63+
printWidth: 80
64+
vueIndentScriptAndStyle: false
65+
| printWidth
66+
=====================================input======================================
67+
<template>
68+
<style>
69+
br {
70+
background: #00abc9;
71+
}
72+
73+
div {
74+
background: #00abc9;
75+
}
76+
</style>
77+
78+
<script>
79+
console.log('hello');
80+
console.log('hello');
81+
</script>
82+
83+
<br />
84+
<footer>
85+
foo
86+
<br/>
87+
</footer>
88+
</template>
89+
90+
=====================================output=====================================
91+
<template>
92+
<style>
93+
br {
94+
background: #00abc9;
95+
}
96+
97+
div {
98+
background: #00abc9;
99+
}
100+
</style>
101+
102+
<script>
103+
console.log("hello");
104+
console.log("hello");
105+
</script>
106+
107+
<br />
108+
<footer>
109+
foo
110+
<br />
111+
</footer>
112+
</template>
113+
114+
================================================================================
115+
`;
116+
117+
exports[`vue-tag-indent.vue 1`] = `
118+
====================================options=====================================
119+
parsers: ["vue"]
120+
printWidth: 80
121+
vueIndentScriptAndStyle: true
122+
| printWidth
123+
=====================================input======================================
124+
<script>
125+
console.log('hello');
126+
console.log('hello');
127+
</script>
128+
129+
<style lang="scss">
130+
footer {
131+
background: #00abc9;
132+
}
133+
134+
footer {
135+
background: #00abc9;
136+
}
137+
</style>
138+
139+
<template>
140+
<br />
141+
<footer>
142+
foo
143+
<br/>
144+
</footer>
145+
</template>
146+
147+
=====================================output=====================================
148+
<script>
149+
console.log("hello");
150+
console.log("hello");
151+
</script>
152+
153+
<style lang="scss">
154+
footer {
155+
background: #00abc9;
156+
}
157+
158+
footer {
159+
background: #00abc9;
160+
}
161+
</style>
162+
163+
<template>
164+
<br />
165+
<footer>
166+
foo
167+
<br />
168+
</footer>
169+
</template>
170+
171+
================================================================================
172+
`;
173+
174+
exports[`vue-tag-indent.vue 2`] = `
175+
====================================options=====================================
176+
parsers: ["vue"]
177+
printWidth: 80
178+
vueIndentScriptAndStyle: false
179+
| printWidth
180+
=====================================input======================================
181+
<script>
182+
console.log('hello');
183+
console.log('hello');
184+
</script>
185+
186+
<style lang="scss">
187+
footer {
188+
background: #00abc9;
189+
}
190+
191+
footer {
192+
background: #00abc9;
193+
}
194+
</style>
195+
196+
<template>
197+
<br />
198+
<footer>
199+
foo
200+
<br/>
201+
</footer>
202+
</template>
203+
204+
=====================================output=====================================
205+
<script>
206+
console.log("hello");
207+
console.log("hello");
208+
</script>
209+
210+
<style lang="scss">
211+
footer {
212+
background: #00abc9;
213+
}
214+
215+
footer {
216+
background: #00abc9;
217+
}
218+
</style>
219+
220+
<template>
221+
<br />
222+
<footer>
223+
foo
224+
<br />
225+
</footer>
226+
</template>
227+
228+
================================================================================
229+
`;

‎tests/html_vue_indent/inside-template.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<style>
3+
br {
4+
background: #00abc9;
5+
}
6+
7+
div {
8+
background: #00abc9;
9+
}
10+
</style>
11+
12+
<script>
13+
console.log('hello');
14+
console.log('hello');
15+
</script>
16+
17+
<br />
18+
<footer>
19+
foo
20+
<br/>
21+
</footer>
22+
</template>

‎tests/html_vue_indent/jsfmt.spec.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: true });
2+
run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: false });

‎tests/html_vue_indent/vue-tag-indent.vue‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<script>
2+
console.log('hello');
3+
console.log('hello');
4+
</script>
5+
6+
<style lang="scss">
7+
footer {
8+
background: #00abc9;
9+
}
10+
11+
footer {
12+
background: #00abc9;
13+
}
14+
</style>
15+
16+
<template>
17+
<br />
18+
<footer>
19+
foo
20+
<br/>
21+
</footer>
22+
</template>

‎tests_integration/__tests__/__snapshots__/early-exit.js.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,9 @@ Format options:
9292
Defaults to none.
9393
--use-tabs Indent with tabs instead of spaces.
9494
Defaults to false.
95+
--vue-indent-script-and-style
96+
Indent script and style tags in Vue files.
97+
Defaults to false.
9598
9699
Config options:
97100
@@ -246,6 +249,9 @@ Format options:
246249
Defaults to none.
247250
--use-tabs Indent with tabs instead of spaces.
248251
Defaults to false.
252+
--vue-indent-script-and-style
253+
Indent script and style tags in Vue files.
254+
Defaults to false.
249255
250256
Config options:
251257

‎tests_integration/__tests__/__snapshots__/help-options.js.snap‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -610,6 +610,19 @@ exports[`show detailed usage with --help version (stdout) 1`] = `
610610
611611
exports[`show detailed usage with --help version (write) 1`] = `Array []`;
612612
613+
exports[`show detailed usage with --help vue-indent-script-and-style (stderr) 1`] = `""`;
614+
615+
exports[`show detailed usage with --help vue-indent-script-and-style (stdout) 1`] = `
616+
"--vue-indent-script-and-style
617+
618+
Indent script and style tags in Vue files.
619+
620+
Default: false
621+
"
622+
`;
623+
624+
exports[`show detailed usage with --help vue-indent-script-and-style (write) 1`] = `Array []`;
625+
613626
exports[`show detailed usage with --help with-node-modules (stderr) 1`] = `""`;
614627
615628
exports[`show detailed usage with --help with-node-modules (stdout) 1`] = `

‎website/playground/Playground.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,8 @@ const ENABLED_OPTIONS = [
3939
"proseWrap",
4040
"htmlWhitespaceSensitivity",
4141
"insertPragma",
42-
"requirePragma"
42+
"requirePragma",
43+
"vueIndentScriptAndStyle"
4344
];
4445

4546
class Playground extends React.Component {

0 commit comments

Comments
 (0)