CodeMirror - 从编辑器外部获取 linting 结果

Question

我正在使用很棒的 CodeMirror 库。我正在实例化的代码编辑器是表单的一部分，因此我想对 linting 进行基本检查，以查看用户的输入是否有效。除非代码没问题，否则我不想处理表单。

所以问题是：CodeMirror 编辑器实例上是否有一个方法可以让我检索 linting 的结果？我正在浏览文档和谷歌，但没有找到任何有用的东西。这个performLint 方法被添加到编辑器中，但是它不返回linting 的结果。

Answer 1

没有获取 lint 结果的特定方法，但是当您在 lint 选项对象中定义 getAnnotations 属性时提供了一个挂钩。

这是一个触发 linting 的基本选项对象：

var codeMirrorOptions = {
    "lineNumbers": true,
    "indentWithTabs": true,
    "mode": "css",
    "gutters": ['CodeMirror-lint-markers'],
    "lint": true
}

您可以将对象（而不是布尔值）指定为 lint 属性：

"lint": {
    "getAnnotations": css_validator,
    "async": true 
}

然后，定义您自己的验证器函数。这个函数可以调用 CodeMirror 的捆绑验证器：

     function css_validator(cm, updateLinting, options) {
            // call the built in css linter from addon/lint/css-lint.js
            var errors = CodeMirror.lint.css(cm);

            updateLinting(errors);

        }

此时您已经复制了 lint:true 的行为——但现在 errors 变量包含一个 lint 错误数组。如果errors.length == 0，则没有发现错误。

注意：此示例假定您正在 linting CSS，但同样适用于其他类型。

Answer 2

lint.js 中的 updateLinting 函数将其注解（和编辑器）传递给 onUpdateLinting 选项：

if (options.onUpdateLinting) options.onUpdateLinting(annotationsNotSorted, annotations, cm);

所以您所要做的就是将您的处理程序作为 lint 选项属性：

lint: { onUpdateLinting: handleErrors }

Answer 3

这是给 Dezzas 答案的提示：

写，

var errors = CodeMirror.lint.css(cm, options);

否则会失败。

Answer 4

@Clem 的回答使我朝着正确的方向前进，尽管我确实遇到了一些问题。第一个是在控制台中反复看到Bad option: onUpdateLinting（参见报告的Codemirror issue）。第二个是有时会看到包含空条目的注释数组。这是我传递给 Codemirror 的 linting 配置，它解决了这些问题。请注意，我使用的是react-codemirror2，但选项以相同的格式传递到 Codemirror。我的组件有一个可选的 onLintingComplete 回调，可以由消费组件提供，你会看到下面引用的回调，它传递了 lint 注释数组：

  lint: onLintingComplete
    ? {
        onUpdateLinting: (_annotationsNotSorted, annotations) =>
          onLintingComplete(
            // sometimes codemirror includes null annotations in the array, so we want to filter these out
            annotations.filter(annotation => annotation != null)
          ),
        // This empty lint options object is needed here, see: https://github.com/codemirror/CodeMirror/issues/4198
        options: {}, 
      }
    : true,