Add code formatter and auto-format existing code

.git-blame-ignore-revs

@@ -0,0 +1,10 @@
+# This file lists commits which contain large but uninteresting changes (like
+# applying code auto-formatting), so that you can ignore them in `git blame`
+# output.
+#
+# To do this, run `git blame --ignore-revs-file .git-blame-ignore-revs`,
+# or `git config blame.ignoreRevsFile .git-blame-ignore-revs` to configure
+# git to do this by default.
+
+# Format entire codebase with Biome
+40ec714bd10a541ebc33e47e7dfb85ade4fe890c

.github/workflows/node.js.yml

@@ -27,6 +27,9 @@ jobs:
     - name: Install dependencies
       # --frozen-lockfile: don't generate a lockfile and fail if an update is needed
       run: yarn install --frozen-lockfile
+
+    - name: Check for formatting and linting errors
+      run: yarn run check
 
     - name: Run build
       run: yarn run build

DEVELOPMENT.md

@@ -194,10 +194,24 @@ Unit tests are built with [Jest](https://facebook.github.io/jest/) +
 
 `yarn test` to run them in watch mode.
 
+## Linting and formatting
+
+Run `yarn format` to format your code. Run `yarn lint` to check for lint errors.
+
+If you want, you can enable a pre-commit hook to check for linting and formatting
+issues automatically when you run `git commit`. To enable the check, run this
+command in the root of the repository:
+
+```
+git config core.hooksPath hooks
+```
+
+If you want to skip the check for a particular commit (for work-in-progress commits
+for example), run `git commit --no-verify`.
+
 ## CSS Styling and Naming
 
-We are using SASS and [Tailwind
-CSS](https://tailwindcss.com) with PostCSS.
+We are using SASS and [Tailwind CSS](https://tailwindcss.com) with PostCSS.
 
 Tailwind configuration is controlled with the `src/tailwind.config.js` file.
 New CSS classes can be found in `src/styles/`

biome.json

@@ -0,0 +1,30 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true
+  },
+  "files": {
+    "include": ["src/"]
+  },
+  "formatter": {
+    "enabled": true,
+    "indentStyle": "space",
+    "lineWidth": 100
+  },
+  "organizeImports": {
+    "enabled": true
+  },
+  "linter": {
+    "enabled": false,
+    "rules": {
+      "recommended": true
+    }
+  },
+  "javascript": {
+    "formatter": {
+      "quoteStyle": "double"
+    }
+  }
+}

eslint.config.js

@@ -25,7 +25,7 @@ export default [
       },
     },
     rules: {
-      "no-unused-vars": "warn",
+      "no-unused-vars": ["warn", { "argsIgnorePattern": "^_", "varsIgnorePattern": "^_" }],
       "react/jsx-uses-react": "error",
       "react/jsx-uses-vars": "error",
       "unused-imports/no-unused-imports": "error",

hooks/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+set -ex
+
+yarn run check

package.json

@@ -3,6 +3,28 @@
   "version": "3.16.1",
   "type": "module",
   "private": true,
+  "scripts": {
+    "build-intl": "NODE_ENV=production extract-messages -l=en-US -o lang/ -d en-US --flat -f json 'src/**/!(*.test).js'",
+    "update-layers": "node scripts/update_layers.js",
+    "update-layers-prod": "NODE_ENV=production node scripts/update_layers.js",
+    "start-js": "vite",
+    "start": "npm-run-all -p build-env update-layers start-js",
+    "build-env": "dotenv -c -- jq -n 'env | with_entries(select(.key | startswith(\"REACT_APP_\")))' > public/env.json",
+    "build-js": "vite build",
+    "build": "yarn run build-env && yarn run build-intl && yarn run update-layers-prod && yarn run build-js",
+    "test": "vitest",
+    "test:cov": "vitest run --coverage",
+    "lint": "eslint src/",
+    "format": "biome format --write",
+    "check": "biome ci && eslint src/",
+    "explore": "source-map-explorer --only-mapped --no-border-checks 'dist/**/*.js'"
+  },
+  "browserslist": [
+    ">0.2%",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
   "dependencies": {
     "@apollo/client": "^3.5.4",
     "@changey/react-leaflet-markercluster": "^4.0.0-rc1",
@@ -95,6 +117,7 @@
     "xmltojson": "^1.3.5"
   },
   "devDependencies": {
+    "@biomejs/biome": "1.9.4",
     "@eslint/js": "^9.9.0",
     "@openstreetmap/id-tagging-schema": "^3.0.0",
     "@testing-library/jest-dom": "^6.4.6",
@@ -133,26 +156,6 @@
     "vite": "^5.4.8",
     "vitest": "^2.1.2"
   },
-  "scripts": {
-    "build-intl": "NODE_ENV=production extract-messages -l=en-US -o lang/ -d en-US --flat -f json 'src/**/!(*.test).js'",
-    "update-layers": "node scripts/update_layers.js",
-    "update-layers-prod": "NODE_ENV=production node scripts/update_layers.js",
-    "start-js": "vite",
-    "start": "npm-run-all -p build-env update-layers start-js",
-    "build-env": "dotenv -c -- jq -n 'env | with_entries(select(.key | startswith(\"REACT_APP_\")))' > public/env.json",
-    "build-js": "vite build",
-    "build": "yarn run build-env && yarn run build-intl && yarn run update-layers-prod && yarn run build-js",
-    "test": "vitest",
-    "test:cov": "vitest run --coverage",
-    "lint": "eslint src/",
-    "explore": "source-map-explorer --only-mapped --no-border-checks 'dist/**/*.js'"
-  },
-  "browserslist": [
-    ">0.2%",
-    "not dead",
-    "not ie <= 11",
-    "not op_mini all"
-  ],
   "resolutions": {
     "react-error-overlay": "6.0.9"
   }