chore(frontend): replace ESLint and Prettier with Biome (#1066)

* chore(frontend): replace ESLint and Prettier with Biome

biome check covers formatting, lint and import order, so the separate format step goes. Biome has no typescript dependency.

* chore(frontend): use biome-config 1.0.0-rc.2

rc.2 no longer reports extra effect dependencies, so the two suppressions go.

* chore(frontend): use biome-config 1.0.0

Author: eetu

.githooks/pre-commit

@@ -7,7 +7,6 @@ STAGED=$(git diff --cached --name-only --diff-filter=ACM)
 if echo "$STAGED" | grep -q "^frontend/"; then
   echo "Running frontend lint..."
   (cd "$ROOT/frontend" && yarn lint)
-  (cd "$ROOT/frontend" && yarn format)
 fi
 
 if echo "$STAGED" | grep -q "^backend/"; then

.github/dependabot.yaml

@@ -9,9 +9,6 @@ updates:
       semver-major-days: 14
       semver-minor-days: 7
       semver-patch-days: 5
-    ignore:
-      - dependency-name: "eslint"
-        update-types: ["version-update:semver-major"]
     groups:
       react:
         patterns:

.github/workflows/ci.yaml

@@ -27,7 +27,6 @@ jobs:
           yarn() { node .yarn/releases/yarn-*.cjs "$@"; }
           yarn install --immutable
           yarn playwright install chromium
-          yarn format
           yarn lint
           yarn typecheck
           yarn test

.vscode/extensions.json

@@ -1,6 +1,3 @@
 {
-  "recommendations": [
-    "dbaeumer.vscode-eslint",
-    "esbenp.prettier-vscode"
-  ]
+  "recommendations": ["biomejs.biome"]
 }

.vscode/settings.json

@@ -1,3 +1,9 @@
 {
-  "eslint.useFlatConfig": true
+  "[javascript][javascriptreact][typescript][typescriptreact][json][css]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.biome": "explicit",
+    "source.organizeImports.biome": "explicit"
+  }
 }

frontend/CLAUDE.md

@@ -2,12 +2,12 @@
 
 ## Validation
 
-Run `yarn validate` after changes — runs lint, format check, and typecheck in one shot.
+Run `yarn validate` after changes — runs typecheck and lint in one shot.
 
 Individual scripts:
 
-- `yarn lint` / `yarn lint:fix`
-- `yarn format` / `yarn format:fix`
+- `yarn lint` / `yarn lint:fix` — Biome (`@anarkisti/biome-config/react`):
+  formatting, lint and import order in one pass
 - `yarn typecheck`
 
 Use yarn (not npm). It's vendored at `.yarn/releases/` and pinned by `yarnPath`

frontend/biome.json

@@ -0,0 +1,4 @@
+{
+  "$schema": "./node_modules/@biomejs/biome/configuration_schema.json",
+  "extends": ["@anarkisti/biome-config/react"]
+}

frontend/eslint.config.js

@@ -6,12 +6,10 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
-    "lint": "eslint eslint.config.js src",
-    "lint:fix": "eslint eslint.config.js src --fix",
-    "format": "prettier --check src",
-    "format:fix": "prettier --write src",
+    "lint": "biome check src",
+    "lint:fix": "biome check --write src",
     "typecheck": "tsc --noEmit",
-    "validate": "yarn typecheck && yarn lint && yarn format",
+    "validate": "yarn typecheck && yarn lint",
     "preview": "vite preview",
     "test": "vitest",
     "test:e2e": "playwright test -c ./playwright.configuration.ts"
@@ -34,18 +32,16 @@
     "usehooks-ts": "^3.1.1"
   },
   "devDependencies": {
-    "@anarkisti/eslint-config": "^1.1.0",
+    "@anarkisti/biome-config": "^1.0.0",
+    "@biomejs/biome": "^2.5.15",
     "@types/leaflet": "^1.9.22",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
     "@vitejs/plugin-react": "^6.1.1",
     "@vitest/browser-playwright": "^5.0.3",
     "babel-plugin-react-compiler": "^1.0.0",
-    "eslint": "^10.11.0",
     "playwright": "^1.63.0",
-    "prettier": "^3.9.9",
     "typescript": "^6.0.3",
-    "typescript-eslint": "^8.70.1",
     "unplugin-auto-import": "^21.1.0",
     "vite": "^8.3.1",
     "vite-plugin-qrcode": "^0.4.1",

frontend/package.json

@@ -18,13 +18,7 @@ import SolisBox from "./components/SolisBox";
 import TemperatureBox from "./components/TemperatureBox";
 import Wordmark from "./components/Wordmark";
 import { mq } from "./mq";
-import {
-  type HueLiveEvent,
-  type MotionMember,
-  type MotionUnit,
-  type Response,
-  type Sensor,
-} from "./types/hue";
+import type { HueLiveEvent, MotionMember, MotionUnit, Response, Sensor } from "./types/hue";
 
 // Leaflet is heavy; only pull it in when the radar tab is opened.
 const RainMap = lazy(() => import("./components/RainMap"));