g-plane / markup_fmt

Configurable HTML, Vue, Svelte, Astro, Angular, Jinja, Twig, Nunjucks and Vento formatter with dprint integration.
https://dprint.dev/plugins/markup_fmt/
MIT License
100 stars 9 forks source link

Illegal return statement outside of a function when used with Biome and Astro #52

Open jaredLunde opened 2 months ago

jaredLunde commented 2 months ago

This error is encountered when formatting JavaScript in Astro frontmatter with Biome as the external formatter.

Message: failed to format code with external formatter:
parse ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  × Illegal return statement outside of a function

Biome itself can handle parsing frontmatter return statements provided that the language is "astro": https://github.com/biomejs/biome/pull/2273/files

Edit: I see this is known: https://github.com/g-plane/markup_fmt/blob/e989636042409f75309181b6b90910284c224942/dprint_plugin/tests/integration.rs#L158-L159

Is there a workaround or ignore statement that can be used?


Biome version: 1.8.4 markup_fmt version: 0.12.0

g-plane commented 2 months ago

There may be a bug in Biome or dprint-plugin-biome. It's a known issue and I even ignore this case in tests: https://github.com/g-plane/markup_fmt/blob/main/dprint_plugin/tests/integration.rs#L157-L161 .

jaredLunde commented 2 months ago

I think the issue is this:

  1. You're choosing the the extension "tsx" for frontmatter in Astro (for good reason that will follow) https://github.com/g-plane/markup_fmt/blob/e989636042409f75309181b6b90910284c224942/markup_fmt/src/printer.rs#L718-L725

  2. dprint-plugin-biome does not support the astro extension. Only these: https://github.com/dprint/dprint-plugin-biome/blob/main/src/format_text.rs#L58-L76

  3. For Biome to correctly parse the syntax for Astro frontmatter scripts, it requires the astro extension.

Here is the exception they've carved out for Astro: https://github.com/biomejs/biome/blob/6a54b27ec740e6a286fd88518e21bc661194857d/crates/biome_js_parser/src/syntax/stmt.rs#L728-L729

When dprint-plugin-biome checks the syntax it calls JsFileSource::try_from(file_path) and winds up here. https://github.com/biomejs/biome/blob/7ffc53fab4160a8851348c1d59f80ed2382ad6b0/crates/biome_js_syntax/src/file_source.rs#L311


So for this to work, dprint-plugin-biome would need to support astro, vue, and svelte extensions and markup_fmt would have to pass the correct file extension to dprint-plugin-biome instead of "tsx".

jaredLunde commented 2 months ago

I submitted a PR in dprint-plugin-biome that would allow you to use those file extensions: https://github.com/dprint/dprint-plugin-biome/pull/16

g-plane commented 2 months ago

There's no way to know whether user is using Biome or not for choosing file extension.

jaredLunde commented 2 months ago

Could you maybe add an option to your dprint config? You wouldn't know for certain obviously, but it wouldn't be the plugin's fault if someone opted into something they weren't using.

Alternatively, we could add something to your plugin documentation that calls out this core Astro functionality can't be supported when using the Biome plugin.

g-plane commented 2 months ago

Updating documentation sounds good, while adding an option just for "fixing some problems" isn't an ideal solution.

Also, are there anything can do in dprint-plugin-biome?

jaredLunde commented 2 months ago

I don't think so. It receives the file path from your plugin and ultimately that determines which syntax is used in Biome.

jaredLunde commented 2 months ago

Here is what the Astro prettier plugin does: https://github.com/withastro/prettier-plugin-astro/?tab=readme-ov-file#astro-skip-frontmatter

This seems reasonable to me as a general configuration option, since Biome can run on Astro files by itself.

g-plane commented 1 month ago

No, they are different cases.