Skip to content

Commit d617fbb

Browse files
rzzfFloEdelmann
rzzf
and
FloEdelmann
authored
feat(vue/no-negated-v-if-condition): upgrade rule suggestion to autofix (#2984)
Co-authored-by: Flo Edelmann <git@flo-edelmann.de>
1 parent 16d17a4 commit d617fbb

File tree

5 files changed

+73
-152
lines changed

5 files changed

+73
-152
lines changed

‎.changeset/rich-zebras-type.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"eslint-plugin-vue": minor
3+
---
4+
5+
Changed `vue/no-negated-v-if-condition` suggestion to autofix

‎docs/rules/index.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -238,7 +238,7 @@ For example:
238238
| [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
239239
| [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
240240
| [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class | | :hammer: |
241-
| [vue/no-negated-v-if-condition] | disallow negated conditions in v-if/v-else | :bulb: | :hammer: |
241+
| [vue/no-negated-v-if-condition] | disallow negated conditions in v-if/v-else | :wrench: | :hammer: |
242242
| [vue/no-potential-component-option-typo] | disallow a potential typo in your component property | :bulb: | :hammer: |
243243
| [vue/no-ref-object-reactivity-loss] | disallow usages of ref objects that can lead to loss of reactivity | | :warning: |
244244
| [vue/no-restricted-block] | disallow specific block | | :hammer: |

‎docs/rules/no-negated-v-if-condition.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@ since: v10.4.0
1010

1111
> disallow negated conditions in v-if/v-else
1212
13-
- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
13+
- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
1414

1515
## :book: Rule Details
1616

1717
This rule disallows negated conditions in `v-if` and `v-else-if` directives which have an `v-else` branch.
1818

1919
Negated conditions make the code less readable. When there's an `else` clause, it's better to use a positive condition and switch the branches.
2020

21-
<eslint-code-block :rules="{'vue/no-negated-v-if-condition': ['error']}">
21+
<eslint-code-block fix :rules="{'vue/no-negated-v-if-condition': ['error']}">
2222

2323
```vue
2424
<template>

‎lib/rules/no-negated-v-if-condition.js‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -76,13 +76,10 @@ module.exports = {
7676
categories: undefined,
7777
url: 'https://eslint.vuejs.org/rules/no-negated-v-if-condition.html'
7878
},
79-
fixable: null,
80-
hasSuggestions: true,
79+
fixable: 'code',
8180
schema: [],
8281
messages: {
83-
negatedCondition: 'Unexpected negated condition in v-if with v-else.',
84-
fixNegatedCondition:
85-
'Convert to positive condition and swap if/else blocks.'
82+
negatedCondition: 'Unexpected negated condition in v-if with v-else.'
8683
}
8784
},
8885
/** @param {RuleContext} context */
@@ -152,14 +149,7 @@ module.exports = {
152149
context.report({
153150
node: expression,
154151
messageId: 'negatedCondition',
155-
suggest: [
156-
{
157-
messageId: 'fixNegatedCondition',
158-
*fix(fixer) {
159-
yield* swapElements(fixer, element, elseElement, expression)
160-
}
161-
}
162-
]
152+
fix: (fixer) => swapElements(fixer, element, elseElement, expression)
163153
})
164154
}
165155

‎tests/lib/rules/no-negated-v-if-condition.js‎

Lines changed: 62 additions & 136 deletions
Original file line numberDiff line numberDiff line change
@@ -153,24 +153,19 @@ tester.run('no-negated-v-if-condition', rule, {
153153
<span v-else class="secondary">Alternative</span>
154154
</template>
155155
`,
156+
output: `
157+
<template>
158+
<span v-if="foo" class="secondary">Alternative</span>
159+
<div v-else class="primary">Content</div>
160+
</template>
161+
`,
156162
errors: [
157163
{
158164
messageId: 'negatedCondition',
159165
line: 3,
160166
column: 20,
161167
endLine: 3,
162-
endColumn: 24,
163-
suggestions: [
164-
{
165-
messageId: 'fixNegatedCondition',
166-
output: `
167-
<template>
168-
<span v-if="foo" class="secondary">Alternative</span>
169-
<div v-else class="primary">Content</div>
170-
</template>
171-
`
172-
}
173-
]
168+
endColumn: 24
174169
}
175170
]
176171
},
@@ -182,24 +177,19 @@ tester.run('no-negated-v-if-condition', rule, {
182177
<span v-else id="positive">Otherwise</span>
183178
</template>
184179
`,
180+
output: `
181+
<template>
182+
<span v-if="(foo && bar)" id="positive">Otherwise</span>
183+
<div v-else id="negated">Negated condition</div>
184+
</template>
185+
`,
185186
errors: [
186187
{
187188
messageId: 'negatedCondition',
188189
line: 3,
189190
column: 20,
190191
endLine: 3,
191-
endColumn: 33,
192-
suggestions: [
193-
{
194-
messageId: 'fixNegatedCondition',
195-
output: `
196-
<template>
197-
<span v-if="(foo && bar)" id="positive">Otherwise</span>
198-
<div v-else id="negated">Negated condition</div>
199-
</template>
200-
`
201-
}
202-
]
192+
endColumn: 33
203193
}
204194
]
205195
},
@@ -211,24 +201,19 @@ tester.run('no-negated-v-if-condition', rule, {
211201
<div v-else>Equal</div>
212202
</template>
213203
`,
204+
output: `
205+
<template>
206+
<div v-if="a == b">Equal</div>
207+
<div v-else>Not equal</div>
208+
</template>
209+
`,
214210
errors: [
215211
{
216212
messageId: 'negatedCondition',
217213
line: 3,
218214
column: 20,
219215
endLine: 3,
220-
endColumn: 26,
221-
suggestions: [
222-
{
223-
messageId: 'fixNegatedCondition',
224-
output: `
225-
<template>
226-
<div v-if="a == b">Equal</div>
227-
<div v-else>Not equal</div>
228-
</template>
229-
`
230-
}
231-
]
216+
endColumn: 26
232217
}
233218
]
234219
},
@@ -240,24 +225,19 @@ tester.run('no-negated-v-if-condition', rule, {
240225
<div v-else>Strictly equal</div>
241226
</template>
242227
`,
228+
output: `
229+
<template>
230+
<div v-if="a === b">Strictly equal</div>
231+
<div v-else>Strictly not equal</div>
232+
</template>
233+
`,
243234
errors: [
244235
{
245236
messageId: 'negatedCondition',
246237
line: 3,
247238
column: 20,
248239
endLine: 3,
249-
endColumn: 27,
250-
suggestions: [
251-
{
252-
messageId: 'fixNegatedCondition',
253-
output: `
254-
<template>
255-
<div v-if="a === b">Strictly equal</div>
256-
<div v-else>Strictly not equal</div>
257-
</template>
258-
`
259-
}
260-
]
240+
endColumn: 27
261241
}
262242
]
263243
},
@@ -270,25 +250,20 @@ tester.run('no-negated-v-if-condition', rule, {
270250
<p v-else class="default">Default</p>
271251
</template>
272252
`,
253+
output: `
254+
<template>
255+
<div v-if="foo" class="first">First</div>
256+
<p v-else-if="bar" class="default">Default</p>
257+
<span v-else class="second">Second</span>
258+
</template>
259+
`,
273260
errors: [
274261
{
275262
messageId: 'negatedCondition',
276263
line: 4,
277264
column: 26,
278265
endLine: 4,
279-
endColumn: 30,
280-
suggestions: [
281-
{
282-
messageId: 'fixNegatedCondition',
283-
output: `
284-
<template>
285-
<div v-if="foo" class="first">First</div>
286-
<p v-else-if="bar" class="default">Default</p>
287-
<span v-else class="second">Second</span>
288-
</template>
289-
`
290-
}
291-
]
266+
endColumn: 30
292267
}
293268
]
294269
},
@@ -301,25 +276,20 @@ tester.run('no-negated-v-if-condition', rule, {
301276
<p v-else data-default>Default</p>
302277
</template>
303278
`,
279+
output: `
280+
<template>
281+
<div v-if="!a" data-first>First</div>
282+
<p v-else-if="b" data-default>Default</p>
283+
<span v-else data-second>Second</span>
284+
</template>
285+
`,
304286
errors: [
305287
{
306288
messageId: 'negatedCondition',
307289
line: 4,
308290
column: 26,
309291
endLine: 4,
310-
endColumn: 28,
311-
suggestions: [
312-
{
313-
messageId: 'fixNegatedCondition',
314-
output: `
315-
<template>
316-
<div v-if="!a" data-first>First</div>
317-
<p v-else-if="b" data-default>Default</p>
318-
<span v-else data-second>Second</span>
319-
</template>
320-
`
321-
}
322-
]
292+
endColumn: 28
323293
}
324294
]
325295
},
@@ -331,24 +301,19 @@ tester.run('no-negated-v-if-condition', rule, {
331301
<span v-else class="span-class" span-attr="baz" span-attr2 :span-attr-3="baz">span contents</span>
332302
</template>
333303
`,
304+
output: `
305+
<template>
306+
<span v-if="condition" class="span-class" span-attr="baz" span-attr2 :span-attr-3="baz">span contents</span>
307+
<div v-else class="div-class" div-attr="foo" div-attr-2 :div-attr-3="foo">div contents</div>
308+
</template>
309+
`,
334310
errors: [
335311
{
336312
messageId: 'negatedCondition',
337313
line: 3,
338314
column: 20,
339315
endLine: 3,
340-
endColumn: 30,
341-
suggestions: [
342-
{
343-
messageId: 'fixNegatedCondition',
344-
output: `
345-
<template>
346-
<span v-if="condition" class="span-class" span-attr="baz" span-attr2 :span-attr-3="baz">span contents</span>
347-
<div v-else class="div-class" div-attr="foo" div-attr-2 :div-attr-3="foo">div contents</div>
348-
</template>
349-
`
350-
}
351-
]
316+
endColumn: 30
352317
}
353318
]
354319
},
@@ -366,17 +331,7 @@ tester.run('no-negated-v-if-condition', rule, {
366331
</section>
367332
</template>
368333
`,
369-
errors: [
370-
{
371-
messageId: 'negatedCondition',
372-
line: 3,
373-
column: 20,
374-
endLine: 3,
375-
endColumn: 26,
376-
suggestions: [
377-
{
378-
messageId: 'fixNegatedCondition',
379-
output: `
334+
output: `
380335
<template>
381336
<section v-if="outer" class="outer-else">
382337
<span v-if="!nested" class="nested-if">Nested if content</span>
@@ -387,57 +342,28 @@ tester.run('no-negated-v-if-condition', rule, {
387342
<p v-else class="inner-else">Inner else content</p>
388343
</div>
389344
</template>
390-
`
391-
}
392-
]
345+
`,
346+
errors: [
347+
{
348+
messageId: 'negatedCondition',
349+
line: 3,
350+
column: 20,
351+
endLine: 3,
352+
endColumn: 26
393353
},
394354
{
395355
messageId: 'negatedCondition',
396356
line: 4,
397357
column: 23,
398358
endLine: 4,
399-
endColumn: 29,
400-
suggestions: [
401-
{
402-
messageId: 'fixNegatedCondition',
403-
output: `
404-
<template>
405-
<div v-if="!outer" class="outer-if">
406-
<p v-if="inner" class="inner-else">Inner else content</p>
407-
<span v-else class="inner-if">Inner if content</span>
408-
</div>
409-
<section v-else class="outer-else">
410-
<span v-if="!nested" class="nested-if">Nested if content</span>
411-
<p v-else class="nested-else">Nested else content</p>
412-
</section>
413-
</template>
414-
`
415-
}
416-
]
359+
endColumn: 29
417360
},
418361
{
419362
messageId: 'negatedCondition',
420363
line: 8,
421364
column: 23,
422365
endLine: 8,
423-
endColumn: 30,
424-
suggestions: [
425-
{
426-
messageId: 'fixNegatedCondition',
427-
output: `
428-
<template>
429-
<div v-if="!outer" class="outer-if">
430-
<span v-if="!inner" class="inner-if">Inner if content</span>
431-
<p v-else class="inner-else">Inner else content</p>
432-
</div>
433-
<section v-else class="outer-else">
434-
<p v-if="nested" class="nested-else">Nested else content</p>
435-
<span v-else class="nested-if">Nested if content</span>
436-
</section>
437-
</template>
438-
`
439-
}
440-
]
366+
endColumn: 30
441367
}
442368
]
443369
}

0 commit comments

Comments
 (0)