diff --git a/docs/rules/jsx-wrap-multilines.md b/docs/rules/jsx-wrap-multilines.md
index d80bf70d04..26a8511997 100644
--- a/docs/rules/jsx-wrap-multilines.md
+++ b/docs/rules/jsx-wrap-multilines.md
@@ -6,7 +6,7 @@ Wrapping multiline JSX in parentheses can improve readability and/or convenience
## Rule Details
-This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. By default, all the syntax listed below will be checked, but these can be explicitly disabled. Any syntax type missing in the object will follow the default behavior (become enabled).
+This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. By default, all the syntax listed below will be checked except the conditionals, but these can be explicitly disabled. Any syntax type missing in the object will follow the default behavior (become enabled).
There are the possible syntax available:
@@ -14,6 +14,7 @@ There are the possible syntax available:
* `assignment`
* `return`
* `arrow`
+* `conditional` (not enabled by default)
The following patterns are considered warnings:
@@ -101,6 +102,7 @@ function hello() {
);
}
```
+
The following patterns are considered warnings when configured `{arrow: true}`.
```jsx
@@ -118,3 +120,27 @@ var hello = () => (
);
```
+
+The following patterns are considered warnings when configured `{conditional: true}`.
+
+```jsx
+
+ {myExpression &&
+
+ }
+
+```
+
+The following patterns are not considered warnings when configured `{conditional: true}`.
+
+```jsx
+
+ {myExpression && (
+
+ )}
+
+```
diff --git a/lib/rules/jsx-wrap-multilines.js b/lib/rules/jsx-wrap-multilines.js
index ca12f033e6..db8ed6b651 100644
--- a/lib/rules/jsx-wrap-multilines.js
+++ b/lib/rules/jsx-wrap-multilines.js
@@ -14,7 +14,8 @@ const DEFAULTS = {
declaration: true,
assignment: true,
return: true,
- arrow: true
+ arrow: true,
+ conditional: false
};
// ------------------------------------------------------------------------------
@@ -44,6 +45,9 @@ module.exports = {
},
arrow: {
type: 'boolean'
+ },
+ conditional: {
+ type: 'boolean'
}
},
additionalProperties: false
@@ -66,7 +70,7 @@ module.exports = {
return node.loc.start.line !== node.loc.end.line;
}
- function check(node) {
+ function check(node, fixerFn) {
if (!node || node.type !== 'JSXElement') {
return;
}
@@ -75,7 +79,7 @@ module.exports = {
context.report({
node: node,
message: 'Missing parentheses around multilines JSX',
- fix: function(fixer) {
+ fix: fixerFn || function(fixer) {
return fixer.replaceText(node, `(${sourceCode.getText(node)})`);
}
});
@@ -126,6 +130,19 @@ module.exports = {
}
},
+ JSXExpressionContainer: function(node) {
+ if (!isEnabled('conditional')) {
+ return;
+ }
+
+ const rightNode = node.expression.right;
+
+ check(rightNode, fixer => ([
+ fixer.insertTextAfterRange(sourceCode.getTokenBefore(rightNode).range, ' ('),
+ fixer.insertTextBeforeRange(sourceCode.getLastToken(node).range, ')')
+ ]));
+ },
+
'ArrowFunctionExpression:exit': function (node) {
const arrowBody = node.body;
diff --git a/tests/lib/rules/jsx-wrap-multilines.js b/tests/lib/rules/jsx-wrap-multilines.js
index 3d3b7bdc1d..1dac8fa1b1 100644
--- a/tests/lib/rules/jsx-wrap-multilines.js
+++ b/tests/lib/rules/jsx-wrap-multilines.js
@@ -134,6 +134,32 @@ const ARROW_NO_PAREN = `
;
`;
+const CONDITIONAL_SINGLE_LINE = `
+
+ {unreadMessages.length > 0 &&
Hello World
}
+
+`;
+
+const CONDITIONAL_PAREN = `
+
+ {unreadMessages.length > 0 && (
+
+ You have {unreadMessages.length} unread messages.
+
+ )}
+
+`;
+
+const CONDITIONAL_NO_PAREN = `
+
+ {unreadMessages.length > 0 &&
+
+ You have {unreadMessages.length} unread messages.
+
+ }
+
+`;
+
// ------------------------------------------------------------------------------
// Tests
// ------------------------------------------------------------------------------
@@ -187,6 +213,16 @@ ruleTester.run('jsx-wrap-multilines', rule, {
}, {
code: ARROW_NO_PAREN,
options: [{arrow: false}]
+ }, {
+ code: CONDITIONAL_PAREN
+ }, {
+ code: CONDITIONAL_PAREN,
+ options: [{conditional: true}]
+ }, {
+ code: CONDITIONAL_SINGLE_LINE,
+ options: [{conditional: true}]
+ }, {
+ code: CONDITIONAL_NO_PAREN
}
],
@@ -237,6 +273,11 @@ ruleTester.run('jsx-wrap-multilines', rule, {
output: ARROW_PAREN,
options: [{arrow: true}],
errors: [{message: 'Missing parentheses around multilines JSX'}]
+ }, {
+ code: CONDITIONAL_NO_PAREN,
+ output: CONDITIONAL_PAREN,
+ options: [{conditional: true}],
+ errors: [{message: 'Missing parentheses around multilines JSX'}]
}
]
});