Fix: no-unused-vars rule false positive (fixes #294)(#302)

Author: michalsnik

docs/rules/no-unused-vars.md

@@ -8,19 +8,19 @@ This rule report variable definitions of v-for directives or scope attributes if
 
 ```html
 <template>
-    <ol v-for="i in 5"><!-- "i" is defined but never used. -->
-        <li>item</li>
-    </ol>
+  <ol v-for="i in 5"><!-- "i" is defined but never used. -->
+    <li>item</li>
+  </ol>
 </template>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
 <template>
-    <ol v-for="i in 5">
-        <li>{{i}}</li><!-- "i" is defined and used. -->
-    </ol>
+  <ol v-for="i in 5">
+    <li>{{i}}</li><!-- "i" is defined and used. -->
+  </ol>
 </template>
 ```
 

lib/rules/no-unused-vars.js

@@ -15,15 +15,20 @@ const utils = require('../utils')
 function create (context) {
   return utils.defineTemplateBodyVisitor(context, {
     VElement (node) {
-      for (const variable of node.variables) {
-        if (variable.references.length === 0) {
-          context.report({
-            node: variable.id,
-            loc: variable.id.loc,
-            message: `'{{name}}' is defined but never used.`,
-            data: variable.id
-          })
-        }
+      const variables = node.variables
+
+      for (
+        let i = variables.length - 1;
+        i >= 0 && !variables[i].references.length;
+        i--
+      ) {
+        const variable = variables[i]
+        context.report({
+          node: variable.id,
+          loc: variable.id.loc,
+          message: `'{{name}}' is defined but never used.`,
+          data: variable.id
+        })
       }
     }
   })

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

@@ -40,28 +40,46 @@ tester.run('no-unused-vars', rule, {
     },
     {
       code: '<template scope="props"><span v-if="props"></span></template>'
+    },
+    {
+      code: '<template><div v-for="(item, key) in items" :key="key">{{item.name}}</div></template>'
+    },
+    {
+      code: '<template><div v-for="(v, i, c) in foo">{{c}}</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."]
     },
     {
       code: '<template scope="props"></template>',
-      errors: ['\'props\' is defined but never used.']
+      errors: ["'props' is defined but never used."]
     },
     {
       code: '<template v-for="i in 5"><comp v-for="j in 10">{{i}}{{i}}</comp></template>',
-      errors: ['\'j\' is defined but never used.']
+      errors: ["'j' is defined but never used."]
     },
     {
       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."]
+    },
+    {
+      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."]
+    },
+    {
+      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."]
+    },
+    {
+      code: '<template><div v-for="(a, b, c) in foo">{{b}}</div></template>',
+      errors: ["'c' is defined but never used."]
     },
     {
-      code: '<template><div v-for="(v, i, c) in foo"></div></template>',
-      errors: ['\'v\' is defined but never used.', '\'i\' is defined but never used.', '\'c\' is defined but never used.']
+      code: '<template><div v-for="(item, key) in items" :key="item.id">{{item.name}}</div></template>',
+      errors: ["'key' is defined but never used."]
     }
   ]
 })