[New] jsx-indent: Add indentLogicalExpressions option

Author: mdnsk

docs/rules/jsx-indent.md

@@ -31,11 +31,11 @@ The following patterns are considered warnings:
 ## Rule Options
 
 It takes an option as the second parameter which can be `"tab"` for tab-based indentation or a positive number for space indentations.
-To enable checking the indentation of attributes, use the third parameter to turn on the `checkAttributes` option (default is false).
+To enable checking the indentation of attributes or add indentation to logical expressions, use the third parameter to turn on the `checkAttributes` (default is false) and `indentLogicalExpressions` (default is false) respectively.
 
 ```js
 ...
-"react/jsx-indent": [<enabled>, 'tab'|<number>, {checkAttributes: <boolean>}]
+"react/jsx-indent": [<enabled>, 'tab'|<number>, {checkAttributes: <boolean>, indentLogicalExpressions: <boolean>}]
 ...
 ```
 
@@ -61,6 +61,13 @@ The following patterns are considered warnings:
 }
   />
 </App>
+
+// [2, 2, {indentLogicalExpressions: true}]
+<App>
+  {condition && (
+  <Hello />
+  )}
+</App>
 ```
 
 The following patterns are **not** warnings:
@@ -92,6 +99,13 @@ The following patterns are **not** warnings:
 }
   />
 </App>
+
+// [2, 2, {indentLogicalExpressions: true}]
+<App>
+  {condition && (
+    <Hello />
+  )}
+</App>
 ```
 
 ## When not to use

lib/rules/jsx-indent.js

@@ -55,6 +55,9 @@ module.exports = {
       properties: {
         checkAttributes: {
           type: 'boolean'
+        },
+        indentLogicalExpressions: {
+          type: 'boolean'
         }
       },
       additionalProperties: false
@@ -83,6 +86,7 @@ module.exports = {
     const indentChar = indentType === 'space' ? ' ' : '\t';
     const options = context.options[1] || {};
     const checkAttributes = options.checkAttributes || false;
+    const indentLogicalExpressions = options.indentLogicalExpressions || false;
 
     /**
      * Responsible for fixing the indentation issue fix
@@ -176,7 +180,8 @@ module.exports = {
         node.parent &&
         node.parent.parent &&
         node.parent.parent.type === 'LogicalExpression' &&
-        node.parent.parent.right === node.parent
+        node.parent.parent.right === node.parent &&
+        !indentLogicalExpressions
       );
     }
 

tests/lib/rules/jsx-indent.js

@@ -832,6 +832,19 @@ const Component = () => (
     }
     `,
     options: [2, {checkAttributes: true}]
+  }, {
+    code: `
+    function Foo() {
+      return (
+        <div>
+          {condition && (
+            <p>Bar</p>
+          )}
+        </div>
+      );
+    }
+    `,
+    options: [2, {indentLogicalExpressions: true}]
   }],
 
   invalid: [{
@@ -1652,5 +1665,32 @@ const Component = () => (
     errors: [
       {message: 'Expected indentation of 2 tab characters but found 0.'}
     ]
+  }, {
+    code: `
+    function Foo() {
+      return (
+        <div>
+          {condition && (
+          <p>Bar</p>
+          )}
+        </div>
+      );
+    }
+    `,
+    output: `
+    function Foo() {
+      return (
+        <div>
+          {condition && (
+            <p>Bar</p>
+          )}
+        </div>
+      );
+    }
+    `,
+    options: [2, {indentLogicalExpressions: true}],
+    errors: [
+      {message: 'Expected indentation of 12 space characters but found 10.'}
+    ]
   }]
 });