more friendly message for no-unescaped-entities

jsx-eslint · Dec 16, 2018 · 9dde951 · 9dde951
1 parent 78e9ea7
commit 9dde951
Show file tree

Hide file tree

Showing 3 changed files with 68 additions and 13 deletions.
diff --git a/docs/rules/no-unescaped-entities.md b/docs/rules/no-unescaped-entities.md
@@ -83,4 +83,14 @@ Overwrite the default forbidden entities array `['>', '"', '\'', '}']` with your
 
 ```js
 "react/no-unescaped-entities": ["error", {"forbid": [">", "}"]}],
+// or
+"react/no-unescaped-entities": ["error", {"forbid": [{
+  char: ">",
+  alternatives: ['&gt;']
+}, {
+  char: "}",
+  alternatives: ['&#125;']
+}]}],
 ```
+
+Where `char` is a special character and `alternatives` is the correct escapes.
diff --git a/lib/rules/no-unescaped-entities.js b/lib/rules/no-unescaped-entities.js
@@ -14,7 +14,19 @@ const jsxUtil = require('../util/jsx');
 // NOTE: '<' and '{' are also problematic characters, but they do not need
 // to be included here because it is a syntax error when these characters are
 // included accidentally.
-const DEFAULTS = ['>', '"', '\'', '}'];
+const DEFAULTS = [{
+  char: '>',
+  alternatives: ['&gt;']
+}, {
+  char: '"',
+  alternatives: ['&quot;', '&ldquo;', '&#34;', '&rdquo;']
+}, {
+  char: '\'',
+  alternatives: ['&apos;', '&lsquo;', '&#39;', '&rsquo;']
+}, {
+  char: '}',
+  alternatives: ['&#125;']
+}];
 
 module.exports = {
   meta: {
@@ -59,10 +71,18 @@ module.exports = {
         for (let j = 0; j < entities.length; j++) {
           for (let index = 0; index < rawLine.length; index++) {
             const c = rawLine[index];
-            if (c === entities[j]) {
+            if (typeof entities[j] === 'string') {
+              if (c === entities[j]) {
+                context.report({
+                  loc: {line: i, column: start + index},
+                  message: `HTML entity, \`${entities[j]}\` , must be escaped.`,
+                  node: node
+                });
+              }
+            } else if (c === entities[j].char) {
               context.report({
                 loc: {line: i, column: start + index},
-                message: 'HTML entities must be escaped.',
+                message: `\`${entities[j].char}\` can be escaped with ${entities[j].alternatives.map(alt => `\`${alt}\``).join(', ')}.`,
                 node: node
               });
             }

diff --git a/tests/lib/rules/no-unescaped-entities.js b/tests/lib/rules/no-unescaped-entities.js
@@ -112,7 +112,7 @@ ruleTester.run('no-unescaped-entities', rule, {
           }
         });
       `,
-      errors: [{message: 'HTML entities must be escaped.'}]
+      errors: [{message: '`>` can be escaped with `&gt;`.'}]
     }, {
       code: `
         var Hello = createReactClass({
@@ -122,7 +122,7 @@ ruleTester.run('no-unescaped-entities', rule, {
         });
       `,
       parser: 'babel-eslint',
-      errors: [{message: 'HTML entities must be escaped.'}]
+      errors: [{message: '`>` can be escaped with `&gt;`.'}]
     }, {
       code: `
         var Hello = createReactClass({
@@ -133,7 +133,7 @@ ruleTester.run('no-unescaped-entities', rule, {
           }
         });
       `,
-      errors: [{message: 'HTML entities must be escaped.'}]
+      errors: [{message: '`>` can be escaped with `&gt;`.'}]
     }, {
       code: `
         var Hello = createReactClass({
@@ -145,7 +145,7 @@ ruleTester.run('no-unescaped-entities', rule, {
         });
       `,
       parser: 'babel-eslint',
-      errors: [{message: 'HTML entities must be escaped.'}]
+      errors: [{message: '`>` can be escaped with `&gt;`.'}]
     }, {
       code: `
         var Hello = createReactClass({
@@ -154,7 +154,7 @@ ruleTester.run('no-unescaped-entities', rule, {
           }
         });
       `,
-      errors: [{message: 'HTML entities must be escaped.'}]
+      errors: [{message: '`\'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`.'}]
     }, {
       code: `
         var Hello = createReactClass({
@@ -164,9 +164,9 @@ ruleTester.run('no-unescaped-entities', rule, {
         });
       `,
       errors: [
-        {message: 'HTML entities must be escaped.'},
-        {message: 'HTML entities must be escaped.'},
-        {message: 'HTML entities must be escaped.'}
+        {message: '`\'` can be escaped with `&apos;`, `&lsquo;`, `&#39;`, `&rsquo;`.'},
+        {message: '`>` can be escaped with `&gt;`.'},
+        {message: '`>` can be escaped with `&gt;`.'}
       ]
     }, {
       code: `
@@ -176,7 +176,7 @@ ruleTester.run('no-unescaped-entities', rule, {
           }
         });
       `,
-      errors: [{message: 'HTML entities must be escaped.'}]
+      errors: [{message: '`}` can be escaped with `&#125;`.'}]
     }, {
       code: `
         var Hello = createReactClass({
@@ -186,7 +186,32 @@ ruleTester.run('no-unescaped-entities', rule, {
         });
       `,
       parser: 'babel-eslint',
-      errors: [{message: 'HTML entities must be escaped.'}]
+      errors: [{message: '`}` can be escaped with `&#125;`.'}]
+    }, {
+      code: `
+        var Hello = createReactClass({
+          render: function() {
+            return <>foo & bar</>;
+          }
+        });
+      `,
+      parser: 'babel-eslint',
+      errors: [{message: 'HTML entity, \`&\` , must be escaped.'}],
+      options: [{
+        forbid: ['&']
+      }]
+    }, {
+      code: `
+        var Hello = createReactClass({
+          render: function() {
+            return <span>foo & bar</span>;
+          }
+        });
+      `,
+      errors: [{message: 'HTML entity, \`&\` , must be escaped.'}],
+      options: [{
+        forbid: ['&']
+      }]
     }
   ]
 });