First draft of jsx-key.

Author: benmosher

README.md

@@ -52,6 +52,7 @@ Finally, enable all of the rules that you would like to use.
     "react/jsx-closing-bracket-location": 1,
     "react/jsx-curly-spacing": 1,
     "react/jsx-indent-props": 1,
+    "react/jsx-key": 1,
     "react/jsx-max-props-per-line": 1,
     "react/jsx-no-bind": 1,
     "react/jsx-no-duplicate-props": 1,
@@ -88,6 +89,7 @@ Finally, enable all of the rules that you would like to use.
 * [jsx-closing-bracket-location](docs/rules/jsx-closing-bracket-location.md): Validate closing bracket location in JSX
 * [jsx-curly-spacing](docs/rules/jsx-curly-spacing.md): Enforce or disallow spaces inside of curly braces in JSX attributes
 * [jsx-indent-props](docs/rules/jsx-indent-props.md): Validate props indentation in JSX
+* [jsx-key](docs/rules/jsx-key.md): Validate JSX has key prop when in array or iterator
 * [jsx-max-props-per-line](docs/rules/jsx-max-props-per-line.md): Limit maximum of props on a single line in JSX
 * [jsx-no-bind](docs/rules/jsx-no-bind.md): Prevent usage of `.bind()` and arrow functions in JSX props
 * [jsx-no-duplicate-props](docs/rules/jsx-no-duplicate-props.md): Prevent duplicate props in JSX

docs/rules/jsx-key.md

@@ -0,0 +1,30 @@
+# Detect missing `key` prop (jsx-key)
+
+Warn if an element that likely requires a `key` prop--namely, one present in an
+array literal or an arrow function expression.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```jsx
+[<Hello />, <Hello />, <Hello />];
+
+data.map(x => <Hello>x</Hello>);
+```
+
+The following patterns are not considered warnings:
+
+```jsx
+[<Hello key="first" />, <Hello key="second" />, <Hello key="third" />];
+
+data.map((x, i) => <Hello key={i}>x</Hello>);
+```
+
+## When not to use
+
+If you are not using JSX then you can disable this rule.
+
+Also, if you have some prevalent situation where you use arrow functions to 
+return JSX that will not be held in an iterable, you may want to disable this 
+rule.

index.js

@@ -31,7 +31,8 @@ module.exports = {
     'jsx-closing-bracket-location': require('./lib/rules/jsx-closing-bracket-location'),
     'no-direct-mutation-state': require('./lib/rules/no-direct-mutation-state'),
     'forbid-prop-types': require('./lib/rules/forbid-prop-types'),
-    'prefer-es6-class': require('./lib/rules/prefer-es6-class')
+    'prefer-es6-class': require('./lib/rules/prefer-es6-class'),
+    'jsx-key': require('./lib/rules/jsx-key')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -63,6 +64,7 @@ module.exports = {
     'jsx-closing-bracket-location': 0,
     'no-direct-mutation-state': 0,
     'forbid-prop-types': 0,
-    'prefer-es6-class': 0
+    'prefer-es6-class': 0,
+    'jsx-key': 0
   }
 };

lib/rules/jsx-key.js

@@ -0,0 +1,35 @@
+/**
+ * @fileoverview Report missing `key` props in iterators/collection literals.
+ * @author Ben Mosher
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  function isKeyProp(decl) {
+    if (decl.type === 'JSXSpreadAttribute') {
+      return false;
+    }
+    return (decl.name.name === 'key');
+  }
+
+  return {
+    JSXElement: function(node) {
+      if (node.openingElement.attributes.some(isKeyProp)) {
+        return; // has key prop
+      }
+
+      if (node.parent.type === 'ArrayExpression') {
+        context.report(node, 'Missing "key" prop for element in array');
+      }
+
+      if (node.parent.type === 'ArrowFunctionExpression') {
+        context.report(node, 'Missing "key" prop for element in iterator');
+      }
+    }
+  };
+};

tests/lib/rules/jsx-key.js

@@ -0,0 +1,42 @@
+/**
+ * @fileoverview Report missing `key` props in iterators/collection literals.
+ * @author Ben Mosher
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var rule = require('../../../lib/rules/jsx-key');
+var RuleTester = require('eslint').RuleTester;
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var ruleTester = new RuleTester();
+ruleTester.run('jsx-key', rule, {
+  valid: [
+    {code: '<App />;', ecmaFeatures: {jsx: true}},
+    {code: '[<App key={0} />, <App key={1} />];', ecmaFeatures: {jsx: true}},
+    {code: '[1, 2, 3].map(x => <App key={x} />);', ecmaFeatures: {jsx: true, arrowFunctions: true}}
+  ],
+  invalid: [
+    {code: '[<App />];',
+     errors: [{message: 'Missing "key" prop for element in array'}],
+     ecmaFeatures: {jsx: true}},
+
+    {code: '[<App {...key} />];',
+     errors: [{message: 'Missing "key" prop for element in array'}],
+     ecmaFeatures: {jsx: true}},
+
+    {code: '[<App key={0}/>, <App />];',
+     errors: [{message: 'Missing "key" prop for element in array'}],
+     ecmaFeatures: {jsx: true}},
+
+    {code: '[1, 2 ,3].map(x => <App />);',
+     errors: [{message: 'Missing "key" prop for element in iterator'}],
+     ecmaFeatures: {jsx: true, arrowFunctions: true}}
+  ]
+});