Migrate to Biome

Author: silvenon

.eslintignore

@@ -35,27 +35,20 @@ jobs:
       - name: Check formatting
         run: npm run pretty
 
-  eslint:
-    name: ESLint
+  biome:
+    name: Biome
     runs-on: ubuntu-latest
     steps:
       - name: Checkout repo
         uses: actions/checkout@v4
 
-      - name: Setup Node
-        uses: actions/setup-node@v4
+      - name: Setup Biome
+        uses: biomejs/setup-biome@v2
         with:
-          node-version: 18
-          cache: npm
-
-      - name: Install dependencies
-        run: npm ci
-
-      - name: Check config
-        run: npm run lint:check-config
+          version: latest
 
-      - name: Lint
-        run: npm run lint
+      - name: Run Biome
+        run: biome ci .
 
   typescript:
     name: TypeScript
@@ -138,7 +131,7 @@ jobs:
   deploy:
     name: Deploy
     runs-on: ubuntu-latest
-    needs: [prettier, eslint, typescript, vitest, playwright]
+    needs: [prettier, biome, typescript, vitest, playwright]
     # only deploy main/dev branch on pushes
     if: ${{ (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/dev') && github.event_name == 'push' }}
 
@@ -150,8 +143,8 @@ jobs:
         uses: SebRollen/[email protected]
         id: app_name
         with:
-          file: "fly.toml"
-          field: "app"
+          file: 'fly.toml'
+          field: 'app'
 
       - name: Set up Fly
         uses: superfly/flyctl-actions/setup-flyctl@master

.eslintrc.cjs

@@ -6,6 +6,7 @@ node_modules
 
 # text editors
 .idea
+.zed
 
 # secrets
 .env*.local

.github/workflows/deploy.yml

@@ -24,30 +24,26 @@ export default function Comments() {
     theme = 'github-light'
   }
 
-  const initialize = useCallback<React.RefCallback<HTMLDivElement>>(
-    (node) => {
-      if (!node) return
-
-      if (import.meta.hot) {
-        node.replaceChildren()
-      }
-
-      const scriptEl = document.createElement('script')
-
-      scriptEl.src = SOURCE
-      scriptEl.async = true
-      scriptEl.setAttribute('crossorigin', 'anonymous')
-
-      scriptEl.setAttribute('repo', REPO)
-      scriptEl.setAttribute('issue-term', ISSUE_TERM)
-      scriptEl.setAttribute('theme', theme)
-
-      node.appendChild(scriptEl)
-    },
-    // comment section should not reset when the theme changes in case the reader is typing a comment
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-    [],
-  )
+  // biome-ignore lint/correctness/useExhaustiveDependencies: comment section should not reset when the theme changes in case the reader is typing a comment
+  const initialize = useCallback<React.RefCallback<HTMLDivElement>>((node) => {
+    if (!node) return
+
+    if (import.meta.hot) {
+      node.replaceChildren()
+    }
+
+    const scriptEl = document.createElement('script')
+
+    scriptEl.src = SOURCE
+    scriptEl.async = true
+    scriptEl.setAttribute('crossorigin', 'anonymous')
+
+    scriptEl.setAttribute('repo', REPO)
+    scriptEl.setAttribute('issue-term', ISSUE_TERM)
+    scriptEl.setAttribute('theme', theme)
+
+    node.appendChild(scriptEl)
+  }, [])
 
   return <div ref={initialize} />
 }

.gitignore

@@ -37,7 +37,7 @@ export default function Header() {
                   y="0.025"
                   width="64"
                   height="64"
-                ></rect>
+                />
                 <path
                   className="fill-current text-white"
                   d="M31.989,22.518c-0.031,-4.597 -0.902,-8.134 -2.612,-10.613c-1.71,-2.478 -4.165,-3.717 -7.365,-3.717c-3.2,0 -5.655,1.251 -7.365,3.753c-1.71,2.502 -2.565,6.114 -2.565,10.836l0,6.471c0.063,4.549 0.953,8.043 2.671,10.483c1.718,2.439 4.153,3.659 7.306,3.659c3.185,0 5.636,-1.255 7.354,-3.765c1.717,-2.51 2.576,-6.134 2.576,-10.871l0,-6.236Zm-6.682,7.647c-0.032,2.605 -0.31,4.538 -0.836,5.801c-0.525,1.263 -1.329,1.894 -2.412,1.894c-1.145,0 -1.988,-0.675 -2.529,-2.024c-0.542,-1.349 -0.812,-3.404 -0.812,-6.165l0,-8.541c0.078,-4.942 1.176,-7.413 3.294,-7.413c1.13,0 1.961,0.675 2.494,2.024c0.534,1.349 0.801,3.373 0.801,6.071l0,8.353Z"
@@ -50,7 +50,8 @@ export default function Header() {
                   y="0.025"
                   width="64"
                   height="64"
-                ></rect>
+                />
+
                 <path
                   className="fill-current text-white"
                   d="M44.945,55.261l-6.553,0l0,-25.659l-6.392,2.469l0,-5.446l12.253,-5.007l0.692,0l0,33.643Z"

app/components/Comments.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import type React from 'react'
 
 interface Props {
   children: React.ReactNode

app/components/Header.tsx

@@ -44,7 +44,7 @@ export default function ProseImage({
           '--height': height,
         }}
       >
-        {/* eslint-disable-next-line jsx-a11y/alt-text */}
+        {/* biome-ignore lint/a11y/useAltText: alt is passed through props */}
         <img
           {...props}
           className={clsx(props.className, 'rounded-lg')}

app/components/HotTip.tsx

@@ -1,6 +1,6 @@
 import type { LoaderFunction } from '@remix-run/node'
 import { Feed } from 'feed'
-import path from 'path'
+import path from 'node:path'
 import cloudinary from '~/utils/cloudinary'
 import { getAllPostsMeta } from '~/utils/posts.server'
 import { getDomainUrl } from '~/utils/http'

app/components/ProseImage.tsx

@@ -1,5 +1,5 @@
-import fs from 'fs/promises'
-import { basename, dirname, join as joinPath } from 'path'
+import fs from 'node:fs/promises'
+import { basename, dirname, join as joinPath } from 'node:path'
 
 const standalonePostFrontmatter = import.meta.glob<StandalonePostFrontmattter>(
   '/posts/*.mdx',

app/routes/feed[.]rss.ts

@@ -0,0 +1,41 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "ignoreUnknown": false,
+    "ignore": []
+  },
+  "formatter": {
+    "enabled": false
+  },
+  "organizeImports": {
+    "enabled": false
+  },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noNonNullAssertion": "off",
+        "noParameterAssign": "off",
+        "noUnusedTemplateLiteral": "off"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "off"
+      },
+      "correctness": {
+        "noUnknownFunction": "off"
+      },
+      "a11y": {
+        "noSvgWithoutTitle": "off"
+      },
+      "complexity": {
+        "useRegexLiterals": "off"
+      }
+    }
+  }
+}

app/utils/posts.server.ts

@@ -3,10 +3,10 @@
 pre-commit:
   piped: true
   commands:
-    eslint:
+    biome:
       priority: 1
-      glob: "*.{js,cjs,ts,tsx}"
-      run: npx eslint --fix {staged_files}
+      glob: '*.{js,ts,tsx}'
+      run: npx biome check --write {staged_files}
       stage_fixed: true
     prettier:
       priority: 2
@@ -16,9 +16,7 @@ pre-commit:
 pre-push:
   parallel: true
   commands:
-    eslint-check-config:
-      run: npm run lint:check-config
-    eslint:
+    biome:
       run: npm run lint
     prettier:
       run: npm run pretty