Dynamically switching the linter [SOLVED]

1

I am adding an option that allows a user to switch between CSSLint (included linter) and Stylelint. I’ve modified the css-lint.js file to use the selected linter:

CodeMirror.registerHelper("lint", "css", function(text) {
  const selectedLinter = getPref('linter'); // 'csslint' or 'stylelint'
  let found= [];
  if (selectedLinter === 'csslint') {
    // update found array
  } else if (selectedLinter === 'stylelint') {
    // update found array
  }
  return found;
});

But I am unable to update the editor immediately after the user switches the linter. I have tried the following without success.

  • cm_instance.refresh();
  • cm_instance.save();
  • CodeMirror.signal(cm_instance, "change");

The good news is that the linter does switch if the editor content is modified.

2

You probably want to do cm_instance.setOption("lint", ...) to reset the addon.

3

Thanks for the quick response, but I still can’t get it to dynamically update.

I split the code into two helpers

CodeMirror.registerHelper("lint", "csslint", function(text) {
  let found= [];
  if (window.CSSLint) {
    // update found array
  }
  return found;
});

CodeMirror.registerHelper("lint", "stylelint", function(text) {
  let found= [];
  if (stylelint) {
    // update found array
  }
  return found;
});

Then on update I set the linter:

const linter = getPref('linter'); // 'csslint' or 'stylelint'
cm_instance.setOption("lint", CodeMirror.lint[linter]);

The linter doesn’t process the css until I modify it in the editor.

4

If I go to http://codemirror.net/demo/lint.html , open the devtools, and run editor.setOption("lint", CodeMirror.lint.css), I see the linting information immediately update in the first editor, so I suspect the problem is somewhere in your code.

5

Sorry, you are correct! Thanks so much!