feat: add fixable, no more error when unused variable with prefix _

implement proposal vuejs#1058

feat vuejs#1058

docs/rules/README.md

@@ -48,7 +48,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
 | [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
 | [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
-| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
+| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | :wrench: |
 | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
 | [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
 | [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |

docs/rules/no-unused-vars.md

@@ -8,12 +8,13 @@ description: disallow unused variable definitions of v-for directives or scope a
 > disallow unused variable definitions of v-for directives or scope attributes
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 ## :book: Rule Details
 
 This rule report variable definitions of v-for directives or scope attributes if those are not used.
 
-<eslint-code-block :rules="{'vue/no-unused-vars': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-unused-vars': ['error']}">
 
 ```vue
 <template>

lib/rules/no-unused-vars.js

@@ -18,7 +18,7 @@ module.exports = {
       category: 'essential',
       url: 'https://eslint.vuejs.org/rules/no-unused-vars.html'
     },
-    fixable: null,
+    fixable: 'code',
     schema: []
   },
 
@@ -29,15 +29,18 @@ module.exports = {
 
         for (
           let i = variables.length - 1;
-          i >= 0 && !variables[i].references.length;
+          i >= 0 && !variables[i].id.name.startsWith('_') && !variables[i].references.length;
           i--
         ) {
           const variable = variables[i]
+          const [start, end] = variable.id.range
           context.report({
             node: variable.id,
             loc: variable.id.loc,
             message: `'{{name}}' is defined but never used.`,
-            data: variable.id
+            data: variable.id,
+            fix: (fixer) =>
+              fixer.replaceTextRange([start, end], `_${variable.id.name}`)
           })
         }
       }

tests/lib/rules/no-unused-vars.js

@@ -52,52 +52,71 @@ tester.run('no-unused-vars', rule, {
     },
     {
       code: '<template><div v-for="x in foo" :[x]></div></template>'
+    },
+    {
+      code: '<template><div v-for="_ in foo" ></div></template>'
+    },
+    {
+      code: '<template><div v-for="_i in foo" ></div></template>'
     }
   ],
   invalid: [
     {
       code: '<template><ol v-for="i in 5"><li></li></ol></template>',
-      errors: ["'i' is defined but never used."]
+      errors: ["'i' is defined but never used."],
+      output: '<template><ol v-for="_i in 5"><li></li></ol></template>'
     },
     {
       code: '<template><template scope="props"></template></template>',
-      errors: ["'props' is defined but never used."]
+      errors: ["'props' is defined but never used."],
+      output: '<template><template scope="_props"></template></template>'
     },
     {
       code: '<template><span slot-scope="props"></span></template>',
-      errors: ["'props' is defined but never used."]
+      errors: ["'props' is defined but never used."],
+      output: '<template><span slot-scope="_props"></span></template>'
     },
     {
       code: '<template><span><template scope="props"></template></span></template>',
-      errors: ["'props' is defined but never used."]
+      errors: ["'props' is defined but never used."],
+      output: '<template><span><template scope="_props"></template></span></template>'
     },
     {
       code: '<template><div v-for="i in 5"><comp v-for="j in 10">{{i}}{{i}}</comp></div></template>',
-      errors: ["'j' is defined but never used."]
+      errors: ["'j' is defined but never used."],
+      output: '<template><div v-for="i in 5"><comp v-for="_j in 10">{{i}}{{i}}</comp></div></template>'
     },
     {
       code: '<template><ol v-for="i in data"><li v-for="f in i"></li></ol></template>',
-      errors: ["'f' is defined but never used."]
+      errors: ["'f' is defined but never used."],
+      output: '<template><ol v-for="i in data"><li v-for="_f in i"></li></ol></template>'
     },
     {
       code: '<template><div v-for="(a, b, c) in foo"></div></template>',
-      errors: ["'a' is defined but never used.", "'b' is defined but never used.", "'c' is defined but never used."]
+      errors: ["'a' is defined but never used.", "'b' is defined but never used.", "'c' is defined but never used."],
+      output: '<template><div v-for="(_a, _b, _c) in foo"></div></template>'
+
     },
     {
       code: '<template><div v-for="(a, b, c) in foo">{{a}}</div></template>',
-      errors: ["'b' is defined but never used.", "'c' is defined but never used."]
+      errors: ["'b' is defined but never used.", "'c' is defined but never used."],
+      output: '<template><div v-for="(a, _b, _c) in foo">{{a}}</div></template>'
     },
     {
       code: '<template><div v-for="(a, b, c) in foo">{{b}}</div></template>',
-      errors: ["'c' is defined but never used."]
+      errors: ["'c' is defined but never used."],
+      output: '<template><div v-for="(a, b, _c) in foo">{{b}}</div></template>'
     },
     {
       code: '<template><div v-for="(item, key) in items" :key="item.id">{{item.name}}</div></template>',
-      errors: ["'key' is defined but never used."]
+      errors: ["'key' is defined but never used."],
+      output: '<template><div v-for="(item, _key) in items" :key="item.id">{{item.name}}</div></template>'
     },
     {
       code: '<template><div v-for="x in items">{{value | x}}</div></template>',
-      errors: ["'x' is defined but never used."]
+      errors: ["'x' is defined but never used."],
+      output: '<template><div v-for="_x in items">{{value | x}}</div></template>'
+
     }
   ]
 })