chore: replace prettier & eslint with Biome

.github/CONTRIBUTING.md

@@ -47,22 +47,16 @@ This project uses `PNPM`. A list of steps for setting up a [local development en
 
 All the code quality tools used in the project are installed and configured at the root.
 
-#### Linting
+#### Linting & Formatting
 
-[Eslint](https://eslint.org/) is used for linting.
+We use [Biome](https://biomejs.dev/) for linting and formatting.
 
-```shell
-./.eslintrc.json # config
-./.eslintignore # ignore file
-```
-
-#### Formatting
+Check `format` and `lint` commands in `package.json`, along with their `:fix` counterparts on how to automatically fix formatting and linting issues.
 
-[Prettier](https://prettier.io/) is used for formatting.
+We also rely on prettier, for Markdown and YAML files, until Biome supports them.
 
 ```shell
-./.prettierrc.json # config
-./.prettierignore # ignore file
+./biome.jsonc # config
 ```
 
 #### Testing

.github/actions/bump-manifest-version.cjs

@@ -1,5 +1,4 @@
 // @ts-check
-/* eslint-disable @typescript-eslint/no-require-imports, no-console */
 const fs = require('node:fs/promises');
 
 /** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
@@ -45,6 +44,6 @@ function bumpVersion(existingVersion, type) {
     case 'minor':
       return [major, minor + 1, 0, 0];
     default:
-      throw new Error('Unknown bump type: ' + type);
+      throw new Error(`Unknown bump type: ${type}`);
   }
 }

.github/actions/delete-artifacts.cjs

@@ -1,5 +1,4 @@
 // @ts-check
-/* eslint-disable @typescript-eslint/no-require-imports, no-console */
 const { BROWSERS } = require('./constants.cjs');
 
 /**

.github/actions/get-built-version.cjs

@@ -1,5 +1,4 @@
 // @ts-check
-/* eslint-disable @typescript-eslint/no-require-imports */
 const fs = require('node:fs/promises');
 
 /**

.github/actions/get-workflow-artifacts.cjs

@@ -1,5 +1,4 @@
 // @ts-check
-/* eslint-disable @typescript-eslint/no-require-imports, no-console */
 const fs = require('node:fs/promises');
 const { COLORS, TEMPLATE_VARS, BADGE } = require('./constants.cjs');
 
@@ -42,7 +41,7 @@ function formatBytes(bytes, decimals = 2) {
   const dm = decimals < 0 ? 0 : decimals;
   const sizes = ['B', 'KB', 'MB', 'GB'];
   const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(dm))}${sizes[i]}`;
+  return `${Number.parseFloat((bytes / k ** i).toFixed(dm))}${sizes[i]}`;
 }
 
 /** @param {import('github-script').AsyncFunctionArguments} AsyncFunctionArguments */
@@ -75,14 +74,14 @@ module.exports = async ({ github, context, core }) => {
     run_id: runId,
   });
 
-  artifacts.data.artifacts.forEach((artifact) => {
+  for (const artifact of artifacts.data.artifacts) {
     const key = /** @type {Browser} */ (artifact.name.split('-')[1]);
     ARTIFACTS_DATA[key].url =
       `${baseUrl}/suites/${suiteId}/artifacts/${artifact.id}`;
     ARTIFACTS_DATA[key].size = formatBytes(artifact.size_in_bytes);
-  });
+  }
 
-  Object.keys(ARTIFACTS_DATA).forEach((k) => {
+  for (const k of Object.keys(ARTIFACTS_DATA)) {
     const { name, url, size } = ARTIFACTS_DATA[/** @type {Browser} */ (k)];
     if (!url && !size) {
       const badgeUrl = getBadge('failure', COLORS.red, name);
@@ -95,7 +94,7 @@ module.exports = async ({ github, context, core }) => {
         `<tr><td align="center">${badgeUrl}</td><td align="center"><a href="${url}">Download</a></td></tr>`,
       );
     }
-  });
+  }
 
   const tableBody = tableRows.join('');
   const commentBody = template

.github/workflows/bump-manifest-version.yml

@@ -38,7 +38,7 @@ jobs:
             const script = require('./.github/actions/bump-manifest-version.cjs')
             await script({ github, context, core })
 
-      - name: Format with prettier
+      - name: Format with Biome
         run: pnpm format:fix
 
       - name: Create pull request

.prettierignore

@@ -7,3 +7,11 @@ pnpm-lock.yaml
 .prettierignore
 coverage
 LICENSE
+
+*.tsx
+*.cjs
+*.ts
+*.js
+*.json
+*.jsonc
+*.css

.vscode/extensions.json

@@ -1,7 +1,7 @@
 {
   "recommendations": [
+    "biomejs.biome",
     "bradlc.vscode-tailwindcss",
-    "dbaeumer.vscode-eslint",
     "esbenp.prettier-vscode",
     "github.vscode-github-actions",
     "mikestead.dotenv",

README.md

@@ -1,7 +1,6 @@
 <h1 align="center">Web Monetization Extension</h1>
 
 ![Github Actions CI](https://github.com/interledger/web-monetization-extension/actions/workflows/sanity.yml/badge.svg?branch=main)
-[![Prettier](https://img.shields.io/badge/code_style-prettier-ff69b4.svg?style=flat-square)](https://prettier.io/)
 
 The Web Monetization browser extension is an open source implementation of the Web Monetization draft specification - learn more [here](https://webmonetization.org/specification/). The extension is built with React and TypeScript.
 

biome.jsonc

@@ -0,0 +1,68 @@
+{
+  "$schema": "https://biomejs.dev/schemas/1.9.4/schema.json",
+  "vcs": {
+    "enabled": true,
+    "clientKind": "git",
+    "useIgnoreFile": true,
+    "defaultBranch": "main"
+  },
+  "files": { "ignoreUnknown": true, "ignore": [] },
+  "formatter": {
+    "enabled": true,
+    "useEditorconfig": true,
+    "indentStyle": "space",
+    "indentWidth": 2,
+    "lineWidth": 80
+  },
+  "organizeImports": { "enabled": false },
+  "linter": {
+    "enabled": true,
+    "rules": {
+      "recommended": true,
+      "style": {
+        "noUnusedTemplateLiteral": "off", // TODO: turn on, too many cases
+        "noUselessElse": "off", // TODO: turn on, too many cases
+        "noNonNullAssertion": "off" // TODO: turn on, too many cases
+      },
+      "suspicious": {
+        "noExplicitAny": "off", // TODO: turn on, too many cases
+        "noConsole": "warn"
+      },
+      "a11y": {
+        "noSvgWithoutTitle": "off"
+      }
+    }
+  },
+  "javascript": {
+    "jsxRuntime": "reactClassic",
+    "formatter": {
+      "jsxQuoteStyle": "double",
+      "trailingCommas": "all",
+      "semicolons": "always",
+      "quoteStyle": "single"
+    },
+    "globals": ["chrome", "browser"]
+  },
+  "css": {
+    "formatter": {
+      "quoteStyle": "single"
+    }
+  },
+  "overrides": [
+    {
+      "include": [
+        "esbuild/*",
+        "scripts/*",
+        ".github/actions/*",
+        "src/content/debug.ts"
+      ],
+      "linter": {
+        "rules": {
+          "suspicious": {
+            "noConsole": "off"
+          }
+        }
+      }
+    }
+  ]
+}

cspell.json

@@ -17,7 +17,6 @@
     "temp",
     "*.svg",
     "pnpm-lock.yaml",
-    ".eslintrc.json",
     ".gitignore",
     ".vscode/extensions.json",
     "cspell-dictionary.txt"

docs/DEVELOP.md

@@ -69,7 +69,7 @@ During the sign up process, it'll ask you for KYC details. As it's a test wallet
 
 Use whatever IDE/code editor you're comfortable with.
 
-We suggest your IDE supports syntax highlighting for TypeScript and React at least (unless you're ok working without syntax highlighting). Intellisense support for TS would be most helpful - to let you jump around functions and files. Additional plugins to support code formatting with prettier and eslint integration would be helpful. For the frontend, having easy access to TailwindCSS class names is also good to have.
+We suggest your IDE supports syntax highlighting for TypeScript and React at least (unless you're ok working without syntax highlighting). Intellisense support for TS would be most helpful - to let you jump around functions and files. Additional plugins to support code formatting with [Biome](https://biomejs.dev/) and prettier integration would be helpful. For the frontend, having easy access to TailwindCSS class names is also good to have.
 
 With VSCode, we include some plugin recommendations in the repo.
 

esbuild/dev.ts

@@ -98,7 +98,7 @@ function liveReloadPlugin({ target }: { target: Target }): ESBuildPlugin {
       build.onLoad({ filter: /src\/background\/index\.ts$/ }, async (args) => {
         const contents = await readFile(args.path, 'utf8');
         return {
-          contents: reloadScriptBackground + '\n' + contents,
+          contents: `${reloadScriptBackground}\n${contents}`,
           loader: 'ts' as const,
         };
       });
@@ -108,22 +108,22 @@ function liveReloadPlugin({ target }: { target: Target }): ESBuildPlugin {
         async (args) => {
           const contents = await readFile(args.path, 'utf8');
           return {
-            contents: contents + '\n\n\n' + reloadScriptPopup,
+            contents: `${contents}\n\n\n${reloadScriptPopup}`,
             loader: 'tsx' as const,
           };
         },
       );
       build.onLoad({ filter: /src\/pages\/.+\/index.tsx$/ }, async (args) => {
         const contents = await readFile(args.path, 'utf8');
         return {
-          contents: contents + '\n\n\n' + reloadScriptPages,
+          contents: `${contents}\n\n\n${reloadScriptPages}`,
           loader: 'tsx' as const,
         };
       });
       build.onLoad({ filter: /src\/content\// }, async (args) => {
         const contents = await readFile(args.path, 'utf8');
         return {
-          contents: contents + '\n\n\n' + reloadScriptContent,
+          contents: `${contents}\n\n\n${reloadScriptContent}`,
           loader: 'ts' as const,
         };
       });