Skip to content

Commit 899b446

Browse files
jomastijomasti
committed
Check parentheses with new lines for multiline JSX
This changes the options from a boolean to an enum with three possible values: `ignore`, `parens`, and `parens-new-line`. Using `ignore` is like the previous `false` while `parens` is like the previous `true`. The new option (`parens-new-line`) will check that the parentheses around the multiline JSX are on separate lines for better readability.
1 parent a120758 commit 899b446

File tree

3 files changed

+424
-73
lines changed

3 files changed

+424
-73
lines changed

‎docs/rules/jsx-wrap-multilines.md

Lines changed: 173 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -6,16 +6,20 @@ Wrapping multiline JSX in parentheses can improve readability and/or convenience
66

77
## Rule Details
88

9-
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).
9+
This rule optionally takes a second parameter in the form of an object, containing places to apply the rule. The four possible keys are `declaration`, `assignment`, `return`, and `arrow`. The three possible values are `ignore`, `parens`, and `parens-new-line`. By default, all the syntax listed below will be checked with the `parens` option, but these can be explicitly changed. Any syntax type missing in the object will follow the default behavior (`parens`).
1010

11-
There are the possible syntax available:
11+
The default values are:
1212

13-
* `declaration`
14-
* `assignment`
15-
* `return`
16-
* `arrow`
13+
```json
14+
{
15+
"declaration": "parens",
16+
"assignment": "parens",
17+
"return": "parens",
18+
"arrow": "parens"
19+
}
20+
```
1721

18-
The following patterns are considered warnings:
22+
The following patterns are considered warnings when using `parens` or `parens-new-line`:
1923

2024
```jsx
2125
var Hello = createReactClass({
@@ -27,6 +31,18 @@ var Hello = createReactClass({
2731
});
2832
```
2933

34+
The following patterns are considered warnings when using `parens-new-line`:
35+
36+
```jsx
37+
var Hello = createReactClass({
38+
render: function() {
39+
return (<div>
40+
<p>Hello {this.props.name}</p>
41+
</div>);
42+
}
43+
});
44+
```
45+
3046
The following patterns are not considered warnings:
3147

3248
```jsx
@@ -43,15 +59,17 @@ var Hello = createReactClass({
4359
});
4460
```
4561

46-
The following patterns are considered warnings when configured `{declaration: true}`.
62+
### `declaration`
63+
64+
The following patterns are considered warnings when configured `{declaration: "parens"}`.
4765

4866
```jsx
4967
var hello = <div>
5068
<p>Hello</p>
5169
</div>;
5270
```
5371

54-
The following patterns are not considered warnings when configured `{declaration: true}`.
72+
The following patterns are not considered warnings when configured `{declaration: "parens"}`.
5573

5674
```jsx
5775
var hello = (
@@ -61,7 +79,39 @@ var hello = (
6179
);
6280
```
6381

64-
The following patterns are considered warnings when configured `{assignment: true}`.
82+
```jsx
83+
var hello = (<div>
84+
<p>Hello</p>
85+
</div>);
86+
```
87+
88+
The following patterns are considered warnings when configured `{declaration: "parens-new-line"}`.
89+
90+
```jsx
91+
var hello = <div>
92+
<p>Hello</p>
93+
</div>;
94+
```
95+
96+
```jsx
97+
var hello = (<div>
98+
<p>Hello</p>
99+
</div>);
100+
```
101+
102+
The following patterns are not considered warnings when configured `{declaration: "parens-new-line"}`.
103+
104+
```jsx
105+
var hello = (
106+
<div>
107+
<p>Hello</p>
108+
</div>
109+
);
110+
```
111+
112+
### `assignment`
113+
114+
The following patterns are considered warnings when configured `{assignment: "parens"}`.
65115

66116
```jsx
67117
var hello;
@@ -70,7 +120,7 @@ hello = <div>
70120
</div>;
71121
```
72122

73-
The following patterns are not considered warnings when configured `{assignment: true}`.
123+
The following patterns are not considered warnings when configured `{assignment: "parens"}`.
74124

75125
```jsx
76126
var hello;
@@ -80,7 +130,44 @@ hello = (
80130
</div>
81131
);
82132
```
83-
The following patterns are considered warnings when configured `{return: true}`.
133+
134+
```jsx
135+
var hello;
136+
hello = (<div>
137+
<p>Hello</p>
138+
</div>);
139+
```
140+
141+
The following patterns are considered warnings when configured `{assignment: "parens-new-line"}`.
142+
143+
```jsx
144+
var hello;
145+
hello = <div>
146+
<p>Hello</p>
147+
</div>;
148+
```
149+
150+
```jsx
151+
var hello;
152+
hello = (<div>
153+
<p>Hello</p>
154+
</div>);
155+
```
156+
157+
The following patterns are not considered warnings when configured `{assignment: "parens-new-line"}`.
158+
159+
```jsx
160+
var hello;
161+
hello = (
162+
<div>
163+
<p>Hello</p>
164+
</div>
165+
);
166+
```
167+
168+
### `return`
169+
170+
The following patterns are considered warnings when configured `{return: "parens"}`.
84171

85172
```jsx
86173
function hello() {
@@ -90,7 +177,45 @@ function hello() {
90177
}
91178
```
92179

93-
The following patterns are not considered warnings when configured `{return: true}`.
180+
The following patterns are not considered warnings when configured `{return: "parens"}`.
181+
182+
```jsx
183+
function hello() {
184+
return (
185+
<div>
186+
<p>Hello</p>
187+
</div>
188+
);
189+
}
190+
```
191+
192+
```jsx
193+
function hello() {
194+
return (<div>
195+
<p>Hello</p>
196+
</div>);
197+
}
198+
```
199+
200+
The following patterns are considered warnings when configured `{return: "parens-new-line"}`.
201+
202+
```jsx
203+
function hello() {
204+
return <div>
205+
<p>Hello</p>
206+
</div>;
207+
}
208+
```
209+
210+
```jsx
211+
function hello() {
212+
return (<div>
213+
<p>Hello</p>
214+
</div>);
215+
}
216+
```
217+
218+
The following patterns are not considered warnings when configured `{return: "parens-new-line"}`.
94219

95220
```jsx
96221
function hello() {
@@ -101,15 +226,48 @@ function hello() {
101226
);
102227
}
103228
```
104-
The following patterns are considered warnings when configured `{arrow: true}`.
229+
230+
### `arrow`
231+
232+
The following patterns are considered warnings when configured `{arrow: "parens"}`.
105233

106234
```jsx
107235
var hello = () => <div>
108236
<p>World</p>
109237
</div>;
110238
```
111239

112-
The following patterns are not considered warnings when configured `{arrow: true}`.
240+
The following patterns are not considered warnings when configured `{arrow: "parens"}`.
241+
242+
```jsx
243+
var hello = () => (
244+
<div>
245+
<p>World</p>
246+
</div>
247+
);
248+
```
249+
250+
```jsx
251+
var hello = () => (<div>
252+
<p>World</p>
253+
</div>);
254+
```
255+
256+
The following patterns are considered warnings when configured `{arrow: "parens-new-line"}`.
257+
258+
```jsx
259+
var hello = () => <div>
260+
<p>World</p>
261+
</div>;
262+
```
263+
264+
```jsx
265+
var hello = () => (<div>
266+
<p>World</p>
267+
</div>);
268+
```
269+
270+
The following patterns are not considered warnings when configured `{arrow: "parens-new-line"}`.
113271

114272
```jsx
115273
var hello = () => (

0 commit comments

Comments
 (0)