Skip to content

Commit 1dda641

Browse files
chadwickellischadwickellis
authored
Merge branch 'master' into master
2 parents d4ce89d + a270df8 commit 1dda641

25 files changed

+1189
-98
lines changed

‎docs/rules/attribute-hyphenation.md‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,19 @@ This rule enforces using hyphenated attribute names on custom components in Vue
3636
```json
3737
{
3838
"vue/attribute-hyphenation": ["error", "always" | "never", {
39-
"ignore": []
39+
"ignore": [],
40+
"ignoreTags": []
4041
}]
4142
}
4243
```
4344

4445
Default casing is set to `always`. By default the following attributes are ignored: `data-`, `aria-`, `slot-scope`,
4546
and all the [SVG attributes](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute) with either an upper case letter or an hyphen.
4647

47-
- `"always"` (default) ... Use hyphenated name.
48-
- `"never"` ... Don't use hyphenated name except the ones that are ignored.
49-
- `"ignore"` ... Array of ignored names
48+
- `"always"` (default) ... Use hyphenated attribute name.
49+
- `"never"` ... Don't use hyphenated attribute name.
50+
- `"ignore"` ... Array of attribute names that don't need to follow the specified casing.
51+
- `"ignoreTags"` ... Array of tag names whose attributes don't need to follow the specified casing.
5052

5153
### `"always"`
5254

@@ -109,6 +111,22 @@ Don't use hyphenated name but allow custom attributes
109111

110112
</eslint-code-block>
111113

114+
### `"never", { "ignoreTags": ["/^custom-/"] }`
115+
116+
<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', { ignoreTags: ['/^custom-/'] }]}">
117+
118+
```vue
119+
<template>
120+
<!-- ✓ GOOD -->
121+
<custom-component my-prop="prop" />
122+
123+
<!-- ✗ BAD -->
124+
<my-component my-prop="prop" />
125+
</template>
126+
```
127+
128+
</eslint-code-block>
129+
112130
## :couple: Related Rules
113131

114132
- [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)

