Codemirror event to trigger linting - Javascript CodeMirror

Javascript examples for CodeMirror:Configuration

  1. HOME
  2. Javascript
  3. CodeMirror
  4. Configuration

Description

Codemirror event to trigger linting

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <link rel="stylesheet" type="text/css" href="https://codemirror.net/doc/docs.css"> 
      <link rel="stylesheet" type="text/css" href="https://codemirror.net/lib/codemirror.css"> 
      <link rel="stylesheet" type="text/css" href="https://codemirror.net/addon/lint/lint.css"> 
      <script type="text/javascript" src="https://codemirror.net/lib/codemirror.js"></script> 
      <script type="text/javascript" src="https://codemirror.net/mode/javascript/javascript.js"></script> 
      <script type="text/javascript" src="https://codemirror.net/addon/lint/lint.js"></script> 
      <script type="text/javascript" src="https://codemirror.net/addon/lint/javascript-lint.js"></script> 
      <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script> 
   </head> 
   <body> 
      <input type="button" value="Enable Lint" onclick="enableLint()"> 
      <input type="button" value="Disable Lint" onclick="disableLint()"> 
      <h2>Linter Demo</h2> 
      <p>
         <textarea id="code-js">var widgets = []
function updateHints() {/*from w  w w.  ja va  2 s.c o  m*/
  editor.operation(function(){
    for (var i = 0; i &lt; widgets.length; ++i)
      editor.removeLineWidget(widgets[i]);
    widgets.length = 0;
    JSHINT(editor.getValue());
    for (var i = 0; i &lt; JSHINT.errors.length; ++i) {
...
...
...
    }
  });
  var info = editor.getScrollInfo();
  var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
  if (info.top + info.clientHeight &lt; after)
    editor.scrollTo(null, after - info.clientHeight + 3);
}
</textarea>
      </p> 
      <script type="text/javascript">
var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
    lineNumbers: true,
    mode: "javascript",
    gutters: ["CodeMirror-lint-markers"],
    lint: true
  });
function enableLint(){
    editor.setOption("lint",true);
}
function disableLint(){
    editor.setOption("lint",false);
}

      </script>  
   </body>
</html>

Related Tutorials