8000 feat(no-restricted-html-elements): support all element types (#2755) · vuejs/eslint-plugin-vue@ca97301 · GitHub
[go: up one dir, main page]
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
Appearance settings

Commit ca97301

Browse files
waynzhwaynzh
authored
feat(no-restricted-html-elements): support all element types (#2755)
1 parent 66dab39 commit ca97301

File tree

5 files changed

+89
-11
lines changed

5 files changed

+89
-11
lines changed

‎.changeset/true-oranges-heal.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'eslint-plugin-vue': patch
3+
---
4+
5+
[vue/no-restricted-html-elements](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now also checks SVG and MathML elements.

‎docs/rules/index.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -245,7 +245,7 @@ For example:
245245
| [vue/no-restricted-component-names] | disallow specific component names | :bulb: | :hammer: |
246246
| [vue/no-restricted-component-options] | disallow specific component option | | :hammer: |
247247
| [vue/no-restricted-custom-event] | disallow specific custom event | :bulb: | :hammer: |
248-
| [vue/no-restricted-html-elements] | disallow specific HTML elements | | :hammer: |
248+
| [vue/no-restricted-html-elements] | disallow specific elements | | :hammer: |
249249
| [vue/no-restricted-props] | disallow specific props | :bulb: | :hammer: |
250250
| [vue/no-restricted-static-attribute] | disallow specific attribute | | :hammer: |
251251
| [vue/no-restricted-v-bind] | disallow specific argument in `v-bind` | | :hammer: |

‎docs/rules/no-restricted-html-elements.md

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,17 @@
22
pageClass: rule-details
33
sidebarDepth: 0
44
title: vue/no-restricted-html-elements
5-
description: disallow specific HTML elements
5+
description: disallow specific elements
66
since: v8.6.0
77
---
88

99
# vue/no-restricted-html-elements
1010

11-
> disallow specific HTML elements
11+
> disallow specific elements
1212
1313
## :book: Rule Details
1414

15-
This rule allows you to specify HTML elements that you don't want to use in your application.
15+
This rule allows you to specify HTML, SVG, and MathML elements that you don't want to use in your application.
1616

1717
<eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', 'marquee', 'button'] }">
1818

@@ -33,7 +33,7 @@ This rule allows you to specify HTML elements that you don't want to use in your
3333

3434
## :wrench: Options
3535

36-
This rule takes a list of strings, where each string is an HTML element name to be restricted:
36+
This rule takes a list of strings, where each string is an element name to be restricted:
3737

3838
```json
3939
{
@@ -73,7 +73,7 @@ Alternatively, the rule also accepts objects.
7373

7474
The following properties can be specified for the object.
7575

76-
- `element` ... Specify the HTML element or an array of HTML elements.
76+
- `element` ... Specify the element name or an array of element names.
7777
- `message` ... Specify an optional custom message.
7878

7979
### `{ "element": "marquee" }, { "element": "a" }`

‎lib/rules/no-restricted-html-elements.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ module.exports = {
1010
meta: {
1111
type: 'suggestion',
1212
docs: {
13-
description: 'disallow specific HTML elements',
13+
description: 'disallow specific elements',
1414
categories: undefined,
1515
url: 'https://eslint.vuejs.org/rules/no-restricted-html-elements.html'
1616
},
@@ -40,7 +40,7 @@ module.exports = {
4040
minItems: 0
4141
},
4242
messages: {
43-
forbiddenElement: 'Unexpected use of forbidden HTML element {{name}}.',
43+
forbiddenElement: 'Unexpected use of forbidden element {{name}}.',
4444
// eslint-disable-next-line eslint-plugin/report-message-format
4545
customMessage: '{{message}}'
4646
}
@@ -55,7 +55,11 @@ module.exports = {
5555
* @param {VElement} node
5656
*/
5757
VElement(node) {
58-
if (!utils.isHtmlElementNode(node)) {
58+
if (
59+
!utils.isHtmlElementNode(node) &&
60+
!utils.isSvgElementNode(node) &&
61+
!utils.isMathElementNode(node)
62+
) {
5963
return
6064
}
6165

‎tests/lib/rules/no-restricted-html-elements.js

Lines changed: 71 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,18 @@ tester.run('no-restricted-html-elements', rule, {
3636
filename: 'test.vue',
3737
code: '<template><main><article></article></main></template>',
3838
options: [{ element: ['div', 'span'] }]
39+
},
40+
// SVG
41+
{
42+
filename: 'test.vue',
43+
code: '<template><svg><rect width="100" height="100"></rect></svg></template>',
44+
options: ['circle']
45+
},
46+
// Math
47+
{
48+
filename: 'test.vue',
49+
code: '<template><math><mn>2</mn></math></template>',
50+
options: ['mi']
3951
}
4052
],
4153
invalid: [
@@ -45,7 +57,7 @@ tester.run('no-restricted-html-elements', rule, {
4557
options: ['button'],
4658
errors: [
4759
{
48-
message: 'Unexpected use of forbidden HTML element button.',
60+
message: 'Unexpected use of forbidden element button.',
4961
line: 1,
5062
column: 16
5163
}
@@ -57,7 +69,7 @@ tester.run('no-restricted-html-elements', rule, {
5769
options: ['div'],
5870
errors: [
5971
{
60-
message: 'Unexpected use of forbidden HTML element div.',
72+
message: 'Unexpected use of forbidden element div.',
6173
line: 1,
6274
column: 11
6375
}
@@ -96,6 +108,63 @@ tester.run('no-restricted-html-elements', rule, {
96108
column: 18
97109
}
98110
]
111+
},
112+
// SVG
113+
{
114+
filename: 'test.vue',
115+
code: '<template><svg><circle r="50"></circle></svg></template>',
116+
options: ['circle'],
117+
errors: [
118+
{
119+
message: 'Unexpected use of forbidden element circle.',
120+
line: 1,
121+
column: 16
122+
}
123+
]
124+
},
125+
{
126+
filename: 'test.vue',
127+
code: '<template><svg><rect width="100" height="100"></rect><path d="M10,10 L20,20"></path></svg></template>',
128+
options: [
129+
{ element: ['rect', 'path'], message: 'Use simplified shapes instead' }
130+
],
131+
errors: [
132+
{
133+
message: 'Use simplified shapes instead',
134+
line: 1,
135+
column: 16
136+
},
137+
{
138+
message: 'Use simplified shapes instead',
139+
line: 1,
140+
column: 54
141+
}
142+
]
143+
},
144+
// Math
145+
{
146+
filename: 'test.vue',
147+
code: '<template><math><mfrac><mn>1</mn><mn>2</mn></mfrac></math></template>',
148+
options: ['mfrac'],
149+
errors: [
150+
{
151+
message: 'Unexpected use of forbidden element mfrac.',
152+
line: 1,
153+
column: 17
154+
}
155+
]
156+
},
157+
{
158+
filename: 'test.vue',
159+
code: '<template><math><mi>x</mi><mo>=</mo><mn>5</mn></math></template>',
160+
options: [{ element: 'mo', message: 'Avoid using operators directly' }],
161+
errors: [
162+
{
163+
message: 'Avoid using operators directly',
164+
line: 1,
165+
column: 27
166+
}
167+
]
99168
}
100169
]
101170
})

0 commit comments

Comments
 (0)
0