Skip to content

Commit c78f4a7

Browse files
mdjermanovickaicataldo
mdjermanovic
authored and
kaicataldo
committedNov 1, 2019
Update: Allow JSX exception in no-inline-comments (fixes #11270) (#12388)
·
v9.23.0v6.7.0
1 parent e17fb90 commit c78f4a7

File tree

3 files changed

+369
-14
lines changed

3 files changed

+369
-14
lines changed
 

‎docs/rules/no-inline-comments.md

+52
Original file line numberDiff line numberDiff line change
@@ -35,3 +35,55 @@ var foo = 5;
3535
var bar = 5;
3636
//This is a comment below a line of code
3737
```
38+
39+
### JSX exception
40+
41+
Comments inside the curly braces in JSX are allowed to be on the same line as the braces, but only if they are not on the same line with other code, and the braces do not enclose an actual expression.
42+
43+
Examples of **incorrect** code for this rule:
44+
45+
```js
46+
/*eslint no-inline-comments: "error"*/
47+
48+
var foo = <div>{ /* On the same line with other code */ }<h1>Some heading</h1></div>;
49+
50+
var bar = (
51+
<div>
52+
{ // These braces are not just for the comment, so it can't be on the same line
53+
baz
54+
}
55+
</div>
56+
);
57+
```
58+
59+
Examples of **correct** code for this rule:
60+
61+
```js
62+
/*eslint no-inline-comments: "error"*/
63+
64+
var foo = (
65+
<div>
66+
{/* These braces are just for this comment and there is nothing else on this line */}
67+
<h1>Some heading</h1>
68+
</div>
69+
)
70+
71+
var bar = (
72+
<div>
73+
{
74+
// There is nothing else on this line
75+
baz
76+
}
77+
</div>
78+
);
79+
80+
var quux = (
81+
<div>
82+
{/*
83+
Multiline
84+
comment
85+
*/}
86+
<h1>Some heading</h1>
87+
</div>
88+
)
89+
```

‎lib/rules/no-inline-comments.js

+25-11
Original file line numberDiff line numberDiff line change
@@ -35,22 +35,36 @@ module.exports = {
3535
*/
3636
function testCodeAroundComment(node) {
3737

38-
// Get the whole line and cut it off at the start of the comment
39-
const startLine = String(sourceCode.lines[node.loc.start.line - 1]);
40-
const endLine = String(sourceCode.lines[node.loc.end.line - 1]);
38+
const startLine = String(sourceCode.lines[node.loc.start.line - 1]),
39+
endLine = String(sourceCode.lines[node.loc.end.line - 1]),
40+
preamble = startLine.slice(0, node.loc.start.column).trim(),
41+
postamble = endLine.slice(node.loc.end.column).trim(),
42+
isPreambleEmpty = !preamble,
43+
isPostambleEmpty = !postamble;
4144

42-
const preamble = startLine.slice(0, node.loc.start.column).trim();
45+
// Nothing on both sides
46+
if (isPreambleEmpty && isPostambleEmpty) {
47+
return;
48+
}
4349

44-
// Also check after the comment
45-
const postamble = endLine.slice(node.loc.end.column).trim();
50+
// JSX Exception
51+
if (
52+
(isPreambleEmpty || preamble === "{") &&
53+
(isPostambleEmpty || postamble === "}")
54+
) {
55+
const enclosingNode = sourceCode.getNodeByRangeIndex(node.range[0]);
4656

47-
// Check that this comment isn't an ESLint directive
48-
const isDirective = astUtils.isDirectiveComment(node);
57+
if (enclosingNode && enclosingNode.type === "JSXEmptyExpression") {
58+
return;
59+
}
60+
}
4961

50-
// Should be empty if there was only whitespace around the comment
51-
if (!isDirective && (preamble || postamble)) {
52-
context.report({ node, message: "Unexpected comment inline with code." });
62+
// Don't report ESLint directive comments
63+
if (astUtils.isDirectiveComment(node)) {
64+
return;
5365
}
66+
67+
context.report({ node, message: "Unexpected comment inline with code." });
5468
}
5569

5670
//--------------------------------------------------------------------------

‎tests/lib/rules/no-inline-comments.js

+292-3
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,13 @@ const rule = require("../../../lib/rules/no-inline-comments"),
1515
// Tests
1616
//------------------------------------------------------------------------------
1717

18-
const ruleTester = new RuleTester(),
18+
const ruleTester = new RuleTester({
19+
parserOptions: {
20+
ecmaFeatures: {
21+
jsx: true
22+
}
23+
}
24+
}),
1925
lineError = {
2026
message: "Unexpected comment inline with code.",
2127
type: "Line"
@@ -32,7 +38,57 @@ ruleTester.run("no-inline-comments", rule, {
3238
"var a = 2;\n// A valid comment after code",
3339
"// A solitary comment",
3440
"var a = 1; // eslint-disable-line no-debugger",
35-
"var a = 1; /* eslint-disable-line no-debugger */"
41+
"var a = 1; /* eslint-disable-line no-debugger */",
42+
43+
// JSX exception
44+
`var a = (
45+
<div>
46+
{/*comment*/}
47+
</div>
48+
)`,
49+
`var a = (
50+
<div>
51+
{ /* comment */ }
52+
<h1>Some heading</h1>
53+
</div>
54+
)`,
55+
`var a = (
56+
<div>
57+
{// comment
58+
}
59+
</div>
60+
)`,
61+
`var a = (
62+
<div>
63+
{ // comment
64+
}
65+
</div>
66+
)`,
67+
`var a = (
68+
<div>
69+
{/* comment 1 */
70+
/* comment 2 */}
71+
</div>
72+
)`,
73+
`var a = (
74+
<div>
75+
{/*
76+
* comment 1
77+
*/
78+
/*
79+
* comment 2
80+
*/}
81+
</div>
82+
)`,
83+
`var a = (
84+
<div>
85+
{/*
86+
multi
87+
line
88+
comment
89+
*/}
90+
</div>
91+
)`
3692
],
3793

3894
invalid: [
@@ -55,7 +111,240 @@ ruleTester.run("no-inline-comments", rule, {
55111
{
56112
code: "var a = 4;\n/**A\n * block\n * comment\n * inline\n * between\n * code*/ var foo = a;",
57113
errors: [blockError]
114+
},
115+
{
116+
code: "var a = \n{/**/}",
117+
errors: [blockError]
118+
},
119+
120+
// JSX
121+
{
122+
code: `var a = (
123+
<div>{/* comment */}</div>
124+
)`,
125+
errors: [blockError]
126+
},
127+
{
128+
code: `var a = (
129+
<div>{// comment
130+
}
131+
</div>
132+
)`,
133+
errors: [lineError]
134+
},
135+
{
136+
code: `var a = (
137+
<div>{/* comment */
138+
}
139+
</div>
140+
)`,
141+
errors: [blockError]
142+
},
143+
{
144+
code: `var a = (
145+
<div>{/*
146+
* comment
147+
*/
148+
}
149+
</div>
150+
)`,
151+
errors: [blockError]
152+
},
153+
{
154+
code: `var a = (
155+
<div>{/*
156+
* comment
157+
*/}
158+
</div>
159+
)`,
160+
errors: [blockError]
161+
},
162+
{
163+
code: `var a = (
164+
<div>{/*
165+
* comment
166+
*/}</div>
167+
)`,
168+
errors: [blockError]
169+
},
170+
{
171+
code: `var a = (
172+
<div>
173+
{/*
174+
* comment
175+
*/}</div>
176+
)`,
177+
errors: [blockError]
178+
},
179+
{
180+
code: `var a = (
181+
<div>
182+
{
183+
/*
184+
* comment
185+
*/}</div>
186+
)`,
187+
errors: [blockError]
188+
},
189+
{
190+
code: `var a = (
191+
<div>
192+
{
193+
/* comment */}</div>
194+
)`,
195+
errors: [blockError]
196+
},
197+
{
198+
code: `var a = (
199+
<div>
200+
{b/* comment */}
201+
</div>
202+
)`,
203+
errors: [blockError]
204+
},
205+
{
206+
code: `var a = (
207+
<div>
208+
{/* comment */b}
209+
</div>
210+
)`,
211+
errors: [blockError]
212+
},
213+
{
214+
code: `var a = (
215+
<div>
216+
{// comment
217+
b
218+
}
219+
</div>
220+
)`,
221+
errors: [lineError]
222+
},
223+
{
224+
code: `var a = (
225+
<div>
226+
{/* comment */
227+
b
228+
}
229+
</div>
230+
)`,
231+
errors: [blockError]
232+
},
233+
{
234+
code: `var a = (
235+
<div>
236+
{/*
237+
* comment
238+
*/
239+
b
240+
}
241+
</div>
242+
)`,
243+
errors: [blockError]
244+
},
245+
{
246+
code: `var a = (
247+
<div>
248+
{
249+
b// comment
250+
}
251+
</div>
252+
)`,
253+
errors: [lineError]
254+
},
255+
{
256+
code: `var a = (
257+
<div>
258+
{
259+
/* comment */b
260+
}
261+
</div>
262+
)`,
263+
errors: [blockError]
264+
},
265+
{
266+
code: `var a = (
267+
<div>
268+
{
269+
b/* comment */
270+
}
271+
</div>
272+
)`,
273+
errors: [blockError]
274+
},
275+
{
276+
code: `var a = (
277+
<div>
278+
{
279+
b
280+
/*
281+
* comment
282+
*/}
283+
</div>
284+
)`,
285+
errors: [blockError]
286+
},
287+
{
288+
code: `var a = (
289+
<div>
290+
{
291+
b
292+
/* comment */}
293+
</div>
294+
)`,
295+
errors: [blockError]
296+
},
297+
{
298+
code: `var a = (
299+
<div>
300+
{
301+
{ /* this is an empty object literal, not braces for js code! */ }
302+
}
303+
</div>
304+
)`,
305+
errors: [blockError]
306+
},
307+
{
308+
code: `var a = (
309+
<div>
310+
{
311+
{// comment
312+
}
313+
}
314+
</div>
315+
)`,
316+
errors: [lineError]
317+
},
318+
{
319+
code: `var a = (
320+
<div>
321+
{
322+
{
323+
/* comment */}
324+
}
325+
</div>
326+
)`,
327+
errors: [blockError]
328+
},
329+
{
330+
code: `var a = (
331+
<div>
332+
{ /* two comments on the same line... */ /* ...are not allowed, same as with a non-JSX code */}
333+
</div>
334+
)`,
335+
errors: [blockError, blockError]
336+
},
337+
{
338+
code: `var a = (
339+
<div>
340+
{
341+
/* overlapping
342+
*/ /*
343+
lines */
344+
}
345+
</div>
346+
)`,
347+
errors: [blockError, blockError]
58348
}
59349
]
60-
61350
});

0 commit comments

Comments
 (0)
Please sign in to comment.