Biome as linter

Author: NellowTCS

Build/eslint.config.mts

@@ -9,7 +9,6 @@ import { defineConfig } from "eslint/config";
 export default defineConfig([
   { files: ["**/*.{js,mjs,cjs,ts,mts,cts}"], plugins: { js }, extends: ["js/recommended"], languageOptions: { globals: globals.browser } },
   tseslint.configs.recommended,
-  { files: ["**/*.json"], plugins: { json }, language: "json/json", extends: ["json/recommended"] },
   { files: ["**/*.md"], plugins: { markdown }, language: "markdown/gfm", extends: ["markdown/recommended"] },
   { files: ["**/*.css"], plugins: { css }, language: "css/css", extends: ["css/recommended"] },
 ]);

Build/package-lock.json

@@ -24,6 +24,8 @@
     "@babel/core": "^7.29.0",
     "@babel/parser": "^7.29.3",
     "@babel/runtime": "^7.29.2",
+    "@biomejs/js-api": "^4.0.0",
+    "@biomejs/wasm-web": "^2.4.15",
     "@codemirror/autocomplete": "^6.20.2",
     "@codemirror/commands": "^6.10.3",
     "@codemirror/lang-css": "^6.3.1",

Build/package.json

@@ -0,0 +1,105 @@
+import { Biome, Distribution } from "@biomejs/js-api";
+import type { Configuration } from "@biomejs/js-api";
+import initBiomeWasm from "@biomejs/wasm-web";
+
+let biomeWorkspace: Biome | null = null;
+let biomeProjectKey: number | null = null;
+let initialized = false;
+
+export type BiomeDiag = {
+  from: number;
+  to: number;
+  severity: "error" | "warning" | "info";
+  message: string;
+};
+
+function byteToCharOffset(text: string, byteOffset: number): number {
+  let charIdx = 0;
+  for (let i = 0; i < byteOffset; charIdx++) {
+    const code = text.charCodeAt(charIdx);
+    if (code < 0x80) {
+      i += 1;
+    } else if (code < 0x800) {
+      i += 2;
+    } else if (code >= 0xd800 && code <= 0xdfff) {
+      i += 4;
+      charIdx++;
+    } else {
+      i += 3;
+    }
+  }
+  return charIdx;
+}
+
+export async function initBiome(): Promise<void> {
+  if (initialized) return;
+
+  await initBiomeWasm();
+
+  biomeWorkspace = await Biome.create({ distribution: Distribution.WEB });
+
+  const openRes = biomeWorkspace.openProject();
+  biomeProjectKey = openRes.projectKey;
+
+  biomeWorkspace.applyConfiguration(biomeProjectKey, {
+    linter: {
+      enabled: true,
+      rules: {
+        recommended: true,
+      },
+    },
+  } as unknown as Configuration);
+
+  initialized = true;
+}
+
+export async function lintWithBiome(text: string, filepath = "file.ts"): Promise<BiomeDiag[]> {
+  if (!initialized) {
+    await initBiome();
+  }
+
+  if (!biomeWorkspace) {
+    throw new Error("Biome workspace not active after runtime initialization");
+  }
+
+  if (biomeProjectKey == null) {
+    throw new Error("Biome project key not initialized");
+  }
+
+  const result = biomeWorkspace.lintContent(biomeProjectKey, text, {
+    filePath: filepath,
+  });
+
+  const diags = result?.diagnostics;
+  if (!Array.isArray(diags)) {
+    throw new Error("Unexpected Biome lint response shape: missing diagnostics block");
+  }
+
+  return diags.map((d) => {
+    const diag = d as unknown as {
+      location?: { span?: [number, number] } | null;
+      severity?: string | null;
+      description?: string | null;
+      category?: string | null;
+    };
+
+    const span = diag.location?.span;
+    const byteFrom = typeof span?.[0] === "number" ? span[0] : 0;
+    const byteTo = typeof span?.[1] === "number" ? span[1] : byteFrom;
+
+    const from = byteToCharOffset(text, byteFrom);
+    const to = byteToCharOffset(text, byteTo);
+
+    let severity: "error" | "warning" | "info" = "info";
+    if (diag.severity === "error" || diag.severity === "fatal") severity = "error";
+    if (diag.severity === "warning" || diag.severity === "warn") severity = "warning";
+
+    const rawMsg = diag.description ?? "";
+    const category = diag.category
+      ? diag.category.replace(/^lint\//, "")
+      : "";
+    const message = category ? `${rawMsg} [${category}]` : rawMsg;
+
+    return { from, to, severity, message };
+  });
+}

Build/src/biome.ts

@@ -1,12 +1,13 @@
 import { Compartment, EditorState, Extension } from "@codemirror/state";
 import { EditorView, keymap, lineNumbers } from "@codemirror/view";
-import { defaultKeymap, toggleComment } from "@codemirror/commands";
+import { defaultKeymap, toggleComment, history, undo, redo } from "@codemirror/commands";
 import { html } from "@codemirror/lang-html";
 import { css } from "@codemirror/lang-css";
 import { javascript } from "@codemirror/lang-javascript";
 import { autocompletion } from "@codemirror/autocomplete";
-import { foldGutter, foldKeymap, syntaxTree } from "@codemirror/language";
+import { foldGutter, foldKeymap } from "@codemirror/language";
 import { linter, lintGutter } from "@codemirror/lint";
+import { lintWithBiome } from "./biome";
 import { monokai } from "@uiw/codemirror-theme-monokai";
 import { bbedit } from "@uiw/codemirror-theme-bbedit";
 import { CodeMirrorEditor, Editors } from "./types";
@@ -60,6 +61,7 @@ function createEditorConfig(
   container: HTMLElement,
   content: string,
   contentState: typeof htmlState | typeof cssState | typeof jsState,
+  fileName = "file.txt",
 ): CodeMirrorEditor {
   const themeCompartment = new Compartment();
   const autoRunCompartment = new Compartment();
@@ -69,32 +71,17 @@ function createEditorConfig(
       doc: content,
       extensions: [
         lineNumbers(),
+        history(),
         foldGutter(),
-        // Linting: use syntax tree to surface parse errors from the language parser
-        linter((view) => {
-          const diags: Array<{
-            from: number;
-            to: number;
-            severity: "error" | "warning" | "info";
-            message: string;
-          }> = [];
+        linter(async (view) => {
+          const text = view.state.doc.toString();
           try {
-            syntaxTree(view.state).iterate({
-              enter: (node) => {
-                if (node.type.isError) {
-                  diags.push({
-                    from: node.from,
-                    to: node.to,
-                    severity: "error",
-                    message: "Syntax error",
-                  });
-                }
-              },
-            });
-          } catch (e: unknown) {
-            console.error("Error occurred while iterating syntax tree:", e);
+            const biomeDiags = await lintWithBiome(text, fileName);
+            return biomeDiags || [];
+          } catch (err) {
+            console.error("Biome linting failed:", err);
+            return [];
           }
-          return diags;
         }),
         lintGutter(),
         language,
@@ -112,6 +99,9 @@ function createEditorConfig(
           ...defaultKeymap,
           ...foldKeymap,
           { key: "Mod-/", run: toggleComment },
+          { key: "Mod-z", run: undo },
+          { key: "Mod-y", run: redo },
+          { key: "Mod-Shift-z", run: redo },
         ]),
         autoRunCompartment.of(autoRunState.get() ? autoRunListener : []),
         EditorView.updateListener.of((update) => {
@@ -161,17 +151,20 @@ export function initializeEditors(containers: EditorContainers): void {
     htmlContainer,
     htmlState.get(),
     htmlState,
+    "index.html",
   );
   editors.css = createEditorConfig(
     css(),
     cssContainer,
     cssState.get(),
     cssState,
+    "styles.css",
   );
   editors.js = createEditorConfig(
     javascript(),
     jsContainer,
     jsState.get(),
     jsState,
+    "script.js",
   );
 }

Build/src/editor.ts

@@ -10,6 +10,7 @@ import { copyToClipboard } from "./utils";
 import { editors } from "./editor";
 import { clearConsole, initializeConsole, consoleEntries } from "./console";
 import { runCode, formatCode } from "./runner";
+import { undo as cmUndo, redo as cmRedo } from "@codemirror/commands";
 import {
   resetCode,
   loadState,
@@ -369,7 +370,9 @@ export function toggleSearch(mode: "find" | "replace" = "find"): void {
         mode === "replace"
           ? '.cm-search input[name="replace"]'
           : '.cm-search input[name="search"]';
-      const field = document.querySelector(selector) as HTMLInputElement | null;
+      // Scope lookup to the visible editor's DOM to avoid matching hidden panels
+      const root = editor.dom as HTMLElement;
+      const field = root.querySelector(selector) as HTMLInputElement | null;
       field?.focus();
       field?.select();
     });
@@ -392,6 +395,23 @@ globalActions.set({
   toggleSearch,
 });
 
+// Provide undo/redo commands that operate on the active editor (or specific editor name)
+function undoAction(editorName?: string): void {
+  const name = editorName || activeTabState.get();
+  const ed = editors[name];
+  if (ed) cmUndo(ed.view);
+}
+
+function redoAction(editorName?: string): void {
+  const name = editorName || activeTabState.get();
+  const ed = editors[name];
+  if (ed) cmRedo(ed.view);
+}
+
+// Register undo/redo in global actions
+const prevActions = globalActions.get();
+globalActions.set({ ...prevActions, undo: undoAction, redo: redoAction });
+
 // Initialize
 document.addEventListener("DOMContentLoaded", async () => {
   // Cache editor containers before initializing editors
@@ -415,6 +435,11 @@ document.addEventListener("DOMContentLoaded", async () => {
     { html: htmlContainer, css: cssContainer, js: jsContainer },
     outputConsoleTabElEarly,
   );
+
+  // Apply persisted state early so layout (Split) can use saved sizes
+  loadState();
+  updateThemeIcon();
+
   // Cache panel elements for Split.js
   editorPanelEl = document.getElementById("editor-panel");
   outputPanelEl = document.getElementById("output-panel");
@@ -602,9 +627,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   if (themeLabelEl) bindText(themeLabelEl, themeLabel);
   if (themeIcon) bindClass(themeIcon, themeIconClass);
 
-  // Apply persisted state and ensure UI icons match
-  loadState();
-  updateThemeIcon();
   formatCode().catch((error) => {
     showError(`Error formatting code: ${error.message}`);
   });

Build/src/main.ts

@@ -83,4 +83,6 @@ export interface Actions {
   copyAllConsole: () => void;
   copyEditorContent: (editor: string) => void;
   toggleSearch: (mode?: "find" | "replace") => void;
+  undo?: (editor?: string) => void;
+  redo?: (editor?: string) => void;
 }