CodeMirror: Linter Demo

Linter Demo

xxxxxxxxxx
 
var widgets = []
function updateHints() {
  editor.operation(function(){
    for (var i = 0; i < widgets.length.; ++i)
      editor.removeLineWidget(widgets[i]);
    widgets.length = 0;
​
    JSHINT(editor.getValue());
    for (var i = 0; i < JSHINT.errors.length; ++i) {
      var err = JSHINT.errors[i];
      if (!err) continue;
      var msg = document.createElement("div");
      var icon = msg.appendChild(document.createElement("span"));
      icon.innerHTML = "!!";
      icon.className = "lint-error-icon";
      msg.appendChild(document.createTextNode(err.reason));
      msg.className = "lint-error";
      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
    }
  });
  var info = editor.getScrollInfo();
  var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
  if (info.top + info.clientHeight < after)
    editor.scrollTo(null, after - info.clientHeight + 3);
}
​

[ { _id: "post 1", "author": "Bob", "content": "...", "page_views": 5 }, { "_id": "post 2", "author": "Bob", "content": "...", "page_views": 9 }, { "_id": "post 3", "author": "Bob", "content": "...", "page_views": 8 } ]

xxxxxxxxxx
 
[
 {
  _id: "post 1",
  "author": "Bob",
  "content": "...",
  "page_views": 5
 },
 {
  "_id": "post 2",
  "author": "Bob",
  "content": "...",
  "page_views": 9
 },
 {
  "_id": "post 3",
  "author": "Bob",
  "content": "...",
  "page_views": 8
 }
]
​

@charset "UTF-8"; @import url("booya.css") print, screen; @import "whatup.css" screen; @import "wicked.css"; /*Error*/ @charset "UTF-8"; @namespace "http://www.w3.org/1999/xhtml"; @namespace svg "http://www.w3.org/2000/svg"; /*Warning: empty ruleset */ .foo { } h1 { font-weight: bold; } /*Warning: qualified heading */ .foo h1 { font-weight: bold; } /*Warning: adjoining classes */ .foo.bar { zoom: 1; } li.inline { width: 100%; /*Warning: 100% can be problematic*/ } li.last { display: inline; padding-left: 3px !important; padding-right: 3px; border-right: 0px; } @media print { li.inline { color: black; } } @page { margin: 10%; counter-increment: page; @top-center { font-family: sans-serif; font-weight: bold; font-size: 2em; content: counter(page); } }

xxxxxxxxxx
 
@charset "UTF-8";
​
@import url("booya.css") print, screen;
@import "whatup.css" screen;
@import "wicked.css";
​
/*Error*/
@charset "UTF-8";
​
​
@namespace "http://www.w3.org/1999/xhtml";
@namespace svg "http://www.w3.org/2000/svg";
​
/*Warning: empty ruleset */
.foo {
}
​
h1 {
    font-weight: bold;
}
​
/*Warning: qualified heading */
.foo h1 {
    font-weight: bold;
}
​
/*Warning: adjoining classes */
.foo.bar {
    zoom: 1;
}
​
li.inline {
    width: 100%;  /*Warning: 100% can be problematic*/
}
​
li.last {
  display: inline;
  padding-left: 3px !important;
  padding-right: 3px;
  border-right: 0px;
}
​
@media print {
    li.inline {
      color: black;
    }
}
​
@page {
  margin: 10%;
  counter-increment: page;
​
  @top-center {
    font-family: sans-serif;
    font-weight: bold;
    font-size: 2em;
    content: counter(page);
  }
}
​