feat(fmt): support HTML, Svelte, Vue, Astro and Angular (#25019)

This commit adds capability to format HTML, Svelte, Vue, Astro and Angular
files.

"--unstable-html" is required to format HTML files, and "--unstable-component"
flag is needed to format other formats. These can also be specified in the config
file.

Close #25015

6 files changed, 60 insertions, 0 deletions

diff --git a/tests/testdata/fmt/badly_formatted.html b/tests/testdata/fmt/badly_formatted.html
new file mode 100644
index 000000000..de7706ac7
--- /dev/null
+++ b/tests/testdata/fmt/badly_formatted.html
@@ -0,0 +1,9 @@
+<div class=container > content </div>
+
+<script>
+let  counter=0
+</script>
+
+<style>
+.container{padding:8px}
+</style>
diff --git a/tests/testdata/fmt/badly_formatted.md b/tests/testdata/fmt/badly_formatted.md
index 29d73b365..642918cea 100644
--- a/tests/testdata/fmt/badly_formatted.md
+++ b/tests/testdata/fmt/badly_formatted.md
@@ -53,3 +53,13 @@ function foo(): number {
 ```css
 #app>.btn{ color : #000 }
 ```
+
+```html
+<div class=container > content </div>
+```
+
+```svelte
+<script lang=ts>
+let a:number
+</script>
+```
diff --git a/tests/testdata/fmt/badly_formatted.svelte b/tests/testdata/fmt/badly_formatted.svelte
new file mode 100644
index 000000000..9c1988d3a
--- /dev/null
+++ b/tests/testdata/fmt/badly_formatted.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+let a:number
+let b  :   number
+</script>
+
+<div class:active={ active } style=" width : 1PX; height:1PX; " > {a+b} </div>
+
+<style>
+.active{}
+</style>
diff --git a/tests/testdata/fmt/badly_formatted_fixed.html b/tests/testdata/fmt/badly_formatted_fixed.html
new file mode 100644
index 000000000..c0c06cd9b
--- /dev/null
+++ b/tests/testdata/fmt/badly_formatted_fixed.html
@@ -0,0 +1,11 @@
+<div class="container">content</div>
+
+<script>
+  let counter = 0;
+</script>
+
+<style>
+  .container {
+    padding: 8px;
+  }
+</style>
diff --git a/tests/testdata/fmt/badly_formatted_fixed.md b/tests/testdata/fmt/badly_formatted_fixed.md
index db2afc809..21176742b 100644
--- a/tests/testdata/fmt/badly_formatted_fixed.md
+++ b/tests/testdata/fmt/badly_formatted_fixed.md
@@ -46,3 +46,13 @@ function foo(): number {
   color: #000;
 }
 ```
+
+```html
+<div class="container">content</div>
+```
+
+```svelte
+<script lang="ts">
+  let a: number;
+</script>
+```
diff --git a/tests/testdata/fmt/badly_formatted_fixed.svelte b/tests/testdata/fmt/badly_formatted_fixed.svelte
new file mode 100644
index 000000000..7557e758d
--- /dev/null
+++ b/tests/testdata/fmt/badly_formatted_fixed.svelte
@@ -0,0 +1,10 @@
+<script lang="ts">
+  let a: number;
+  let b: number;
+</script>
+
+<div class:active style="width: 1px; height: 1px">{a + b}</div>
+
+<style>
+  .active {}
+</style>