Merge pull request #78 from yannickcr/rule-sort-comp

Add sort-comp rule (fixes #39)

Author: yannickcr

README.md

@@ -57,6 +57,7 @@ Finally, enable all of the rules that you would like to use.
     "react/prop-types": 1,
     "react/react-in-jsx-scope": 1,
     "react/self-closing-comp": 1,
+    "react/sort-comp": 1,
     "react/wrap-multilines": 1
   }
 }
@@ -79,6 +80,7 @@ Finally, enable all of the rules that you would like to use.
 * [prop-types](docs/rules/prop-types.md): Prevent missing props validation in a React component definition
 * [react-in-jsx-scope](docs/rules/react-in-jsx-scope.md): Prevent missing React when using JSX
 * [self-closing-comp](docs/rules/self-closing-comp.md): Prevent extra closing tags for components without children
+* [sort-comp](docs/rules/sort-comp.md): Enforce component methods order
 * [wrap-multilines](docs/rules/wrap-multilines.md): Prevent missing parentheses around multilines JSX
 
 ## To Do

docs/rules/sort-comp.md

@@ -0,0 +1,163 @@
+# Enforce component methods order (sort-comp)
+
+When creating React components it is more convenient to always follow the same organisation for methods order to helps you to easily find lifecyle methods, event handlers, etc.
+
+## Rule Details
+
+With default configuration the following organisation must be followed:
+
+  1. lifecycle methods: `displayName` ,`propTypes` ,`mixins` ,`statics` ,`getDefaultProps` ,`getInitialState` ,`componentWillMount` ,`componentDidMount` ,`componentWillReceiveProps` ,`shouldComponentUpdate` ,`componentWillUpdate` ,`componentDidUpdate` ,`componentWillUnmount` (in this order).
+  2. custom methods
+  3. `render` method
+
+The following patterns are considered warnings:
+
+```js
+var Hello = React.createClass({
+  render: function() {
+    return <div>Hello</div>;
+  },
+  displayName : 'Hello'
+});
+```
+
+The following patterns are not considered warnings:
+
+```js
+var Hello = React.createClass({
+  displayName : 'Hello',
+  render: function() {
+    return <div>Hello</div>;
+  }
+});
+```
+
+## Rule Options
+
+This rule can take one argument to customize the components organisation.
+
+```
+...
+"react/sort-comp": [<enabled>, { order: <order>, groups: <groups> }]
+...
+```
+
+* `enabled`: for enabling the rule. 0=off, 1=warn, 2=error. Defaults to 0.
+* `order`: optional array of methods to validate.
+* `groups`: optional object of methods groups.
+
+The default configuration is:
+
+```js
+{
+  order: [
+    'lifecycle',
+    'everything-else',
+    'render'
+  ],
+  groups: {
+    lifecycle: [
+      'displayName',
+      'propTypes',
+      'mixins',
+      'statics',
+      'getDefaultProps',
+      'getInitialState',
+      'componentWillMount',
+      'componentDidMount',
+      'componentWillReceiveProps',
+      'shouldComponentUpdate',
+      'componentWillUpdate',
+      'componentDidUpdate',
+      'componentWillUnmount'
+    ]
+  }
+}
+```
+
+* `lifecycle` is refering to the `lifecycle` group defined in `groups`.
+* `everything-else` is a special group that match all the methods that do not match any of the other groups.
+* `render` is refering to the `render` method.
+
+You can override this configuration to match your needs.
+
+For example, if you want to place your event handlers (`onClick`, `onSubmit`, etc.) before `render` but the other methods after it:
+
+```js
+"react/sort-comp": [1, {
+  order: [
+    'lifecycle',
+    '/^on.+$/',
+    'render',
+    'everything-else'
+  ]
+}]
+```
+
+With the above configuration, the following patterns are considered warnings:
+
+```js
+var Hello = React.createClass({
+  render: function() {
+    return <div>Hello</div>;
+  },
+  onClick: function() {}
+});
+```
+
+With the above configuration, the following patterns are not considered warnings:
+
+```js
+var Hello = React.createClass({
+  onClick: function() {},
+  render: function() {
+    return <div>Hello</div>;
+  }
+});
+```
+
+If you want to split your `render` method into smaller ones and keep them just before render:
+
+```js
+"react/sort-comp": [1, {
+  order: [
+    'lifecycle',
+    'everything-else',
+    'rendering',
+  ],
+  groups: {
+    rendering: [
+      '/^render.+$/',
+      'render'
+    ]
+  }
+}]
+```
+
+With the above configuration, the following patterns are considered warnings:
+
+```js
+var Hello = React.createClass({
+  renderButton: function() {},
+  onClick: function() {},
+  render: function() {
+    return <div>Hello</div>;
+  }
+});
+```
+
+With the above configuration, the following patterns are not considered warnings:
+
+```js
+var Hello = React.createClass({
+  onClick: function() {},
+  renderButton: function() {},
+  render: function() {
+    return <div>Hello</div>;
+  }
+});
+```
+
+## When Not To Use It
+
+This rule is a formatting preference and not following it won't negatively affect the quality of your code. If components organisation isn't a part of your coding standards, then you can leave this rule off.

index.js

@@ -17,7 +17,8 @@ module.exports = {
     'no-unknown-property': require('./lib/rules/no-unknown-property'),
     'jsx-sort-props': require('./lib/rules/jsx-sort-props'),
     'jsx-sort-prop-types': require('./lib/rules/jsx-sort-prop-types'),
-    'jsx-boolean-value': require('./lib/rules/jsx-boolean-value')
+    'jsx-boolean-value': require('./lib/rules/jsx-boolean-value'),
+    'sort-comp': require('./lib/rules/sort-comp')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -35,6 +36,7 @@ module.exports = {
     'no-unknown-property': 0,
     'jsx-sort-props': 0,
     'jsx-sort-prop-types': 0,
-    'jsx-boolean-value': 0
+    'jsx-boolean-value': 0,
+    'sort-comp': 0
   }
 };