Support diagnostic with ESlint

editor/index.js

@@ -1,10 +1,13 @@
 import {EditorView, basicSetup} from "codemirror";
 import {EditorState, Transaction} from "@codemirror/state";
 import {keymap} from "@codemirror/view";
-import {javascript, javascriptLanguage} from "@codemirror/lang-javascript";
+import {javascript, javascriptLanguage, esLint} from "@codemirror/lang-javascript";
+import {linter} from "@codemirror/lint";
 import {githubLightInit} from "@uiw/codemirror-theme-github";
 import {tags as t} from "@lezer/highlight";
 import {indentWithTab} from "@codemirror/commands";
+import {browser} from "globals";
+import * as eslint from "eslint-linter-browserify";
 import {createRuntime} from "../runtime/index.js";
 import {outputDecoration} from "./decoration.js";
 import {outputLines} from "./outputLines.js";
@@ -15,6 +18,20 @@ import {rechoCompletion} from "./completion.js";
 import {docStringTag} from "./docStringTag.js";
 import {commentLink} from "./commentLink.js";
 
+// @see https://github.com/UziTech/eslint-linter-browserify/blob/master/example/script.js
+// @see https://codemirror.net/examples/lint/
+const eslintConfig = {
+  languageOptions: {
+    globals: {
+      ...browser,
+    },
+    parserOptions: {
+      ecmaVersion: 2022,
+      sourceType: "module",
+    },
+  },
+};
+
 export function createEditor(container, options) {
   const {code} = options;
   const dispatcher = d3Dispatch("userInput");
@@ -57,6 +74,7 @@ export function createEditor(container, options) {
       // outputProtection(),
       docStringTag,
       commentLink,
+      linter(esLint(new eslint.Linter(), eslintConfig)),
     ],
   });
 

package.json

@@ -36,6 +36,7 @@
     "@codemirror/lang-javascript": "^6.2.4",
     "@codemirror/language": "^6.11.3",
     "@codemirror/language-data": "^6.5.1",
+    "@codemirror/lint": "^6.9.0",
     "@codemirror/state": "^6.5.2",
     "@codemirror/view": "^6.38.3",
     "@fontsource-variable/inter": "^5.2.8",
@@ -50,6 +51,7 @@
     "d3-array": "^3.2.4",
     "d3-dispatch": "^3.0.1",
     "d3-require": "^1.3.0",
+    "eslint-linter-browserify": "^9.37.0",
     "friendly-words": "^1.3.1",
     "next": "^15.5.3",
     "nstr": "^0.1.3",

test/main.js

@@ -48,28 +48,6 @@ function createSelect(onchange) {
   select.style.height = "20px";
   select.style.marginBottom = "10px";
   select.onchange = onchange;
-  document.onkeydown = (event) => {
-    if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) {
-      return;
-    }
-    switch (event.key) {
-      case "ArrowLeft": {
-        if (select.selectedIndex > 0) {
-          select.selectedIndex--;
-          select.onchange();
-        } else alert("This is the first test case.");
-        break;
-      }
-      case "ArrowRight": {
-        if (select.selectedIndex < select.options.length - 1) {
-          select.selectedIndex++;
-          select.onchange();
-        } else alert("This is the last test case.");
-        break;
-      }
-    }
-  };
-
   return select;
 }