Skip to content

Commit b4e593d

Browse files
committed
Add no-this-in-template rule.
fixes vuejs#148
1 parent 164b2ae commit b4e593d

File tree

3 files changed

+151
-0
lines changed

3 files changed

+151
-0
lines changed

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

+25
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Disallow usage of `this` in the template. (no-this-in-template)
2+
3+
This rule reports expresions witch contains `this`.
4+
5+
## :book: Rule Details
6+
7+
:-1: Examples of **incorrect** code for this rule:
8+
9+
```html
10+
<template>
11+
<a :href="this.link">{{this.text}}</a>
12+
</template>
13+
```
14+
15+
:+1: Examples of **correct** code for this rule:
16+
17+
```html
18+
<template>
19+
<a :href="link">{{text}}</a>
20+
</template>
21+
```
22+
23+
## :wrench: Options
24+
25+
Nothing.

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

+47
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* @fileoverview Disallow usage of `this` in the template.
3+
* @author Armano
4+
*/
5+
'use strict'
6+
7+
// ------------------------------------------------------------------------------
8+
// Requirements
9+
// ------------------------------------------------------------------------------
10+
11+
const utils = require('../utils')
12+
13+
// ------------------------------------------------------------------------------
14+
// Rule Definition
15+
// ------------------------------------------------------------------------------
16+
17+
module.exports = {
18+
meta: {
19+
docs: {
20+
description: 'Disallow usage of `this` in the template.',
21+
category: 'Best Practices',
22+
recommended: false
23+
},
24+
fixable: null,
25+
schema: []
26+
},
27+
28+
/**
29+
* Creates AST event handlers for no-this-in-template.
30+
*
31+
* @param {RuleContext} context - The rule context.
32+
* @returns {Object} AST event handlers.
33+
*/
34+
create (context) {
35+
utils.registerTemplateBodyVisitor(context, {
36+
'VExpressionContainer ThisExpression' (node) {
37+
context.report({
38+
node,
39+
loc: node.loc,
40+
message: "Unexpected usage of 'this'."
41+
})
42+
}
43+
})
44+
45+
return {}
46+
}
47+
}
+79
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* @fileoverview Disallow usage of `this` in the template.
3+
* @author Armano
4+
*/
5+
'use strict'
6+
7+
// ------------------------------------------------------------------------------
8+
// Requirements
9+
// ------------------------------------------------------------------------------
10+
11+
const rule = require('../../../lib/rules/no-this-in-template')
12+
13+
const RuleTester = require('eslint').RuleTester
14+
15+
// ------------------------------------------------------------------------------
16+
// Tests
17+
// ------------------------------------------------------------------------------
18+
19+
const ruleTester = new RuleTester({
20+
parser: 'vue-eslint-parser',
21+
parserOptions: { ecmaVersion: 2015 }
22+
})
23+
24+
ruleTester.run('no-this-in-template', rule, {
25+
valid: [
26+
'',
27+
'<template></template>',
28+
'<template><div></div></template>',
29+
'<template><div>{{ foo.bar }}</div></template>',
30+
'<template><div v-for="foo in bar">{{ foo }}</div></template>',
31+
'<template><div v-if="foo">{{ foo }}</div></template>',
32+
'<template><div :class="foo">{{ foo }}</div></template>',
33+
'<template><div :class="{this: foo}">{{ foo }}</div></template>'
34+
],
35+
invalid: [
36+
{
37+
code: '<template><div>{{ this.foo }}</div></template>',
38+
errors: [{
39+
message: "Unexpected usage of 'this'.",
40+
type: 'ThisExpression'
41+
}]
42+
},
43+
{
44+
code: '<template><div :class="this.foo"></div></template>',
45+
errors: [{
46+
message: "Unexpected usage of 'this'.",
47+
type: 'ThisExpression'
48+
}]
49+
},
50+
{
51+
code: '<template><div :class="{foo: this.foo}"></div></template>',
52+
errors: [{
53+
message: "Unexpected usage of 'this'.",
54+
type: 'ThisExpression'
55+
}]
56+
},
57+
{
58+
code: '<template><div :class="{foo: this.foo()}"></div></template>',
59+
errors: [{
60+
message: "Unexpected usage of 'this'.",
61+
type: 'ThisExpression'
62+
}]
63+
},
64+
{
65+
code: '<template><div v-if="this.foo"></div></template>',
66+
errors: [{
67+
message: "Unexpected usage of 'this'.",
68+
type: 'ThisExpression'
69+
}]
70+
},
71+
{
72+
code: '<template><div v-for="foo in this.bar"></div></template>',
73+
errors: [{
74+
message: "Unexpected usage of 'this'.",
75+
type: 'ThisExpression'
76+
}]
77+
}
78+
]
79+
})

0 commit comments

Comments
 (0)