Add display-name rule

Author: Yannick Croissant

README.md

@@ -44,21 +44,23 @@ Finally, enable all of the rules that you would like to use.
 {
   "rules": {
     "react/no-multi-comp": 1,
-    "react/prop-types": 1
+    "react/prop-types": 1,
+    "react/display-name": 1
   }
 }
 ```
 
 # List of supported rules
 
-* no-multi-comp: Prevent multiple component definition per file
-* prop-types: Prevent missing propTypes in a React component definition
+* [no-multi-comp](docs/rules/no-multi-comp.md): Prevent multiple component definition per file
+* [prop-types](docs/rules/prop-types.md): Prevent missing propTypes in a React component definition
+* [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
 
-## Not supported yet
+## To Do
 
-* display-name: Prevent missing displayName in a React component definition
 * no-deprecated: Prevent usage of deprecated methods ([React 0.12 Updated API](http://facebook.github.io/react/blog/2014/10/28/react-v0.12.html#new-terminology-amp-updated-apis))
 * no-classic: Prevent usage of "classic" methods ([#2700](https://github.com/facebook/react/pull/2700))
+* [Implement rules from David Chang's React Style Guide](https://reactjsnews.com/react-style-guide-patterns-i-like)
 
 [Any rule idea is welcome !](https://github.com/yannickcr/eslint-plugin-react/issues)
 

docs/rules/display-name.md

@@ -0,0 +1,30 @@
+# Prevent missing displayName in a React component definition (display-name)
+
+DisplayName allows you to name your component. This name is used by React in debugging messages.
+
+## Rule Details
+
+The following patterns are considered warnings:
+
+```js
+var Hello = React.createClass({
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+```
+
+The following patterns are not warnings:
+
+```js
+var Hello = React.createClass({
+  displayName: 'Hello',
+  render: function() {
+    return <div>Hello {this.props.name}</div>;
+  }
+});
+```
+
+## When Not To Use It
+
+If you are using JSX this value is already automatically set and it is safe for you to disable this rule.

index.js

@@ -3,10 +3,12 @@
 module.exports = {
   rules: {
     'no-multi-comp': require('./lib/rules/no-multi-comp'),
-    'prop-types': require('./lib/rules/prop-types')
+    'prop-types': require('./lib/rules/prop-types'),
+    'display-name': require('./lib/rules/display-name')
   },
   rulesConfig: {
     'no-multi-comp': 0,
-    'prop-types': 0
+    'prop-types': 0,
+    'display-name': 0
   }
 };

lib/rules/display-name.js

@@ -0,0 +1,47 @@
+/**
+ * @fileoverview Prevent missing displayName in a React component definition
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  var hasDisplayName = false;
+
+  // --------------------------------------------------------------------------
+  // Public
+  // --------------------------------------------------------------------------
+
+  return {
+
+    'ObjectExpression': function(node) {
+
+      if (!node.parent.callee || node.parent.callee.object.name !== 'React' || node.parent.callee.property.name !== 'createClass') {
+        return;
+      }
+
+      node.properties.forEach(function(property) {
+        var keyName = property.key.name || property.key.value;
+        if (keyName === 'displayName') {
+          hasDisplayName = true;
+        }
+      });
+
+    },
+
+    'ObjectExpression:exit': function(node) {
+      if (!node.parent.callee || node.parent.callee.object.name !== 'React' || node.parent.callee.property.name !== 'createClass') {
+        return;
+      }
+      if (!hasDisplayName) {
+        context.report(node, 'Component definition is missing display name');
+      }
+      hasDisplayName = false;
+    }
+  };
+
+};

tests/lib/rules/display-name.js

@@ -0,0 +1,43 @@
+/**
+ * @fileoverview Prevent missing displayName in a React component definition
+ * @author Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+eslintTester.addRuleTest('lib/rules/display-name', {
+
+    valid: [
+        {
+            code: 'var Hello = React.createClass({displayName: \'Hello\',render: function() {return <div>Hello {this.props.name}</div>;}});',
+            settings: {
+                ecmascript: 6,
+                jsx: true
+            }
+        }
+    ],
+
+    invalid: [
+        {
+            code: 'var Hello = React.createClass({render: function() {return <div>Hello {this.props.name}</div>;}});',
+            settings: {
+                ecmascript: 6,
+                jsx: true
+            },
+            errors: [{
+                message: 'Component definition is missing display name'
+            }]
+        }
+    ]
+});