代码镜像显示HTMLLint错误内联(. addlinewidget)

Codemirror Show HTMLLint Errors Inline (.addLineWidget)

本文关键字：addlinewidget 错误 镜像 显示 HTMLLint 代码      更新时间：2023-09-26

我一直试图让HTMLHint显示内联而不是使用. addlinewidget的JSHint。Codemirror提供了一个我在这里尝试使用JSHint的演示，但是我很难像官方演示那样将HTMLHint的错误警报集成为内联警报。

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

var widgets = [];
var waiting;
function updateHints() {
  editor.operation(function(){
    var defaultRules = {
      "tagname-lowercase": true,
      "attr-lowercase": true,
      "attr-value-double-quotes": true,
      "doctype-first": false,
      "tag-pair": true,
      "spec-char-escape": true,
      "id-unique": true,
      "src-not-empty": true,
      "attr-no-duplication": true
    };
    for (var i = 0; i < widgets.length; ++i){
      editor.removeLineWidget(widgets[i]);
    }
    widgets.length = 0;
    //***** HERE ***** 
    // var result = HTMLHint.verify(editor.getValue(), options && options.rules || defaultRules);
    var messages  = HTMLHint.verify(editor.getValue(), options && options.rules || defaultRules);
    //***** HERE *****
    for (i = 0; i < messages.length; ++i) {
      //***** HERE *****
      var err = messages[i];
      if (!err) continue;
      var msg = document.createElement("div");
      var icon = msg.appendChild(document.createElement("span"));
      icon.innerHTML = "!!";
      icon.className = "lint-error-icon";
      //***** HERE *****
      msg.appendChild(document.createTextNode(err.message));
      msg.className = "lint-error";
      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
    }
  });// end of editor.operation
}// end of updateHints
editor = CodeMirror(document.getElementById("code"), {
  lineNumbers: true,
  mode: "text/html",
  lint: true,
  gutters: ["CodeMirror-lint-markers"],
  //***** HERE *****
  //lint: true,
  value: "<span class='hello'>'n  hello world'n</span>"
});
editor.on("change", function() {
  clearTimeout(waiting);
  waiting = setTimeout(updateHints, 500);
});
setTimeout(updateHints, 100);
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
@import url("http://codemirror.net/lib/codemirror.css");
@import url("http://codemirror.net/addon/fold/foldgutter.css");
@import url("https://codemirror.net/addon/lint/lint.css");
.CodeMirror {
  float: left;
  width: 100%;
}
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<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/javascripts/html-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>
<script src="https://codemirror.net/addon/lint/lint.js"></script>
<script src="https://rawgithub.com/stubbornella/csslint/master/release/csslint.js"></script>
<script src="http://htmlhint.com/js/htmlhint.js"></script>
<script src="https://codemirror.net/addon/lint/css-lint.js"></script>
<script src="https://codemirror.net/addon/lint/html-lint.js"></script>
<div id="code"></div>

HTMLHint包含消息中的所有提示/消息。因此，通过使用for，我抓取它的长度并继续，如果没有错误，但如果有错误，我添加它的方式与JSHint lint演示的方式相同。

var widgets = [];
var waiting;
function updateHints() {
  editor.operation(function() {
    for (var i = 0; i < widgets.length; ++i){
      editor.removeLineWidget(widgets[i])
    }
    widgets.length = 0
    var messages = HTMLHint.verify(editor.getValue())
      
    for (i = 0; i < messages.length; ++i) {
      err = messages[i];
      if (!err) continue
      var msg = document.createElement("div")
      var icon = msg.appendChild(document.createElement("span"))
      icon.innerHTML = "!!"
      icon.className = "lint-error-icon"
      //***** HERE *****
      msg.appendChild(document.createTextNode(err.message))
      msg.className = "lint-error"
      widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}))
    }
  })// end of editor.operation
}// end of updateHints
editor = CodeMirror(document.getElementById("code"), {
  lineNumbers: true,
  mode: "text/html",
  lint: true,
  gutters: ["CodeMirror-lint-markers"],
  //***** HERE *****
  //lint: true,
  value: "<span class='hello'>'n  hello world'n</span>"
});
editor.on("change", function() {
  clearTimeout(waiting);
  waiting = setTimeout(updateHints, 500);
});
setTimeout(updateHints, 100);
@import url("http://necolas.github.io/normalize.css/3.0.1/normalize.css");
@import url("http://codemirror.net/lib/codemirror.css");
@import url("http://codemirror.net/addon/fold/foldgutter.css");
@import url("https://codemirror.net/addon/lint/lint.css");
.CodeMirror {
  float: left;
  width: 100%;
}
.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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<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/javascripts/html-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>
<script src="https://codemirror.net/addon/lint/lint.js"></script>
<script src="https://rawgithub.com/stubbornella/csslint/master/release/csslint.js"></script>
<script src="http://htmlhint.com/js/htmlhint.js"></script>
<script src="https://codemirror.net/addon/lint/css-lint.js"></script>
<script src="https://codemirror.net/addon/lint/html-lint.js"></script>
<div id="code"></div>

相关文章：