migrate from prettier to biome

biome.json

@@ -0,0 +1,80 @@
+{
+    "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+    "organizeImports": {
+        "enabled": true
+    },
+    "vcs": {
+        "enabled": false,
+        "clientKind": "git",
+        "useIgnoreFile": false
+    },
+    "files": {
+        "ignoreUnknown": false,
+        "ignore": ["vendor", "node_modules", "resources/js/ziggy.js"]
+    },
+    "linter": {
+        "enabled": true,
+        "rules": {
+            "recommended": true,
+            "style": {
+                "noNonNullAssertion": "off",
+                "noParameterAssign": "warn",
+                "useImportType": "error"
+            },
+            "complexity": {
+                "useArrowFunction": "error"
+            },
+            "a11y": {
+                "noSvgWithoutTitle": "off",
+                "useValidAnchor": "off",
+                "useSemanticElements": "off"
+            },
+            "correctness": {
+                "useHookAtTopLevel": "error",
+                "noUnusedImports": "error",
+                "useExhaustiveDependencies": "off",
+                "noChildrenProp": "off"
+            },
+            "suspicious": {
+                "noExplicitAny": "off",
+                "noArrayIndexKey": "off",
+                "noConsoleLog": "warn"
+            },
+            "nursery": {
+                "useSortedClasses": {
+                    "level": "error",
+                    "fix": "safe",
+                    "options": {
+                        "attributes": ["classList"],
+                        "functions": ["cn", "twJoin", "tv", "composeRenderProps", "composeTailwindRenderProps"]
+                    }
+                }
+            }
+        },
+        "ignore": []
+    },
+    "formatter": {
+        "enabled": true,
+        "indentStyle": "space",
+        "indentWidth": 2,
+        "lineWidth": 100,
+        "ignore": []
+    },
+    "javascript": {
+        "formatter": {
+            "quoteStyle": "double",
+            "arrowParentheses": "always",
+            "bracketSameLine": false,
+            "bracketSpacing": true,
+            "jsxQuoteStyle": "double",
+            "quoteProperties": "asNeeded",
+            "semicolons": "asNeeded",
+            "trailingCommas": "all"
+        }
+    },
+    "json": {
+        "formatter": {
+            "trailingCommas": "none"
+        }
+    }
+}

package.json

@@ -4,11 +4,12 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build && vite build --ssr",
-    "format": "prettier --write .",
+    "format": "biome format --write resources/js && biome lint --fix resources/js",
     "release": "export GITHUB_TOKEN=$(cat .github_token) && release-it",
     "preview": "tsc && npm run build && php artisan inertia:start-ssr"
   },
   "devDependencies": {
+    "@biomejs/biome": "^1.9.4",
     "@commitlint/cli": "^19.7.1",
     "@commitlint/config-conventional": "^19.7.1",
     "@inertiajs/react": "^2.0.3",
@@ -21,9 +22,6 @@
     "axios": "^1.7.9",
     "husky": "^9.1.7",
     "laravel-vite-plugin": "^1.2.0",
-    "prettier": "^3.5.1",
-    "prettier-plugin-organize-imports": "^4.1.0",
-    "prettier-plugin-tailwindcss": "^0.6.11",
     "release-it": "^17.11.0",
     "tailwindcss": "^4.0.6",
     "typescript": "^5.7.3",

resources/js/app.tsx

@@ -1,32 +1,33 @@
-import '../css/app.css';
-import './bootstrap';
+import "../css/app.css"
+import "./bootstrap"
 
-import { Providers } from '@/components/providers';
-import { Ziggy } from '@/ziggy';
-import { createInertiaApp } from '@inertiajs/react';
-import { resolvePageComponent } from 'laravel-vite-plugin/inertia-helpers';
-import { createRoot, hydrateRoot } from 'react-dom/client';
-import { useRoute } from 'ziggy-js';
+import { Providers } from "@/components/providers"
+import { Ziggy } from "@/ziggy"
+import { createInertiaApp } from "@inertiajs/react"
+import { resolvePageComponent } from "laravel-vite-plugin/inertia-helpers"
+import { createRoot, hydrateRoot } from "react-dom/client"
+import { useRoute } from "ziggy-js"
 
-const appName = import.meta.env.VITE_APP_NAME || 'Laravel';
+const appName = import.meta.env.VITE_APP_NAME || "Laravel"
 
 createInertiaApp({
-  title: (title) => (title ? title + ' / ' + appName : appName),
-  resolve: (name) => resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob('./pages/**/*.tsx')),
+  title: (title) => (title ? `${title} / ${appName}` : appName),
+  resolve: (name) =>
+    resolvePageComponent(`./pages/${name}.tsx`, import.meta.glob("./pages/**/*.tsx")),
   setup({ el, App, props }) {
     // @ts-expect-error
-    window.route = useRoute(Ziggy as any);
+    window.route = useRoute(Ziggy as any)
     const appElement = (
       <Providers>
         <App {...props} />
       </Providers>
-    );
+    )
     if (import.meta.env.SSR) {
-      hydrateRoot(el, appElement);
-      return;
+      hydrateRoot(el, appElement)
+      return
     }
 
-    createRoot(el).render(appElement);
+    createRoot(el).render(appElement)
   },
-  progress: false
-});
+  progress: false,
+})

resources/js/bootstrap.ts

@@ -1,5 +1,5 @@
-import axios from 'axios';
+import axios from "axios"
 
-window.axios = axios;
+window.axios = axios
 
-window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest"

resources/js/components/flash-message.tsx

@@ -1,15 +1,15 @@
-import { FlashMessageData } from '@/types/index';
-import { usePage } from '@inertiajs/react';
-import { useEffect } from 'react';
-import { toast } from 'sonner';
-import { Toast } from 'ui';
+import type { FlashMessageData } from "@/types"
+import { usePage } from "@inertiajs/react"
+import { useEffect } from "react"
+import { toast } from "sonner"
+import { Toast } from "ui"
 
 export function FlashMessage() {
-  const { flash_message } = usePage<{ flash_message: FlashMessageData }>().props;
+  const { flash_message } = usePage<{ flash_message: FlashMessageData }>().props
   useEffect(() => {
-    if (flash_message && flash_message.message) {
-      (toast as any)[flash_message.type](flash_message.message);
+    if (flash_message?.message) {
+      ;(toast as any)[flash_message.type](flash_message.message)
     }
-  }, [flash_message]);
-  return <Toast />;
+  }, [flash_message])
+  return <Toast />
 }