feat: support formatting blocks in Vue SFC

README.md

@@ -352,10 +352,27 @@ import antfu from '@antfu/eslint-config'
 
 export default antfu({
   formatters: {
-    css: true, // by default use Prettier
-    html: true, // by default use Prettier
-    toml: 'dprint', // use dprint for TOML
-    markdown: 'prettier' // use prettier for markdown
+    /**
+     * Format CSS, LESS, SCSS files, also the `<style>` blocks in Vue
+     * By default uses Prettier
+     */
+    css: true,
+    /**
+     * Format HTML files
+     * By default uses Prettier
+     */
+    html: true,
+    /**
+     * Format TOML files
+     * Currently only supports dprint
+     */
+    toml: 'dprint',
+    /**
+     * Format Markdown files
+     * Supports Prettier and dprint
+     * By default uses Prettier
+     */
+    markdown: 'prettier'
   }
 })
 ```

fixtures/input/vue-ts.vue

@@ -19,3 +19,16 @@ const incrementCounter = () => {
   counter.value++;
 };
 </script>
+
+<style>
+.a {  color:   red }
+</style>
+
+<style lang="scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color:   #333;
+
+body { font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>

fixtures/output/all/vue-ts.vue

@@ -20,3 +20,16 @@ function incrementCounter() {
     <p>Counter: {{ counter }}</p>
   </div>
 </template>
+
+<style>
+.a {  color:   red }
+</style>
+
+<style lang="scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color:   #333;
+
+body { font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>

fixtures/output/no-style/vue-ts.vue

@@ -20,3 +20,16 @@ const incrementCounter = () => {
     <p>Counter: {{ counter }}</p>
   </div>
 </template>
+
+<style>
+.a {  color:   red }
+</style>
+
+<style lang="scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color:   #333;
+
+body { font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>

fixtures/output/tab-double-quotes/vue-ts.vue

@@ -20,3 +20,16 @@ function incrementCounter() {
 		<p>Counter: {{ counter }}</p>
 	</div>
 </template>
+
+<style>
+.a {  color:   red }
+</style>
+
+<style lang="scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color:   #333;
+
+body { font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>

fixtures/output/ts-override/vue-ts.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+// Define reactive data and props
+import { ref } from 'vue'
+
+const greeting = ref('Hello, Vue 3!')
+const counter = ref<number | string>(0)
+
+// Define a function
+function incrementCounter() {
+  counter.value++
+}
+</script>
+
+<template>
+  <div>
+    <h1>{{ greeting }}</h1>
+    <button @click="incrementCounter">
+      Click me!
+    </button>
+    <p>Counter: {{ counter }}</p>
+  </div>
+</template>
+
+<style>
+.a {  color:   red }
+</style>
+
+<style lang="scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color:   #333;
+
+body { font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>

fixtures/output/ts-override/vue.vue

@@ -0,0 +1,24 @@
+<script setup>
+// Define reactive data and props
+import { ref } from 'vue'
+
+const greeting = ref(`Hello, Vue 3!${1}`)
+const counter = ref(0)
+
+// Define a function
+function incrementCounter() {
+  counter.value++
+}
+</script>
+
+<template>
+  <div>
+    <h1>
+      {{ greeting }}
+    </h1>
+    <button @click="incrementCounter">
+      Click me!
+    </button>
+    <p>Counter: {{ counter }}</p>
+  </div>
+</template>

fixtures/output/with-formatters/vue-ts.vue

@@ -20,3 +20,19 @@ function incrementCounter() {
     <p>Counter: {{ counter }}</p>
   </div>
 </template>
+
+<style>
+.a {
+  color: red;
+}
+</style>
+
+<style lang="scss">
+$font-stack: Helvetica, sans-serif;
+$primary-color: #333;
+
+body {
+  font: 100% $font-stack;
+  color: $primary-color;
+}
+</style>

package.json

@@ -71,6 +71,7 @@
     "@typescript-eslint/eslint-plugin": "^6.13.2",
     "@typescript-eslint/parser": "^6.13.2",
     "eslint-config-flat-gitignore": "^0.1.2",
+    "eslint-merge-processors": "^0.0.0",
     "eslint-parser-plain": "^0.1.0",
     "eslint-plugin-antfu": "^2.0.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
@@ -86,6 +87,7 @@
     "eslint-plugin-vitest": "^0.3.10",
     "eslint-plugin-vue": "^9.19.2",
     "eslint-plugin-yml": "^1.10.0",
+    "eslint-processor-vue-blocks": "^0.1.0",
     "globals": "^13.23.0",
     "jsonc-eslint-parser": "^2.4.0",
     "local-pkg": "^0.5.0",
@@ -123,7 +125,8 @@
     "simple-git-hooks": "^2.9.0",
     "tsup": "^8.0.1",
     "typescript": "^5.3.2",
-    "vitest": "^1.0.1"
+    "vitest": "^1.0.1",
+    "vue": "^3.3.10"
   },
   "simple-git-hooks": {
     "pre-commit": "pnpm lint-staged"