beautifier/js-beautify

Astro support?

barraIhsan opened this issue · 1 comments

I’m currently using js-beautify to format astro files with its HTML formatter, which works fine for the HTML part.

The problem occurs when it formats Astro syntax inside --- blocks.

For example, having this file

---
const app = {
  theme: "dark"
}
---
<p>
  {
    app.theme == "dark"
    ? "Dark mode activated"
    : "Dark mode is not activated"
  }
</p>

results in

---
const themes = {
blue: "sdf"
}
---
<p>
  {
  themes.blue == "bg-sky-600"
  ? "The theme is blue"
  : "The theme is not blue"
  }
</p>

currently my best approach is to use unformattedContentDelimiter and set it to ---. However, as you can see, the {} inside the HTML part needs to be indented by one level.

My idea is to treat any syntax between the --- blocks and {} as normal JavaScript, just like it is inside a <script> tag, so it gets indented correctly.

PRs welcome.