lint.html 4.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171
  1. <!doctype html>
  2. <title>CodeMirror: Linter Demo</title>
  3. <meta charset="utf-8"/>
  4. <link rel=stylesheet href="../doc/docs.css">
  5. <link rel="stylesheet" href="../lib/codemirror.css">
  6. <link rel="stylesheet" href="../addon/lint/lint.css">
  7. <script src="../lib/codemirror.js"></script>
  8. <script src="../mode/javascript/javascript.js"></script>
  9. <script src="../mode/css/css.js"></script>
  10. <script src="https://unpkg.com/jshint@2.13.2/dist/jshint.js"></script>
  11. <script src="https://unpkg.com/jsonlint@1.6.3/web/jsonlint.js"></script>
  12. <script src="https://unpkg.com/csslint@1.0.5/dist/csslint.js"></script>
  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. <script src="../addon/lint/css-lint.js"></script>
  17. <style>
  18. .CodeMirror {border: 1px solid black;}
  19. </style>
  20. <div id=nav>
  21. <a href="https://codemirror.net"><h1>CodeMirror</h1><img id=logo src="../doc/logo.png"></a>
  22. <ul>
  23. <li><a href="../index.html">Home</a>
  24. <li><a href="../doc/manual.html">Manual</a>
  25. <li><a href="https://github.com/codemirror/codemirror">Code</a>
  26. </ul>
  27. <ul>
  28. <li><a class=active href="#">Linter</a>
  29. </ul>
  30. </div>
  31. <article>
  32. <h2>Linter Demo</h2>
  33. <p><textarea id="code-js">var widgets = []
  34. function updateHints() {
  35. editor.operation(function(){
  36. for (var i = 0; i < widgets.length.; ++i)
  37. editor.removeLineWidget(widgets[i]);
  38. widgets.length = 0;
  39. JSHINT(editor.getValue());
  40. for (var i = 0; i < JSHINT.errors.length; ++i) {
  41. var err = JSHINT.errors[i];
  42. if (!err) continue;
  43. var msg = document.createElement("div");
  44. var icon = msg.appendChild(document.createElement("span"));
  45. icon.innerHTML = "!!";
  46. icon.className = "lint-error-icon";
  47. msg.appendChild(document.createTextNode(err.reason));
  48. msg.className = "lint-error";
  49. widgets.push(editor.addLineWidget(err.line - 1, msg, {coverGutter: false, noHScroll: true}));
  50. }
  51. });
  52. var info = editor.getScrollInfo();
  53. var after = editor.charCoords({line: editor.getCursor().line + 1, ch: 0}, "local").top;
  54. if (info.top + info.clientHeight < after)
  55. editor.scrollTo(null, after - info.clientHeight + 3);
  56. }
  57. </textarea></p>
  58. <p><textarea id="code-json">[
  59. {
  60. _id: "post 1",
  61. "author": "Bob",
  62. "content": "...",
  63. "page_views": 5
  64. },
  65. {
  66. "_id": "post 2",
  67. "author": "Bob",
  68. "content": "...",
  69. "page_views": 9
  70. },
  71. {
  72. "_id": "post 3",
  73. "author": "Bob",
  74. "content": "...",
  75. "page_views": 8
  76. }
  77. ]
  78. </textarea></p>
  79. <p><textarea id="code-css">@charset "UTF-8";
  80. @import url("booya.css") print, screen;
  81. @import "whatup.css" screen;
  82. @import "wicked.css";
  83. /*Error*/
  84. @charset "UTF-8";
  85. @namespace "http://www.w3.org/1999/xhtml";
  86. @namespace svg "http://www.w3.org/2000/svg";
  87. /*Warning: empty ruleset */
  88. .foo {
  89. }
  90. h1 {
  91. font-weight: bold;
  92. }
  93. /*Warning: qualified heading */
  94. .foo h1 {
  95. font-weight: bold;
  96. }
  97. /*Warning: adjoining classes */
  98. .foo.bar {
  99. zoom: 1;
  100. }
  101. li.inline {
  102. width: 100%; /*Warning: 100% can be problematic*/
  103. }
  104. li.last {
  105. display: inline;
  106. padding-left: 3px !important;
  107. padding-right: 3px;
  108. border-right: 0px;
  109. }
  110. @media print {
  111. li.inline {
  112. color: black;
  113. }
  114. }
  115. @page {
  116. margin: 10%;
  117. counter-increment: page;
  118. @top-center {
  119. font-family: sans-serif;
  120. font-weight: bold;
  121. font-size: 2em;
  122. content: counter(page);
  123. }
  124. }
  125. </textarea></p>
  126. <script>
  127. var editor = CodeMirror.fromTextArea(document.getElementById("code-js"), {
  128. lineNumbers: true,
  129. mode: "javascript",
  130. gutters: ["CodeMirror-lint-markers"],
  131. lint: {options: {esversion: 2021}},
  132. });
  133. var editor_json = CodeMirror.fromTextArea(document.getElementById("code-json"), {
  134. lineNumbers: true,
  135. mode: "application/json",
  136. gutters: ["CodeMirror-lint-markers"],
  137. lint: true
  138. });
  139. var editor_css = CodeMirror.fromTextArea(document.getElementById("code-css"), {
  140. lineNumbers: true,
  141. mode: "css",
  142. gutters: ["CodeMirror-lint-markers"],
  143. lint: true
  144. });
  145. </script>
  146. </article>