feat(vue/no-negated-v-if-condition): upgrade rule suggestion to autofix

.changeset/rich-zebras-type.md

@@ -0,0 +1,5 @@
+---
+"eslint-plugin-vue": minor
+---
+
+Changed `vue/no-negated-v-if-condition` suggestion to autofix

docs/rules/index.md

@@ -238,7 +238,7 @@ For example:
 | [vue/no-empty-component-block] | disallow the `<template>` `<script>` `<style>` block to be empty | :wrench: | :hammer: |
 | [vue/no-import-compiler-macros] | disallow importing Vue compiler macros | :wrench: | :warning: |
 | [vue/no-multiple-objects-in-class] | disallow passing multiple objects in an array to class |  | :hammer: |
-| [vue/no-negated-v-if-condition] | disallow negated conditions in v-if/v-else | :bulb: | :hammer: |
+| [vue/no-negated-v-if-condition] | disallow negated conditions in v-if/v-else | :wrench: | :hammer: |
 | [vue/no-potential-component-option-typo] | disallow a potential typo in your component property | :bulb: | :hammer: |
 | [vue/no-ref-object-reactivity-loss] | disallow usages of ref objects that can lead to loss of reactivity |  | :warning: |
 | [vue/no-restricted-block] | disallow specific block |  | :hammer: |

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

@@ -10,15 +10,15 @@ since: v10.4.0
 
 > disallow negated conditions in v-if/v-else
 
-- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+- :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.
 
 ## :book: Rule Details
 
 This rule disallows negated conditions in `v-if` and `v-else-if` directives which have an `v-else` branch.
 
 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.
 
-<eslint-code-block :rules="{'vue/no-negated-v-if-condition': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-negated-v-if-condition': ['error']}">
 
 ```vue
 <template>

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

@@ -76,13 +76,10 @@ module.exports = {
       categories: undefined,
       url: 'https://eslint.vuejs.org/rules/no-negated-v-if-condition.html'
     },
-    fixable: null,
-    hasSuggestions: true,
+    fixable: 'code',
     schema: [],
     messages: {
-      negatedCondition: 'Unexpected negated condition in v-if with v-else.',
-      fixNegatedCondition:
-        'Convert to positive condition and swap if/else blocks.'
+      negatedCondition: 'Unexpected negated condition in v-if with v-else.'
     }
   },
   /** @param {RuleContext} context */
@@ -152,14 +149,7 @@ module.exports = {
       context.report({
         node: expression,
         messageId: 'negatedCondition',
-        suggest: [
-          {
-            messageId: 'fixNegatedCondition',
-            *fix(fixer) {
-              yield* swapElements(fixer, element, elseElement, expression)
-            }
-          }
-        ]
+        fix: (fixer) => swapElements(fixer, element, elseElement, expression)
       })
     }
 

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

@@ -153,24 +153,19 @@ tester.run('no-negated-v-if-condition', rule, {
         <span v-else class="secondary">Alternative</span>
       </template>
       `,
