Add options to no-this-in-template.

fixes vuejs#148

Author: armano2

docs/rules/no-this-in-template.md

@@ -1,6 +1,4 @@
-# Disallow usage of `this` in template. (no-this-in-template)
-
-This rule reports expresions that contain `this` keyword in expressions
+# enforce usage of `this` in template. (no-this-in-template)
 
 ## :book: Rule Details
 
@@ -22,4 +20,52 @@ This rule reports expresions that contain `this` keyword in expressions
 
 ## :wrench: Options
 
-Nothing.
+Default is set to `never`.
+
+```
+'vue/no-this-in-template': [2, 'always'|'never']
+```
+
+### `"always"` - Always use `this` while accessing properties from vue
+
+:+1: Examples of **correct** code`:
+
+```html
+<template>
+  <div :class="{'show': this.showFoo}">
+    {{ this.foo }}
+  </div>
+</template>
+```
+
+:-1: Examples of **incorrect** code`:
+
+```html
+<template>
+  <div :class="{'show': showFoo}">
+    {{ foo }}
+  </div>
+</template>
+```
+
+### `"never"` - Never use expresions that contain `this` keyword in expressions
+
+:+1: Examples of **correct** code`:
+
+```html
+<template>
+  <div :class="{'show': this.showFoo}">
+    {{ this.foo }}
+  </div>
+</template>
+```
+
+:-1: Examples of **incorrect** code`:
+
+```html
+<template>
+  <div :class="{'show': showFoo}">
+    {{ foo }}
+  </div>
+</template>
+```

docs/rules/require-render-return.md

@@ -1,6 +1,6 @@
 # Enforces render function to always return value (require-render-return)
 
-This rule aims to enforce render function to allways return value
+This rule aims to enforce render function to always return value
 
 ## :book: Rule Details
 

lib/rules/no-this-in-template.js

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Disallow usage of `this` in template.
+ * @fileoverview enforce usage of `this` in template.
  * @author Armano
  */
 'use strict'
@@ -17,12 +17,16 @@ const utils = require('../utils')
 module.exports = {
   meta: {
     docs: {
-      description: 'Disallow usage of `this` in template.',
+      description: 'enforce usage of `this` in template.',
       category: 'Best Practices',
       recommended: false
     },
     fixable: null,
-    schema: []
+    schema: [
+      {
+        enum: ['always', 'never']
+      }
+    ]
   },
 
   /**
@@ -32,15 +36,63 @@ module.exports = {
    * @returns {Object} AST event handlers.
    */
   create (context) {
-    utils.registerTemplateBodyVisitor(context, {
-      'VExpressionContainer ThisExpression' (node) {
-        context.report({
-          node,
-          loc: node.loc,
-          message: "Unexpected usage of 'this'."
-        })
+    const options = context.options[0] !== 'always' ? 'never' : 'always'
+    let scope = {
+      parent: null,
+      nodes: []
+    }
+
+    function validateNever () {
+      return {
+        'VExpressionContainer ThisExpression' (node) {
+          if (options === 'never') {
+            context.report({
+              node,
+              loc: node.loc,
+              message: "Unexpected usage of 'this'."
+            })
+          }
+        }
       }
-    })
+    }
+
+    function validateAlways () {
+      return {
+        'VExpressionContainer' (node) {
+          if (node.references && options === 'always') {
+            for (const reference of node.references) {
+              if (!scope.nodes.some(node => node.name === reference.id.name)) {
+                context.report({
+                  node: reference.id,
+                  loc: reference.id.loc,
+                  message: "Expected 'this'."
+                })
+              }
+            }
+          }
+        },
+        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)) { // Prevent adding duplicates
+                scope.nodes.push(varNode)
+              }
+            }
+          }
+        },
+        'VElement:exit' (node) {
+          scope = scope.parent
+        }
+      }
+    }
+
+    utils.registerTemplateBodyVisitor(context, options === 'never' ? validateNever() : validateAlways())
 
     return {}
   }

tests/lib/rules/no-this-in-template.js

@@ -1,5 +1,5 @@
 /**
- * @fileoverview Disallow usage of `this` in template.
+ * @fileoverview enforce usage of `this` in template.
  * @author Armano
  */
 'use strict'
@@ -21,59 +21,77 @@ const ruleTester = new RuleTester({
   parserOptions: { ecmaVersion: 2015 }
 })
 
