Skip to content

Commit 2d2e3ed

Browse files
kevsommerkevsommer
committed
implements proposed max-template-depth rule
1 parent 66e3201 commit 2d2e3ed

File tree

5 files changed

+316
-0
lines changed

5 files changed

+316
-0
lines changed

‎docs/rules/index.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,7 @@ For example:
224224
| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name | | :warning: |
225225
| [vue/max-lines-per-block](./max-lines-per-block.md) | enforce maximum number of lines in Vue SFC blocks | | :warning: |
226226
| [vue/max-props](./max-props.md) | enforce maximum number of props in Vue component | | :warning: |
227+
| [vue/max-template-depth](./max-template-depth.md) | enforce maximum depth of template | | :warning: |
227228
| [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
228229
| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
229230
| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` | | :hammer: |

‎docs/rules/max-template-depth.md

Lines changed: 69 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/max-template-depth
5+
description: enforce maximum depth of template
6+
---
7+
8+
# vue/max-template-depth
9+
10+
> enforce maximum depth of template
11+
12+
- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> _**This rule has not been released yet.**_ </badge>
13+
14+
## :book: Rule Details
15+
16+
This rule enforces a maximum depth of the template in a Vue SFC, in order to aid in maintainability and reduce complexity.
17+
18+
## :wrench: Options
19+
20+
This rule takes an object, where you can specify the maximum depth allowed in a Vue SFC template block.
21+
There is one property that can be specified for the object.
22+
23+
- `maxDepth` ... Specify the maximum template depth `template` block.
24+
25+
## `{ maxDepth: 3 }`
26+
27+
<eslint-code-block :rules="{'vue/max-template-depth': ['error', { maxDepth: 3 }]}">
28+
29+
```vue
30+
<!-- ✗ BAD -->
31+
<template>
32+
<main-container>
33+
<child-component>
34+
<div />
35+
</child-component>
36+
<child-component>
37+
<nested-component>
38+
<div>
39+
<div />
40+
</div>
41+
</nested-component>
42+
</child-component>
43+
</main-container>
44+
</template>
45+
```
46+
47+
</eslint-code-block>
48+
49+
### `{ maxDepth: 5 }`
50+
51+
<eslint-code-block :rules="{'vue/max-template-depth': ['error', { maxDepth: 3 }]}">
52+
53+
```vue
54+
<!-- ✓ GOOD -->
55+
<template>
56+
<main-container>
57+
<child-component>
58+
<div />
59+
</child-component>
60+
</main-container>
61+
</template>
62+
```
63+
64+
</eslint-code-block>
65+
66+
## :mag: Implementation
67+
68+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-template-depth.js)
69+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-template-depth.js)

‎lib/index.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -80,6 +80,7 @@ const plugin = {
8080
'max-len': require('./rules/max-len'),
8181
'max-lines-per-block': require('./rules/max-lines-per-block'),
8282
'max-props': require('./rules/max-props'),
83+
'max-template-depth': require('./rules/max-template-depth'),
8384
'multi-word-component-names': require('./rules/multi-word-component-names'),
8485
'multiline-html-element-content-newline': require('./rules/multiline-html-element-content-newline'),
8586
'multiline-ternary': require('./rules/multiline-ternary'),

‎lib/rules/max-template-depth.js

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
/**
2+
* @author kevsommer Kevin Sommer
3+
* See LICENSE file in root directory for full license.
4+
*/
5+
'use strict'
6+
7+
module.exports = {
8+
meta: {
9+
type: 'problem',
10+
docs: {
11+
description: 'enforce maximum depth of template',
12+
categories: undefined,
13+
url: 'https://eslint.vuejs.org/rules/max-template-depth.html'
14+
},
15+
fixable: null,
16+
schema: [
17+
{
18+
type: 'object',
19+
properties: {
20+
maxDepth: {
21+
type: 'integer',
22+
minimum: 1
23+
}
24+
},
25+
additionalProperties: false,
26+
minProperties: 1
27+
}
28+
],
29+
messages: {
30+
templateTooDeep:
31+
'Template is too deep (depth of {{depth}}). Maximum allowed is {{limit}}.'
32+
}
33+
},
34+
/** @param {RuleContext} context */
35+
create(context) {
36+
const option = context.options[0] || {}
37+
38+
/**
39+
* @param {VElement} element
40+
* @param {number} curDepth
41+
*/
42+
function checkMaxDepth(element, curDepth) {
43+
if (curDepth > option.maxDepth) {
44+
context.report({
45+
node: element,
46+
messageId: 'templateTooDeep',
47+
data: {
48+
depth: curDepth,
49+
limit: option.maxDepth
50+
}
51+
})
52+
}
53+
54+
if (!element.children) {
55+
return
56+
}
57+
58+
for (const child of element.children) {
59+
if (child.type === 'VElement') {
60+
checkMaxDepth(child, curDepth + 1)
61+
}
62+
}
63+
}
64+
65+
return {
66+
/** @param {Program} program */
67+
Program(program) {
68+
const element = program.templateBody
69+
70+
if (element == null) {
71+
return
72+
}
73+
74+
if (element.type !== 'VElement') {
75+
return
76+
}
77+
78+
checkMaxDepth(element, 0)
79+
}
80+
}
81+
}
82+
}

‎tests/lib/rules/max-template-depth.js

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
/**
2+
* @author kevsommer Kevin Sommer
3+
* See LICENSE file in root directory for full license.
4+
*/
5+
'use strict'
6+
7+
const RuleTester = require('../../eslint-compat').RuleTester
8+
const rule = require('../../../lib/rules/max-template-depth')
9+
10+
const tester = new RuleTester({
11+
languageOptions: {
12+
parser: require('vue-eslint-parser'),
13+
ecmaVersion: 2020,
14+
sourceType: 'module'
15+
}
16+
})
17+
18+
tester.run('max-template-depth', rule, {
19+
valid: [
20+
{
21+
filename: 'test.vue',
22+
code: `
23+
<template>
24+
<main-container>
25+
<child-component>
26+
<div />
27+
</child-component>
28+
</main-container>
29+
</template>
30+
`,
31+
options: [{ maxDepth: 3 }]
32+
},
33+
{
34+
filename: 'test.vue',
35+
code: `
36+
<template>
37+
<main-container>
38+
<ul>
39+
<li>Item 1</li>
40+
</ul>
41+
</main-container>
42+
</template>
43+
`,
44+
options: [{ maxDepth: 4 }]
45+
},
46+
{
47+
filename: 'test.vue',
48+
code: `
49+
<template>
50+
<main-container>
51+
<child-component>
52+
<sub-child-component>
53+
<div />
54+
</sub-child-component>
55+
</child-component>
56+
</main-container>
57+
</template>
58+
`,
59+
options: [{ maxDepth: 4 }]
60+
},
61+
{
62+
filename: 'test.vue',
63+
code: `
64+
<template>
65+
<div>
66+
</div>
67+
<main-container>
68+
<child-component>
69+
<ul>
70+
<li />
71+
</ul>
72+
</child-component>
73+
</main-container>
74+
</template>
75+
`,
76+
options: [{ maxDepth: 4 }]
77+
}
78+
],
79+
invalid: [
80+
{
81+
filename: 'test.vue',
82+
code: `
83+
<template>
84+
<div>
85+
<div>
86+
<div>
87+
<div />
88+
</div>
89+
</div>
90+
</div>
91+
</template>
92+
`,
93+
options: [{ maxDepth: 3 }],
94+
errors: [
95+
{
96+
message: 'Template is too deep (depth of 4). Maximum allowed is 3.',
97+
line: 6
98+
}
99+
]
100+
},
101+
{
102+
filename: 'test.vue',
103+
code: `
104+
<template>
105+
<side-container>
106+
<child-component />
107+
</side-container>
108+
<main-container>
109+
<child-component>
110+
<nested-component>
111+
<h1 />
112+
</nested-component>
113+
</child-component>
114+
</main-container>
115+
</template>
116+
`,
117+
options: [{ maxDepth: 3 }],
118+
errors: [
119+
{
120+
message: 'Template is too deep (depth of 4). Maximum allowed is 3.',
121+
line: 9
122+
}
123+
]
124+
},
125+
{
126+
filename: 'test.vue',
127+
code: `
128+
<template>
129+
<main-container>
130+
<nav-bar>
131+
<div />
132+
</nav-bar>
133+
<child-component>
134+
<nested-component>
135+
<div>
136+
<div />
137+
<div>
138+
</nested-component>
139+
</child-component>
140+
</main-container>
141+
</template>
142+
`,
143+
options: [{ maxDepth: 3 }],
144+
errors: [
145+
{
146+
message: 'Template is too deep (depth of 4). Maximum allowed is 3.',
147+
line: 9,
148+
endLine: 12
149+
},
150+
{
151+
message: 'Template is too deep (depth of 5). Maximum allowed is 3.',
152+
line: 10,
153+
endLine: 10
154+
},
155+
{
156+
message: 'Template is too deep (depth of 5). Maximum allowed is 3.',
157+
line: 11,
158+
endLine: 12
159+
}
160+
]
161+
}
162+
]
163+
})

0 commit comments

Comments
 (0)