☂️ HTML Parsing and Formatting

[dyc3]

Description

This will track the overall status of the HTML parser and formatter. This issue can be closed when the feature flag for HTML is removed, and the HTML parser and formatter is publicly available. This does not track anything for the HTML analyzer (for lint rules).

This is necessary in order for Biome to support framework specific template languages, like Vue, Svelte, and Angular. If you are a user of one of these frameworks, Biome already has support for processing embedded JS/TS in these files, but with some caveats. We have recommended configuration here to help provide the best experience for the time being.

Status

Overall: Kinda flaky, but technically functional.

• Available in the playground
• Parses all prettier formatter tests.
• Formats all prettier formatter tests.
• Support for prettier's options
  • 📎 HTML: Implement "Bracket same line" option #4024
  • 📎 HTML: Implement "Attribute Position" option #4828
  • HTML specific
    • htmlWhitespaceSensitivity
    • vueIndentScriptAndStyle
• Formats embedded languages, CSS and JS in style and script tags. (see also: 📎 Embedded language formatting #3334 )
• Migrations for relevant prettier configuration to biome

How to Contribute

All well defined smaller tasks can be found by looking at the L-HTML label. Looking to contribute? Start by looking there.

[TyOverby]

This issue can be closed when the feature flag for HTML is removed, and the HTML parser and formatter is publicly available.

What is this feature flag? In addition to the automated tests, I'd like to be able to run the main biome executable while hacking on html support!

[dyc3]

I'm referring to this:

biome/crates/biome_cli/Cargo.toml

Line 81 in eedb22e

experimental-html = ["biome_service/experimental-html"]

The easiest way to hack on the formatter is to use the quick_test thing we have set up: https://github.com/biomejs/biome/blob/next/crates/biome_html_formatter/tests/quick_test.rs

[sandstrom]

Probably something you've thought about, but HTML isn't always the 'vanilla' flavour. Handlebars, Liquid, ERB and several other templating languages exist.

They often add some 'special tags' on top of HTML.

As a first, it would be great if it could just 'ignore' those sections, i.e. continue parsing the file but not trying to interpret anything non-standard.

Then maybe as a second step also understand the handlebars/liquid/erb etc. stuff (probably via plugins?).

[ematipico]

@sandstrom you might not know that, but Biome parsers are recoverable and error resilient, which means you can have even non-standard syntax inside (in this case) an HTML file, and you'll still get something somewhat analysable :)

https://biomejs.dev/playground/?lintRules=all&files.main.html=PAB1AGwAIABjAGwAYQBzAHMAPQAiAHAAZQBvAHAAbABlAF8AbABpAHMAdAAiAD4ACgAgACAAewB7ACMAZQBhAGMAaAAgAHAAZQBvAHAAbABlAH0AfQAKACAAIAAgACAAPABsAGkAPgB7AHsAdABoAGkAcwB9AH0APAAvAGwAaQA%2BAAoAIAAgAHsAewAvAGUAYQBjAGgAfQB9AAoAPAAvAHUAbAA%2BAA%3D%3D

[sandstrom]

@ematipico Sounds like you've already thought about it! 😄 Great!