Prettier support for .astro files

[natemoo-re]

Changes

Closes #103. Adds prettier-plugin-astro to format .astro files.

We'll probably want to revisit this prior to launch, as this is not the most elegant solution in the world. But it works with minimal development effort!

This implementation attempts to leverage built-in prettier behavior as much as possible. It does this by doing a parse of the .astro file, then converting any expressions inside of HTML to a <script> to allow Prettier to do it's thing. Then we walk the generated HTML doc to make a few modifications to the output (like replacing the <script> tags with { and } and dedenting the content.)

Todo

• Handle comments
• Track Node start and end within document
• Split AstroContent into HTML fragments and JSX expressions

Testing

Tests have been added to tests/astro-prettier.test.js. You can run just these tests using npm test -- prettier.

• Tests are passing
• Tests updated where necessary

Docs

• Docs / READMEs updated
• Code comments added where helpful

[drwpow]

”Why would these files be so poorly formatted— Oh. Oh. I see. Carry on!”

[drwpow]

I’m not sure how to test this, but I see tests added. This looks great for a first cut; I don’t have any feedback.

[natemoo-re]

I’m not sure how to test this, but I see tests added.

npm test -- prettier from the root!

[drwpow]

Did you mean to remove the social banner in this branch?

[mxmul]

I was playing around with this locally, and there seem to be some edge cases with interpolations where running Prettier breaks the syntax.

E.g.

Input:

---
---
<p>
  {"hello world! this is a really long string. I sure hope it survives the formatter"}
</p>

Output:

---
---

<p>
  {"hello world! this is a really long string. I sure hope it survives the
  formatter"}
</p>

[natemoo-re]

Did you mean to remove the social banner in this branch?

No, those commits were on main but got overwritten. Rebase seems to have fixed it appearing on this branch.

[natemoo-re]

I was playing around with this locally, and there seem to be some edge cases with interpolations where running Prettier breaks the syntax.

Oh no! Good catch. I'm really hoping we don's have to implement much custom printing logic, but it may be the only way around stuff like this.

I'll have to check how the official JSX formatting handles expressions!

[drwpow]

Glad you made this change. Was thinking the same

[joshlangner]

Sorry for digging up an old conversation, but this might be related. I'm experiencing an issue where I will write the following in a helloworld.astro file, and prettier decides to rename elements to their lower cased versions, thinking it's in an html context. Example:

---
import { Button } from 'somewhere'
---

<Button>Hello world</Button>

I write the above, but when I save / run prettier on it, it turns into

<button>Hello world</button>

Notice now the <button> is lowercased. I assume it's because prettier is normalizing what it thinks is HTML, but I have in my project configured to be JSX.

Any pointers?