lint.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <!doctype html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <title>CodeMirror: Linter Demo</title>
  6. <link rel="stylesheet" href="../lib/codemirror.css">
  7. <script src="../lib/codemirror.js"></script>
  8. <script src="../mode/javascript/javascript.js"></script>
  9. <script src="http://ajax.aspnetcdn.com/ajax/jshint/r07/jshint.js"></script>
  10. <script src="https://raw.github.com/zaach/jsonlint/79b553fb65c192add9066da64043458981b3972b/lib/jsonlint.js"></script>
  11. <link rel="stylesheet" href="../doc/docs.css">
  12. <link rel="stylesheet" href="../addon/lint/lint.css">
  13. <script src="../addon/lint/lint.js"></script>
  14. <script src="../addon/lint/javascript-lint.js"></script>
  15. <script src="../addon/lint/json-lint.js"></script>
  16. <style type="text/css">
  17. .CodeMirror {border: 1px solid black;}
  18. </style>
  19. </head>
  20. <body>
  21. <h1>CodeMirror: Linter Demo</h1>
  22. <p><textarea id="code-js">var widgets = []
  23. function updateHints() {
  24. editor.operation(function(){
  25. for (var i = 0; i < widgets.length; ++i)
  26. editor.removeLineWidget(widgets[i]);
  27. widgets.length = 0;
  28. JSHINT(editor.getValue());
  29. for (var i = 0; i < JSHINT.errors.length; ++i) {
  30. var err = JSHINT.errors[i];
  31. if (!err) continue;
  32. var msg = document.createElement("div");
  33. var icon = msg.appendChild(document.createElement("span"));
  34. icon.innerHTML = "!!";
  35. icon.className = "lint-error-icon";
  36. msg.appendChild(document.createTextNode(err.reason));
  37. msg.className = "lint-error";
  38. widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
  39. }
  40. });
  41. var info = editor.getScrollInfo();
  42. var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
  43. if (info.top + info.clientHeight < after)
  44. editor.scrollTo(null, after - info.clientHeight + 3);
  45. }
  46. </textarea></p>
  47. <p><textarea id="code-json">[
  48. {
  49. _id: "post 1",
  50. "author": "Bob",
  51. "content": "...",
  52. "page_views": 5
  53. },
  54. {
  55. "_id": "post 2",
  56. "author": "Bob",
  57. "content": "...",
  58. "page_views": 9
  59. },
  60. {
  61. "_id": "post 3",
  62. "author": "Bob",
  63. "content": "...",
  64. "page_views": 8
  65. }
  66. ]
  67. </textarea></p>
  68. <script>
  69. var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
  70. lineNumbers: true,
  71. mode: "javascript",
  72. gutters: ["CodeMirror-lint-markers"],
  73. lintWith: CodeMirror.javascriptValidator
  74. });
  75. var editor_json = CodeMirror.fromTextArea(document.getElementById("code-json"), {
  76. lineNumbers: true,
  77. mode: "application/json",
  78. gutters: ["CodeMirror-lint-markers"],
  79. lintWith: CodeMirror.jsonValidator
  80. });
  81. </script>
  82. </body>
  83. </html>