Question

我一直在使用这些参考文献：

http://codemirror.net/demo/lint.html
http://codemirror.net/demo/widget.html
http://codemirror.net/doc/manual.html#addLineWidget

我一直试图让CSSLint使用.addLineWidget显示内联而不是JSHint。 Codemirror提供了我尝试使用JSHint here做的事情的演示，但是我很难从JSHint过渡到CSSLint。

＆＃13;

var widgets = [];
var waiting;

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);
}

window.onload = function() {
  window.editor = CodeMirror(document.getElementById("code"), {
    lineNumbers: true,
    mode: "css",
    gutters: ["CodeMirror-lint-markers"],
    lint: true,
    value: '@charset "UTF-8";\n\n@import url("booya.css") print, screen;\n@import "whatup.css" screen;\n@import "wicked.css";\n\n/*Error*/\n@charset "UTF-8";\n\n\n@namespace "http://www.w3.org/1999/xhtml";\n@namespace svg "http://www.w3.org/2000/svg";\n\n/*Warning: empty ruleset */\n.foo {\n}\n\nh1 {\n  font-weight: bold;\n}\n\n/*Warning: qualified heading */\n.foo h1 {\n  font-weight: bold;\n}\n\n/*Warning: adjoining classes */\n.foo.bar {\n  zoom: 1;\n}\n\nli.inline {\n  width: 100%;  /*Warning: 100% can be problematic*/\n}\n\nli.last {\n  display: inline;\n  padding-left: 3px !important;\n  padding-right: 3px;\n  border-right: 0px;\n}\n\n@media print {\n  li.inline {\n    color: black;\n  }\n}\n\n@page {\n  margin: 10%;\n  counter-increment: page;\n\n  @top-center {\n    font-family: sans-serif;\n    font-weight: bold;\n    font-size: 2em;\n    content: counter(page);\n  }\n}'
  });

  editor.on("change", function() {
    clearTimeout(waiting);
    waiting = setTimeout(updateHints, 500);
  });

  setTimeout(updateHints, 100);
};

"long line to create a horizontal scrollbar, in order to test whether the (non-inline) widgets stay in place when scrolling to the right";

＆＃13;

.CodeMirror {
  float: left;
  width: 50%;
  border: 1px solid black;
}
.lint-error {
  font-family: arial; 
  font-size: 70%; 
  background: #ffa; 
  color: #a00; 
  padding: 2px 5px 3px; 
}
.lint-error-icon {
  color: white; 
  background-color: red; 
  font-weight: bold; 
  border-radius: 50%; 
  padding: 0 3px; 
  margin-right: 7px;
}

＆＃13;

<!DOCTYPE html>
<html>
  <head>
    <title>Codemirror: Inline CSS Errors</title>
    <meta charset='utf-8'>
    <meta name='viewport' content='initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='IE=9' />
    <link type='text/css' rel='stylesheet' href='http://necolas.github.io/normalize.css/3.0.1/normalize.css'/>
    <script type='text/javascript' src='http://code.jquery.com/jquery-latest.min.js'></script>
    <script src='http://codemirror.net/lib/codemirror.js'></script>
    <link rel='stylesheet'  href='http://codemirror.net/lib/codemirror.css'>
    <link rel='stylesheet'  href='http://codemirror.net/addon/fold/foldgutter.css' />
    <script src='http://codemirror.net/javascripts/code-completion.js'></script>
    <script src='http://codemirror.net/javascripts/css-completion.js'></script>
    <script src='http://codemirror.net/mode/javascript/javascript.js'></script>
    <script src='http://codemirror.net/mode/xml/xml.js'></script>
    <script src='http://codemirror.net/mode/css/css.js'></script>
    <script src='http://codemirror.net/mode/htmlmixed/htmlmixed.js'></script>
    <script src='http://codemirror.net/addon/edit/closetag.js'></script>
    <script src='http://codemirror.net/addon/edit/matchbrackets.js'></script>
    <script src='http://codemirror.net/addon/selection/active-line.js'></script>
    <script src='http://codemirror.net/keymap/extra.js'></script>
    <script src='http://codemirror.net/addon/fold/foldcode.js'></script>
    <script src='http://codemirror.net/addon/fold/foldgutter.js'></script>
    <script src='http://codemirror.net/addon/fold/brace-fold.js'></script>
    <script src='http://codemirror.net/addon/fold/xml-fold.js'></script>
    <script src='http://codemirror.net/addon/fold/comment-fold.js'></script>

    <link rel="stylesheet" href="http://codemirror.net/addon/lint/lint.css">
    <script src="http://codemirror.net/mode/javascript/javascript.js"></script>
    <script src="http://codemirror.net/mode/css/css.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
    <script src="https://rawgithub.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
    <script src="https://rawgithub.com/stubbornella/csslint/master/release/csslint.js"></script>
    <script src="http://codemirror.net/addon/lint/lint.js"></script>
    <script src="http://codemirror.net/addon/lint/javascript-lint.js"></script>
    <script src="http://codemirror.net/addon/lint/css-lint.js"></script>
  </head>
  <body>
    <div id="code"></div>
  </body>
</html>

＆＃13;

这是一个相同的小提琴：http://jsbin.com/miwatidica/1/edit?js,output

Answer 1

测试下面的代码。

关键字是 JSHINT - ＆gt;的 CSSLint.verify

Codemirror以内联方式显示CSSLint错误（.addLineWidget）

1 个答案: