feat: ignore element

edvardchen · Jan 20, 2020 · 56b8b08 · 56b8b08
1 parent 32f1ed8
commit 56b8b08
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -236,3 +236,19 @@ Examples of correct code for the `{ "ignoreAttribute": ["foo"] }` option:
 /*eslint i18next/no-literal-string: ["error", { "ignoreAttribute": ["foo"] }]*/
 const element = <div foo="bar" />;
 ```
+
+#### ignoreElement
+
+The `ignoreElement` option specifies exceptions not to check for JSX elements that match one of ignored elements. This includes strings within children of these elements.
+
+Examples of correct code for the `{ "ignoreElement": ["foo"] }` option:
+
+```jsx
+/*eslint i18next/no-literal-string: ["error", { "ignoreElement": ["foo"] }]*/
+const element = <foo>a</foo>;
+const element2 = (
+  <foo>
+    <bar>b</bar>
+  </foo>
+);
+```
diff --git a/lib/rules/no-literal-string.js b/lib/rules/no-literal-string.js
@@ -28,13 +28,19 @@ module.exports = {
               type: 'string'
             }
           },
+          ignoreAttribute: {
+            type: 'array',
+            items: {
+              type: 'string'
+            }
+          },
           ignoreCallee: {
             type: 'array',
             items: {
               type: 'string'
             }
           },
-          ignoreAttribute: {
+          ignoreElement: {
             type: 'array',
             items: {
               type: 'string'
@@ -100,6 +106,25 @@ module.exports = {
       return userJSXAttrs.includes(name);
     }
 
+    const ignoredElements = (option && option.ignoreElement) || [];
+    const userElements = ['Trans', ...ignoredElements];
+    function hasValidElementName(node) {
+      let currentNode = node;
+      while (
+        currentNode.parent &&
+        currentNode.parent.openingElement &&
+        currentNode.parent.openingElement.name
+      ) {
+        if (
+          userElements.includes(currentNode.parent.openingElement.name.name)
+        ) {
+          return true;
+        }
+        currentNode = currentNode.parent;
+      }
+      return false;
+    }
+
     //----------------------------------------------------------------------
     // Public
     //----------------------------------------------------------------------
@@ -176,6 +201,10 @@ module.exports = {
         const trimed = node.value.trim();
         visited.add(node);
 
+        if (hasValidElementName(node)) {
+          return;
+        }
+
         if (!trimed || match(trimed)) {
           return;
         }

diff --git a/tests/lib/rules/no-literal-string.js b/tests/lib/rules/no-literal-string.js
@@ -90,7 +90,12 @@ ruleTester.run('no-literal-string', rule, {
     { code: '<div role="button"></div>' },
     { code: '<img src="./image.png" />' },
     { code: '<button type="button" for="form-id" />' },
-    { code: '<DIV foo="bar" />', options: [{ ignoreAttribute: ['foo'] }] }
+    { code: '<DIV foo="bar" />', options: [{ ignoreAttribute: ['foo'] }] },
+    { code: '<div>foo</div>', options: [{ ignoreElement: ['div'] }] },
+    {
+      code: '<div><span>bar</span></div>',
+      options: [{ ignoreElement: ['div'] }]
+    }
   ],
 
   invalid: [
@@ -104,13 +109,17 @@ ruleTester.run('no-literal-string', rule, {
     { code: 'const a = call("Ffo");', errors },
     { code: 'var a = {foo: "bar"};', errors },
     { code: 'const a = "afoo";', options: [{ ignore: ['^foo'] }], errors },
-    { code: 'class Form extends Component { property = "Something" };', errors },
+    {
+      code: 'class Form extends Component { property = "Something" };',
+      errors
+    },
     // JSX
     { code: '<div>foo</div>', errors },
     { code: '<div>FOO</div>', errors },
     { code: '<DIV foo="bar" />', errors },
     { code: '<img src="./image.png" alt="some-image" />', errors },
-    { code: '<button aria-label="Close" type="button" />', errors }
+    { code: '<button aria-label="Close" type="button" />', errors },
+    { code: '<div>foo</div>', options: [{ ignoreElement: ['span'] }], errors }
   ]
 });