I am designing an application using CodeMirror that comes with toolbar. Because of performance reason, I am not executing the lint to either through async or asynch mode.

I have provided an icon in the toolbar, on clicking this I am doing the parsing and constructing the errors. But I am stuck with how I can update lint error in editor?

Any pointer would be really helpful.

I am designing an application using CodeMirror that comes with toolbar. Because of performance reason, I am not executing the lint to either through async or asynch mode.

I have provided an icon in the toolbar, on clicking this I am doing the parsing and constructing the errors. But I am stuck with how I can update lint error in editor?

Any pointer would be really helpful.

• javascript
• codemirror

• "I am not executing the lint to either through async or asynch mode" I'm afraid I didn't understand that, can you clarify? (And surely there aren't two different modes called "async" and "asynch"?) – T.J. Crowder Commented Jul 4, 2014 at 6:42
• there are two ways you can register the lint CodeMirror.registerHelper("lint", "custom", function(text) {}) and set the codemirror option lint=true. And other one is using lintWith option. lintWith: { "getAnnotations": myvalidator, "async": true, } – Chetan Commented Jul 4, 2014 at 6:57

4 Answers 4

The lint addon adds an "extension" method to all Editor instances called performLint, combine with editor options of lint: { lintOnChange: false }, and then you can invoke the linter by calling mirror.performLint().

If you define your own lint methods ala

CodeMirror.registerHelper('lint', 'mode', (text) => { /* your cool stuff here */ })

that'll get invoked on performLint().

Have you tried setting the lint value dynamically using the below code?

//enable
editor.setOption("lint",true);

//disable
editor.setOption("lint",false);

You can see a demo here JSFiddle link

To trigger lint in one line:

// trigger registered lint handler
editor.setOption("lint", {});

// trigger custom lint handler defined on the fly
editor.setOption("lint", { 
  getAnnotations: function() { /* some smart code */ return found; }
});

If you wonder why it should ever work, have look into addon/lint/lint.js, specially the following lines:

  CodeMirror.defineOption("lint", false, function(cm, val, old) {
  ...
    if (val) {
      ...
      startLinting(cm);
    }
  });

It sounds like a good feature that doesn't appear to exist.

It is straighforward to create a button to launch a validation from an external button.

For example [no credit] https://jsfiddle.net/q43drhyk/

function checkFormat(editor) {
    var success = JSHINT(editor.getValue());
    var output = '';
    if (!success) {
        output = "Check format error:\n\n";
        for (var i in JSHINT.errors) {
            var err = JSHINT.errors[i];
            if (null != err) {
                output += err.line + '[' + err.character + ']: ' + err.reason + '\n';
            } else {
                output += "Check format unknown error:\n";
            }
        }
        alert(output);
    }
    return success;
}

However this does not render the validation messages in the CodeMirror editor to display in the linenumber gutter, which is what the OP was looking for.

To do that, you could customise the lint add-on code. For example from the json-lint provided in the standard addons [https://github.com/codemirror/CodeMirror/blob/master/addon/lint/json-lint.js]

1.Extract the body of registerHelper() into a new function that reproduces the existing function:

CodeMirror.registerHelper("lint", "json", function(text) {
   return mylinthandler(text)
}

mylinthandler(text) {
 var found = [];
  jsonlint.parseError = function(str, hash) {
    var loc = hash.loc;
    found.push({from: CodeMirror.Pos(loc.first_line - 1, loc.first_column),
                to: CodeMirror.Pos(loc.last_line - 1, loc.last_column),
                message: str});
  };
  try { jsonlint.parse(text); }
  catch(e) {}
  return found;
}

2. Turn off the auto-lint CodeMirror options with.

   lintOnChange: false

3. Then when you wish to lint, call mylinthandler(editor.getValue())