feat: add prettier-plugin-astro for eslint-config formatter (#413)

Author: Kaivan Wong

fixtures/input/astro.astro

@@ -1,7 +1,21 @@
 ---
+const isJsx = true
 const content = "hi!";
 ---
 
 <article>
   <div>{content}</div>
+  <div>
+    {isJsx && (
+      <h1>{content}</h1>
+    )}
+  </div>
 </article>
+
+
+<script>
+  document.querySelector('h1')?.addEventListener('click', () => {
+    alert('hi!');
+  });
+
+</script>

fixtures/output/all/astro.astro

@@ -1,7 +1,21 @@
 ---
+const isJsx = true
 const content = 'hi!';
 ---
 
-  <article>
-    <div>{content}</div>
-  </article>
+<article>
+  <div>{content}</div>
+  <div>
+    {isJsx && (
+      <h1>{content}</h1>
+    )}
+  </div>
+</article>
+
+
+<script>
+  document.querySelector('h1')?.addEventListener('click', () => {
+    alert('hi!');
+  });
+
+</script>

fixtures/output/with-formatters/astro.astro

@@ -0,0 +1,21 @@
+---
+const isJsx = true
+const content = 'hi!';
+---
+
+<article>
+  <div>{content}</div>
+  <div>
+    {isJsx && (
+      <h1>{content}</h1>
+    )}
+  </div>
+</article>
+
+
+<script>
+  document.querySelector('h1')?.addEventListener('click', () => {
+    alert('hi!');
+  });
+
+</script>

package.json

@@ -46,6 +46,7 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-react-refresh": "^0.4.4",
     "eslint-plugin-svelte": "^2.34.1",
+    "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-slidev": "^1.0.5",
     "svelte-eslint-parser": "^0.33.1"
   },
@@ -74,6 +75,9 @@
     "eslint-plugin-svelte": {
       "optional": true
     },
+    "prettier-plugin-astro": {
+      "optional": true
+    },
     "prettier-plugin-slidev": {
       "optional": true
     },
@@ -146,6 +150,7 @@
     "fast-glob": "^3.3.2",
     "fs-extra": "^11.2.0",
     "lint-staged": "^15.2.2",
+    "prettier-plugin-astro": "^0.13.0",
     "prettier-plugin-slidev": "^1.0.5",
     "rimraf": "^5.0.5",
     "simple-git-hooks": "^2.9.0",

pnpm-lock.yaml

@@ -49,6 +49,7 @@ export const vscodeSettingsString = `
     "json",
     "jsonc",
     "yaml",
-    "toml"
+    "toml",
+    "astro",
   ]
 `

src/cli/constants.ts

@@ -43,7 +43,13 @@ export async function astro(
         'astro/semi': 'off',
 
         ...stylistic
-          ? {}
+          ? {
+              'style/indent': 'off',
+              'style/jsx-closing-tag-location': 'off',
+              'style/jsx-indent': 'off',
+              'style/jsx-one-expression-per-line': 'off',
+              'style/no-multiple-empty-lines': 'off',
+            }
           : {},
 
         ...overrides,

src/configs/astro.ts

@@ -1,5 +1,5 @@
 import { isPackageExists } from 'local-pkg'
-import { GLOB_CSS, GLOB_LESS, GLOB_MARKDOWN, GLOB_POSTCSS, GLOB_SCSS } from '../globs'
+import { GLOB_ASTRO, GLOB_CSS, GLOB_LESS, GLOB_MARKDOWN, GLOB_POSTCSS, GLOB_SCSS } from '../globs'
 import type { VendoredPrettierOptions } from '../vender/prettier-types'
 import { ensurePackages, interopDefault, parserPlain } from '../utils'
 import type { FlatConfigItem, OptionsFormatters, StylisticConfig } from '../types'
@@ -11,6 +11,7 @@ export async function formatters(
 ): Promise<FlatConfigItem[]> {
   if (options === true) {
     options = {
+      astro: isPackageExists('astro'),
       css: true,
       graphql: true,
       html: true,
@@ -22,6 +23,7 @@ export async function formatters(
   await ensurePackages([
     'eslint-plugin-format',
     options.markdown && options.slidev ? 'prettier-plugin-slidev' : undefined,
+    options.astro ? 'prettier-plugin-astro' : undefined,
   ])
 
   if (options.slidev && options.markdown !== true && options.markdown !== 'prettier')
@@ -201,6 +203,28 @@ export async function formatters(
     }
   }
 
+  if (options.astro) {
+    configs.push({
+      files: [GLOB_ASTRO],
+      languageOptions: {
+        parser: parserPlain,
+      },
+      name: 'antfu:formatter:astro',
+      rules: {
+        'format/prettier': [
+          'error',
+          {
+            ...prettierOptions,
+            parser: 'astro',
+            plugins: [
+              'prettier-plugin-astro',
+            ],
+          },
+        ],
+      },
+    })
+  }
+
   if (options.graphql) {
     configs.push({
       files: ['**/*.graphql'],

src/configs/formatters.ts

@@ -152,6 +152,13 @@ export interface OptionsFormatters {
   slidev?: boolean | {
     files?: string[]
   }
+
+  /**
+   * Enable formatting support for Astro.
+   *
+   * Currently only support Prettier.
+   */
+  astro?: 'prettier' | boolean
 }
 
 export interface OptionsComponentExts {

src/types.ts

@@ -62,6 +62,7 @@ runWithConfig(
   {
     typescript: true,
     vue: true,
+    astro: true,
     formatters: true,
   },
 )