为 codemirror 添加自定义 lint 错误标记

Question

我的代码中的错误来自外部 API。它给了我

1)行号 2) 错误描述

我可以实现突出显示过程，但我需要在文本区域的左侧添加一个 lint 错误标记。

下面的代码使我能够通过定义名为 'lintWith' 的选项在加载页面时添加 lint 标记，但是，我需要在单击按钮时添加这些 lint 标记。

这是我正在使用的代码：


<html>
    <head>
        <link rel="stylesheet" href="codemirror/lib/codemirror.css">
        <script src="codemirror/lib/codemirror.js"></script>
        <script src="codemirror/addon/edit/matchbrackets.js"></script>
        <script src="codemirror/mode/python/python.js"></script>
        <!-- <script src="codemirror/addon/selection/active-line.js"></script> -->
        <link rel="stylesheet" href="codemirror/addon/lint/lint.css">
        <script src="codemirror/addon/lint/lint.js"></script>
        <script src="codemirror/addon/lint/javascript-lint.js"></script>
        <script src="cm-validator-remote.js"></script>
        <style type="text/css">
          .CodeMirror {border-top: 1px solid black; border-bottom: 1px solid black;}
          .CodeMirror-empty { outline: 1px solid #c22; }
        </style>
    </head>
    <body>
    <div><textarea id="code" name="code" placeholder="Code goes here...">
mycode
    pass

a__ = 5
Check 
Hello World
123456
    </textarea></div>
    </body>
    <script type="text/javascript">
function check_syntax(code, result_cb)
{
    var error_list = [{
            line_no: 2,
            column_no_start: 14,
            column_no_stop: 17,
            fragment: "def doesNothing:\n",
            message: "invalid syntax.......",
            severity: "error"
        }, {
            line_no: 4,
            column_no_start: 1,
            column_no_stop: 3,
            fragment: "a__ = 5\n",
            message: "convention violation",
            severity: "error"
        }]

    result_cb(error_list);
}




var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    mode: { name: "python",
            version: 2,
            singleLineStringErrors: false },
    lineNumbers: true,
    indentUnit: 4,
    tabMode: "shift",
    gutters: ["CodeMirror-lint-markers"],
    lintWith: {
        "getAnnotations": CodeMirror.remoteValidator,
        "async": true,
        "check_cb": check_syntax
    }
});


function AddLintMarker(){

// I want to add the lintWith markers when click on this button
// i've tried like this  editor.setOption("lintWith.getAnnotations",CodeMirror.remoteValidator ) but it doesn't work
}
    </script>

<input type="button" value="add boxes" onclick="AddLintMarker()">
</html>

此处代码 lint 标记是在页面加载时添加的，因为它已分配给编辑器，但我希望 lint 标记仅在我单击按钮并为 check_syntx 函数提供值时显示,

对于 lintWith，它在 lint.js 中定义如下：

     CodeMirror.defineOption("lintWith", false, function(cm, val, old) {
    if (old && old != CodeMirror.Init) {
      clearMarks(cm);
      cm.off("change", onChange);
      CodeMirror.off(cm.getWrapperElement(), "mouseover", cm._lintState.onMouseOver);
      delete cm._lintState;
    }
    
    if (val) {
      var gutters = cm.getOption("gutters"), hasLintGutter = false;
      for (var i = 0; i < gutters.length; ++i) if (gutters[i] == GUTTER_ID) hasLintGutter = true;
      var state = cm._lintState = new LintState(cm, parseOptions(val), hasLintGutter);
      cm.on("change", onChange);
      CodeMirror.on(cm.getWrapperElement(), "mouseover", state.onMouseOver);
      startLinting(cm);
    }
  });

Answer 1

您需要使用 CodeMirror 中的 setGutterMarker 方法。它采用 line、markerId 和 markerElement 并将其放在装订线区域所需的行上。

var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
  lineNumbers: true,
  indentUnit: 4,
  gutters: ["CodeMirror-lint-markers"],
});

function makeMarker() {
  var marker = document.createElement("div");
  marker.innerHTML = `<div>⚠️</div>`;
  marker.setAttribute("title", "Some text");
  return marker;
}

editor.doc.setGutterMarker(1, "CodeMirror-lint-markers", makeMarker());

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.js"
        integrity="sha512-/8pAp30QGvOa8tNBv7WmWiPFgYGOg2JdVtqI8vK+xZsqWHnNd939v9s+zJHXZcJe5wPD44D66zz+CLTD3KacYA=="
        crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.3/codemirror.min.css"
        integrity="sha512-uf06llspW44/LZpHzHT6qBOIVODjWtv4MxCricRxkzvopAlSWnTf6hpZTFxuuZcuNE9CBQhqE0Seu1CoRk84nQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>

<body>
    <textarea id="code" name="code" placeholder="Code goes here...">
        mycode
            pass
        
        a__ = 5
        Check 
        Hello World
        123456
    </textarea>  
</body>

</html>

为 codemirror 添加自定义 lint 错误标记

add custom lint error marker for codemirror

javascript

lint

codemirror