[Fix] jsx-uses-vars: ignore lowercase tag names

Fixes eslint/eslint#15040
jsx-eslint · Sep 8, 2021 · 5340e9d · 5340e9d
1 parent 577cb64
commit 5340e9d
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 0 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -10,7 +10,9 @@ This change log adheres to standards from [Keep a CHANGELOG](http://keepachangel
 * [`prop-types`], `propTypes`: handle implicit `children` prop in react's generic types ([#3064][] @vedadeepta)
 * [`display-name`]: fix arrow function returning result of function call with JSX arguments being interpreted as component ([#3065][] @danielfinke)
 * [`jsx-no-target-blank`]: avoid crash on attr-only href ([#3066][] @ljharb @gaz77a)
+* [`jsx-uses-vars`]: ignore lowercase tag names ([#3070][] @alanorozco)
 
+[#3070]: https://github.com/yannickcr/eslint-plugin-react/pull/3070
 [#3066]: https://github.com/yannickcr/eslint-plugin-react/issue/3066
 [#3065]: https://github.com/yannickcr/eslint-plugin-react/pull/3065
 [#3064]: https://github.com/yannickcr/eslint-plugin-react/pull/3064

diff --git a/lib/rules/jsx-uses-vars.js b/lib/rules/jsx-uses-vars.js
@@ -11,6 +11,9 @@ const docsUrl = require('../util/docsUrl');
 // Rule Definition
 // ------------------------------------------------------------------------------
 
+const isTagNameRe = /^[a-z]/;
+const isTagName = (name) => isTagNameRe.test(name);
+
 module.exports = {
   meta: {
     docs: {
@@ -33,6 +36,10 @@ module.exports = {
         if (node.name.name) {
           // <Foo>
           name = node.name.name;
+          // Exclude lowercase tag names like <div>
+          if (isTagName(name)) {
+            return;
+          }
         } else if (node.name.object) {
           // <Foo...Bar>
           let parent = node.name.object;

diff --git a/tests/lib/rules/jsx-uses-vars.js b/tests/lib/rules/jsx-uses-vars.js
@@ -116,6 +116,18 @@ ruleTester.run('no-unused-vars', ruleNoUnusedVars, {
         };
         foo()
       `
+    }, {
+      code: `
+        /* eslint jsx-uses-vars: 1 */
+        var object;
+        React.render(<object.Tag />);
+      `
+    }, {
+      code: `
+        /* eslint jsx-uses-vars: 1 */
+        var object;
+        React.render(<object.tag />);
+      `
     }
   ],
   invalid: [
@@ -196,6 +208,13 @@ ruleTester.run('no-unused-vars', ruleNoUnusedVars, {
         line: 3
       }],
       parser: parsers.BABEL_ESLINT
+    }, {
+      code: `
+        /* eslint jsx-uses-vars: 1 */
+        var lowercase;
+        React.render(<lowercase />);
+      `,
+      errors: [{message: '\'lowercase\' is defined but never used.'}]
     }
   ]
 });