Avoid printing attribute per line in Vue SFC blocks (prettier#12895)

* Avoid print single attribute perline for Vue SFC blocks

* Add tests

* Add changelog

* Fix typo

* Add more tests

changelog_unreleased/vue/12895.md

@@ -0,0 +1,19 @@
+#### Avoid printing attribute per line in Vue SFC blocks (#12895 by @sosukesuzuki)
+
+<!-- prettier-ignore -->
+```vue
+<!-- Input (singleAttributePerLine: true) -->
+<script lang="ts" setup>
+</script>
+
+<!-- Prettier stable -->
+<script
+ lang="ts"
+ setup
+>
+</script>
+
+<!-- Prettier main -->
+<script lang="ts" setup>
+</script>
+```

src/language-html/print/tag.js

@@ -17,6 +17,7 @@ const {
   isPreLikeNode,
   hasPrettierIgnore,
   shouldPreserveContent,
+  isVueSfcBlock,
 } = require("../utils/index.js");
 
 function printClosingTag(node, options) {
@@ -251,8 +252,11 @@ function printAttributes(path, options, print) {
     node.attrs[0].fullName === "src" &&
     node.children.length === 0;
 
-  const attributeLine =
-    options.singleAttributePerLine && node.attrs.length > 1 ? hardline : line;
+  const shouldPrintAttributePerLine =
+    options.singleAttributePerLine &&
+    node.attrs.length > 1 &&
+    !isVueSfcBlock(node, options);
+  const attributeLine = shouldPrintAttributePerLine ? hardline : line;
 
   /** @type {Doc[]} */
   const parts = [

src/language-html/utils/index.js

@@ -674,6 +674,7 @@ module.exports = {
   isVueScriptTag,
   isVueSlotAttribute,
   isVueSfcBindingsAttribute,
+  isVueSfcBlock,
   isDanglingSpaceSensitiveNode,
   isIndentationSensitiveNode,
   isLeadingSpaceSensitiveNode,

tests/format/vue/single-attribute-per-line/__snapshots__/jsfmt.spec.js.snap

@@ -1,5 +1,152 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`sfc-blocks.vue - {"singleAttributePerLine":true} format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+singleAttributePerLine: true
+                                                                                | printWidth
+=====================================input======================================
+<script setup lang="ts">
+console.log("hello")
+</script>
+
+<style scoped lang="scss">
+p {
+  color: red;
+}
+</style>
+
+<unknown-block foo bar="bar" baz long_long_long_long_attribute></unknown-block>
+
+<script lang="ts" src="./long_long_long_long_long_long_file_path.ts">
+</script>
+
+<script lang="ts" src="./long_long_long_long_long_long_long_file_path.ts">
+</script>
+
+<script lang="ts" src="./short">
+</script>
+
+<template lang="pug" src="./long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template lang="pug" src="./long_long_long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template lang="pug" src="./short">
+</template>
+
+=====================================output=====================================
+<script setup lang="ts">
+console.log("hello");
+</script>
+
+<style scoped lang="scss">
+p {
+  color: red;
+}
+</style>
+
+<unknown-block foo bar="bar" baz long_long_long_long_attribute></unknown-block>
+
+<script lang="ts" src="./long_long_long_long_long_long_file_path.ts"></script>
+
+<script
+  lang="ts"
+  src="./long_long_long_long_long_long_long_file_path.ts"
+></script>
+
+<script lang="ts" src="./short"></script>
+
+<template lang="pug" src="./long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template
+  lang="pug"
+  src="./long_long_long_long_long_long_long_long_file_path.pug"
+>
+</template>
+
+<template lang="pug" src="./short">
+</template>
+
+================================================================================
+`;
+
+exports[`sfc-blocks.vue format 1`] = `
+====================================options=====================================
+parsers: ["vue"]
+printWidth: 80
+                                                                                | printWidth
+=====================================input======================================
+<script setup lang="ts">
+console.log("hello")
+</script>
+
+<style scoped lang="scss">
+p {
+  color: red;
+}
+</style>
+
+<unknown-block foo bar="bar" baz long_long_long_long_attribute></unknown-block>
+
+<script lang="ts" src="./long_long_long_long_long_long_file_path.ts">
+</script>
+
+<script lang="ts" src="./long_long_long_long_long_long_long_file_path.ts">
+</script>
+
+<script lang="ts" src="./short">
+</script>
+
+<template lang="pug" src="./long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template lang="pug" src="./long_long_long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template lang="pug" src="./short">
+</template>
+
+=====================================output=====================================
+<script setup lang="ts">
+console.log("hello");
+</script>
+
+<style scoped lang="scss">
+p {
+  color: red;
+}
+</style>
+
+<unknown-block foo bar="bar" baz long_long_long_long_attribute></unknown-block>
+
+<script lang="ts" src="./long_long_long_long_long_long_file_path.ts"></script>
+
+<script
+  lang="ts"
+  src="./long_long_long_long_long_long_long_file_path.ts"
+></script>
+
+<script lang="ts" src="./short"></script>
+
+<template lang="pug" src="./long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template
+  lang="pug"
+  src="./long_long_long_long_long_long_long_long_file_path.pug"
+>
+</template>
+
+<template lang="pug" src="./short">
+</template>
+
+================================================================================
+`;
+
 exports[`single-attribute-per-line.vue - {"singleAttributePerLine":true} format 1`] = `
 ====================================options=====================================
 parsers: ["vue"]

tests/format/vue/single-attribute-per-line/sfc-blocks.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+console.log("hello")
+</script>
+
+<style scoped lang="scss">
+p {
+  color: red;
+}
+</style>
+
+<unknown-block foo bar="bar" baz long_long_long_long_attribute></unknown-block>
+
+<script lang="ts" src="./long_long_long_long_long_long_file_path.ts">
+</script>
+
+<script lang="ts" src="./long_long_long_long_long_long_long_file_path.ts">
+</script>
+
+<script lang="ts" src="./short">
+</script>
+
+<template lang="pug" src="./long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template lang="pug" src="./long_long_long_long_long_long_long_long_file_path.pug">
+</template>
+
+<template lang="pug" src="./short">
+</template>