+      output: `
+      <template>
+        <span v-if="foo" class="secondary">Alternative</span>
+        <div v-else class="primary">Content</div>
+      </template>
+      `,
       errors: [
         {
           messageId: 'negatedCondition',
           line: 3,
           column: 20,
           endLine: 3,
-          endColumn: 24,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <span v-if="foo" class="secondary">Alternative</span>
-        <div v-else class="primary">Content</div>
-      </template>
-      `
-            }
-          ]
+          endColumn: 24
         }
       ]
     },
@@ -182,24 +177,19 @@ tester.run('no-negated-v-if-condition', rule, {
         <span v-else id="positive">Otherwise</span>
       </template>
       `,
+      output: `
+      <template>
+        <span v-if="(foo && bar)" id="positive">Otherwise</span>
+        <div v-else id="negated">Negated condition</div>
+      </template>
+      `,
       errors: [
         {
           messageId: 'negatedCondition',
           line: 3,
           column: 20,
           endLine: 3,
-          endColumn: 33,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <span v-if="(foo && bar)" id="positive">Otherwise</span>
-        <div v-else id="negated">Negated condition</div>
-      </template>
-      `
-            }
-          ]
+          endColumn: 33
         }
       ]
     },
@@ -211,24 +201,19 @@ tester.run('no-negated-v-if-condition', rule, {
         <div v-else>Equal</div>
       </template>
       `,
+      output: `
+      <template>
+        <div v-if="a == b">Equal</div>
+        <div v-else>Not equal</div>
+      </template>
+      `,
       errors: [
         {
           messageId: 'negatedCondition',
           line: 3,
           column: 20,
           endLine: 3,
-          endColumn: 26,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <div v-if="a == b">Equal</div>
-        <div v-else>Not equal</div>
-      </template>
-      `
-            }
-          ]
+          endColumn: 26
         }
       ]
     },
@@ -240,24 +225,19 @@ tester.run('no-negated-v-if-condition', rule, {
         <div v-else>Strictly equal</div>
       </template>
       `,
+      output: `
+      <template>
+        <div v-if="a === b">Strictly equal</div>
+        <div v-else>Strictly not equal</div>
+      </template>
+      `,
       errors: [
         {
           messageId: 'negatedCondition',
           line: 3,
           column: 20,
           endLine: 3,
-          endColumn: 27,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <div v-if="a === b">Strictly equal</div>
-        <div v-else>Strictly not equal</div>
-      </template>
-      `
-            }
-          ]
+          endColumn: 27
         }
       ]
     },
@@ -270,25 +250,20 @@ tester.run('no-negated-v-if-condition', rule, {
         <p v-else class="default">Default</p>
       </template>
       `,
+      output: `
+      <template>
+        <div v-if="foo" class="first">First</div>
+        <p v-else-if="bar" class="default">Default</p>
+        <span v-else class="second">Second</span>
+      </template>
+      `,
       errors: [
         {
           messageId: 'negatedCondition',
           line: 4,
           column: 26,
           endLine: 4,
-          endColumn: 30,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <div v-if="foo" class="first">First</div>
-        <p v-else-if="bar" class="default">Default</p>
-        <span v-else class="second">Second</span>
-      </template>
-      `
-            }
-          ]
+          endColumn: 30
         }
       ]
     },
@@ -301,25 +276,20 @@ tester.run('no-negated-v-if-condition', rule, {
         <p v-else data-default>Default</p>
       </template>
       `,
+      output: `
+      <template>
+        <div v-if="!a" data-first>First</div>
+        <p v-else-if="b" data-default>Default</p>
+        <span v-else data-second>Second</span>
+      </template>
+      `,
       errors: [
         {
           messageId: 'negatedCondition',
           line: 4,
           column: 26,
           endLine: 4,
-          endColumn: 28,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <div v-if="!a" data-first>First</div>
-        <p v-else-if="b" data-default>Default</p>
-        <span v-else data-second>Second</span>
-      </template>
-      `
-            }
-          ]
+          endColumn: 28
         }
       ]
     },
@@ -331,24 +301,19 @@ tester.run('no-negated-v-if-condition', rule, {
         <span v-else class="span-class" span-attr="baz" span-attr2 :span-attr-3="baz">span contents</span>
       </template>
       `,
+      output: `
+      <template>
+        <span v-if="condition" class="span-class" span-attr="baz" span-attr2 :span-attr-3="baz">span contents</span>
+        <div v-else class="div-class" div-attr="foo" div-attr-2 :div-attr-3="foo">div contents</div>
+      </template>
+      `,
       errors: [
         {
           messageId: 'negatedCondition',
           line: 3,
           column: 20,
           endLine: 3,
-          endColumn: 30,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <span v-if="condition" class="span-class" span-attr="baz" span-attr2 :span-attr-3="baz">span contents</span>
-        <div v-else class="div-class" div-attr="foo" div-attr-2 :div-attr-3="foo">div contents</div>
-      </template>
-      `
-            }
-          ]
+          endColumn: 30
         }
       ]
     },
@@ -366,17 +331,7 @@ tester.run('no-negated-v-if-condition', rule, {
         </section>
       </template>
       `,
-      errors: [
-        {
-          messageId: 'negatedCondition',
-          line: 3,
-          column: 20,
-          endLine: 3,
-          endColumn: 26,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
+      output: `
       <template>
         <section v-if="outer" class="outer-else">
           <span v-if="!nested" class="nested-if">Nested if content</span>
@@ -387,57 +342,28 @@ tester.run('no-negated-v-if-condition', rule, {
           <p v-else class="inner-else">Inner else content</p>
         </div>
       </template>
-      `
-            }
-          ]
+      `,
+      errors: [
+        {
+          messageId: 'negatedCondition',
+          line: 3,
+          column: 20,
+          endLine: 3,
+          endColumn: 26
         },
         {
           messageId: 'negatedCondition',
           line: 4,
           column: 23,
           endLine: 4,
-          endColumn: 29,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <div v-if="!outer" class="outer-if">
-          <p v-if="inner" class="inner-else">Inner else content</p>
-          <span v-else class="inner-if">Inner if content</span>
-        </div>
-        <section v-else class="outer-else">
-          <span v-if="!nested" class="nested-if">Nested if content</span>
-          <p v-else class="nested-else">Nested else content</p>
-        </section>
-      </template>
-      `
-            }
-          ]
+          endColumn: 29
         },
         {
           messageId: 'negatedCondition',
           line: 8,
           column: 23,
           endLine: 8,
-          endColumn: 30,
-          suggestions: [
-            {
-              messageId: 'fixNegatedCondition',
-              output: `
-      <template>
-        <div v-if="!outer" class="outer-if">
-          <span v-if="!inner" class="inner-if">Inner if content</span>
-          <p v-else class="inner-else">Inner else content</p>
-        </div>
-        <section v-else class="outer-else">
-          <p v-if="nested" class="nested-else">Nested else content</p>
-          <span v-else class="nested-if">Nested if content</span>
-        </section>
-      </template>
-      `
-            }
-          ]
+          endColumn: 30
         }
       ]
     }