Rule Proposal: `vue/no-shadow`

[mysticatea]

Please describe what the rule should do:

no-shadow should report variable definitions of v-for directives or scope attributes if those shadows the variables in parent scopes.

What category of rule is this? (place an "X" next to just one item)

[ ] Enforces code style
[X] Warns about a potential error
[ ] Suggests an alternate way of doing something
[ ] Other (please specify:)

Provide 2-3 code examples that this rule will warn about:

<template>
    <ol v-for="i in 5">
        <ol v-for="i in 5"><!-- "i" is already declared in the upper scope. -->
            <li>item</li>
        </ol>
    </ol>
</template>
<script>
export default {
}
</script>

[michalsnik]

no-template-shadow seems more accurate as there is already eslint's core rule with that name and it might be a little confusing how do they differ.

[armano2]

@mysticatea i'm about to start working on this but can you explain me what do you mean by scope attributes,

---

edit. i will wait till @mysticatea finish his parser

[mysticatea]

I'm sorry for the delay.

@michalsnik It's the good name.

@armano2 Each VElement node has all variables which are defined by their attributes. It includes v-for directive's and <template scope="foo"> attribute's (Scoped slots).

Incidentally, I think that this rule should consider the properties of components are defined as well.

<template>
    <ol v-for="i in 5"><!-- "i" is already declared in the upper scope. -->
    </ol>
</template>
<script>
export default {
    data() {
        return {i: 0}
    }
}
</script>

So I think the mostly logic of this rule will be shared with #98.

[armano2]

@mysticatea @michalsnik if no one is working on it, i can take care of it