Showing syntax errors

I wrote I quick demo on how you can display errors in the editor, however to get useful error messages you’d want to use an external linter as noted in this thread.

import { linter, Diagnostic } from "@codemirror/lint";


function lintExample(view: EditorView): readonly Diagnostic[] {
  const diagnostics: Diagnostic[] = [];

  syntaxTree(view.state).iterate({
    enter: (type, from, to) => {
      if (type.isError) {
        diagnostics.push({
          from,
          to,
          severity: "error",
          message: "Yep. That's a syntax error.",
        });
      }
    },
  });

  return diagnostics;
}
// Run the example as an extension like this.
linter(lintExample)
2 Likes