Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Astro support? #2315

Open
barraIhsan opened this issue Sep 16, 2024 · 1 comment
Open

Astro support? #2315

barraIhsan opened this issue Sep 16, 2024 · 1 comment

Comments

@barraIhsan
Copy link

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.

@bitwiseman
Copy link
Member

PRs welcome.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants