jsx-sort-props noSortAlphabetically option

Closes jsx-eslint#541 Closes jsx-eslint#786
markus101 · Nov 25, 2016 · 340b93c · 340b93c
1 parent 0a40c27
commit 340b93c
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git a/docs/rules/jsx-sort-props.md b/docs/rules/jsx-sort-props.md
@@ -27,7 +27,8 @@ The following patterns are considered okay and do not cause warnings:
   "callbacksLast": <boolean>,
   "shorthandFirst": <boolean>,
   "shorthandLast": <boolean>,
-  "ignoreCase": <boolean>
+  "ignoreCase": <boolean>,
+  "noSortAlphabetically": <boolean>
 }]
 ...
 ```
@@ -66,6 +67,14 @@ When `true`, short hand props must be listed after all other props (unless `call
 <Hello name="John" tel={5555555} active validate />
 ```
 
+### `noSortAlphabetically`
+
+When `true`, alphabetical order is not enforced:
+
+```js
+<Hello tel={5555555} name="John" />
+```
+
 ## When not to use
 
 This rule is a formatting preference and not following it won't negatively affect the quality of your code. If alphabetizing props isn't a part of your coding standards, then you can leave this rule off.
diff --git a/lib/rules/jsx-sort-props.js b/lib/rules/jsx-sort-props.js
@@ -40,6 +40,10 @@ module.exports = {
         },
         ignoreCase: {
           type: 'boolean'
+        },
+        // Whether alphabetical sorting should be enforced
+        noSortAlphabetically: {
+          type: 'boolean'
         }
       },
       additionalProperties: false
@@ -53,6 +57,7 @@ module.exports = {
     var callbacksLast = configuration.callbacksLast || false;
     var shorthandFirst = configuration.shorthandFirst || false;
     var shorthandLast = configuration.shorthandLast || false;
+    var noSortAlphabetically = configuration.noSortAlphabetically || false;
 
     return {
       JSXOpeningElement: function(node) {
@@ -114,7 +119,7 @@ module.exports = {
             }
           }
 
-          if (currentPropName < previousPropName) {
+          if (!noSortAlphabetically && currentPropName < previousPropName) {
             context.report({
               node: decl,
               message: 'Props should be sorted alphabetically'

diff --git a/tests/lib/rules/jsx-sort-props.js b/tests/lib/rules/jsx-sort-props.js
@@ -57,6 +57,12 @@ var shorthandAndCallbackLastArgs = [{
 var ignoreCaseArgs = [{
   ignoreCase: true
 }];
+var noSortAlphabeticallyArgs = [{
+  noSortAlphabetically: true
+}];
+var sortAlphabeticallyArgs = [{
+  noSortAlphabetically: false
+}];
 
 ruleTester.run('jsx-sort-props', rule, {
   valid: [
@@ -84,7 +90,10 @@ ruleTester.run('jsx-sort-props', rule, {
       code: '<App a="a" b="b" x y z onBar onFoo />;',
       options: shorthandAndCallbackLastArgs,
       parserOptions: parserOptions
-    }
+    },
+    // noSortAlphabetically
+    {code: '<App a b />;', options: noSortAlphabeticallyArgs, parserOptions: parserOptions},
+    {code: '<App b a />;', options: noSortAlphabeticallyArgs, parserOptions: parserOptions}
   ],
   invalid: [
     {code: '<App b a />;', errors: [expectedError], parserOptions: parserOptions},
@@ -122,6 +131,7 @@ ruleTester.run('jsx-sort-props', rule, {
       errors: [shorthandAndCallbackLastArgs],
       options: shorthandLastArgs,
       parserOptions: parserOptions
-    }
+    },
+    {code: '<App b a />;', errors: [expectedError], options: sortAlphabeticallyArgs, parserOptions: parserOptions}
   ]
 });