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": [, 'tab'|, {checkAttributes: }] +"react/jsx-indent": [, 'tab'|, {checkAttributes: , indentLogicalExpressions: }] ... ``` @@ -61,6 +61,13 @@ The following patterns are considered warnings: } /> + +// [2, 2, {indentLogicalExpressions: true}] + + {condition && ( + + )} + ``` The following patterns are **not** warnings: @@ -92,6 +99,13 @@ The following patterns are **not** warnings: } /> + +// [2, 2, {indentLogicalExpressions: true}] + + {condition && ( + + )} + ``` ## 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 ); } 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 ( +
+ {condition && ( +

Bar

+ )} +
+ ); + } + `, + 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 ( +
+ {condition && ( +

Bar

+ )} +
+ ); + } + `, + output: ` + function Foo() { + return ( +
+ {condition && ( +

Bar

+ )} +
+ ); + } + `, + options: [2, {indentLogicalExpressions: true}], + errors: [ + {message: 'Expected indentation of 12 space characters but found 10.'} + ] }] });