Add jsx-uses-vars rule

Author: yannickcr

README.md

@@ -50,6 +50,7 @@ Finally, enable all of the rules that you would like to use.
     "react/no-did-mount-set-state": 1,
     "react/no-did-update-set-state": 1,
     "react/jsx-uses-react": 1,
+    "react/jsx-uses-vars": 1,
     "react/react-in-jsx-scope": 1
   }
 }
@@ -65,6 +66,7 @@ Finally, enable all of the rules that you would like to use.
 * [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount
 * [no-did-update-set-state](docs/rules/no-did-update-set-state.md): Prevent usage of setState in componentDidUpdate
 * [jsx-uses-react](docs/rules/jsx-uses-react.md): Prevent React to be incorrectly marked as unused
+* [jsx-uses-vars](docs/rules/jsx-uses-vars.md): Prevent variables used in JSX to be incorrectly marked as unused
 * [react-in-jsx-scope](docs/rules/react-in-jsx-scope.md): Prevent missing React when using JSX
 
 ## To Do

docs/rules/jsx-uses-vars.md

@@ -1,6 +1,6 @@
 # Prevent variables used in JSX to be incorrectly marked as unused (jsx-uses-vars)
 
-Since 0.17.0 the ESLint `no-unused-vars` rule does not detect variables used in JSX ([See details](eslint.org/blog/2015/03/eslint-0.17.0-released/#changes-to-jsx/react-handling)). This rules will find varaibles used in JSX and mark them as used.
+Since 0.17.0 the ESLint `no-unused-vars` rule does not detect variables used in JSX ([see details](http://eslint.org/blog/2015/03/eslint-0.17.0-released/#changes-to-jsx/react-handling)). This rules will find variables used in JSX and mark them as used.
 
 This rule has no effect if the `no-unused-vars` rule is not enabled.
 

index.js

@@ -10,7 +10,8 @@ module.exports = {
     'self-closing-comp': require('./lib/rules/self-closing-comp'),
     'no-did-mount-set-state': require('./lib/rules/no-did-mount-set-state'),
     'no-did-update-set-state': require('./lib/rules/no-did-update-set-state'),
-    'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope')
+    'react-in-jsx-scope': require('./lib/rules/react-in-jsx-scope'),
+    'jsx-uses-vars': require('./lib/rules/jsx-uses-vars')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -21,6 +22,7 @@ module.exports = {
     'self-closing-comp': 0,
     'no-did-mount-set-state': 0,
     'no-did-update-set-state': 0,
-    'react-in-jsx-scope': 0
+    'react-in-jsx-scope': 0,
+    'jsx-uses-vars': 0
   }
 };

lib/rules/jsx-uses-vars.js

@@ -0,0 +1,27 @@
+/**
+ * @fileoverview Prevent variables used in JSX to be marked as unused
+ * @author Yannick Croissant
+ */
+
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  return {
+    'JSXExpressionContainer': function(node) {
+      if (node.expression.type === 'Identifier') {
+        context.markVariableAsUsed(node.expression.name);
+      }
+    },
+
+    'JSXIdentifier': function(node) {
+      context.markVariableAsUsed(node.name);
+    }
+
+  };
+
+};

tests/lib/rules/jsx-uses-vars.js

@@ -0,0 +1,71 @@
+/**
+ * @fileoverview Tests for jsx-uses-vars
+ * @author Yannick Croissant
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslint.defineRule('jsx-uses-vars', require('../../../lib/rules/jsx-uses-vars'));
+eslintTester.addRuleTest('node_modules/eslint/lib/rules/no-unused-vars', {
+  valid: [
+    {
+      code: '\
+        /*eslint jsx-uses-vars:1*/\
+        function foo() {\
+          var App;\
+          var bar = React.render(<App/>);\
+          return bar;\
+        };\
+        foo()',
+      ecmaFeatures: {
+        jsx: true
+      }
+    },
+    {
+      code: '\
+        /*eslint jsx-uses-vars:1*/\
+        var App;\
+        React.render(<App/>);',
+      ecmaFeatures: {
+        jsx: true
+      }
+    }, {
+      code: '\
+        /*eslint jsx-uses-vars:1*/\
+          var a=1;\
+          React.render(<img src={a} />);',
+      ecmaFeatures: {
+        jsx: true
+      }
+    }, {
+      code: '\
+        /*eslint jsx-uses-vars:1*/\
+        var App;\
+        function f() {\
+          return <App />;\
+        }\
+        f();',
+      ecmaFeatures: {
+        jsx: true
+      }
+    }
+  ],
+  invalid: [
+    {
+      code: '/*eslint jsx-uses-vars:1*/ var App;',
+      errors: [{message: 'App is defined but never used'}], ecmaFeatures: {jsx: true}
+    }
+  ]
+});