Fix no-unused-vars rule to ignore previous properties if last property was used

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,6 +15,9 @@ const utils = require('../utils')
 function create (context) {
   return utils.defineTemplateBodyVisitor(context, {
     VElement (node) {
+      const lastVariable = node.variables.slice(-1)[0]
+      if (!lastVariable || lastVariable.references.length) return
+
       for (const variable of node.variables) {
         if (variable.references.length === 0) {
           context.report({

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

@@ -40,28 +40,42 @@ 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="(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.']
+      errors: ["'v' is defined but never used.", "'i' is defined but never used.", "'c' is defined but never used."]
+    },
+    {
+      code: '<template><div v-for="(v, i, c) in foo">{{i}}</div></template>',
+      errors: ["'v' 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."]
     }
   ]
 })