Codemirror 的 HTMLHint 验证器

Question

我找到了 HTMLHint for the ACE Editor, but later after searching Codemirror's Git Repository I found their lint's。我以前玩过 CSLint 和 JSHint，但还没有找到 Codemirror 的任何东西。

有谁知道如何让像 HTMLHint 这样的 HTML 验证器与 Codemirror 一起工作？

var delay;

// Initialize CodeMirror editor
var editor = CodeMirror(document.getElementById('code'), {
  mode: 'text/html',
  tabMode: 'indent',
  styleActiveLine: true,
  lineNumbers: true,
  lineWrapping: true,
  autoCloseTags: true,
  foldGutter: true,
  dragDrop : true,
  lint: true,
  gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'],
  value: '<div class="container-fluid">\n  <div class="row">\n    <div class="col-lg-12">\n      <div class="input-group">\n        <input type="txt" class="form-control" data-action="genoutput" />\n        <span class="input-group-btn" class="input-group-btn">\n          <button class="btn btn-default btn-primary" type="button" data-action"gen">\n            Generate!\n          </button>\n        </span>\n      </div>\n    </div>\n  </div>\n</div>'
});

// Live preview
editor.on('change', function() {
  clearTimeout(delay);
  delay = setTimeout(updatePreview, 300);
});
function updatePreview() {
  var previewFrame = document.getElementById('preview');
  var preview =  previewFrame.contentDocument ||  previewFrame.contentWindow.document;
  preview.open();
  preview.write(editor.getValue());
  preview.close();
}
setTimeout(updatePreview, 300);

@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/lint/lint.css");
@import url("http://codemirror.net/addon/fold/foldgutter.css");

.CodeMirror {
  float: left;
  width: 50%;
  border: 1px solid black;
}

iframe {
  width: 49%;
  float: left;
  height: 300px;
  border: 1px solid black;
  border-left: 0;
}

<script src="http://code.jquery.com/jquery-latest.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="http://codemirror.net/addon/lint/lint.js"></script>
<script src="http://codemirror.net/addon/hint/xml-hint.js"></script>
<script src="http://codemirror.net/addon/hint/html-hint.js"></script>
<script src="http://codemirror.net/addon/lint/javascript-lint.js"></script>
<script src="http://codemirror.net/addon/lint/css-lint.js"></script>

<div id="code" name="code"></div>
<iframe id="preview"></iframe>

Answer 1

您必须编写将 HTMLHint 的输出连接到 CodeMirror 的 lint 插件的粘合代码。请参阅文档 here，并使用其他 lint 模块包装器作为示例。（如果你得到了一些东西，将它放入发行版的拉取请求将是非常棒的。）

Codemirror 的 HTMLHint 验证器

HTMLHint Validator for Codemirror

html

javascript

validation

lint

codemirror