Format TS expressions when any script tag has lang="ts"

changelog_unreleased/vue/14587.md

@@ -0,0 +1,25 @@
+#### Format TS expressions when any script tag has `lang="ts"` (#14587 by @seiyab)
+
+<!-- prettier-ignore -->
+```vue
+<!-- Input -->
+<script></script>
+<script setup lang="ts"></script>
+<template>
+  {{ (x      as      number).toFixed(2) }}
+</template>
+
+<!-- Prettier stable -->
+<script></script>
+<script setup lang="ts"></script>
+<template>
+  {{ (x      as      number).toFixed(2) }}
+</template>
+
+<!-- Prettier main -->
+<script></script>
+<script setup lang="ts"></script>
+<template>
+  {{ (x as number).toFixed(2) }}
+</template>
+```

src/language-html/print-preprocess.js

@@ -411,18 +411,13 @@ function addIsSpaceSensitive(ast, options) {
 }
 
 function markTsScript(ast, options) {
-  if (options.parser === "vue") {
-    const vueScriptTag = ast.children.find((child) =>
-      isVueScriptTag(child, options)
+  options.__should_parse_vue_template_with_ts =
+    options.parser === "vue" &&
+    ast.children.some(
+      (child) =>
+        isVueScriptTag(child, options) &&
+        ["ts", "typescript"].includes(child.attrMap.lang)
     );
-    if (!vueScriptTag) {
-      return;
-    }
-    const { lang } = vueScriptTag.attrMap;
-    if (lang === "ts" || lang === "typescript") {
-      options.__should_parse_vue_template_with_ts = true;
-    }
-  }
 }
 
 module.exports = preprocess;

tests/format/vue/multiparser/__snapshots__/jsfmt.spec.js.snap

@@ -70,6 +70,60 @@ export default {
 ================================================================================
 `;
 
+exports[`lang-ts-multiple-script-tags.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script setup lang="ts">
+let x:      string |         number = 1
+</script>
+<script></script>
+<script></script>
+<script></script>
+<template>
+  <span
+  v-if=" (x    as string).length  >     0"
+  v-for="a in [1,2,  3,4,5].map(   (x  :    number) => x *   x)"
+  :foo="  (x    as number).toFixed(   2) "
+  >
+  {{ (x      as      number).toFixed(2) }}
+  </span>
+</template>
+
+=====================================output=====================================
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script setup lang="ts">
+let x: string | number = 1;
+</script>
+<script></script>
+<script></script>
+<script></script>
+<template>
+  <span
+    v-if=" (x    as string).length  >     0"
+    v-for="a in [1,2,  3,4,5].map(   (x  :    number) => x *   x)"
+    :foo="  (x    as number).toFixed(   2) "
+  >
+    {{ (x as number).toFixed(2) }}
+  </span>
+</template>
+
+================================================================================
+`;
+
 exports[`lang-tsx.vue format 1`] = `
 ====================================options=====================================
 parsers: ["vue"]

tests/format/vue/multiparser/lang-ts-multiple-script-tags.vue

@@ -0,0 +1,21 @@
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script></script>
+<script setup lang="ts">
+let x:      string |         number = 1
+</script>
+<script></script>
+<script></script>
+<script></script>
+<template>
+  <span
+  v-if=" (x    as string).length  >     0"
+  v-for="a in [1,2,  3,4,5].map(   (x  :    number) => x *   x)"
+  :foo="  (x    as number).toFixed(   2) "
+  >
+  {{ (x      as      number).toFixed(2) }}
+  </span>
+</template>