‎docs/rules/index.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -281,7 +281,9 @@ For example:
281281
| [vue/require-prop-comment](./require-prop-comment.md) | require props to have a comment | | :hammer: |
282282
| [vue/require-typed-object-prop](./require-typed-object-prop.md) | enforce adding type declarations to object props | :bulb: | :hammer: |
283283
| [vue/require-typed-ref](./require-typed-ref.md) | require `ref` and `shallowRef` functions to be strongly typed | | :hammer: |
284+
| [vue/restricted-component-names](./restricted-component-names.md) | enforce using only specific component names | | :warning: |
284285
| [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
286+
| [vue/slot-name-casing](./slot-name-casing.md) | enforce specific casing for slot names | | :hammer: |
285287
| [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components | | :hammer: |
286288
| [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
287289
| [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |

‎docs/rules/no-duplicate-attr-inheritance.md‎

Lines changed: 34 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,9 +13,9 @@ since: v7.0.0
1313
## :book: Rule Details
1414

1515
This rule aims to prevent duplicate attribute inheritance.
16-
This rule to warn to apply `inheritAttrs: false` when it detects `v-bind="$attrs"` being used.
16+
This rule suggests applying `inheritAttrs: false` when it detects `v-bind="$attrs"` being used.
1717

18-
<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error']}">
18+
<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error', { checkMultiRootNodes: false }]}">
1919

2020
```vue
2121
<template>
@@ -26,11 +26,12 @@ export default {
2626
/* ✓ GOOD */
2727
inheritAttrs: false
2828
}
29+
</script>
2930
```
3031

3132
</eslint-code-block>
3233

33-
<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error']}">
34+
<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error', { checkMultiRootNodes: false }]}">
3435

3536
```vue
3637
<template>
@@ -41,17 +42,46 @@ export default {
4142
/* ✗ BAD */
4243
// inheritAttrs: true (default)
4344
}
45+
</script>
4446
```
4547

4648
</eslint-code-block>
4749

4850
## :wrench: Options
4951

50-
Nothing.
52+
```json
53+
{
54+
"vue/no-duplicate-attr-inheritance": ["error", {
55+
"checkMultiRootNodes": false,
56+
}]
57+
}
58+
```
59+
60+
- `"checkMultiRootNodes"`: If set to `true`, also suggest applying `inheritAttrs: false` to components with multiple root nodes (where `inheritAttrs: false` is the implicit default, see [attribute inheritance on multiple root nodes](https://vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes)), whenever it detects `v-bind="$attrs"` being used. Default is `false`, which will ignore components with multiple root nodes.
61+
62+
### `"checkMultiRootNodes": true`
63+
64+
<eslint-code-block :rules="{'vue/no-duplicate-attr-inheritance': ['error', { checkMultiRootNodes: true }]}">
65+
66+
```vue
67+
<template>
68+
<div v-bind="$attrs" />
69+
<div />
70+
</template>
71+
<script>
72+
export default {
73+
/* ✗ BAD */
74+
// inheritAttrs: true (default)
75+
}
76+
</script>
77+
```
78+
79+
</eslint-code-block>
5180

5281
## :books: Further Reading
5382

5483
- [API - inheritAttrs](https://vuejs.org/api/options-misc.html#inheritattrs)
84+
- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes)
5585

5686
## :rocket: Version
5787

‎docs/rules/no-restricted-component-names.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,10 @@ export default {
8484

8585
</eslint-code-block>
8686

87+
## :couple: Related Rules
88+
89+
- [vue/restricted-component-names](./restricted-component-names.md)
90+
8791
## :rocket: Version
8892

8993
This rule was introduced in eslint-plugin-vue v9.15.0

‎docs/rules/no-v-text-v-html-on-component.md‎

Lines changed: 23 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,15 @@ If you use v-text / v-html on a component, it will overwrite the component's con
2525
<!-- ✓ GOOD -->
2626
<div v-text="content"></div>
2727
<div v-html="html"></div>
28+
<svg><g v-text="content" /></svg>
29+
<math><mi v-text="content" /></math>
2830
<MyComponent>{{ content }}</MyComponent>
2931
3032
<!-- ✗ BAD -->
3133
<MyComponent v-text="content"></MyComponent>
3234
<MyComponent v-html="html"></MyComponent>
35+
<g v-text="content" />
36+
<mi v-text="content" />
3337
</template>
3438
```
3539

@@ -39,14 +43,15 @@ If you use v-text / v-html on a component, it will overwrite the component's con
3943

4044
```json
4145
{
42-
"vue/no-v-text-v-html-on-component": [
43-
"error",
44-
{ "allow": ["router-link", "nuxt-link"] }
45-
]
46+
"vue/no-v-text-v-html-on-component": ["error", {
47+
"allow": ["router-link", "nuxt-link"],
48+
"ignoreElementNamespaces": false
49+
}]
4650
}
4751
```
4852

4953
- `allow` (`string[]`) ... Specify a list of custom components for which the rule should not apply.
54+
- `ignoreElementNamespaces` (`boolean`) ... If `true`, always treat SVG and MathML tag names as HTML elements, even if they are not used inside a SVG/MathML root element. Default is `false`.
5055

5156
### `{ "allow": ["router-link", "nuxt-link"] }`
5257

@@ -65,6 +70,20 @@ If you use v-text / v-html on a component, it will overwrite the component's con
6570

6671
</eslint-code-block>
6772

73+
### `{ "ignoreElementNamespaces": true }`
74+
75+
<eslint-code-block :rules="{'vue/no-v-text-v-html-on-component': ['error', { ignoreElementNamespaces: true }]}">
76+
77+
```vue
78+
<template>
79+
<!-- ✓ GOOD -->
80+
<g v-text="content" /> <!-- SVG element not inside of <svg> -->
81+
<mi v-text="content" /> <!-- MathML element not inside of <math> -->
82+
</template>
83+
```
84+
85+
</eslint-code-block>
86+
6887
## :rocket: Version
6988

7089
This rule was introduced in eslint-plugin-vue v8.4.0

‎docs/rules/restricted-component-names.md‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/restricted-component-names
5+
description: enforce using only specific component names
6+
---
7+
8+
# vue/restricted-component-names
9+
10+
> enforce using only specific component names
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 consistency in component names.
17+
18+
<eslint-code-block :rules="{ 'vue/restricted-component-names': ['error'] }">
19+
20+
```vue
21+
<template>
22+
<!-- ✓ GOOD -->
23+
<button/>
24+
<keep-alive></keep-alive>
25+
26+
<!-- ✗ BAD -->
27+
<custom-component />
28+
</template>
29+
```
30+
31+
</eslint-code-block>
32+
33+
## :wrench: Options
34+
35+
```json
36+
{
37+
"vue/restricted-component-names": ["error", {
38+
"allow": []
39+
}]
40+
}
41+
```
42+
43+
### `"allow"`
44+
45+
<eslint-code-block :rules="{'vue/restricted-component-names': ['error', { 'allow': ['/^custom-/'] }]}">
46+
47+
```vue
48+
<template>
49+
<!-- ✓ GOOD -->
50+
<custom-component />
51+
52+
<!-- ✗ BAD -->
53+
<my-component />
54+
</template>
55+
```
56+
57+
</eslint-code-block>
58+
59+
## :couple: Related Rules
60+
61+
- [vue/no-restricted-component-names](./no-restricted-component-names.md)
62+
63+
## :mag: Implementation
64+
65+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/restricted-component-names.js)
66+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/restricted-component-names.js)

‎docs/rules/slot-name-casing.md‎

Lines changed: 88 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,88 @@
1+
---
2+
pageClass: rule-details
3+
sidebarDepth: 0
4+
title: vue/slot-name-casing
5+
description: enforce specific casing for slot names
6+
---
7+
8+
# vue/slot-name-casing
9+
10+
> enforce specific casing for slot names
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 proper casing of slot names in Vue components.
17+
18+
<eslint-code-block :rules="{'vue/slot-name-casing': ['error']}">
19+
20+
```vue
21+
<template>
22+
<!-- ✓ GOOD -->
23+
<slot name="foo" />
24+
<slot name="fooBar" />
25+
26+
<!-- ✗ BAD -->
27+
<slot name="foo-bar" />
28+
<slot name="foo_bar" />
29+
<slot name="foo:bar" />
30+
</template>
31+
```
32+
33+
</eslint-code-block>
34+
35+
## :wrench: Options
36+
37+
```json
38+
{
39+
"vue/slot-name-casing": ["error", "camelCase" | "kebab-case" | "singleword"]
40+
}
41+
```
42+
43+
- `"camelCase"` (default) ... Enforce slot name to be in camel case.
44+
- `"kebab-case"` ... Enforce slot name to be in kebab case.
45+
- `"singleword"` ... Enforce slot name to be a single word.
46+
47+
### `"kebab-case"`
48+
49+
<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'kebab-case']}">
50+
51+
```vue
52+
<template>
53+
<!-- ✓ GOOD -->
54+
<slot name="foo" />
55+
<slot name="foo-bar" />
56+
57+
<!-- ✗ BAD -->
58+
<slot name="fooBar" />
59+
<slot name="foo_bar" />
60+
<slot name="foo:bar" />
61+
</template>
62+
```
63+
64+
</eslint-code-block>
65+
66+
### `"singleword"`
67+
68+
<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'singleword']}">
69+
70+
```vue
71+
<template>
72+
<!-- ✓ GOOD -->
73+
<slot name="foo" />
74+
75+
<!-- ✗ BAD -->
76+
<slot name="foo-bar" />
77+
<slot name="fooBar" />
78+
<slot name="foo_bar" />
79+
<slot name="foo:bar" />
80+
</template>
81+
```
82+
83+
</eslint-code-block>
84+
85+
## :mag: Implementation
86+
87+
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/slot-name-casing.js)
88+
- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/slot-name-casing.js)

‎docs/rules/v-on-event-hyphenation.md‎

Lines changed: 22 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -39,14 +39,16 @@ This rule enforces using hyphenated v-on event names on custom components in Vue
3939
{
4040
"vue/v-on-event-hyphenation": ["error", "always" | "never", {
4141
"autofix": false,
42-
"ignore": []
42+
"ignore": [],
43+
"ignoreTags": []
4344
}]
4445
}
4546
```
4647

47-
- `"always"` (default) ... Use hyphenated name.
48-
- `"never"` ... Don't use hyphenated name.
49-
- `"ignore"` ... Array of ignored names
48+
- `"always"` (default) ... Use hyphenated event name.
49+
- `"never"` ... Don't use hyphenated event name.
50+
- `"ignore"` ... Array of event names that don't need to follow the specified casing.
51+
- `"ignoreTags"` ... Array of tag names whose events don't need to follow the specified casing.
5052
- `"autofix"` ... If `true`, enable autofix. If you are using Vue 2, we recommend that you do not use it due to its side effects.
5153

5254
### `"always"`
@@ -104,6 +106,22 @@ Don't use hyphenated name but allow custom event names
104106

105107
</eslint-code-block>
106108

109+
### `"never", { "ignoreTags": ["/^custom-/"] }`
110+
111+
<eslint-code-block fix :rules="{'vue/v-on-event-hyphenation': ['error', 'never', { ignoreTags: ['/^custom-/'], autofix: true }]}">
112+
113+
```vue
114+
<template>
115+
<!-- ✓ GOOD -->
116+
<custom-component v-on:my-event="handleEvent" />
117+
118+
<!-- ✗ BAD -->
119+
<my-component v-on:my-event="handleEvent" />
120+
</template>
121+
```
122+
123+
</eslint-code-block>
124+
107125
## :couple: Related Rules
108126

109127
- [vue/custom-event-name-casing](./custom-event-name-casing.md)

0 commit comments

Comments
 (0)