[Fix] jsx-props-no-multi-spaces: "Expected no line gap between" false positive

Fixes #2774.

Author: karolina-benitez

CHANGELOG.md

@@ -20,13 +20,15 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`jsx-closing-bracket-location`]: In `tag-aligned`, made a distinction between tabs and spaces ([#2796][] @Moong0122)
 * [`jsx-handler-names`]: false positive when handler name begins with number ([#1689][] @jsphstls)
 * [`prop-types`]: Detect JSX returned by sequential expression ([#2801][] @mikol)
+* [`jsx-props-no-multi-spaces`]: "Expected no line gap between" false positive ([#2792][] @karolina-benitez)
 
 ### Changed
 * [Tests] [`jsx-one-expression-per-line`]: add passing tests ([#2799][] @TaLeaMonet)
 
 [#2801]: https://github.com/yannickcr/eslint-plugin-react/pull/2801
 [#2799]: https://github.com/yannickcr/eslint-plugin-react/pull/2799
 [#2796]: https://github.com/yannickcr/eslint-plugin-react/pull/2796
+[#2792]: https://github.com/yannickcr/eslint-plugin-react/pull/2792
 [#2791]: https://github.com/yannickcr/eslint-plugin-react/pull/2791
 [#2789]: https://github.com/yannickcr/eslint-plugin-react/pull/2789
 [#2782]: https://github.com/yannickcr/eslint-plugin-react/pull/2782

lib/rules/jsx-props-no-multi-spaces.js

@@ -24,6 +24,8 @@ module.exports = {
   },
 
   create(context) {
+    const sourceCode = context.getSourceCode();
+
     function getPropName(propNode) {
       switch (propNode.type) {
         case 'JSXSpreadAttribute':
@@ -37,11 +39,30 @@ module.exports = {
       }
     }
 
+    function hasEmptyLines(node, leadingLineCount) {
+      const allComments = sourceCode.getCommentsBefore(node);
+      let commentLines = 0;
+
+      if (allComments.length > 0) {
+        allComments.forEach((comment) => {
+          const start = comment.loc.start.line;
+          const end = comment.loc.end.line;
+
+          commentLines += (end - start + 1);
+        });
+
+        return commentLines !== leadingLineCount;
+      }
+
+      return true;
+    }
+
     function checkSpacing(prev, node) {
       const prevNodeEndLine = prev.loc.end.line;
       const currNodeStartLine = node.loc.start.line;
+      const leadingLineCount = currNodeStartLine - prevNodeEndLine - 1;
 
-      if (currNodeStartLine - prevNodeEndLine > 1) {
+      if (leadingLineCount > 0 && hasEmptyLines(node, leadingLineCount)) {
         context.report({
           node,
           message: `Expected no line gap between “${getPropName(prev)}” and “${getPropName(node)}”`

tests/lib/rules/jsx-props-no-multi-spaces.js

@@ -85,6 +85,42 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
         type="button"
       />
     `
+  }, {
+    code: `
+      <button
+        title="Some button"
+        // this is a comment
+        onClick={(value) => {
+          console.log(value);
+        }}
+        type="button"
+      />
+    `
+  }, {
+    code: `
+     <button
+       title="Some button"
+       // this is a comment
+       // this is a second comment
+       onClick={(value) => {
+         console.log(value);
+       }}
+       type="button"
+     />
+   `
+  }, {
+    code: `
+     <button
+       title="Some button"
+       /* this is a multiline comment
+          ...
+          ... */
+       onClick={(value) => {
+         console.log(value);
+       }}
+       type="button"
+     />
+   `
   }],
 
   invalid: [{
@@ -170,5 +206,58 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
       {message: 'Expected no line gap between “title” and “onClick”'},
       {message: 'Expected no line gap between “onClick” and “type”'}
     ]
+  }, {
+    code: `
+      <button
+        title="Some button"
+        // this is a comment
+        onClick={(value) => {
+          console.log(value);
+        }}
+
+        type="button"
+      />
+    `,
+    errors: [
+      {message: 'Expected no line gap between “onClick” and “type”'}
+    ]
+  }, {
+    code: `
+      <button
+        title="Some button"
+        // this is a comment
+        // second comment
+
+        onClick={(value) => {
+          console.log(value);
+        }}
+
+        type="button"
+      />
+    `,
+    errors: [
+      {message: 'Expected no line gap between “title” and “onClick”'},
+      {message: 'Expected no line gap between “onClick” and “type”'}
+    ]
+  }, {
+    code: `
+      <button
+        title="Some button"
+        /*this is a
+          multiline
+          comment
+        */
+
+        onClick={(value) => {
+          console.log(value);
+        }}
+
+        type="button"
+      />
+    `,
+    errors: [
+      {message: 'Expected no line gap between “title” and “onClick”'},
+      {message: 'Expected no line gap between “onClick” and “type”'}
+    ]
   }]
 });