From f2869fd6dc76ceb863c5e2aeea8bf4d392508775 Mon Sep 17 00:00:00 2001
From: Justis Blasco <justis.blasco@gmail.com>
Date: Mon, 2 Jun 2025 18:42:36 -0400
Subject: [PATCH] [New] `jsx-props-no-multi-spaces`: improve autofix for
 multi-line

---
 CHANGELOG.md                                 |  4 ++
 lib/rules/jsx-props-no-multi-spaces.js       | 16 +++++
 tests/lib/rules/jsx-props-no-multi-spaces.js | 69 +++++++++++++++++---
 3 files changed, 79 insertions(+), 10 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index ddbbfef5c8..9696eca775 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -6,9 +6,13 @@ This change log adheres to standards from [Keep a CHANGELOG](https://keepachange
 
 ## Unreleased
 
+### Added
+* [`jsx-props-no-multi-spaces`]: improve autofix for multi-line ([#3930][] @justisb)
+
 ### Fixed
 * [`no-unknown-property`]: allow `onLoad` on `body` ([#3923][] @DerekStapleton)
 
+[#3930]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3930
 [#3923]: https://github.com/jsx-eslint/eslint-plugin-react/pull/3923
 
 ## [7.37.5] - 2025.04.03
diff --git a/lib/rules/jsx-props-no-multi-spaces.js b/lib/rules/jsx-props-no-multi-spaces.js
index 8402c6d4ff..5786506d11 100644
--- a/lib/rules/jsx-props-no-multi-spaces.js
+++ b/lib/rules/jsx-props-no-multi-spaces.js
@@ -80,6 +80,22 @@ module.exports = {
             prop1: getPropName(prev),
             prop2: getPropName(node),
           },
+          fix(fixer) {
+            const comments = sourceCode.getCommentsBefore ? sourceCode.getCommentsBefore(node) : [];
+            const nodes = [].concat(prev, comments, node);
+            const fixes = [];
+
+            for (let i = 1; i < nodes.length; i += 1) {
+              const prevNode = nodes[i - 1];
+              const currNode = nodes[i];
+              if (currNode.loc.start.line - prevNode.loc.end.line >= 2) {
+                const indent = ' '.repeat(currNode.loc.start.column);
+                fixes.push(fixer.replaceTextRange([prevNode.range[1], currNode.range[0]], `\n${indent}`));
+              }
+            }
+
+            return fixes;
+          },
         });
       }
 
diff --git a/tests/lib/rules/jsx-props-no-multi-spaces.js b/tests/lib/rules/jsx-props-no-multi-spaces.js
index d85573702f..8b8d15a9b4 100644
--- a/tests/lib/rules/jsx-props-no-multi-spaces.js
+++ b/tests/lib/rules/jsx-props-no-multi-spaces.js
@@ -84,7 +84,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
     {
       code: `
         <button
-          title="Some button"
+          title="Some button 8"
           type="button"
         />
       `,
@@ -92,7 +92,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
     {
       code: `
         <button
-          title="Some button"
+          title="Some button 8"
           onClick={(value) => {
             console.log(value);
           }}
@@ -104,7 +104,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
       {
         code: `
           <button
-            title="Some button"
+            title="Some button 2"
             // this is a comment
             onClick={(value) => {
               console.log(value);
@@ -116,7 +116,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
       {
         code: `
           <button
-            title="Some button"
+            title="Some button 2"
             // this is a comment
             // this is a second comment
             onClick={(value) => {
@@ -129,7 +129,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
       {
         code: `
           <App
-            foo="Some button" // comment
+            foo="Some button 3" // comment
             // comment
             bar=""
           />
@@ -138,7 +138,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
       {
         code: `
           <button
-            title="Some button"
+            title="Some button 3"
             /* this is a multiline comment
                 ...
                 ... */
@@ -263,6 +263,12 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
           type="button"
         />
       `,
+      output: `
+        <button
+          title='Some button'${semver.satisfies(eslintPkg.version, '> 3') ? '' : '\n'}
+          type="button"
+        />
+      `,
       errors: [
         {
           messageId: 'noLineGap',
@@ -273,7 +279,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
     {
       code: `
         <button
-          title="Some button"
+          title="Some button 4"
 
           onClick={(value) => {
             console.log(value);
@@ -282,6 +288,15 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
           type="button"
         />
       `,
+      output: `
+        <button
+          title="Some button 4"${semver.satisfies(eslintPkg.version, '> 3') ? '' : '\n'}
+          onClick={(value) => {
+            console.log(value);
+          }}${semver.satisfies(eslintPkg.version, '> 3') ? '' : '\n'}
+          type="button"
+        />
+      `,
       errors: [
         {
           messageId: 'noLineGap',
@@ -297,7 +312,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
       {
         code: `
           <button
-            title="Some button"
+            title="Some button 5"
             // this is a comment
             onClick={(value) => {
               console.log(value);
@@ -306,6 +321,16 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
             type="button"
           />
         `,
+        output: `
+          <button
+            title="Some button 5"
+            // this is a comment
+            onClick={(value) => {
+              console.log(value);
+            }}
+            type="button"
+          />
+        `,
         errors: [
           {
             messageId: 'noLineGap',
@@ -316,7 +341,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
       {
         code: `
           <button
-            title="Some button"
+            title="Some button 6"
             // this is a comment
             // second comment
 
@@ -327,6 +352,17 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
             type="button"
           />
         `,
+        output: `
+          <button
+            title="Some button 6"
+            // this is a comment
+            // second comment
+            onClick={(value) => {
+              console.log(value);
+            }}
+            type="button"
+          />
+        `,
         errors: [
           {
             messageId: 'noLineGap',
@@ -341,7 +377,7 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
       {
         code: `
           <button
-            title="Some button"
+            title="Some button 7"
             /*this is a
               multiline
               comment
@@ -354,6 +390,19 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
             type="button"
           />
         `,
+        output: `
+          <button
+            title="Some button 7"
+            /*this is a
+              multiline
+              comment
+            */
+            onClick={(value) => {
+              console.log(value);
+            }}
+            type="button"
+          />
+        `,
         errors: [
           {
             messageId: 'noLineGap',