withastro / prettier-plugin-astro

Prettier plugin for Astro
Other
479 stars 36 forks source link

šŸ› BUG: Astro VS code extension fails to format code if multiple elements inside expression aren't wrapped in fragment #429

Open Trombach opened 1 month ago

Trombach commented 1 month ago

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 commented 2 weeks ago

image this also happened to me