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