Switch to Biome for formatting and linting

.stylelintrc.cjs

@@ -1,5 +1,5 @@
 module.exports = {
-  extends: ['stylelint-config-standard', 'stylelint-config-prettier'],
+  extends: ['stylelint-config-standard'],
   customSyntax: 'postcss-styled-syntax',
   rules: {
     'selector-type-case': ['lower', { ignoreTypes: ['/^\\$\\w+/'] }],

.vscode/extensions.json

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

.vscode/settings.json

@@ -1,16 +1,24 @@
 {
-  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.defaultFormatter": "biomejs.biome",
   "editor.tabSize": 2,
   "editor.codeActionsOnSave": {
     "source.organizeImports": "explicit"
   },
   "editor.formatOnSave": true,
   "editor.formatOnPaste": false,
-  "prettier.enable": true,
   "search.exclude": {
     "dist": true
   },
   "typescript.enablePromptUseWorkspaceTsdk": true,
   "cSpell.words": ["sseo"],
-  "stylelint.validate": ["css", "less", "postcss", "typescript", "typescriptreact", "scss"]
+  "stylelint.validate": ["css", "less", "postcss", "typescript", "typescriptreact", "scss"],
+  "[jsonc]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "biomejs.biome"
+  }
 }

README.md

@@ -29,15 +29,36 @@ The following scripts are available for this project:
 - Deploy the application to GitHub pages
 - This implicitly runs the `predeploy` script first, which lints and builds the app
 
-### `bun format`
+### `bun format/bun format:changed`
 
-- Format the application with prettier
+- Format the application with Biome
+- `bun format` will format all files
+- `bun format:changed` will format files that git detects as changed relative to `main`
 
-### `bun lint`/`bun lint:code`/`bun lint:styles`/`bun lint:format`/`bun lint:types`
+### `bun fix/bun fix:changed`
 
-- Lint the application
-- `bun lint` will run all lint scripts concurrently
-- `bun lint:code` lints with ESLint
-- `bun lint:styles` lints with Stylelint
-- `bun lint:format` checks the formatting with prettier
-- `bun lint:types` runs a type check
+- Auto-formatting and lint errors
+- `bun fix` will fix errors in all files
+- `bun fix:changed` will fix errors in files that git detects as changed relative to `main`
+
+### `bun lint:styles`
+
+- Checks for CSS format errors with Stylelint
+
+### `bun lint:types`
+
+- Checks for type errors with tsc
+
+### `bun lint:code`/`bun lint:changed:code` / `bun lint:format`/`bun lint:changed:format` / `bun lint:check`/`bun lint:changed:check`
+
+- Check code for errors with Biome
+- `bun lint:code` will check for lint errors in all files
+- `bun lint:changed:code` will check for lint errors in files that git detects as changed relative to `main`
+- `bun lint:format` will check for format errors in all files
+- `bun lint:changed:format` will check for format errors in files that git detects as changed relative to `main`
+- `bun lint:check` will check for both format and lint errors in all files
+- `bun lint:changed:check` will check for both format and lint errors in files that git detects as changed relative to `main`
+
+### `bun lint`
+
+- Lint the entire application, running `bun lint:check`, `bun lint:styles`, and `bun lint:types` concurrently

biome.json

@@ -0,0 +1,217 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.7.0/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true,
+    "defaultBranch": "main"
+  },
+  "formatter": {
+    "enabled": true,
+    "formatWithErrors": false,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineEnding": "lf",
+    "lineWidth": 100,
+    "attributePosition": "auto",
+    "ignore": ["./node_modules", "./dist", "**/.DS_Store"]
+  },
+  "organizeImports": { "enabled": true },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": false,
+      "a11y": {
+        "noAccessKey": "warn",
+        "noAriaUnsupportedElements": "warn",
+        "noAutofocus": "error",
+        "noBlankTarget": "warn",
+        "noDistractingElements": "warn",
+        "noHeaderScope": "warn",
+        "noInteractiveElementToNoninteractiveRole": "error",
+        "noNoninteractiveElementToInteractiveRole": "error",
+        "noNoninteractiveTabindex": "error",
+        "noPositiveTabindex": "error",
+        "noRedundantRoles": "warn",
+        "useAltText": "warn",
+        "useAnchorContent": "warn",
+        "useAriaActivedescendantWithTabindex": "warn",
+        "useAriaPropsForRole": "warn",
+        "useHeadingContent": "warn",
+        "useHtmlLang": "error",
+        "useIframeTitle": "warn",
+        "useKeyWithClickEvents": "error",
+        "useKeyWithMouseEvents": "error",
+        "useMediaCaption": "error",
+        "useValidAnchor": "warn",
+        "useValidAriaProps": "warn",
+        "useValidAriaRole": {
+          "level": "warn",
+          "options": { "allowInvalidRoles": [], "ignoreNonDom": true }
+        },
+        "useValidAriaValues": "warn"
+      },
+      "complexity": {
+        "noMultipleSpacesInRegularExpressionLiterals": "warn",
+        "noUselessConstructor": "warn",
+        "noUselessLabel": "warn",
+        "noUselessLoneBlockStatements": "warn",
+        "noUselessRename": "warn",
+        "noWith": "warn",
+        "useOptionalChain": "warn"
+      },
+      "correctness": {
+        "noConstAssign": "warn",
+        "noEmptyCharacterClassInRegex": "warn",
+        "noEmptyPattern": "warn",
+        "noGlobalObjectCalls": "warn",
+        "noInvalidUseBeforeDeclaration": "warn",
+        "noNewSymbol": "warn",
+        "noSelfAssign": "warn",
+        "noUndeclaredVariables": "error",
+        "noUnreachable": "warn",
+        "noUnreachableSuper": "warn",
+        "noUnusedLabels": "warn",
+        "noUnusedVariables": "warn",
+        "useExhaustiveDependencies": "warn",
+        "useHookAtTopLevel": "error",
+        "useIsNan": "warn",
+        "useJsxKeyInIterable": "warn",
+        "useYield": "warn"
+      },
+      "security": {
+        "noDangerouslySetInnerHtml": "warn",
+        "noGlobalEval": "warn"
+      },
+      "style": {
+        "noCommaOperator": "warn",
+        "noRestrictedGlobals": {
+          "level": "error",
+          "options": {
+            "deniedGlobals": [
+              "addEventListener",
+              "blur",
+              "close",
+              "closed",
+              "confirm",
+              "defaultStatus",
+              "defaultstatus",
+              "event",
+              "external",
+              "find",
+              "focus",
+              "frameElement",
+              "frames",
+              "history",
+              "innerHeight",
+              "innerWidth",
+              "length",
+              "location",
+              "locationbar",
+              "menubar",
+              "moveBy",
+              "moveTo",
+              "name",
+              "onblur",
+              "onerror",
+              "onfocus",
+              "onload",
+              "onresize",
+              "onunload",
+              "open",
+              "opener",
+              "opera",
+              "outerHeight",
+              "outerWidth",
+              "pageXOffset",
+              "pageYOffset",
+              "parent",
+              "print",
+              "removeEventListener",
+              "resizeBy",
+              "resizeTo",
+              "screen",
+              "screenLeft",
+              "screenTop",
+              "screenX",
+              "screenY",
+              "scroll",
+              "scrollbars",
+              "scrollBy",
+              "scrollTo",
+              "scrollX",
+              "scrollY",
+              "self",
+              "status",
+              "statusbar",
+              "stop",
+              "toolbar",
+              "top"
+            ]
+          }
+        },
+        "useNamingConvention": {
+          "level": "warn",
+          "options": { "strictCase": false }
+        }
+      },
+      "suspicious": {
+        "noAssignInExpressions": "warn",
+        "noCatchAssign": "warn",
+        "noCommentText": "warn",
+        "noConfusingLabels": "warn",
+        "noControlCharactersInRegex": "warn",
+        "noDoubleEquals": "warn",
+        "noDuplicateCase": "warn",
+        "noDuplicateClassMembers": "warn",
+        "noDuplicateJsxProps": "warn",
+        "noDuplicateObjectKeys": "warn",
+        "noDuplicateParameters": "warn",
+        "noExplicitAny": "warn",
+        "noFallthroughSwitchClause": "warn",
+        "noFunctionAssign": "warn",
+        "noGlobalAssign": "warn",
+        "noLabelVar": "warn",
+        "noRedeclare": "warn",
+        "noSelfCompare": "warn",
+        "noShadowRestrictedNames": "warn",
+        "noUnsafeNegation": "warn",
+        "useGetterReturn": "warn",
+        "useValidTypeof": "warn"
+      }
+    },
+    "ignore": ["./node_modules", "./dist", "**/.DS_Store", "src/common/store/valtio-persist.ts"]
+  },
+  "javascript": {
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "quoteProperties": "asNeeded",
+      "trailingComma": "all",
+      "semicolons": "asNeeded",
+      "arrowParentheses": "asNeeded",
+      "bracketSpacing": true,
+      "bracketSameLine": false,
+      "quoteStyle": "single",
+      "attributePosition": "auto"
+    }
+  },
+  "overrides": [
+    {
+      "include": ["**/*.ts?(x)"],
+      "linter": {
+        "rules": {
+          "complexity": { "noUselessConstructor": "warn" },
+          "correctness": {
+            "noInvalidUseBeforeDeclaration": "warn",
+            "noUndeclaredVariables": "off",
+            "noUnusedVariables": "warn"
+          },
+          "suspicious": {
+            "noDuplicateClassMembers": "off",
+            "noRedeclare": "warn"
+          }
+        }
+      }
+    }
+  ]
+}