-ruleTester.run('no-this-in-template', rule, {
-  valid: [
-    '',
-    '<template></template>',
-    '<template><div></div></template>',
-    '<template><div>{{ foo.bar }}</div></template>',
-    '<template><div v-for="foo in bar">{{ foo }}</div></template>',
-    '<template><div v-if="foo">{{ foo }}</div></template>',
-    '<template><div :class="foo">{{ foo }}</div></template>',
-    '<template><div :class="{this: foo}">{{ foo }}</div></template>'
-  ],
-  invalid: [
+function createValidTests (prefix, options) {
+  return [
     {
-      code: '<template><div>{{ this.foo }}</div></template>',
-      errors: [{
-        message: "Unexpected usage of 'this'.",
-        type: 'ThisExpression'
-      }]
+      code: `<template><div>{{ ${prefix}foo.bar }}</div></template><!-- ${options.join('')} -->`,
+      options
     },
     {
-      code: '<template><div :class="this.foo"></div></template>',
-      errors: [{
-        message: "Unexpected usage of 'this'.",
-        type: 'ThisExpression'
-      }]
+      code: `<template><div v-for="foo in ${prefix}bar">{{ foo }}</div></template><!-- ${options.join('')} -->`,
+      options
     },
     {
-      code: '<template><div :class="{foo: this.foo}"></div></template>',
-      errors: [{
-        message: "Unexpected usage of 'this'.",
-        type: 'ThisExpression'
-      }]
+      code: `<template><div v-if="${prefix}foo">{{ ${prefix}foo }}</div></template><!-- ${options.join('')} -->`,
+      options
     },
     {
-      code: '<template><div :class="{foo: this.foo()}"></div></template>',
-      errors: [{
-        message: "Unexpected usage of 'this'.",
-        type: 'ThisExpression'
-      }]
+      code: `<template><div :class="${prefix}foo">{{ ${prefix}foo }}</div></template><!-- ${options.join('')} -->`,
+      options
     },
     {
-      code: '<template><div v-if="this.foo"></div></template>',
-      errors: [{
-        message: "Unexpected usage of 'this'.",
-        type: 'ThisExpression'
-      }]
+      code: `<template><div :class="{this: ${prefix}foo}">{{ ${prefix}foo }}</div></template><!-- ${options.join('')} -->`,
+      options
     },
     {
-      code: '<template><div v-for="foo in this.bar"></div></template>',
-      errors: [{
-        message: "Unexpected usage of 'this'.",
-        type: 'ThisExpression'
-      }]
+      code: `<template><div v-for="bar in ${prefix}foo" v-if="bar">{{ bar }}</div></template><!-- ${options.join('')} -->`,
+      options
     }
   ]
+}
+
+function createInvalidTests (prefix, options, message, type) {
+  return [
+    {
+      code: `<template><div>{{ ${prefix}foo }}</div></template><!-- ${options.join('')} -->`,
+      errors: [{ message, type }],
+      options
+    },
+    {
+      code: `<template><div :class="${prefix}foo"></div></template><!-- ${options.join('')} -->`,
+      errors: [{ message, type }],
+      options
+    },
+    {
+      code: `<template><div :class="{foo: ${prefix}foo}"></div></template><!-- ${options.join('')} -->`,
+      errors: [{ message, type }],
+      options
+    },
+    {
+      code: `<template><div :class="{foo: ${prefix}foo()}"></div></template><!-- ${options.join('')} -->`,
+      errors: [{ message, type }],
+      options
+    },
+    {
+      code: `<template><div v-if="${prefix}foo"></div></template><!-- ${options.join('')} -->`,
+      errors: [{ message, type }],
+      options
+    },
+    {
+      code: `<template><div v-for="foo in ${prefix}bar"></div></template><!-- ${options.join('')} -->`,
+      errors: [{ message, type }],
+      options
+    }
+  ]
+}
+
+ruleTester.run('no-this-in-template', rule, {
+  valid: ['', '<template></template>', '<template><div></div></template>']
+    .concat(createValidTests('', []))
+    .concat(createValidTests('', ['never']))
+    .concat(createValidTests('this.', ['always'])),
+  invalid: []
+    .concat(createInvalidTests('this.', [], "Unexpected usage of 'this'.", 'ThisExpression'))
+    .concat(createInvalidTests('this.', ['never'], "Unexpected usage of 'this'.", 'ThisExpression'))
+    .concat(createInvalidTests('', ['always'], "Expected 'this'.", 'Identifier'))
 })