Disallow this in template

[privatenumber]

Please describe what the rule should do:
Disallow this in the template

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

[x] Enforces code style
[ ] 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>
     <a :href="this.link">{{this.text}}</a>
</template>

<template>
     <div :class="this.$style.container">
          <slot />
     </div>
</template>

[mysticatea]

Thank you for this proposal!

Good idea.

This rule might be able to be generalized more. Vue.js disallows some keywords in templates. What do you think: no-prohibited-keywords or something like? But I'm not sure why the prohibited keywords don't include this...

https://github.com/vuejs/vue/blob/c0da43d22f8f4b9aeb4f49d4e86cd9704daaff3f/src/compiler/error-detector.js#L7-L11

[privatenumber]

Ah good catch. And I think some people may find it more readable for the this. to be there.

[armano2]

@mysticatea, @hirokiosame maybe we should consider splinting this to 2 rules? this is kinda optional (and its not required but its not a bug) and prohibited keywords can't be used at all

[mysticatea]

I have posted a question in vue repo.

[mysticatea]

I didn't realize the this. prefix works fine. So, I think that this rule should be a stylistic rule which has "always"/"never" option.

[michalsnik]

I think it either should be enabled or disabled @mysticatea without extra setting always/never. Because if you set always it will catch any presence of this. in template, but if you set never? should it report all expressions that are not this.? I don't think so :)

[mysticatea]

Oh, I still think this rule should be always/never options. Please don't merge while discussion, @michalsnik. 🤔

I think those should be:

• "always" ... External references in templates should start with this.. In implementation, the rule reports the external references which are not resolved to the variable of v-for loops. The external references are in VExpressionContainer#references.
• "never" ... The rule reports all ThisExpressions except if the x of this.x is resolved to the vaiable of v-for loops. This is the original proposal.

For example:

<template>
    <div v-for="x in xs">
        {{foo}} <!-- `foo` is reported in `always`. -->
        {{this.foo}} <!-- `this.foo` is reported in `never`. -->
        {{x}} <!-- `x` is not reported in both case. -->
        {{this.x}} <!-- `x` is not reported in both case. -->
    </div>
</template>

[armano2]

@mysticatea i like your suggestion with always / never, if its not a problem i can update implementation of current rule to support both cases.

i have question, which one should be set as default, for me never seems better because all plugins / projects which i saw are omitting this

Its nice that we can give option to specify how its should work.

There is one more think, we should consider renaming it from no-this-in-template to this-in-template it will be more logic with options never/allways - or to something else

[mysticatea]

Thank you, @armano2 !

i have question, which one should be set as default, for me never seems better because all plugins / projects which i saw are omitting this

I think the same, too. never should be default.

There is one more think, we should consider renaming it from no-this-in-template to this-in-template it will be more logic with options never/allways - or to something else

Yes, I think the same. It's the reason that I suggested the option before the rule is added.

[armano2]

@mysticatea I prepared new PR within requested changes and I renamed this rule to this-in-template.

Sent from my Xiaomi Redmi 4A using FastHub