🐛 BUG: Astro VS code extension fails to format code if multiple elements inside expression aren't wrapped in fragment

[Trombach]

Describe the Bug

The Astro extensions formatter seems to expect elements inside expressions to be wrapped in a single element just like JSX. The code however compiles fine and displays the correct elements without using a wrapper element.

For example, this compiles and displays fine

---
import Card from "something"

const cards = ["a", "b"];
---

{cards.map(card => (<Card 				
	href="https://docs.astro.build/"
	title={card}
	body={card}/>
	<Card 				
	href="https://docs.astro.build/"
	title={card}
	body={card}/>))}

However, the extension fails to format this and gives the following error message.

SyntaxError: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 

Wrapping the cards components in a fragment results in the correct formatting.

Steps to Reproduce

1. Clone repository and open linked file in VS Code
2. open the command panel, use "Format document with..." and chose "Astro"
3. check output panel for error from Astro extension
4. wrap card components in file in fragment
5. use "Format document with..." again
6. file is now correctly formatted

Link to Minimal Reproducible Example

https://github.com/Trombach/withastro-astro-fmqmba/blob/main/src/pages/formatting.astro

[c1sar]

this also happened to me

[claraberendsen]

+1 to this I see it with the following versions of prettier and astro.

 prettier:
        specifier: ^3.3.3
        version: 3.3.3
      prettier-plugin-astro:
        specifier: ^0.14.1
        version: 0.14.1

[fvieira]

I'm having this error too, here's a trivially simple test case.

This formats properly:

{true && <div></div><div></div>}

This fails with the error mentioned above:

{true && <div></div> <div></div>}

and so does this:

{
  true && (
    <div />
    <div />
  )
}