Search code examples
javascriptcodemirror

Show line errors in codemirror?


I just upgraded CodeMirror to latest and have the following code now breaking:

        // clear previous errors from editor window
        for (var i = 0; i < layoutCodeEditor.lineCount(); i++) {
            layoutCodeEditor.clearMarker(i);
            layoutCodeEditor.setLineClass(i, null, null);
        }

        var valid = JSLINT(code);
        var jsLintError = "";
        if (!valid) {
            jsLintError = JSLINT.error_report(JSLINT.data());
            _.chain(JSLINT.errors).compact().each(function(e){
                // show markers in the code edit window against lines with Jslint errors
                layoutCodeEditor.setMarker((+e.line) - 1, "●", "errors");
                layoutCodeEditor.setLineClass(+(e.line) - 1, null, "errorLine");                    
            })
        }

seems like the setMarker/clearMarker and setLineClass functions have been removed. What's their equivalents now?


Solution

  • These changes, among many others, are covered in the Upgrading to version 3 page on the CodeMirror site.

    The marker functions have changed as a consequence of moving to multiple gutters:

    Gutter model

    In CodeMirror 2.x, there was a single gutter, and line markers created with setMarker would have to somehow coexist with the line numbers (if present). Version 3 allows you to specify an array of gutters, by class name, use setGutterMarker to add or remove markers in individual gutters, and clear whole gutters with clearGutter. Gutter markers are now specified as DOM nodes, rather than HTML snippets.

    The gutters no longer horizontally scrolls along with the content. The fixedGutter option was removed (since it is now the only behavior).

    The line class change is more straightforward:

    Line CSS classes

    The setLineClass method has been replaced by addLineClass and removeLineClass, which allow more modular control over the classes attached to a line.