[New] jsx-props-no-multi-spaces: improve autofix for multi-line

Author: justisb

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

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;
+          },
         });
       }
 

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

@@ -263,6 +263,12 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
           type="button"
         />
       `,
+      output: `
+        <button
+          title='Some button'
+          type="button"
+        />
+      `,
       errors: [
         {
           messageId: 'noLineGap',
@@ -282,6 +288,15 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
           type="button"
         />
       `,
+      output: `
+        <button
+          title="Some button"
+          onClick={(value) => {
+            console.log(value);
+          }}
+          type="button"
+        />
+      `,
       errors: [
         {
           messageId: 'noLineGap',
@@ -306,6 +321,16 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
             type="button"
           />
         `,
+        output: `
+          <button
+            title="Some button"
+            // this is a comment
+            onClick={(value) => {
+              console.log(value);
+            }}
+            type="button"
+          />
+        `,
         errors: [
           {
             messageId: 'noLineGap',
@@ -327,6 +352,17 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
             type="button"
           />
         `,
+        output: `
+          <button
+            title="Some button"
+            // this is a comment
+            // second comment
+            onClick={(value) => {
+              console.log(value);
+            }}
+            type="button"
+          />
+        `,
         errors: [
           {
             messageId: 'noLineGap',
@@ -354,6 +390,19 @@ ruleTester.run('jsx-props-no-multi-spaces', rule, {
             type="button"
           />
         `,
+        output: `
+          <button
+            title="Some button"
+            /*this is a
+              multiline
+              comment
+            */
+            onClick={(value) => {
+              console.log(value);
+            }}
+            type="button"
+          />
+        `,
         errors: [
           {
             messageId: 'noLineGap',