feat: implement --vue-indent-script-and-style mentioned at pr-#… (#6157)

* feat: implement --vue-indent-script-and-style mentioned at pr-#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

docs/options.md

@@ -307,6 +307,21 @@ Valid options:
 | ------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------------- |
 | `"css"` | <code>--html-whitespace-sensitivity <css&#124;strict&#124;ignore></code> | <code>htmlWhitespaceSensitivity: "<css&#124;strict&#124;ignore>"</code> |
 
+## Vue files script and style tags indentation
+
+_First available in v1.19.0_
+
+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.
+
+Valid options:
+
+- `"false"` - Do not indent script and style tags in Vue files.
+- `"true"` - Indent script and style tags in Vue files.
+
+| Default | CLI Override                    | API Override                      |
+| ------- | ------------------------------- | --------------------------------- |
+| `false` | `--vue-indent-script-and-style` | `vueIndentScriptAndStyle: <bool>` |
+
 ## End of Line
 
 _First available in 1.15.0_

src/language-html/options.js

@@ -24,5 +24,12 @@ module.exports = {
         description: "Whitespaces are considered insensitive."
       }
     ]
+  },
+  vueIndentScriptAndStyle: {
+    since: "1.19.0",
+    category: CATEGORY_HTML,
+    type: "boolean",
+    default: false,
+    description: "Indent script and style tags in Vue files."
   }
 };

src/language-html/printer-html.js

@@ -229,7 +229,8 @@ function genericPrint(path, options, print) {
                         })
                       : isScriptLikeTag(node) &&
                         node.parent.type === "root" &&
-                        options.parser === "vue"
+                        options.parser === "vue" &&
+                        !options.vueIndentScriptAndStyle
                       ? childrenDoc
                       : indent(childrenDoc))(
                     concat([

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

@@ -0,0 +1,229 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`inside-template.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<template>
+    <style>
+        br {
+            background: #00abc9;
+        }
+
+    div {
+        background: #00abc9;
+    }
+    </style>
+
+    <script>
+        console.log('hello');
+    console.log('hello');
+    </script>
+
+    <br />
+    <footer>
+        foo
+        <br/>
+    </footer>
+</template>
+
+=====================================output=====================================
+<template>
+  <style>
+    br {
+      background: #00abc9;
+    }
+
+    div {
+      background: #00abc9;
+    }
+  </style>
+
+  <script>
+    console.log("hello");
+    console.log("hello");
+  </script>
+
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
+
+exports[`inside-template.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: false
+                                                                                | printWidth
+=====================================input======================================
+<template>
+    <style>
+        br {
+            background: #00abc9;
+        }
+
+    div {
+        background: #00abc9;
+    }
+    </style>
+
+    <script>
+        console.log('hello');
+    console.log('hello');
+    </script>
+
+    <br />
+    <footer>
+        foo
+        <br/>
+    </footer>
+</template>
+
+=====================================output=====================================
+<template>
+  <style>
+    br {
+      background: #00abc9;
+    }
+
+    div {
+      background: #00abc9;
+    }
+  </style>
+
+  <script>
+    console.log("hello");
+    console.log("hello");
+  </script>
+
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
+
+exports[`vue-tag-indent.vue 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: true
+                                                                                | printWidth
+=====================================input======================================
+<script>
+  console.log('hello');
+console.log('hello');
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
+
+=====================================output=====================================
+<script>
+  console.log("hello");
+  console.log("hello");
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+  footer {
+    background: #00abc9;
+  }
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;
+
+exports[`vue-tag-indent.vue 2`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+vueIndentScriptAndStyle: false
+                                                                                | printWidth
+=====================================input======================================
+<script>
+  console.log('hello');
+console.log('hello');
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>
+
+=====================================output=====================================
+<script>
+console.log("hello");
+console.log("hello");
+</script>
+
+<style lang="scss">
+footer {
+  background: #00abc9;
+}
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br />
+  </footer>
+</template>
+
+================================================================================
+`;

tests/html_vue_indent/inside-template.vue

@@ -0,0 +1,22 @@
+<template>
+    <style>
+        br {
+            background: #00abc9;
+        }
+
+    div {
+        background: #00abc9;
+    }
+    </style>
+
+    <script>
+        console.log('hello');
+    console.log('hello');
+    </script>
+
+    <br />
+    <footer>
+        foo
+        <br/>
+    </footer>
+</template>

tests/html_vue_indent/jsfmt.spec.js

@@ -0,0 +1,2 @@
+run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: true });
+run_spec(__dirname, ["vue"], { vueIndentScriptAndStyle: false });

tests/html_vue_indent/vue-tag-indent.vue

@@ -0,0 +1,22 @@
+<script>
+  console.log('hello');
+console.log('hello');
+</script>
+
+<style lang="scss">
+  footer {
+    background: #00abc9;
+  }
+
+footer {
+  background: #00abc9;
+}
+</style>
+
+<template>
+  <br />
+  <footer>
+    foo
+    <br/>
+  </footer>
+</template>

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

@@ -92,6 +92,9 @@ Format options:
                            Defaults to none.
   --use-tabs               Indent with tabs instead of spaces.
                            Defaults to false.
+  --vue-indent-script-and-style
+                           Indent script and style tags in Vue files.
+                           Defaults to false.
 
 Config options:
 
@@ -246,6 +249,9 @@ Format options:
                            Defaults to none.
   --use-tabs               Indent with tabs instead of spaces.
                            Defaults to false.
+  --vue-indent-script-and-style
+                           Indent script and style tags in Vue files.
+                           Defaults to false.
 
 Config options:
 

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

@@ -610,6 +610,19 @@ exports[`show detailed usage with --help version (stdout) 1`] = `
 
 exports[`show detailed usage with --help version (write) 1`] = `Array []`;
 
+exports[`show detailed usage with --help vue-indent-script-and-style (stderr) 1`] = `""`;
+
+exports[`show detailed usage with --help vue-indent-script-and-style (stdout) 1`] = `
+"--vue-indent-script-and-style
+
+  Indent script and style tags in Vue files.
+
+Default: false
+"
+`;
+
+exports[`show detailed usage with --help vue-indent-script-and-style (write) 1`] = `Array []`;
+
 exports[`show detailed usage with --help with-node-modules (stderr) 1`] = `""`;
 
 exports[`show detailed usage with --help with-node-modules (stdout) 1`] = `

website/playground/Playground.js

@@ -39,7 +39,8 @@ const ENABLED_OPTIONS = [
   "proseWrap",
   "htmlWhitespaceSensitivity",
   "insertPragma",
-  "requirePragma"
+  "requirePragma",
+  "vueIndentScriptAndStyle"
 ];
 
 class Playground extends React.Component {