YAML Linter for @uiw/react-codemirror or codemirror v6

I am trying to build a YAML code editor. I have all my features required but one, which is linting. I have looked at several examples, but YAML linting support for v6 has really been scarce. I have followed docs and looked out for some third-party linters but with no success, I have either found examples for codemirror v5 which I was not able to reproduce in v6. Can someone please guide me with a blog post or some reference docs.

The CodeMirror 5 YAML linter seems to use nodeca/js-yaml as its underlying lint implementation. It is probably possible to wire that up as a CodeMirror 6 lint source.

How do I set up a lint source. Becuase the CodeMirror Lint Example doesn’t have anyway to setup a lint source

According to the docs - “Find a linter that you can run in the browser, run it on the content, and translate its output into the expected format

I have written my code like this

const extensionList = [
    // ...basicSetup(), //including all the basic setup plus the extra setup below
    keymap.of([indentWithTab]),
    StreamLanguage.define(yaml),
    linter(lintErrors), //acc. to [docs](https://codemirror.net/docs/ref/#lint.linter)
    // yamlTest(),
  ];

  const onChange = (e) => {
    setCode(e);
  };

  const lintErrors = () => {
    // find lint errors and construct a array of Diagnostics from the errors of the 'js-yaml'
    const errors = parseYAML(code);
    const diagnostics =
      errors?.length > 0
        ? errors?.map((errorItem) => {
            return {
              from: errorItem?.mark?.line,
              to: errorItem?.mark?.column,
              severity: 'error',
              message: errorItem?.reason || errorItem?.message,
              // renderMessage? optional,
              // actions?:
            };
          })
        : [];
    return diagnostics;
  };
...
...
return (
...
<ReactCodeMirror
        basicSetup={{ lineNumbers: true }}
        value={code}
        readOnly={readOnly}
        // theme={editorTheme}//TODO: change when extra customization is needed
        extensions={extensionList}
        onChange={readOnly ? () => {} : onChange}
        autoFocus
        placeholder={'Enter a new yaml here'}
      />
...
)

This code at linter(lintErrors) throws an error - “source is not a function”

I’m not sure if this is the reason for the error but you have to convert line/column to a character position for your “from:” and “to:”

It looks like you’re currently using the mark.line for “from:” and mark.column for “to:”. You’re going to want to convert your start and end lines/columns to character offsets for both your start mark and end mark (if those are provided by the parser) and use those character offsets instead. If not, convert your mark.line and mark.column to a character offset and use that for your “to:” and set the “from:” to that - 1 with a minimum value of 0.

Check out the functions in the documentation under “Positions” to convert:
https://codemirror.net/docs/migration/