Update: Allow JSX exception in no-inline-comments (fixes #11270) (#12388)

Author: mdjermanovic

docs/rules/no-inline-comments.md

@@ -35,3 +35,55 @@ var foo = 5;
 var bar = 5;
 //This is a comment below a line of code
 ```
+
+### JSX exception
+
+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.
+
+Examples of **incorrect** code for this rule:
+
+```js
+/*eslint no-inline-comments: "error"*/
+
+var foo = <div>{ /* On the same line with other code */ }<h1>Some heading</h1></div>;
+
+var bar = (
+    <div>
+    {   // These braces are not just for the comment, so it can't be on the same line
+        baz
+    }
+    </div>
+);
+```
+
+Examples of **correct** code for this rule:
+
+```js
+/*eslint no-inline-comments: "error"*/
+
+var foo = (
+    <div>
+      {/* These braces are just for this comment and there is nothing else on this line */}
+      <h1>Some heading</h1>
+    </div>
+)
+
+var bar = (
+    <div>
+    {
+        // There is nothing else on this line
+        baz
+    }
+    </div>
+);
+
+var quux = (
+    <div>
+      {/*
+        Multiline
+        comment
+      */}
+      <h1>Some heading</h1>
+    </div>
+)
+```

lib/rules/no-inline-comments.js

@@ -35,22 +35,36 @@ module.exports = {
          */
         function testCodeAroundComment(node) {
 
-            // Get the whole line and cut it off at the start of the comment
-            const startLine = String(sourceCode.lines[node.loc.start.line - 1]);
-            const endLine = String(sourceCode.lines[node.loc.end.line - 1]);
+            const startLine = String(sourceCode.lines[node.loc.start.line - 1]),
+                endLine = String(sourceCode.lines[node.loc.end.line - 1]),
+                preamble = startLine.slice(0, node.loc.start.column).trim(),
+                postamble = endLine.slice(node.loc.end.column).trim(),
+                isPreambleEmpty = !preamble,
+                isPostambleEmpty = !postamble;
 
-            const preamble = startLine.slice(0, node.loc.start.column).trim();
+            // Nothing on both sides
+            if (isPreambleEmpty && isPostambleEmpty) {
+                return;
+            }
 
-            // Also check after the comment
-            const postamble = endLine.slice(node.loc.end.column).trim();
+            // JSX Exception
+            if (
+                (isPreambleEmpty || preamble === "{") &&
+                (isPostambleEmpty || postamble === "}")
+            ) {
+                const enclosingNode = sourceCode.getNodeByRangeIndex(node.range[0]);
 
-            // Check that this comment isn't an ESLint directive
-            const isDirective = astUtils.isDirectiveComment(node);
+                if (enclosingNode && enclosingNode.type === "JSXEmptyExpression") {
+                    return;
+                }
+            }
 
-            // Should be empty if there was only whitespace around the comment
-            if (!isDirective && (preamble || postamble)) {
-                context.report({ node, message: "Unexpected comment inline with code." });
+            // Don't report ESLint directive comments
+            if (astUtils.isDirectiveComment(node)) {
+                return;
             }
+
+            context.report({ node, message: "Unexpected comment inline with code." });
         }
 
         //--------------------------------------------------------------------------