Add jsx-sort-props rule (fixes #16)

Author: yannickcr

README.md

@@ -45,6 +45,7 @@ Finally, enable all of the rules that you would like to use.
     "react/display-name": 1,
     "react/jsx-quotes": 1,
     "react/jsx-no-undef": 1,
+    "react/jsx-sort-props": 1,
     "react/jsx-uses-react": 1,
     "react/jsx-uses-vars": 1,
     "react/no-did-mount-set-state": 1,
@@ -64,6 +65,7 @@ Finally, enable all of the rules that you would like to use.
 * [display-name](docs/rules/display-name.md): Prevent missing displayName in a React component definition
 * [jsx-quotes](docs/rules/jsx-quotes.md): Enforce quote style for JSX attributes
 * [jsx-no-undef](docs/rules/jsx-no-undef.md): Disallow undeclared variables in JSX
+* [jsx-sort-props](docs/rules/jsx-sort-props.md): Enforce props alphabetical sorting
 * [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
 * [no-did-mount-set-state](docs/rules/no-did-mount-set-state.md): Prevent usage of setState in componentDidMount

docs/rules/jsx-sort-props.md

@@ -0,0 +1,42 @@
+# Enforce props alphabetical sorting (jsx-sort-props)
+
+Some developers prefer to sort props names alphabetically to be able to find necessary props easier at the later time. Others feel that it adds complexity and becomes burden to maintain.
+
+## Rule Details
+
+This rule checks all JSX components and verifies that all props are sorted alphabetically. This rule is off by default.
+The default configuration of the rule is case-sensitive.
+
+The following patterns are considered warnings:
+
+```js
+<Hello lastName="Smith" firstName="John" />;
+```
+
+The following patterns are considered okay and do not cause warnings:
+
+```js
+<Hello firstName="John" lastName="Smith" />;
+```
+
+## Rule Options
+
+```js
+...
+"jsx-sort-props": [<enabled>, { "ignoreCase": <boolean> }]
+...
+```
+
+### `ignoreCase`
+
+When `true` the rule ignores the case-sensitivity of the props order.
+
+The following patterns are considered okay and do not cause warnings:
+
+```js
+<Hello name="John" Number="2" />;
+```
+
+## When not to use
+
+This rule is a formatting preference and not following it won't negatively affect the quality of your code. If you alphabetizing props isn't a part of your coding standards, then you can leave this rule off.

index.js

@@ -14,7 +14,8 @@ module.exports = {
     'jsx-uses-vars': require('./lib/rules/jsx-uses-vars'),
     'jsx-no-undef': require('./lib/rules/jsx-no-undef'),
     'jsx-quotes': require('./lib/rules/jsx-quotes'),
-    'no-unknown-property': require('./lib/rules/no-unknown-property')
+    'no-unknown-property': require('./lib/rules/no-unknown-property'),
+    'jsx-sort-props': require('./lib/rules/jsx-sort-props')
   },
   rulesConfig: {
     'jsx-uses-react': 0,
@@ -29,6 +30,7 @@ module.exports = {
     'jsx-uses-vars': 0,
     'jsx-no-undef': 0,
     'jsx-quotes': 0,
-    'no-unknown-property': 0
+    'no-unknown-property': 0,
+    'jsx-sort-props': 0
   }
 };

lib/rules/jsx-sort-props.js

@@ -0,0 +1,36 @@
+/**
+ * @fileoverview Enforce props alphabetical sorting
+ * @author Ilya Volodin, Yannick Croissant
+ */
+'use strict';
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = function(context) {
+
+  var configuration = context.options[0] || {};
+  var ignoreCase = configuration.ignoreCase || false;
+
+  return {
+    JSXOpeningElement: function(node) {
+      node.attributes.reduce(function(memo, decl) {
+        var lastPropName = memo.name.name;
+        var currenPropName = decl.name.name;
+
+        if (ignoreCase) {
+          lastPropName = lastPropName.toLowerCase();
+          currenPropName = currenPropName.toLowerCase();
+        }
+
+        if (currenPropName < lastPropName) {
+          context.report(decl, 'Props should be sorted alphabetically');
+          return memo;
+        }
+
+        return decl;
+      }, node.attributes[0]);
+    }
+  };
+};

tests/lib/rules/jsx-sort-props.js

@@ -0,0 +1,49 @@
+/**
+ * @fileoverview Enforce props alphabetical sorting
+ * @author Yannick Croissant
+ */
+
+'use strict';
+
+// -----------------------------------------------------------------------------
+// Requirements
+// -----------------------------------------------------------------------------
+
+var eslint = require('eslint').linter;
+var ESLintTester = require('eslint-tester');
+
+// -----------------------------------------------------------------------------
+// Tests
+// -----------------------------------------------------------------------------
+
+var eslintTester = new ESLintTester(eslint);
+
+var expectedError = {
+  message: 'Props should be sorted alphabetically',
+  type: 'JSXAttribute'
+};
+var ignoreCaseArgs = [1, {
+  ignoreCase: true
+}];
+var features = {
+  jsx: true
+};
+
+eslintTester.addRuleTest('lib/rules/jsx-sort-props', {
+  valid: [
+    {code: '<App />;', ecmaFeatures: features},
+    {code: '<App a b c />;', ecmaFeatures: features},
+    {code: '<App a="c" b="b" c="a" />;', ecmaFeatures: features},
+    {code: '<App A a />;', ecmaFeatures: features},
+    {code: '<App a A />;', args: ignoreCaseArgs, ecmaFeatures: features},
+    {code: '<App a B c />;', args: ignoreCaseArgs, ecmaFeatures: features},
+    {code: '<App A b C />;', args: ignoreCaseArgs, ecmaFeatures: features}
+  ],
+  invalid: [
+    {code: '<App b a />;', errors: [expectedError], ecmaFeatures: features},
+    {code: '<App a A />;', errors: [expectedError], ecmaFeatures: features},
+    {code: '<App B a />;', args: ignoreCaseArgs, errors: [expectedError], ecmaFeatures: features},
+    {code: '<App B A c />;', args: ignoreCaseArgs, errors: [expectedError], ecmaFeatures: features},
+    {code: '<App c="a" a="c" b="b" />;', errors: 2, ecmaFeatures: features}
+  ]
+});