[New] Add suggestions to no-unescaped-entities

Closes jsx-eslint#3277
StyleShit · Sep 24, 2024 · 1210a14 · 1210a14
1 parent 4ecf034
commit 1210a14
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 1 deletion.
diff --git a/README.md b/README.md
@@ -368,7 +368,7 @@ module.exports = [
 | [no-string-refs](docs/rules/no-string-refs.md)                                               | Disallow using string references                                                                                                             | ☑️ |    |    |    |    |
 | [no-this-in-sfc](docs/rules/no-this-in-sfc.md)                                               | Disallow `this` from being used in stateless functional components                                                                           |    |    |    |    |    |
 | [no-typos](docs/rules/no-typos.md)                                                           | Disallow common typos                                                                                                                        |    |    |    |    |    |
-| [no-unescaped-entities](docs/rules/no-unescaped-entities.md)                                 | Disallow unescaped HTML entities from appearing in markup                                                                                    | ☑️ |    |    |    |    |
+| [no-unescaped-entities](docs/rules/no-unescaped-entities.md)                                 | Disallow unescaped HTML entities from appearing in markup                                                                                    | ☑️ |    |    | 💡 |    |
 | [no-unknown-property](docs/rules/no-unknown-property.md)                                     | Disallow usage of unknown DOM property                                                                                                       | ☑️ |    | 🔧 |    |    |
 | [no-unsafe](docs/rules/no-unsafe.md)                                                         | Disallow usage of unsafe lifecycle methods                                                                                                   |    | ☑️ |    |    |    |
 | [no-unstable-nested-components](docs/rules/no-unstable-nested-components.md)                 | Disallow creating unstable components inside components                                                                                      |    |    |    |    |    |

diff --git a/docs/rules/no-unescaped-entities.md b/docs/rules/no-unescaped-entities.md
@@ -2,6 +2,8 @@
 
 💼 This rule is enabled in the ☑️ `recommended` [config](https://github.com/jsx-eslint/eslint-plugin-react/#shareable-configs).
 
+💡 This rule is manually fixable by [editor suggestions](https://eslint.org/docs/latest/use/core-concepts#rule-suggestions).
+
 <!-- end auto-generated rule header -->
 
 This rule prevents characters that you may have meant as JSX escape characters

diff --git a/lib/rules/no-unescaped-entities.js b/lib/rules/no-unescaped-entities.js
@@ -9,6 +9,7 @@ const docsUrl = require('../util/docsUrl');
 const getSourceCode = require('../util/eslint').getSourceCode;
 const jsxUtil = require('../util/jsx');
 const report = require('../util/report');
+const getMessageData = require('../util/message');
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -34,11 +35,13 @@ const DEFAULTS = [{
 const messages = {
   unescapedEntity: 'HTML entity, `{{entity}}` , must be escaped.',
   unescapedEntityAlts: '`{{entity}}` can be escaped with {{alts}}.',
+  replaceWithAlt: 'Replace with `{{alt}}`.',
 };
 
 /** @type {import('eslint').Rule.RuleModule} */
 module.exports = {
   meta: {
+    hasSuggestions: true,
     docs: {
       description: 'Disallow unescaped HTML entities from appearing in markup',
       category: 'Possible Errors',
@@ -117,6 +120,15 @@ module.exports = {
                   entity: entities[j].char,
                   alts: entities[j].alternatives.map((alt) => `\`${alt}\``).join(', '),
                 },
+                suggest: entities[j].alternatives.map((alt) => Object.assign(
+                  getMessageData('replaceWithAlt', messages.replaceWithAlt),
+                  {
+                    data: { alt },
+                    fix(fixer) {
+                      fixer.replaceText(node, alt);
+                    },
+                  }
+                )),
               });
             }
           }

diff --git a/tests/lib/rules/no-unescaped-entities.js b/tests/lib/rules/no-unescaped-entities.js
@@ -207,6 +207,19 @@ ruleTester.run('no-unescaped-entities', rule, {
         {
           messageId: 'unescapedEntityAlts',
           data: { entity: '>', alts: '`&gt;`' },
+          suggestions: [
+            {
+              messageId: 'replaceWithAlt',
+              data: { alt: '&gt;' },
+              output: `
+          var Hello = createReactClass({
+            render: function() {
+              return <>&gt; babel-eslint</>;
+            }
+          });
+              `,
+            },
+          ],
         },
       ],
     },
@@ -327,6 +340,36 @@ ruleTester.run('no-unescaped-entities', rule, {
           data: { entity: '"', alts: '`&quot;`, `&ldquo;`, `&#34;`, `&rdquo;`' },
           line: 2,
           column: 30,
+          suggestions: [
+            {
+              messageId: 'replaceWithAlt',
+              data: { alt: '&quot;' },
+              output: `
+        <script>window.foo = &quot;bar"</script>
+              `,
+            },
+            {
+              messageId: 'replaceWithAlt',
+              data: { alt: '&ldquo;' },
+              output: `
+        <script>window.foo = &ldquo;bar"</script>
+              `,
+            },
+            {
+              messageId: 'replaceWithAlt',
+              data: { alt: '&#34;' },
+              output: `
+        <script>window.foo = &#34;bar"</script>
+              `,
+            },
+            {
+              messageId: 'replaceWithAlt',
+              data: { alt: '&rdquo;' },
+              output: `
+        <script>window.foo = &rdquo;bar"</script>
+              `,
+            },
+          ],
         },
         {
           messageId: 'unescapedEntityAlts',