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 cf261fb

Browse files
feat(no-restricted-html-elements): support array of elements (#2750)
1 parent 31b30c4 commit cf261fb

File tree

4 files changed

+54
-12
lines changed

4 files changed

+54
-12
lines changed

‎.changeset/crazy-impalas-pick.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'eslint-plugin-vue': minor
3+
---
4+
5+
[vue/no-restricted-html-elements](https://eslint.vuejs.org/rules/no-restricted-html-elements.html) now accepts multiple elements in each entry.

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

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -37,16 +37,16 @@ This rule takes a list of strings, where each string is an HTML element name to
3737

3838
```json
3939
{
40-
"vue/no-restricted-html-elements": ["error", "button", "marquee"]
40+
"vue/no-restricted-html-elements": ["error", "a", "marquee"]
4141
}
4242
```
4343

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

4646
```vue
4747
<template>
4848
<!-- ✗ BAD -->
49-
<button></button>
49+
<a></a>
5050
<marquee></marquee>
5151
</template>
5252
```
@@ -60,8 +60,8 @@ Alternatively, the rule also accepts objects.
6060
"vue/no-restricted-html-elements": [
6161
"error",
6262
{
63-
"element": "button",
64-
"message": "Prefer use of our custom <AppButton /> component"
63+
"element": ["a", "RouterLink"],
64+
"message": "Prefer the use of <NuxtLink> component"
6565
},
6666
{
6767
"element": "marquee",
@@ -73,18 +73,18 @@ Alternatively, the rule also accepts objects.
7373

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

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

79-
### `{ "element": "marquee" }, { "element": "button" }`
79+
### `{ "element": "marquee" }, { "element": "a" }`
8080

81-
<eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', { element: 'marquee' }, { element: 'button' }]}">
81+
<eslint-code-block :rules="{'vue/no-restricted-html-elements': ['error', { element: 'marquee' }, { element: 'a' }]}">
8282

8383
```vue
8484
<template>
8585
<!-- ✗ BAD -->
8686
<marquee></marquee>
87-
<button></button>
87+
<a></a>
8888
</template>
8989
```
9090

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

Lines changed: 13 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,12 @@ module.exports = {
2323
{
2424
type: 'object',
2525
properties: {
26-
element: { type: 'string' },
26+
element: {
27+
oneOf: [
28+
{ type: 'string' },
29+
{ type: 'array', items: { type: 'string' } }
30+
]
31+
},
2732
message: { type: 'string', minLength: 1 }
2833
},
2934
required: ['element'],
@@ -55,9 +60,12 @@ module.exports = {
5560
}
5661

5762
for (const option of context.options) {
58-
const element = option.element || option
63+
const restrictedItem = option.element || option
64+
const elementsToRestrict = Array.isArray(restrictedItem)
65+
? restrictedItem
66+
: [restrictedItem]
5967

60-
if (element===node.rawName) {
68+
if (elementsToRestrict.includes(node.rawName)) {
6169
context.report({
6270
messageId: option.message ? 'customMessage' : 'forbiddenElement',
6371
data: {
@@ -66,6 +74,8 @@ module.exports = {
6674
},
6775
node: node.startTag
6876
})
77+
78+
return
6979
}
7080
}
7181
}

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

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,11 @@ tester.run('no-restricted-html-elements', rule, {
3131
filename: 'test.vue',
3232
code: '<template><div class="foo"><Button type="button"></Button></div></template>',
3333
options: ['button']
34+
},
35+
{
36+
filename: 'test.vue',
37+
code: '<template><main><article></article></main></template>',
38+
options: [{ element: ['div', 'span'] }]
3439
}
3540
],
3641
invalid: [
@@ -69,6 +74,28 @@ tester.run('no-restricted-html-elements', rule, {
6974
column: 11
7075
}
7176
]
77+
},
78+
{
79+
filename: 'test.vue',
80+
code: '<template><a></a><RouterLink></RouterLink></template>',
81+
options: [
82+
{
83+
element: ['a', 'RouterLink'],
84+
message: 'Prefer the use of <NuxtLink> component'
85+
}
86+
],
87+
errors: [
88+
{
89+
message: 'Prefer the use of <NuxtLink> component',
90+
line: 1,
91+
column: 11
92+
},
93+
{
94+
message: 'Prefer the use of <NuxtLink> component',
95+
line: 1,
96+
column: 18
97+
}
98+
]
7299
}
73100
]
74101
})

0 commit comments

Comments
(0)

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