Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1e7a13a

Browse files
armano2michalsnik
authored andcommitted
Add no-this-in-template rule. (#149)
* Add `no-this-in-template` rule. fixes #148 * Update documentation
1 parent 4c97f17 commit 1e7a13a

File tree

3 files changed

+151
-0
lines changed

3 files changed

+151
-0
lines changed

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

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
# Disallow usage of `this` in template. (no-this-in-template)
2+
3+
This rule reports expresions that contain `this` keyword in expressions
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

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
/**
2+
* @fileoverview Disallow usage of `this` in 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 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+
}

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

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
/**
2+
* @fileoverview Disallow usage of `this` in 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)

AltStyle によって変換されたページ (->オリジナル) /