Repository: jsx-eslint/eslint-plugin-react (JavaScript)

Issue:
jsx-indent: add optional indentation to logical expressions
Hello!
In out team we use following style of logical expressions:
```jsx
<App>
  {condition && (
    <Hello />
  )}
</App>
```
but `jsx-indent` rule misses indentation inside of the logical expression, so after running `eslint` with `--fix` options it looks like this:
```jsx
<App>
  {condition && (
  <Hello />
  )}
</App>
```

So, may be adding of an extra option, will solve my problem? I think it would be something like this:
```js
// .eslintrc.js
module.exports = {
  // ...
  rules: {
    'react/jsx-indent': ['error', 2, {
      indentLogicalExpressions: true,
    }],
  }
}
```


Discussion:

Patch:
diff --git a/docs/rules/jsx-indent.md b/docs/rules/jsx-indent.md
index 44bebb1fb7..85351347b6 100644
--- a/docs/rules/jsx-indent.md
+++ b/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
diff --git a/lib/rules/jsx-indent.js b/lib/rules/jsx-indent.js
index 2076704ad1..d0f237ff45 100644
--- a/lib/rules/jsx-indent.js
+++ b/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
       );
     }
 


Test patch:
diff --git a/tests/lib/rules/jsx-indent.js b/tests/lib/rules/jsx-indent.js
index 43d6a80a70..bb5429cab6 100644
--- a/tests/lib/rules/jsx-indent.js
+++ b/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.'}
+    ]
   }]
 });