@@ -15,13 +15,17 @@ This rule checks that conditionals expressions or logical expression match a cer
15
15
16
16
### Options
17
17
18
- This rule accepts an argument that can be one of two possible values:
18
+ This rule accepts as a first argument one of these two possible values:
19
19
20
20
- ` prefer-ternary `
21
21
- ` prefer-and-operator `
22
22
23
23
The default value is ` prefer-ternary ` .
24
24
25
+ It also accepts a second argument defining the options of the rule. Options are:
26
+
27
+ - ` exceptNotNullishAlternates ` : this option is taken into account only on ` prefer-and-operator ` mode
28
+
25
29
### ` prefer-ternary `
26
30
27
31
This option will check for logical expressions inside JSX code and if it finds a logical expression that follows the following shape:
@@ -106,13 +110,37 @@ function Component({ propA }) {
106
110
This option will check for conditional expressions inside JSX code and if it finds a conditional expression that follows the following shape:
107
111
108
112
``` jsx
109
- <> {identifier ? JSXElement | JSXFragment : null }< / >
113
+ <> {identifier ? JSXElement | JSXFragment : JSXElement | JSXFragment }< / >
110
114
```
111
115
112
116
And this would be auto fixable outputing the following code
113
117
114
118
``` jsx
115
- <> {identifier && JSXElement | JSXFragment}< / >
119
+ <>
120
+ {identifier && JSXElement | JSXFragment}
121
+ {! identifier && JSXElement | JSXFragment}
122
+ < / >
123
+ ```
124
+
125
+ Being two logical expressions where the first tests the condition and renders the consequent of the conditional expression and the second negates
126
+ the test and renders the alternate.
127
+
128
+ If a conditional expression is preferred over a logical expression when the alternate is not ` null ` or ` undefined ` you can tell the rule your
129
+ preferences by using the option ` exceptNotNullishAlternates ` as a second argument in the rule declaration on ` .eslintrc `
130
+
131
+ Example:
132
+
133
+ ``` javascript
134
+ // .eslintrc.js
135
+ module .exports = {
136
+ extends: [... ],
137
+ plugins: [... , ' jsx-conditional' ],
138
+ rules: {
139
+ ...
140
+ ' jsx-conditional/jsx-conditional' : [' error' , ' prefer-and-operator' , { exceptNotNullishAlternates: true }]
141
+ ...
142
+ }
143
+ }
116
144
```
117
145
118
146
### Examples
@@ -159,6 +187,8 @@ function Component({ propA }) {
159
187
}
160
188
```
161
189
190
+ This can be valid if you prefer by indicating it in the options argument ` { exceptNotNullishAlternates: true } ` , but without it the following code would be invalid.
191
+
162
192
``` jsx
163
193
function Component ({ propA }) {
164
194
return <> {propA ? < span> Hello< / span> : < span> Hello< / span> }< / > ;
0 commit comments