HTML TODOs
Problem
This issue tracks HTML issues that should be done before the public release. --- Please take a look at #5259, which should address this issue. --- Try out the current experimental HTML support: [code block] or preview playground in #5135. --- | icon | description | |-|-| | ✔️ | merged | | 👀 | in review | | 🔜 | #5259 | | 🏃 | WIP | --- Features - [x] support front matter - #5110 - [ ] support pragma - 🔜 - [x] unambiguous/XHTML-compatible output for void tags (e.g., `<br />`) (reason) - #5116 - [ ] html in js template literal (comment) - 🔜 - [x] whitespace-sensitive formatting (comment) - #5168 - [ ] recognize CDATA (comment) - 🔜 - template languages - [ ] format interpolation `{{ js expression }}` (comment) - 🔜 - ~~maybe support bracketSpacing?~~ (no, it's not supported in JSX) - Angular - [ ] format attribute binding syntax (`*ngIf`, `[target]`, `(target)`, `[(target)]`) - 🔜 - [ ] format inline template (``@Component({ template: `html` })``) - 🔜 - Vue - [ ] format attribute binding syntax (`:class`, `v-if`, `v-bind:id`, `@click`) - 🔜 Bug fixes - [x] ~~exclude comments from fragment detection~~ (outdated) - #5100 - [x] remove extra trailing newline for `<template>` (repro) - #5127 - [x] add missing trailing newline for `<style>` (repro) - #5111 - [x] preserve HTML entities - ~~#5119~~ #5127 - [x] preserve case-sensitive tags - #5101 - [x] preserve case-sensitive attributes - #51
Unverified for your environment
Select your OS to check compatibility.
1 Fix
Implement Missing HTML Features Before Release
The current HTML implementation lacks support for several features such as pragma, HTML in JS template literals, and various attribute binding syntaxes in Angular and Vue. These missing features may lead to improper formatting and functionality issues in the final product, affecting user experience.
Awaiting Verification
Be the first to verify this fix
- 1
Implement Support for Pragma
Add functionality to recognize and properly handle pragma directives in HTML. This will ensure that any special processing required by the pragma is executed correctly.
javascript// Example of pragma usage /* @pragma some-directive */ - 2
Enable HTML in JS Template Literals
Modify the parser to allow HTML to be embedded within JavaScript template literals. This will enhance the flexibility of using HTML within JavaScript code.
javascriptconst template = ` <div> <h1>Hello World</h1> </div>`; - 3
Format Angular Attribute Binding Syntax
Implement formatting for Angular attribute binding syntaxes such as `*ngIf`, `[target]`, `(target)`, and `[(target)]`. This will ensure that Angular templates are formatted correctly and are functional.
html<div *ngIf="condition">Content</div> - 4
Format Vue Attribute Binding Syntax
Add support for formatting Vue attribute binding syntaxes like `:class`, `v-if`, `v-bind:id`, and `@click`. This will improve the integration of Vue components and enhance readability.
html<div :class="{'active': isActive}" @click="handleClick">Click Me</div> - 5
Recognize CDATA Sections
Implement functionality to recognize and properly handle CDATA sections in HTML. This is important for ensuring that special characters within CDATA are not processed as markup.
html<![CDATA[ <div>Some content</div> ]]>
Validation
Confirm that all new features are functioning as expected by running unit tests and manually testing the HTML output in various scenarios. Ensure that the output is valid and adheres to the expected formatting rules.
Sign in to verify this fix
Environment
Submitted by
Alex Chen
2450 rep