Add rule no-template-shadow.

fixes #101

docs/rules/no-template-shadow.md

@@ -0,0 +1,46 @@
+# Disallow variable declarations from shadowing variables declared in the outer scope. (no-template-shadow)
+
+`no-shadow` should report variable definitions of v-for directives or scope attributes if those shadows the variables in parent scopes.
+
+## :book: Rule Details
+
+This rule aims to eliminate shadowed variable declarations of v-for directives or scope attributes.
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<template>
+  <div>
+    <div v-for="i in 5">
+      <div v-for="i in 5"></div>
+    </div>
+  </div>
+</template>
+<script>
+  export default {
+    data: {
+      i: 7
+    }
+  }
+</script>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template>
+  <div v-for="i in 5"></div>
+  <div v-for="i in 5"></div>
+</template>
+<script>
+  export default {
+    computed: {
+      f () { }
+    }
+  }
+</script>
+```
+
+## :wrench: Options
+
+Nothing.

lib/rules/no-template-shadow.js

@@ -0,0 +1,78 @@
+/**
+ * @fileoverview Disallow variable declarations from shadowing variables declared in the outer scope.
+ * @author Armano
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const GROUP_NAMES = ['props', 'computed', 'data', 'methods']
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'Disallow variable declarations from shadowing variables declared in the outer scope.',
+      category: 'Possible Errors',
+      recommended: false
+    },
+    fixable: null,
+    schema: []
+  },
+
+  create (context) {
+    const jsVars = new Set()
+    let scope = {
+      parent: null,
+      nodes: []
+    }
+
+    // ----------------------------------------------------------------------
+    // Public
+    // ----------------------------------------------------------------------
+
+    utils.registerTemplateBodyVisitor(context, {
+      VElement (node) {
+        scope = {
+          parent: scope,
+          nodes: scope.nodes.slice() // make copy
+        }
+        if (node.variables) {
+          for (const variable of node.variables) {
+            const varNode = variable.id
+            const name = varNode.name
+            if (scope.nodes.some(node => node.name === name) || jsVars.has(name)) {
+              context.report({
+                node: varNode,
+                loc: varNode.loc,
+                message: "Variable '{{name}}' is already declared in the upper scope.",
+                data: {
+                  name
+                }
+              })
+            } else {
+              scope.nodes.push(varNode)
+            }
+          }
+        }
+      },
+      'VElement:exit' (node) {
+        scope = scope.parent
+      }
+    })
+
+    return utils.executeOnVue(context, (obj) => {
+      const properties = Array.from(utils.iterateProperties(obj, new Set(GROUP_NAMES)))
+      for (const node of properties) {
+        jsVars.add(node.name)
+      }
+    })
+  }
+}

tests/lib/rules/no-template-shadow.js

@@ -0,0 +1,127 @@
+/**
+ * @fileoverview Disallow variable declarations from shadowing variables declared in the outer scope.
+ * @author Armano
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-template-shadow')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const ruleTester = new RuleTester({
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    ecmaVersion: 2015,
+    sourceType: 'module'
+  }
+})
+
+ruleTester.run('no-template-shadow', rule, {
+
+  valid: [
+    '',
+    '<template><div></div></template>',
+    '<template><div v-for="i in 5"></div></template>',
+    '<template><div v-for="i in 5"><div v-for="b in 5"></div></div></template>',
+    '<template><div v-for="i in 5"></div><div v-for="i in 5"></div></template>',
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div v-for="i in 5"></div>
+        <div v-for="i in 5"></div>
+      </template>
+      <script>
+        export default {
+          computed: {
+            f () { }
+          }
+        }
+      </script>`
+    }
+  ],
+
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: '<template><div v-for="i in 5"><div v-for="i in 5"></div></div></template>',
+      errors: [{
+        message: "Variable 'i' is already declared in the upper scope.",
+        type: 'Identifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div v-for="i in 5">
+          <div v-for="i in 5"></div>
+        </div>
+      </template>
+      <script>
+        export default {
+          data: {
+            i: 7
+          }
+        }
+      </script>`,
+      errors: [{
+        message: "Variable 'i' is already declared in the upper scope.",
+        type: 'Identifier'
+      }, {
+        message: "Variable 'i' is already declared in the upper scope.",
+        type: 'Identifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div v-for="i in 5"></div>
+        <div v-for="i in 5"></div>
+      </template>
+      <script>
+        export default {
+          data: {
+            i: 7
+          }
+        }
+      </script>`,
+      errors: [{
+        message: "Variable 'i' is already declared in the upper scope.",
+        type: 'Identifier'
+      }, {
+        message: "Variable 'i' is already declared in the upper scope.",
+        type: 'Identifier'
+      }]
+    },
+    {
+      filename: 'test.vue',
+      code: `<template>
+        <div v-for="i in 5"></div>
+        <div v-for="f in 5"></div>
+      </template>
+      <script>
+        export default {
+          computed: {
+            i () { }
+          },
+          methods: {
+            f () { }
+          }
+        }
+      </script>`,
+      errors: [{
+        message: "Variable 'i' is already declared in the upper scope.",
+        type: 'Identifier'
+      }, {
+        message: "Variable 'f' is already declared in the upper scope.",
+        type: 'Identifier'
+      }]
+    }
+  ]
+})