-
+
This is my first
list item
+ This is my second
list item
+
-
+
+
+```
+
+
+
+
+
+
+
+```
+
+### `"PascalCase"` (default)
+
+
@@ -48,32 +52,46 @@ This rule aims to warn the right angle brackets which are at the location other
class="bar">
```
+
## :wrench: Options
```json
{
- "vue/html-closing-bracket-newline": ["error", {
- "singleline": "never",
- "multiline": "always"
- }]
+ "vue/html-closing-bracket-newline": [
+ "error",
+ {
+ "singleline": "never",
+ "multiline": "always",
+ "selfClosingTag": {
+ "singleline": "never",
+ "multiline": "always"
+ }
+ }
+ ]
}
```
-- `singleline` ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line as the opening bracket.
- - `"never"` (default) ... disallow line breaks before the closing bracket.
- - `"always"` ... require one line break before the closing bracket.
-- `multiline` ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
- - `"never"` ... disallow line breaks before the closing bracket.
- - `"always"` (default) ... require one line break before the closing bracket.
+- `singleline` (`"never"` by default) ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line as the opening bracket.
+- `multiline` (`"always"` by default) ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
+- `selfClosingTag.singleline` ... the configuration for single-line self closing elements.
+- `selfClosingTag.multiline` ... the configuration for multiline self closing elements.
+
+Every option can be set to one of the following values:
+
+- `"always"` ... require one line break before the closing bracket.
+- `"never"` ... disallow line breaks before the closing bracket.
+
+If `selfClosingTag` is not specified, the `singleline` and `multiline` options are inherited for self-closing tags.
Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-level of the closing brackets.
### `"multiline": "never"`
-```
+
+```vue
```
+
+
+
+### `"selfClosingTag": { "multiline": "always" }`
+
+
+
+```vue
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v4.1.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-closing-bracket-newline.js)
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 20292810c..d1927b4e1 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -3,19 +3,23 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/html-closing-bracket-spacing
description: require or disallow a space before tag's closing brackets
+since: v4.1.0
---
+
# vue/html-closing-bracket-spacing
+
> require or disallow a space before tag's closing brackets
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule aims to enforce consistent spacing style before closing brackets `>` of tags.
-```
+
+```vue
@@ -36,6 +40,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
```
+
## :wrench: Options
@@ -51,19 +56,20 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
```
- `startTag` (`"always" | "never"`) ... Setting for the `>` of start tags (e.g. `
-```
+
+```vue
+
+```vue
+
+
+
+
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
+:::
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
+
+[vue/no-parsing-error]: ./no-parsing-error.md
+
+## :books: Further Reading
+
+- [Guide (for v2) - `.sync` Modifier](https://v2.vuejs.org/v2/guide/components-custom-events.html#sync-Modifier)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-bind-sync.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-bind-sync.js)
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index 8078cd7fd..64badbb6a 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-bind
description: enforce valid `v-bind` directives
+since: v3.11.0
---
+
# vue/valid-v-bind
+
> enforce valid `v-bind` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-bind` directive is valid.
@@ -21,36 +24,44 @@ This rule reports `v-bind` directives in the following cases:
This rule does not report `v-bind` directives which do not have their argument (E.g. ``) because it's valid if the attribute value is an object.
+
```vue
-
-
-
-
+
+
+
+
-
-
-
+
+
```
+
::: warning Note
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
:::
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
+- [vue/no-deprecated-v-bind-sync]
+- [vue/valid-v-bind-sync]
-- [no-parsing-error]
+[vue/no-parsing-error]: ./no-parsing-error.md
+[vue/no-deprecated-v-bind-sync]: ./no-deprecated-v-bind-sync.md
+[vue/valid-v-bind-sync]: ./valid-v-bind-sync.md
+## :rocket: Version
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 64aabba67..57c60edcf 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-cloak
description: enforce valid `v-cloak` directives
+since: v3.11.0
---
+
# vue/valid-v-cloak
+
> enforce valid `v-cloak` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-cloak` directive is valid.
@@ -20,23 +23,29 @@ This rule reports `v-cloak` directives in the following cases:
- The directive has that attribute value. E.g. ``
+
```vue
-
+
-
-
-
+
+
+
```
+
## :wrench: Options
Nothing.
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.11.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-cloak.js)
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index dfe7d99de..13959825b 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-else-if
description: enforce valid `v-else-if` directives
+since: v3.11.0
---
+
# vue/valid-v-else-if
+
> enforce valid `v-else-if` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-else-if` directive is valid.
@@ -22,38 +25,44 @@ This rule reports `v-else-if` directives in the following cases:
- The directive is on the elements which have `v-if`/`v-else` directives. E.g. ``
+
```vue
-
-
+
+
-
-
-
+
+
+
+
```
+
::: warning Note
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
:::
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/valid-v-if]
+- [vue/valid-v-else]
+- [vue/no-parsing-error]
-- [valid-v-if]
-- [valid-v-else]
-- [no-parsing-error]
+[vue/valid-v-if]: ./valid-v-if.md
+[vue/valid-v-else]: ./valid-v-else.md
+[vue/no-parsing-error]: ./no-parsing-error.md
+## :rocket: Version
-[valid-v-if]: valid-v-if.md
-[valid-v-else]: valid-v-else.md
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 7092b3225..23df5787b 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-else
description: enforce valid `v-else` directives
+since: v3.11.0
---
+
# vue/valid-v-else
+
> enforce valid `v-else` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-else` directive is valid.
@@ -18,38 +21,44 @@ This rule reports `v-else` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
- The directive has that attribute value. E.g. ``
-- The directive is on the elements that the previous element don't have `v-if`/`v-if-else` directives. E.g. ``
-- The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. ``
+- The directive is on the elements that the previous element don't have `v-if`/`v-else-if` directives. E.g. ``
+- The directive is on the elements which have `v-if`/`v-else-if` directives. E.g. ``
+
```vue
-
-
+
+
-
-
-
+
+
+
+
```
+
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/valid-v-if]
+- [vue/valid-v-else-if]
+- [vue/no-parsing-error]
-- [valid-v-if]
-- [valid-v-else-if]
-- [no-parsing-error]
+[vue/valid-v-if]: ./valid-v-if.md
+[vue/valid-v-else-if]: ./valid-v-else-if.md
+[vue/no-parsing-error]: ./no-parsing-error.md
+## :rocket: Version
-[valid-v-if]: valid-v-if.md
-[valid-v-else-if]: valid-v-else-if.md
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 9d4a5c78f..f0e49c5e1 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-for
description: enforce valid `v-for` directives
+since: v3.11.0
---
+
# vue/valid-v-for
+
> enforce valid `v-for` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-for` directive is valid.
@@ -21,9 +24,10 @@ This rule reports `v-for` directives in the following cases:
- If the element which has the directive is a custom component, the component does not have `v-bind:key` directive. E.g. `
+
```vue
@@ -53,10 +57,11 @@ If the element which has the directive is a reserved element, this rule does not
/>
```
+
::: warning Note
-This rule does not check syntax errors in directives. [no-parsing-error] rule reports it.
+This rule does not check syntax errors in directives. [vue/no-parsing-error] rule reports it.
The following cases are syntax errors:
- The directive's value isn't `alias in expr`. E.g. ``
@@ -67,14 +72,17 @@ The following cases are syntax errors:
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/require-v-for-key]
+- [vue/no-parsing-error]
-- [require-v-for-key]
-- [no-parsing-error]
+[vue/require-v-for-key]: ./require-v-for-key.md
+[vue/no-parsing-error]: ./no-parsing-error.md
+## :rocket: Version
-[require-v-for-key]: require-v-for-key.md
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index 37125ab17..75e3c233d 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-html
description: enforce valid `v-html` directives
+since: v3.11.0
---
+
# vue/valid-v-html
+
> enforce valid `v-html` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-html` directive is valid.
@@ -20,33 +23,38 @@ This rule reports `v-html` directives in the following cases:
- The directive does not have that attribute value. E.g. ``
+
```vue
-
+
-
-
-
+
+
+
```
+
::: warning Note
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
:::
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
-- [no-parsing-error]
+[vue/no-parsing-error]: ./no-parsing-error.md
+## :rocket: Version
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 023de85fd..8e45793f8 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-if
description: enforce valid `v-if` directives
+since: v3.11.0
---
+
# vue/valid-v-if
+
> enforce valid `v-if` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-if` directive is valid.
@@ -21,17 +24,18 @@ This rule reports `v-if` directives in the following cases:
- The directive is on the elements which have `v-else`/`v-else-if` directives. E.g. ``
+
```vue
-
-
-
+
+
+
-
-
-
+
+
+
```
+
::: warning Note
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
:::
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/valid-v-else]
+- [vue/valid-v-else-if]
+- [vue/no-parsing-error]
-- [valid-v-else]
-- [valid-v-else-if]
-- [no-parsing-error]
+[vue/valid-v-else]: ./valid-v-else.md
+[vue/valid-v-else-if]: ./valid-v-else-if.md
+[vue/no-parsing-error]: ./no-parsing-error.md
+## :rocket: Version
-[valid-v-else]: valid-v-else.md
-[valid-v-else-if]: valid-v-else-if.md
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-is.md b/docs/rules/valid-v-is.md
new file mode 100644
index 000000000..294b55f5b
--- /dev/null
+++ b/docs/rules/valid-v-is.md
@@ -0,0 +1,73 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-is
+description: enforce valid `v-is` directives
+since: v7.0.0
+---
+
+# vue/valid-v-is
+
+> enforce valid `v-is` directives
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+This rule checks whether every `v-is` directive is valid.
+
+## :book: Rule Details
+
+This rule reports `v-is` directives in the following cases:
+
+- The directive has that argument. E.g. ``
+- The directive has that modifier. E.g. ``
+- The directive does not have that attribute value. E.g. ``
+- The directive is on Vue-components. E.g. `
+
+```vue
+
+
+
+
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
+:::
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/no-deprecated-v-is]
+- [vue/no-parsing-error]
+
+[vue/no-deprecated-v-is]: ./no-deprecated-v-is.md
+[vue/no-parsing-error]: ./no-parsing-error.md
+
+## :books: Further Reading
+
+- [API - v-is (Recent)](https://github.com/vuejs/docs/blob/8b4f11a4e94d01c7f1c91a60ceaa5b89d6b6de9f/src/api/built-in-directives.md#v-is-)
+- [API - v-is (Old)](https://github.com/vuejs/docs-next/blob/008613756c3d781128d96b64a2d27f7598f8f548/src/api/directives.md#v-is)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-is.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-is.js)
diff --git a/docs/rules/valid-v-memo.md b/docs/rules/valid-v-memo.md
new file mode 100644
index 000000000..c276eb8b4
--- /dev/null
+++ b/docs/rules/valid-v-memo.md
@@ -0,0 +1,72 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-memo
+description: enforce valid `v-memo` directives
+since: v7.16.0
+---
+
+# vue/valid-v-memo
+
+> enforce valid `v-memo` directives
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+This rule checks whether every `v-memo` directive is valid.
+
+## :book: Rule Details
+
+This rule reports `v-memo` directives in the following cases:
+
+- The directive has that argument. E.g. ``
+- The directive has that modifier. E.g. ``
+- The directive does not have that attribute value. E.g. ``
+- The attribute value of the directive is definitely not array. E.g. ``
+- The directive was used inside v-for. E.g. `
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
+:::
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
+
+[vue/no-parsing-error]: ./no-parsing-error.md
+
+## :books: Further Reading
+
+- [API - v-memo](https://vuejs.org/api/built-in-directives.html#v-memo)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.16.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-memo.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-memo.js)
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 7d59a1588..0bc38d1b0 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-model
description: enforce valid `v-model` directives
+since: v3.11.0
---
+
# vue/valid-v-model
+
> enforce valid `v-model` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-model` directive is valid.
@@ -15,52 +18,64 @@ This rule checks whether every `v-model` directive is valid.
This rule reports `v-model` directives in the following cases:
-- The directive has that argument. E.g. ``
-- The directive has the modifiers which are not supported. E.g. ``
+- The directive used on HTMLElement has an argument. E.g. ``
+- The directive used on HTMLElement has modifiers which are not supported. E.g. ``
- The directive does not have that attribute value. E.g. ``
-- The directive does not have the attribute value which is valid as LHS. E.g. ``
+- The directive does not have the attribute value which is valid as LHS. E.g. ``, ``
+- The directive has potential null object property access. E.g. ``
- The directive is on unsupported elements. E.g. ``
- The directive is on `` elements which their types are `file`. E.g. ``
- The directive's reference is iteration variables. E.g. ``
+
```vue
-
-
-
-
::: warning Note
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
:::
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
+
+[vue/no-parsing-error]: ./no-parsing-error.md
-- [no-parsing-error]
+## :rocket: Version
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index e9eaa5a86..acfb630b7 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-on
description: enforce valid `v-on` directives
+since: v3.11.0
---
+
# vue/valid-v-on
+
> enforce valid `v-on` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-on` directive is valid.
@@ -20,34 +23,36 @@ This rule reports `v-on` directives in the following cases:
- The directive does not have that attribute value and any verb modifiers. E.g. ``
+
```vue
-
-
-
-
-
-
+
+
+
+
+
+
-
-
-
-
+
+
+
+
```
+
::: warning Note
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
:::
## :wrench: Options
```json
{
- "vue/prop-name-casing": ["error", {
+ "vue/valid-v-on": ["error", {
"modifiers": []
}]
}
@@ -60,19 +65,25 @@ This rule has an object option:
### `"modifiers": ["foo"]`
+
```vue
-
-
+
+
```
+
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
+
+[vue/no-parsing-error]: ./no-parsing-error.md
-- [no-parsing-error]
+## :rocket: Version
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index fbeeb09e4..daa711b8d 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-once
description: enforce valid `v-once` directives
+since: v3.11.0
---
+
# vue/valid-v-once
+
> enforce valid `v-once` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-once` directive is valid.
@@ -20,23 +23,29 @@ This rule reports `v-once` directives in the following cases:
- The directive has that attribute value. E.g. ``
+
```vue
-
+
-
-
-
+
+
+
```
+
## :wrench: Options
Nothing.
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.11.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-once.js)
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index 75a21c896..0464ed3d7 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-pre
description: enforce valid `v-pre` directives
+since: v3.11.0
---
+
# vue/valid-v-pre
+
> enforce valid `v-pre` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-pre` directive is valid.
@@ -20,23 +23,29 @@ This rule reports `v-pre` directives in the following cases:
- The directive has that attribute value. E.g. ``
+
```vue
-
+
-
-
-
+
+
+
```
+
## :wrench: Options
Nothing.
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.11.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-pre.js)
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index fe4d09093..5be8a50a5 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-show
description: enforce valid `v-show` directives
+since: v3.11.0
---
+
# vue/valid-v-show
+
> enforce valid `v-show` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-show` directive is valid.
@@ -18,34 +21,42 @@ This rule reports `v-show` directives in the following cases:
- The directive has that argument. E.g. ``
- The directive has that modifier. E.g. ``
- The directive does not have that attribute value. E.g. ``
+- The directive is put on `` tag. E.g. ``
+
```vue
-
+
-
-
-
+
+
+
+
```
+
::: warning Note
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
:::
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
+
+[vue/no-parsing-error]: ./no-parsing-error.md
-- [no-parsing-error]
+## :rocket: Version
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/valid-v-slot.md b/docs/rules/valid-v-slot.md
new file mode 100644
index 000000000..0c0c9e564
--- /dev/null
+++ b/docs/rules/valid-v-slot.md
@@ -0,0 +1,157 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-slot
+description: enforce valid `v-slot` directives
+since: v7.0.0
+---
+
+# vue/valid-v-slot
+
+> enforce valid `v-slot` directives
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+This rule checks whether every `v-slot` directive is valid.
+
+## :book: Rule Details
+
+This rule reports `v-slot` directives in the following cases:
+
+- The directive is not owned by a custom element. E.g. ``
+- The directive is a named slot and is on a custom element directly. E.g. `
+
+```vue
+
+
+
+ {{ data }}
+
+
+
+ default
+
+
+ one
+
+
+ two
+
+
+
+
+
+ {{ data }}
+
+
+ {{ data }}
+
+ one
+
+
+
+
+ one and two
+
+
+
+ one 1
+
+
+ one 2
+
+
+
+
+
+ dynamic?
+
+
+
+
+ {{ data }}
+
+
+
+ content
+
+
+```
+
+
+
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
+:::
+
+## :wrench: Options
+
+```json
+{
+ "vue/valid-v-slot": ["error", {
+ "allowModifiers": false
+ }]
+}
+```
+
+- `allowModifiers` (`boolean`) ... allows having modifiers in the argument of `v-slot` directives. Modifiers just after `v-slot` are still disallowed. E.g. `` default `false`.
+
+### `allowModifiers: true`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+ {{ data }}
+
+
+
+ bar
+
+
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
+
+[vue/no-parsing-error]: ./no-parsing-error.md
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-slot.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-slot.js)
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index 759677c06..093939d01 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-v-text
description: enforce valid `v-text` directives
+since: v3.11.0
---
+
# vue/valid-v-text
+
> enforce valid `v-text` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every `v-text` directive is valid.
@@ -20,32 +23,38 @@ This rule reports `v-text` directives in the following cases:
- The directive does not have that attribute value. E.g. ``
+
```vue
-
+
-
-
-
+
+
+
```
+
::: warning Note
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error] rule.
:::
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/no-parsing-error]
+
+[vue/no-parsing-error]: ./no-parsing-error.md
-- [no-parsing-error]
+## :rocket: Version
-[no-parsing-error]: no-parsing-error.md
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
deleted file mode 100644
index bf1fb7d17..000000000
--- a/docs/user-guide/README.md
+++ /dev/null
@@ -1,215 +0,0 @@
-# User Guide
-
-## :cd: Installation
-
-Via `vue-cli` (**Recommended**):
-```bash
-vue add @vue/cli-plugin-eslint
-```
-
-Via [npm](https://www.npmjs.com/):
-```bash
-npm install --save-dev eslint eslint-plugin-vue
-```
-
-Via [yarn](https://yarnpkg.com/):
-```bash
-yarn add -D eslint eslint-plugin-vue
-```
-
-::: tip Requirements
-- ESLint v5.0.0 or later
-- Node.js v6.5.0 or later
-:::
-
-## :book: Usage
-
-### Configuration
-
-Use `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
-
-Example **.eslintrc.js**:
-
-```js
-module.exports = {
- extends: [
- // add more generic rulesets here, such as:
- // 'eslint:recommended',
- 'plugin:vue/recommended'
- ],
- rules: {
- // override/add rules settings here, such as:
- // 'vue/no-unused-vars': 'error'
- }
-}
-```
-
-See [the rule list](../rules/README.md) to get the `extends` & `rules` that this plugin provides.
-
-:::warning Reporting rules
-By default all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application report warnings. What does it mean? By default - nothing, but if you want - you can set up a treshold and break the build after a certain amount of warnings, instead of any. More informations [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
-:::
-
-### Running ESLint from command line
-
-If you want to run `eslint` from command line, make sure you include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default.
-
-Examples:
-
-```bash
-eslint --ext .js,.vue src
-eslint "src/**/*.{js,vue}"
-```
-
-::: tip
-If you installed [@vue/cli-plugin-eslint](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) you should have `lint` script added in your `package.json`. That means you can just run `yarn lint` or `npm run lint`.
-:::
-
-#### How to use custom parser?
-
-If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [typescript-eslint-parser](https://www.npmjs.com/package/typescript-eslint-parser), you have to use `parserOptions.parser` option instead of `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, so this plugin doesn't work if you overwrote `parser` option.
-
-```diff
-- "parser": "babel-eslint",
- "parserOptions": {
-+ "parser": "babel-eslint",
- "sourceType": "module"
- }
-```
-
-### How ESLint detects components?
-
-All component-related rules are being applied to code that passes any of the following checks:
-
-* `Vue.component()` expression
-* `Vue.extend()` expression
-* `Vue.mixin()` expression
-* `export default {}` in `.vue` or `.jsx` file
-
-If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment `// @vue/component` that marks object in the next line as a Vue component in any file, e.g.:
-
-```js
-// @vue/component
-const CustomComponent = {
- name: 'custom-component',
- template: ''
-}
-```
-
-```js
-Vue.component('AsyncComponent', (resolve, reject) => {
- setTimeout(() => {
- // @vue/component
- resolve({
- name: 'async-component',
- template: ''
- })
- }, 500)
-})
-```
-
-### Disabling rules via ``
-
-You can use ``-like HTML comments in `` of `.vue` files to disable a certain rule temporarily.
-
-For example:
-
-```vue
-
-
- }
+ */
+const DEFAULT_LANGUAGES = {
+ template: ['html'],
+ style: ['css'],
+ script: ['js', 'javascript']
+}
+
+/**
+ * @param {NonNullable} lang
+ */
+function getAllowsLangPhrase(lang) {
+ const langs = [...lang].map((s) => `"${s}"`)
+ switch (langs.length) {
+ case 1: {
+ return langs[0]
+ }
+ default: {
+ return `${langs.slice(0, -1).join(', ')}, and ${langs[langs.length - 1]}`
+ }
+ }
+}
+
+/**
+ * Normalizes a given option.
+ * @param {string} blockName The block name.
+ * @param {UserBlockOptions} option An option to parse.
+ * @returns {BlockOptions} Normalized option.
+ */
+function normalizeOption(blockName, option) {
+ /** @type {Set} */
+ let lang
+
+ if (Array.isArray(option.lang)) {
+ lang = new Set(option.lang)
+ } else if (typeof option.lang === 'string') {
+ lang = new Set([option.lang])
+ } else {
+ lang = new Set()
+ }
+
+ let hasDefault = false
+ for (const def of DEFAULT_LANGUAGES[blockName] || []) {
+ if (lang.has(def)) {
+ lang.delete(def)
+ hasDefault = true
+ }
+ }
+ if (lang.size === 0) {
+ return {
+ lang,
+ allowNoLang: true
+ }
+ }
+ return {
+ lang,
+ allowNoLang: hasDefault || Boolean(option.allowNoLang)
+ }
+}
+/**
+ * Normalizes a given options.
+ * @param { UserOptions } options An option to parse.
+ * @returns {Options} Normalized option.
+ */
+function normalizeOptions(options) {
+ if (!options) {
+ return {}
+ }
+
+ /** @type {Options} */
+ const normalized = {}
+
+ for (const blockName of Object.keys(options)) {
+ const value = options[blockName]
+ if (value) {
+ normalized[blockName] = normalizeOption(blockName, value)
+ }
+ }
+
+ return normalized
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'disallow use other than available `lang`',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/block-lang.html'
+ },
+ schema: [
+ {
+ type: 'object',
+ patternProperties: {
+ '^(?:\\S+)$': {
+ oneOf: [
+ {
+ type: 'object',
+ properties: {
+ lang: {
+ oneOf: [
+ { type: 'string' },
+ {
+ type: 'array',
+ items: {
+ type: 'string'
+ },
+ uniqueItems: true,
+ additionalItems: false
+ }
+ ]
+ },
+ allowNoLang: { type: 'boolean' }
+ },
+ additionalProperties: false
+ }
+ ]
+ }
+ },
+ minProperties: 1,
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ expected:
+ "Only {{allows}} can be used for the 'lang' attribute of '<{{tag}}>'.",
+ missing: "The 'lang' attribute of '<{{tag}}>' is missing.",
+ unexpected: "Do not specify the 'lang' attribute of '<{{tag}}>'.",
+ useOrNot:
+ "Only {{allows}} can be used for the 'lang' attribute of '<{{tag}}>'. Or, not specifying the `lang` attribute is allowed.",
+ unexpectedDefault:
+ "Do not explicitly specify the default language for the 'lang' attribute of '<{{tag}}>'."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const options = normalizeOptions(
+ context.options[0] || {
+ script: { allowNoLang: true },
+ template: { allowNoLang: true },
+ style: { allowNoLang: true }
+ }
+ )
+ if (Object.keys(options).length === 0) {
+ return {}
+ }
+
+ /**
+ * @param {VElement} element
+ * @returns {void}
+ */
+ function verify(element) {
+ const tag = element.name
+ const option = options[tag]
+ if (!option) {
+ return
+ }
+ const lang = utils.getAttribute(element, 'lang')
+ if (lang == null || lang.value == null) {
+ if (!option.allowNoLang) {
+ context.report({
+ node: element.startTag,
+ messageId: 'missing',
+ data: {
+ tag
+ }
+ })
+ }
+ return
+ }
+ if (!option.lang.has(lang.value.value)) {
+ let messageId
+ if (!option.allowNoLang) {
+ messageId = 'expected'
+ } else if (option.lang.size === 0) {
+ messageId = (DEFAULT_LANGUAGES[tag] || []).includes(lang.value.value)
+ ? 'unexpectedDefault'
+ : 'unexpected'
+ } else {
+ messageId = 'useOrNot'
+ }
+ context.report({
+ node: lang,
+ messageId,
+ data: {
+ tag,
+ allows: getAllowsLangPhrase(option.lang)
+ }
+ })
+ }
+ }
+
+ return utils.defineDocumentVisitor(context, {
+ 'VDocumentFragment > VElement': verify
+ })
+ }
+}
diff --git a/lib/rules/block-order.js b/lib/rules/block-order.js
new file mode 100644
index 000000000..d4fdb62ea
--- /dev/null
+++ b/lib/rules/block-order.js
@@ -0,0 +1,185 @@
+/**
+ * @author Yosuke Ota
+ * issue https://github.com/vuejs/eslint-plugin-vue/issues/140
+ */
+'use strict'
+
+const utils = require('../utils')
+const { parseSelector } = require('../utils/selector')
+
+/**
+ * @typedef {import('../utils/selector').VElementSelector} VElementSelector
+ */
+
+const DEFAULT_ORDER = Object.freeze([['script', 'template'], 'style'])
+
+/**
+ * @param {VElement} element
+ * @return {string}
+ */
+function getAttributeString(element) {
+ return element.startTag.attributes
+ .map((attribute) => {
+ if (attribute.value && attribute.value.type !== 'VLiteral') {
+ return ''
+ }
+
+ return `${attribute.key.name}${
+ attribute.value && attribute.value.value
+ ? `=${attribute.value.value}`
+ : ''
+ }`
+ })
+ .join(' ')
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'enforce order of component top-level elements',
+ categories: ['vue3-recommended', 'vue2-recommended'],
+ url: 'https://eslint.vuejs.org/rules/block-order.html'
+ },
+ fixable: 'code',
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ order: {
+ type: 'array',
+ items: {
+ oneOf: [
+ { type: 'string' },
+ { type: 'array', items: { type: 'string' }, uniqueItems: true }
+ ]
+ },
+ uniqueItems: true,
+ additionalItems: false
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ unexpected:
+ "'<{{elementName}}{{elementAttributes}}>' should be above '<{{firstUnorderedName}}{{firstUnorderedAttributes}}>' on line {{line}}."
+ }
+ },
+ /**
+ * @param {RuleContext} context - The rule context.
+ * @returns {RuleListener} AST event handlers.
+ */
+ create(context) {
+ /**
+ * @typedef {object} OrderElement
+ * @property {string} selectorText
+ * @property {VElementSelector} selector
+ * @property {number} index
+ */
+ /** @type {OrderElement[]} */
+ const orders = []
+ /** @type {(string|string[])[]} */
+ const orderOptions =
+ (context.options[0] && context.options[0].order) || DEFAULT_ORDER
+ for (const [index, selectorOrSelectors] of orderOptions.entries()) {
+ if (Array.isArray(selectorOrSelectors)) {
+ for (const selector of selectorOrSelectors) {
+ orders.push({
+ selectorText: selector,
+ selector: parseSelector(selector, context),
+ index
+ })
+ }
+ } else {
+ orders.push({
+ selectorText: selectorOrSelectors,
+ selector: parseSelector(selectorOrSelectors, context),
+ index
+ })
+ }
+ }
+
+ /**
+ * @param {VElement} element
+ */
+ function getOrderElement(element) {
+ return orders.find((o) => o.selector.test(element))
+ }
+ const sourceCode = context.getSourceCode()
+ const documentFragment =
+ sourceCode.parserServices.getDocumentFragment &&
+ sourceCode.parserServices.getDocumentFragment()
+
+ function getTopLevelHTMLElements() {
+ if (documentFragment) {
+ return documentFragment.children.filter(utils.isVElement)
+ }
+ return []
+ }
+
+ return {
+ Program(node) {
+ if (utils.hasInvalidEOF(node)) {
+ return
+ }
+ const elements = getTopLevelHTMLElements()
+
+ const elementsWithOrder = elements.flatMap((element) => {
+ const order = getOrderElement(element)
+ return order ? [{ order, element }] : []
+ })
+ const sourceCode = context.getSourceCode()
+ for (const [index, elementWithOrders] of elementsWithOrder.entries()) {
+ const { order: expected, element } = elementWithOrders
+ const firstUnordered = elementsWithOrder
+ .slice(0, index)
+ .filter(({ order }) => expected.index < order.index)
+ .sort((e1, e2) => e1.order.index - e2.order.index)[0]
+ if (firstUnordered) {
+ const firstUnorderedAttributes = getAttributeString(
+ firstUnordered.element
+ )
+ const elementAttributes = getAttributeString(element)
+
+ context.report({
+ node: element,
+ loc: element.loc,
+ messageId: 'unexpected',
+ data: {
+ elementName: element.name,
+ elementAttributes: elementAttributes
+ ? ` ${elementAttributes}`
+ : '',
+ firstUnorderedName: firstUnordered.element.name,
+ firstUnorderedAttributes: firstUnorderedAttributes
+ ? ` ${firstUnorderedAttributes}`
+ : '',
+ line: firstUnordered.element.loc.start.line
+ },
+ *fix(fixer) {
+ // insert element before firstUnordered
+ const fixedElements = elements.flatMap((it) => {
+ if (it === firstUnordered.element) {
+ return [element, it]
+ } else if (it === element) {
+ return []
+ }
+ return [it]
+ })
+ for (let i = elements.length - 1; i >= 0; i--) {
+ if (elements[i] !== fixedElements[i]) {
+ yield fixer.replaceTextRange(
+ elements[i].range,
+ sourceCode.text.slice(...fixedElements[i].range)
+ )
+ }
+ }
+ }
+ })
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/lib/rules/block-spacing.js b/lib/rules/block-spacing.js
new file mode 100644
index 000000000..37c526e91
--- /dev/null
+++ b/lib/rules/block-spacing.js
@@ -0,0 +1,11 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('block-spacing', {
+ skipDynamicArguments: true
+})
diff --git a/lib/rules/block-tag-newline.js b/lib/rules/block-tag-newline.js
new file mode 100644
index 000000000..22fb12870
--- /dev/null
+++ b/lib/rules/block-tag-newline.js
@@ -0,0 +1,364 @@
+/**
+ * @fileoverview Enforce line breaks style after opening and before closing block-level tags.
+ * @author Yosuke Ota
+ */
+'use strict'
+const utils = require('../utils')
+
+/**
+ * @typedef { 'always' | 'never' | 'consistent' | 'ignore' } OptionType
+ * @typedef { { singleline?: OptionType, multiline?: OptionType, maxEmptyLines?: number } } ContentsOptions
+ * @typedef { ContentsOptions & { blocks?: { [element: string]: ContentsOptions } } } Options
+ * @typedef { Required } ArgsOptions
+ */
+
+/**
+ * @param {string} text Source code as a string.
+ * @returns {number}
+ */
+function getLinebreakCount(text) {
+ return text.split(/\r\n|[\r\n\u2028\u2029]/gu).length - 1
+}
+
+/**
+ * @param {number} lineBreaks
+ */
+function getPhrase(lineBreaks) {
+ switch (lineBreaks) {
+ case 1: {
+ return '1 line break'
+ }
+ default: {
+ return `${lineBreaks} line breaks`
+ }
+ }
+}
+
+const ENUM_OPTIONS = { enum: ['always', 'never', 'consistent', 'ignore'] }
+module.exports = {
+ meta: {
+ type: 'layout',
+ docs: {
+ description:
+ 'enforce line breaks after opening and before closing block-level tags',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/block-tag-newline.html'
+ },
+ fixable: 'whitespace',
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ singleline: ENUM_OPTIONS,
+ multiline: ENUM_OPTIONS,
+ maxEmptyLines: { type: 'number', minimum: 0 },
+ blocks: {
+ type: 'object',
+ patternProperties: {
+ '^(?:\\S+)$': {
+ type: 'object',
+ properties: {
+ singleline: ENUM_OPTIONS,
+ multiline: ENUM_OPTIONS,
+ maxEmptyLines: { type: 'number', minimum: 0 }
+ },
+ additionalProperties: false
+ }
+ },
+ additionalProperties: false
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ unexpectedOpeningLinebreak:
+ "There should be no line break after '<{{tag}}>'.",
+ expectedOpeningLinebreak:
+ "Expected {{expected}} after '<{{tag}}>', but {{actual}} found.",
+ expectedClosingLinebreak:
+ "Expected {{expected}} before '', but {{actual}} found.",
+ missingOpeningLinebreak: "A line break is required after '<{{tag}}>'.",
+ missingClosingLinebreak: "A line break is required before ''."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const sourceCode = context.getSourceCode()
+ const df =
+ sourceCode.parserServices.getDocumentFragment &&
+ sourceCode.parserServices.getDocumentFragment()
+ if (!df) {
+ return {}
+ }
+
+ /**
+ * @param {VStartTag} startTag
+ * @param {string} beforeText
+ * @param {number} beforeLinebreakCount
+ * @param {'always' | 'never'} beforeOption
+ * @param {number} maxEmptyLines
+ * @returns {void}
+ */
+ function verifyBeforeSpaces(
+ startTag,
+ beforeText,
+ beforeLinebreakCount,
+ beforeOption,
+ maxEmptyLines
+ ) {
+ if (beforeOption === 'always') {
+ if (beforeLinebreakCount === 0) {
+ context.report({
+ loc: {
+ start: startTag.loc.end,
+ end: startTag.loc.end
+ },
+ messageId: 'missingOpeningLinebreak',
+ data: { tag: startTag.parent.name },
+ fix(fixer) {
+ return fixer.insertTextAfter(startTag, '\n')
+ }
+ })
+ } else if (maxEmptyLines < beforeLinebreakCount - 1) {
+ context.report({
+ loc: {
+ start: startTag.loc.end,
+ end: sourceCode.getLocFromIndex(
+ startTag.range[1] + beforeText.length
+ )
+ },
+ messageId: 'expectedOpeningLinebreak',
+ data: {
+ tag: startTag.parent.name,
+ expected: getPhrase(maxEmptyLines + 1),
+ actual: getPhrase(beforeLinebreakCount)
+ },
+ fix(fixer) {
+ return fixer.replaceTextRange(
+ [startTag.range[1], startTag.range[1] + beforeText.length],
+ '\n'.repeat(maxEmptyLines + 1)
+ )
+ }
+ })
+ }
+ } else {
+ if (beforeLinebreakCount > 0) {
+ context.report({
+ loc: {
+ start: startTag.loc.end,
+ end: sourceCode.getLocFromIndex(
+ startTag.range[1] + beforeText.length
+ )
+ },
+ messageId: 'unexpectedOpeningLinebreak',
+ data: { tag: startTag.parent.name },
+ fix(fixer) {
+ return fixer.removeRange([
+ startTag.range[1],
+ startTag.range[1] + beforeText.length
+ ])
+ }
+ })
+ }
+ }
+ }
+ /**
+ * @param {VEndTag} endTag
+ * @param {string} afterText
+ * @param {number} afterLinebreakCount
+ * @param {'always' | 'never'} afterOption
+ * @param {number} maxEmptyLines
+ * @returns {void}
+ */
+ function verifyAfterSpaces(
+ endTag,
+ afterText,
+ afterLinebreakCount,
+ afterOption,
+ maxEmptyLines
+ ) {
+ if (afterOption === 'always') {
+ if (afterLinebreakCount === 0) {
+ context.report({
+ loc: {
+ start: endTag.loc.start,
+ end: endTag.loc.start
+ },
+ messageId: 'missingClosingLinebreak',
+ data: { tag: endTag.parent.name },
+ fix(fixer) {
+ return fixer.insertTextBefore(endTag, '\n')
+ }
+ })
+ } else if (maxEmptyLines < afterLinebreakCount - 1) {
+ context.report({
+ loc: {
+ start: sourceCode.getLocFromIndex(
+ endTag.range[0] - afterText.length
+ ),
+ end: endTag.loc.start
+ },
+ messageId: 'expectedClosingLinebreak',
+ data: {
+ tag: endTag.parent.name,
+ expected: getPhrase(maxEmptyLines + 1),
+ actual: getPhrase(afterLinebreakCount)
+ },
+ fix(fixer) {
+ return fixer.replaceTextRange(
+ [endTag.range[0] - afterText.length, endTag.range[0]],
+ '\n'.repeat(maxEmptyLines + 1)
+ )
+ }
+ })
+ }
+ } else {
+ if (afterLinebreakCount > 0) {
+ context.report({
+ loc: {
+ start: sourceCode.getLocFromIndex(
+ endTag.range[0] - afterText.length
+ ),
+ end: endTag.loc.start
+ },
+ messageId: 'unexpectedOpeningLinebreak',
+ data: { tag: endTag.parent.name },
+ fix(fixer) {
+ return fixer.removeRange([
+ endTag.range[0] - afterText.length,
+ endTag.range[0]
+ ])
+ }
+ })
+ }
+ }
+ }
+ /**
+ * @param {VElement} element
+ * @param {ArgsOptions} options
+ * @returns {void}
+ */
+ function verifyElement(element, options) {
+ const { startTag, endTag } = element
+ if (startTag.selfClosing || endTag == null) {
+ return
+ }
+ const text = sourceCode.text.slice(startTag.range[1], endTag.range[0])
+
+ const trimText = text.trim()
+ if (!trimText) {
+ return
+ }
+
+ const option =
+ options.multiline !== options.singleline &&
+ /[\n\r\u2028\u2029]/u.test(text.trim())
+ ? options.multiline
+ : options.singleline
+ if (option === 'ignore') {
+ return
+ }
+ const beforeText = /** @type {RegExpExecArray} */ (/^\s*/u.exec(text))[0]
+ const afterText = /** @type {RegExpExecArray} */ (/\s*$/u.exec(text))[0]
+ const beforeLinebreakCount = getLinebreakCount(beforeText)
+ const afterLinebreakCount = getLinebreakCount(afterText)
+
+ /** @type {'always' | 'never'} */
+ let beforeOption
+ /** @type {'always' | 'never'} */
+ let afterOption
+ if (option === 'always' || option === 'never') {
+ beforeOption = option
+ afterOption = option
+ } else {
+ // consistent
+ if (beforeLinebreakCount > 0 === afterLinebreakCount > 0) {
+ return
+ }
+ beforeOption = 'always'
+ afterOption = 'always'
+ }
+
+ verifyBeforeSpaces(
+ startTag,
+ beforeText,
+ beforeLinebreakCount,
+ beforeOption,
+ options.maxEmptyLines
+ )
+
+ verifyAfterSpaces(
+ endTag,
+ afterText,
+ afterLinebreakCount,
+ afterOption,
+ options.maxEmptyLines
+ )
+ }
+
+ /**
+ * Normalizes a given option value.
+ * @param { Options | undefined } option An option value to parse.
+ * @returns { (element: VElement) => void } Verify function.
+ */
+ function normalizeOptionValue(option) {
+ if (!option) {
+ return normalizeOptionValue({})
+ }
+
+ /** @type {ContentsOptions} */
+ const contentsOptions = option
+ /** @type {ArgsOptions} */
+ const options = {
+ singleline: contentsOptions.singleline || 'consistent',
+ multiline: contentsOptions.multiline || 'always',
+ maxEmptyLines: contentsOptions.maxEmptyLines || 0
+ }
+ const { blocks } = option
+ if (!blocks) {
+ return (element) => verifyElement(element, options)
+ }
+
+ return (element) => {
+ const { name } = element
+ const elementsOptions = blocks[name]
+ if (elementsOptions) {
+ normalizeOptionValue({
+ singleline: elementsOptions.singleline || options.singleline,
+ multiline: elementsOptions.multiline || options.multiline,
+ maxEmptyLines:
+ elementsOptions.maxEmptyLines == null
+ ? options.maxEmptyLines
+ : elementsOptions.maxEmptyLines
+ })(element)
+ } else {
+ verifyElement(element, options)
+ }
+ }
+ }
+
+ const documentFragment = df
+
+ const verify = normalizeOptionValue(context.options[0])
+
+ return utils.defineTemplateBodyVisitor(
+ context,
+ {},
+ {
+ /** @param {Program} node */
+ Program(node) {
+ if (utils.hasInvalidEOF(node)) {
+ return
+ }
+
+ for (const element of documentFragment.children) {
+ if (utils.isVElement(element)) {
+ verify(element)
+ }
+ }
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/brace-style.js b/lib/rules/brace-style.js
new file mode 100644
index 000000000..507f5e101
--- /dev/null
+++ b/lib/rules/brace-style.js
@@ -0,0 +1,11 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('brace-style', {
+ skipDynamicArguments: true
+})
diff --git a/lib/rules/camelcase.js b/lib/rules/camelcase.js
new file mode 100644
index 000000000..8aa43e19b
--- /dev/null
+++ b/lib/rules/camelcase.js
@@ -0,0 +1,9 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapCoreRule('camelcase')
diff --git a/lib/rules/comma-dangle.js b/lib/rules/comma-dangle.js
new file mode 100644
index 000000000..760611cfa
--- /dev/null
+++ b/lib/rules/comma-dangle.js
@@ -0,0 +1,9 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('comma-dangle')
diff --git a/lib/rules/comma-spacing.js b/lib/rules/comma-spacing.js
new file mode 100644
index 000000000..4be3bc85a
--- /dev/null
+++ b/lib/rules/comma-spacing.js
@@ -0,0 +1,13 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('comma-spacing', {
+ skipDynamicArguments: true,
+ skipDynamicArgumentsReport: true,
+ applyDocument: true
+})
diff --git a/lib/rules/comma-style.js b/lib/rules/comma-style.js
new file mode 100644
index 000000000..815bd23be
--- /dev/null
+++ b/lib/rules/comma-style.js
@@ -0,0 +1,20 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('comma-style', {
+ create(_context, { baseHandlers }) {
+ return {
+ VSlotScopeExpression(node) {
+ if (baseHandlers.FunctionExpression) {
+ // @ts-expect-error -- Process params of VSlotScopeExpression as FunctionExpression.
+ baseHandlers.FunctionExpression(node)
+ }
+ }
+ }
+ }
+})
diff --git a/lib/rules/comment-directive.js b/lib/rules/comment-directive.js
index ac08ed0d8..655e222bd 100644
--- a/lib/rules/comment-directive.js
+++ b/lib/rules/comment-directive.js
@@ -1,34 +1,62 @@
/**
* @author Toru Nagashima
*/
-/* eslint-disable eslint-plugin/report-message-format, consistent-docs-description */
+/* eslint-disable eslint-plugin/report-message-format */
'use strict'
-// -----------------------------------------------------------------------------
-// Helpers
-// -----------------------------------------------------------------------------
+const utils = require('../utils')
-const COMMENT_DIRECTIVE_B = /^\s*(eslint-(?:en|dis)able)(?:\s+(\S|\S[\s\S]*\S))?\s*$/
-const COMMENT_DIRECTIVE_L = /^\s*(eslint-disable(?:-next)?-line)(?:\s+(\S|\S[\s\S]*\S))?\s*$/
+/**
+ * @typedef {object} RuleAndLocation
+ * @property {string} RuleAndLocation.ruleId
+ * @property {number} RuleAndLocation.index
+ * @property {string} [RuleAndLocation.key]
+ */
+
+const COMMENT_DIRECTIVE_B = /^\s*(eslint-(?:en|dis)able)(?:\s+|$)/
+const COMMENT_DIRECTIVE_L = /^\s*(eslint-disable(?:-next)?-line)(?:\s+|$)/
+
+/**
+ * Remove the ignored part from a given directive comment and trim it.
+ * @param {string} value The comment text to strip.
+ * @returns {string} The stripped text.
+ */
+function stripDirectiveComment(value) {
+ return value.split(/\s-{2,}\s/u)[0]
+}
/**
* Parse a given comment.
* @param {RegExp} pattern The RegExp pattern to parse.
* @param {string} comment The comment value to parse.
- * @returns {({type:string,rules:string[]})|null} The parsing result.
+ * @returns {({type:string,rules:RuleAndLocation[]})|null} The parsing result.
*/
-function parse (pattern, comment) {
- const match = pattern.exec(comment)
+function parse(pattern, comment) {
+ const text = stripDirectiveComment(comment)
+ const match = pattern.exec(text)
if (match == null) {
return null
}
const type = match[1]
- const rules = (match[2] || '')
- .split(',')
- .map(s => s.trim())
- .filter(Boolean)
+
+ /** @type {RuleAndLocation[]} */
+ const rules = []
+
+ const rulesRe = /([^\s,]+)[\s,]*/g
+ let startIndex = match[0].length
+ rulesRe.lastIndex = startIndex
+
+ let res
+ while ((res = rulesRe.exec(text))) {
+ const ruleId = res[1].trim()
+ rules.push({
+ ruleId,
+ index: startIndex
+ })
+ startIndex = rulesRe.lastIndex
+ }
return { type, rules }
}
@@ -37,15 +65,22 @@ function parse (pattern, comment) {
* Enable rules.
* @param {RuleContext} context The rule context.
* @param {{line:number,column:number}} loc The location information to enable.
- * @param {string} group The group to enable.
- * @param {string[]} rules The rule IDs to enable.
+ * @param { 'block' | 'line' } group The group to enable.
+ * @param {string | null} rule The rule ID to enable.
* @returns {void}
*/
-function enable (context, loc, group, rules) {
- if (rules.length === 0) {
- context.report({ loc, message: '++ {{group}}', data: { group }})
+function enable(context, loc, group, rule) {
+ if (rule) {
+ context.report({
+ loc,
+ messageId: group === 'block' ? 'enableBlockRule' : 'enableLineRule',
+ data: { rule }
+ })
} else {
- context.report({ loc, message: '+ {{group}} {{rules}}', data: { group, rules: rules.join(' ') }})
+ context.report({
+ loc,
+ messageId: group === 'block' ? 'enableBlock' : 'enableLine'
+ })
}
}
@@ -53,15 +88,24 @@ function enable (context, loc, group, rules) {
* Disable rules.
* @param {RuleContext} context The rule context.
* @param {{line:number,column:number}} loc The location information to disable.
- * @param {string} group The group to disable.
- * @param {string[]} rules The rule IDs to disable.
+ * @param { 'block' | 'line' } group The group to disable.
+ * @param {string | null} rule The rule ID to disable.
+ * @param {string} key The disable directive key.
* @returns {void}
*/
-function disable (context, loc, group, rules) {
- if (rules.length === 0) {
- context.report({ loc, message: '-- {{group}}', data: { group }})
+function disable(context, loc, group, rule, key) {
+ if (rule) {
+ context.report({
+ loc,
+ messageId: group === 'block' ? 'disableBlockRule' : 'disableLineRule',
+ data: { rule, key }
+ })
} else {
- context.report({ loc, message: '- {{group}} {{rules}}', data: { group, rules: rules.join(' ') }})
+ context.report({
+ loc,
+ messageId: group === 'block' ? 'disableBlock' : 'disableLine',
+ data: { key }
+ })
}
}
@@ -70,15 +114,40 @@ function disable (context, loc, group, rules) {
* If the comment is `eslint-disable` or `eslint-enable` then it reports the comment.
* @param {RuleContext} context The rule context.
* @param {Token} comment The comment token to process.
+ * @param {boolean} reportUnusedDisableDirectives To report unused eslint-disable comments.
* @returns {void}
*/
-function processBlock (context, comment) {
+function processBlock(context, comment, reportUnusedDisableDirectives) {
const parsed = parse(COMMENT_DIRECTIVE_B, comment.value)
- if (parsed != null) {
- if (parsed.type === 'eslint-disable') {
- disable(context, comment.loc.start, 'block', parsed.rules)
+ if (parsed === null) return
+
+ if (parsed.type === 'eslint-disable') {
+ if (parsed.rules.length > 0) {
+ const rules = reportUnusedDisableDirectives
+ ? reportUnusedRules(context, comment, parsed.type, parsed.rules)
+ : parsed.rules
+ for (const rule of rules) {
+ disable(
+ context,
+ comment.loc.start,
+ 'block',
+ rule.ruleId,
+ rule.key || '*'
+ )
+ }
} else {
- enable(context, comment.loc.start, 'block', parsed.rules)
+ const key = reportUnusedDisableDirectives
+ ? reportUnused(context, comment, parsed.type)
+ : ''
+ disable(context, comment.loc.start, 'block', null, key)
+ }
+ } else {
+ if (parsed.rules.length > 0) {
+ for (const rule of parsed.rules) {
+ enable(context, comment.loc.start, 'block', rule.ruleId)
+ }
+ } else {
+ enable(context, comment.loc.start, 'block', null)
}
}
}
@@ -88,51 +157,199 @@ function processBlock (context, comment) {
* If the comment is `eslint-disable-line` or `eslint-disable-next-line` then it reports the comment.
* @param {RuleContext} context The rule context.
* @param {Token} comment The comment token to process.
+ * @param {boolean} reportUnusedDisableDirectives To report unused eslint-disable comments.
* @returns {void}
*/
-function processLine (context, comment) {
+function processLine(context, comment, reportUnusedDisableDirectives) {
const parsed = parse(COMMENT_DIRECTIVE_L, comment.value)
if (parsed != null && comment.loc.start.line === comment.loc.end.line) {
- const line = comment.loc.start.line + (parsed.type === 'eslint-disable-line' ? 0 : 1)
+ const line =
+ comment.loc.start.line + (parsed.type === 'eslint-disable-line' ? 0 : 1)
const column = -1
- disable(context, { line, column }, 'line', parsed.rules)
- enable(context, { line: line + 1, column }, 'line', parsed.rules)
+ if (parsed.rules.length > 0) {
+ const rules = reportUnusedDisableDirectives
+ ? reportUnusedRules(context, comment, parsed.type, parsed.rules)
+ : parsed.rules
+ for (const rule of rules) {
+ disable(context, { line, column }, 'line', rule.ruleId, rule.key || '')
+ enable(context, { line: line + 1, column }, 'line', rule.ruleId)
+ }
+ } else {
+ const key = reportUnusedDisableDirectives
+ ? reportUnused(context, comment, parsed.type)
+ : ''
+ disable(context, { line, column }, 'line', null, key)
+ enable(context, { line: line + 1, column }, 'line', null)
+ }
}
}
-// -----------------------------------------------------------------------------
-// Rule Definition
-// -----------------------------------------------------------------------------
+/**
+ * Reports unused disable directive.
+ * Do not check the use of directives here. Filter the directives used with postprocess.
+ * @param {RuleContext} context The rule context.
+ * @param {Token} comment The comment token to report.
+ * @param {string} kind The comment directive kind.
+ * @returns {string} The report key
+ */
+function reportUnused(context, comment, kind) {
+ const loc = comment.loc
+
+ context.report({
+ loc,
+ messageId: 'unused',
+ data: { kind }
+ })
+
+ return locToKey(loc.start)
+}
+
+/**
+ * Reports unused disable directive rules.
+ * Do not check the use of directives here. Filter the directives used with postprocess.
+ * @param {RuleContext} context The rule context.
+ * @param {Token} comment The comment token to report.
+ * @param {string} kind The comment directive kind.
+ * @param {RuleAndLocation[]} rules To report rule.
+ * @returns { { ruleId: string, key: string }[] }
+ */
+function reportUnusedRules(context, comment, kind, rules) {
+ const sourceCode = context.getSourceCode()
+ const commentStart = comment.range[0] + 4 /* '.",
+ expectedAfterExceptionBlock: 'Expected line break after exception block.',
+ expectedBeforeExceptionBlock:
+ 'Expected line break before exception block.',
+ unexpectedAfterHTMLCommentOpen: "Unexpected line breaks after ''."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const option = parseOption(context.options[0])
+ return htmlComments.defineVisitor(
+ context,
+ context.options[1],
+ (comment) => {
+ const { value, openDecoration, closeDecoration } = comment
+ if (!value) {
+ return
+ }
+
+ const startLine = openDecoration
+ ? openDecoration.loc.end.line
+ : value.loc.start.line
+ const endLine = closeDecoration
+ ? closeDecoration.loc.start.line
+ : value.loc.end.line
+ const newlineType =
+ startLine === endLine ? option.singleline : option.multiline
+ if (newlineType === 'ignore') {
+ return
+ }
+ checkCommentOpen(comment, newlineType !== 'never')
+ checkCommentClose(comment, newlineType !== 'never')
+ }
+ )
+
+ /**
+ * Reports the newline before the contents of a given comment if it's invalid.
+ * @param {ParsedHTMLComment} comment - comment data.
+ * @param {boolean} requireNewline - `true` if line breaks are required.
+ * @returns {void}
+ */
+ function checkCommentOpen(comment, requireNewline) {
+ const { value, openDecoration, open } = comment
+ if (!value) {
+ return
+ }
+ const beforeToken = openDecoration || open
+
+ if (requireNewline) {
+ if (beforeToken.loc.end.line < value.loc.start.line) {
+ // Is valid
+ return
+ }
+ context.report({
+ loc: {
+ start: beforeToken.loc.end,
+ end: value.loc.start
+ },
+ messageId: openDecoration
+ ? 'expectedAfterExceptionBlock'
+ : 'expectedAfterHTMLCommentOpen',
+ fix: openDecoration
+ ? undefined
+ : (fixer) => fixer.insertTextAfter(beforeToken, '\n')
+ })
+ } else {
+ if (beforeToken.loc.end.line === value.loc.start.line) {
+ // Is valid
+ return
+ }
+ context.report({
+ loc: {
+ start: beforeToken.loc.end,
+ end: value.loc.start
+ },
+ messageId: 'unexpectedAfterHTMLCommentOpen',
+ fix: (fixer) =>
+ fixer.replaceTextRange([beforeToken.range[1], value.range[0]], ' ')
+ })
+ }
+ }
+
+ /**
+ * Reports the space after the contents of a given comment if it's invalid.
+ * @param {ParsedHTMLComment} comment - comment data.
+ * @param {boolean} requireNewline - `true` if line breaks are required.
+ * @returns {void}
+ */
+ function checkCommentClose(comment, requireNewline) {
+ const { value, closeDecoration, close } = comment
+ if (!value) {
+ return
+ }
+ const afterToken = closeDecoration || close
+
+ if (requireNewline) {
+ if (value.loc.end.line < afterToken.loc.start.line) {
+ // Is valid
+ return
+ }
+ context.report({
+ loc: {
+ start: value.loc.end,
+ end: afterToken.loc.start
+ },
+ messageId: closeDecoration
+ ? 'expectedBeforeExceptionBlock'
+ : 'expectedBeforeHTMLCommentOpen',
+ fix: closeDecoration
+ ? undefined
+ : (fixer) => fixer.insertTextBefore(afterToken, '\n')
+ })
+ } else {
+ if (value.loc.end.line === afterToken.loc.start.line) {
+ // Is valid
+ return
+ }
+ context.report({
+ loc: {
+ start: value.loc.end,
+ end: afterToken.loc.start
+ },
+ messageId: 'unexpectedBeforeHTMLCommentOpen',
+ fix: (fixer) =>
+ fixer.replaceTextRange([value.range[1], afterToken.range[0]], ' ')
+ })
+ }
+ }
+ }
+}
diff --git a/lib/rules/html-comment-content-spacing.js b/lib/rules/html-comment-content-spacing.js
new file mode 100644
index 000000000..b220bd79c
--- /dev/null
+++ b/lib/rules/html-comment-content-spacing.js
@@ -0,0 +1,171 @@
+/**
+ * @author Yosuke ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const htmlComments = require('../utils/html-comments')
+
+/**
+ * @typedef { import('../utils/html-comments').ParsedHTMLComment } ParsedHTMLComment
+ */
+
+module.exports = {
+ meta: {
+ type: 'layout',
+
+ docs: {
+ description: 'enforce unified spacing in HTML comments',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/html-comment-content-spacing.html'
+ },
+ fixable: 'whitespace',
+ schema: [
+ {
+ enum: ['always', 'never']
+ },
+ {
+ type: 'object',
+ properties: {
+ exceptions: {
+ type: 'array',
+ items: {
+ type: 'string'
+ }
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ expectedAfterHTMLCommentOpen: "Expected space after ''.",
+ expectedAfterExceptionBlock: 'Expected space after exception block.',
+ expectedBeforeExceptionBlock: 'Expected space before exception block.',
+ unexpectedAfterHTMLCommentOpen: "Unexpected space after ''."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ // Unless the first option is never, require a space
+ const requireSpace = context.options[0] !== 'never'
+ return htmlComments.defineVisitor(
+ context,
+ context.options[1],
+ (comment) => {
+ checkCommentOpen(comment)
+ checkCommentClose(comment)
+ },
+ { includeDirectives: true }
+ )
+
+ /**
+ * Reports the space before the contents of a given comment if it's invalid.
+ * @param {ParsedHTMLComment} comment - comment data.
+ * @returns {void}
+ */
+ function checkCommentOpen(comment) {
+ const { value, openDecoration, open } = comment
+ if (!value) {
+ return
+ }
+ const beforeToken = openDecoration || open
+ if (beforeToken.loc.end.line !== value.loc.start.line) {
+ // Ignore newline
+ return
+ }
+
+ if (requireSpace) {
+ if (beforeToken.range[1] < value.range[0]) {
+ // Is valid
+ return
+ }
+ context.report({
+ loc: {
+ start: beforeToken.loc.end,
+ end: value.loc.start
+ },
+ messageId: openDecoration
+ ? 'expectedAfterExceptionBlock'
+ : 'expectedAfterHTMLCommentOpen',
+ fix: openDecoration
+ ? undefined
+ : (fixer) => fixer.insertTextAfter(beforeToken, ' ')
+ })
+ } else {
+ if (openDecoration) {
+ // Ignore expection block
+ return
+ }
+ if (beforeToken.range[1] === value.range[0]) {
+ // Is valid
+ return
+ }
+ context.report({
+ loc: {
+ start: beforeToken.loc.end,
+ end: value.loc.start
+ },
+ messageId: 'unexpectedAfterHTMLCommentOpen',
+ fix: (fixer) =>
+ fixer.removeRange([beforeToken.range[1], value.range[0]])
+ })
+ }
+ }
+
+ /**
+ * Reports the space after the contents of a given comment if it's invalid.
+ * @param {ParsedHTMLComment} comment - comment data.
+ * @returns {void}
+ */
+ function checkCommentClose(comment) {
+ const { value, closeDecoration, close } = comment
+ if (!value) {
+ return
+ }
+ const afterToken = closeDecoration || close
+ if (value.loc.end.line !== afterToken.loc.start.line) {
+ // Ignore newline
+ return
+ }
+
+ if (requireSpace) {
+ if (value.range[1] < afterToken.range[0]) {
+ // Is valid
+ return
+ }
+ context.report({
+ loc: {
+ start: value.loc.end,
+ end: afterToken.loc.start
+ },
+ messageId: closeDecoration
+ ? 'expectedBeforeExceptionBlock'
+ : 'expectedBeforeHTMLCommentOpen',
+ fix: closeDecoration
+ ? undefined
+ : (fixer) => fixer.insertTextBefore(afterToken, ' ')
+ })
+ } else {
+ if (closeDecoration) {
+ // Ignore expection block
+ return
+ }
+ if (value.range[1] === afterToken.range[0]) {
+ // Is valid
+ return
+ }
+ context.report({
+ loc: {
+ start: value.loc.end,
+ end: afterToken.loc.start
+ },
+ messageId: 'unexpectedBeforeHTMLCommentOpen',
+ fix: (fixer) =>
+ fixer.removeRange([value.range[1], afterToken.range[0]])
+ })
+ }
+ }
+ }
+}
diff --git a/lib/rules/html-comment-indent.js b/lib/rules/html-comment-indent.js
new file mode 100644
index 000000000..2d4f613d3
--- /dev/null
+++ b/lib/rules/html-comment-indent.js
@@ -0,0 +1,244 @@
+/**
+ * @author Yosuke ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const htmlComments = require('../utils/html-comments')
+
+/**
+ * Normalize options.
+ * @param {number|"tab"|undefined} type The type of indentation.
+ * @returns { { indentChar: string, indentSize: number, indentText: string } } Normalized options.
+ */
+function parseOptions(type) {
+ const ret = {
+ indentChar: ' ',
+ indentSize: 2,
+ indentText: ''
+ }
+
+ if (Number.isSafeInteger(type)) {
+ ret.indentSize = Number(type)
+ } else if (type === 'tab') {
+ ret.indentChar = '\t'
+ ret.indentSize = 1
+ }
+ ret.indentText = ret.indentChar.repeat(ret.indentSize)
+
+ return ret
+}
+
+/**
+ * @param {string} s
+ * @param {string} [unitChar]
+ */
+function toDisplay(s, unitChar) {
+ if (s.length === 0 && unitChar) {
+ return `0 ${toUnit(unitChar)}s`
+ }
+ const char = s[0]
+ if ((char === ' ' || char === '\t') && [...s].every((c) => c === char)) {
+ return `${s.length} ${toUnit(char)}${s.length === 1 ? '' : 's'}`
+ }
+
+ return JSON.stringify(s)
+}
+
+/** @param {string} char */
+function toUnit(char) {
+ if (char === '\t') {
+ return 'tab'
+ }
+ if (char === ' ') {
+ return 'space'
+ }
+ return JSON.stringify(char)
+}
+
+module.exports = {
+ meta: {
+ type: 'layout',
+
+ docs: {
+ description: 'enforce consistent indentation in HTML comments',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/html-comment-indent.html'
+ },
+ fixable: 'whitespace',
+ schema: [
+ {
+ oneOf: [{ type: 'integer', minimum: 0 }, { enum: ['tab'] }]
+ }
+ ],
+ messages: {
+ unexpectedBaseIndentation:
+ 'Expected base point indentation of {{expected}}, but found {{actual}}.',
+ missingBaseIndentation:
+ 'Expected base point indentation of {{expected}}, but not found.',
+ unexpectedIndentationCharacter:
+ 'Expected {{expected}} character, but found {{actual}} character.',
+ unexpectedIndentation:
+ 'Expected indentation of {{expected}} but found {{actual}}.',
+ unexpectedRelativeIndentation:
+ 'Expected relative indentation of {{expected}} but found {{actual}}.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const options = parseOptions(context.options[0])
+ const sourceCode = context.getSourceCode()
+ return htmlComments.defineVisitor(
+ context,
+ null,
+ (comment) => {
+ const baseIndentText = getLineIndentText(comment.open.loc.start.line)
+ let endLine
+ if (comment.value) {
+ const startLine = comment.value.loc.start.line
+ endLine = comment.value.loc.end.line
+
+ const checkStartLine =
+ comment.open.loc.end.line === startLine ? startLine + 1 : startLine
+
+ for (let line = checkStartLine; line <= endLine; line++) {
+ validateIndentForLine(line, baseIndentText, 1)
+ }
+ } else {
+ endLine = comment.open.loc.end.line
+ }
+
+ if (endLine < comment.close.loc.start.line) {
+ // `-->`
+ validateIndentForLine(comment.close.loc.start.line, baseIndentText, 0)
+ }
+ },
+ { includeDirectives: true }
+ )
+
+ /**
+ * Checks whether the given line is a blank line.
+ * @param {number} line The number of line. Begins with 1.
+ * @returns {boolean} `true` if the given line is a blank line
+ */
+ function isEmptyLine(line) {
+ const lineText = sourceCode.getLines()[line - 1]
+ return !lineText.trim()
+ }
+
+ /**
+ * Get the actual indentation of the given line.
+ * @param {number} line The number of line. Begins with 1.
+ * @returns {string} The actual indentation text
+ */
+ function getLineIndentText(line) {
+ const lineText = sourceCode.getLines()[line - 1]
+ const charIndex = lineText.search(/\S/)
+ // already checked
+ // if (charIndex < 0) {
+ // return lineText
+ // }
+ return lineText.slice(0, charIndex)
+ }
+
+ /**
+ * Define the function which fixes the problem.
+ * @param {number} line The number of line.
+ * @param {string} actualIndentText The actual indentation text.
+ * @param {string} expectedIndentText The expected indentation text.
+ * @returns { (fixer: RuleFixer) => Fix } The defined function.
+ */
+ function defineFix(line, actualIndentText, expectedIndentText) {
+ return (fixer) => {
+ const start = sourceCode.getIndexFromLoc({
+ line,
+ column: 0
+ })
+ return fixer.replaceTextRange(
+ [start, start + actualIndentText.length],
+ expectedIndentText
+ )
+ }
+ }
+
+ /**
+ * Validate the indentation of a line.
+ * @param {number} line The number of line. Begins with 1.
+ * @param {string} baseIndentText The expected base indentation text.
+ * @param {number} offset The number of the indentation offset.
+ */
+ function validateIndentForLine(line, baseIndentText, offset) {
+ if (isEmptyLine(line)) {
+ return
+ }
+ const actualIndentText = getLineIndentText(line)
+
+ const expectedOffsetIndentText = options.indentText.repeat(offset)
+ const expectedIndentText = baseIndentText + expectedOffsetIndentText
+
+ // validate base indent
+ if (
+ baseIndentText &&
+ (actualIndentText.length < baseIndentText.length ||
+ !actualIndentText.startsWith(baseIndentText))
+ ) {
+ context.report({
+ loc: {
+ start: { line, column: 0 },
+ end: { line, column: actualIndentText.length }
+ },
+ messageId: actualIndentText
+ ? 'unexpectedBaseIndentation'
+ : 'missingBaseIndentation',
+ data: {
+ expected: toDisplay(baseIndentText),
+ actual: toDisplay(actualIndentText.slice(0, baseIndentText.length))
+ },
+ fix: defineFix(line, actualIndentText, expectedIndentText)
+ })
+ return
+ }
+
+ const actualOffsetIndentText = actualIndentText.slice(
+ baseIndentText.length
+ )
+
+ // validate indent charctor
+ for (const [i, char] of [...actualOffsetIndentText].entries()) {
+ if (char !== options.indentChar) {
+ context.report({
+ loc: {
+ start: { line, column: baseIndentText.length + i },
+ end: { line, column: baseIndentText.length + i + 1 }
+ },
+ messageId: 'unexpectedIndentationCharacter',
+ data: {
+ expected: toUnit(options.indentChar),
+ actual: toUnit(char)
+ },
+ fix: defineFix(line, actualIndentText, expectedIndentText)
+ })
+ return
+ }
+ }
+
+ // validate indent length
+ if (actualOffsetIndentText.length !== expectedOffsetIndentText.length) {
+ context.report({
+ loc: {
+ start: { line, column: baseIndentText.length },
+ end: { line, column: actualIndentText.length }
+ },
+ messageId: baseIndentText
+ ? 'unexpectedRelativeIndentation'
+ : 'unexpectedIndentation',
+ data: {
+ expected: toDisplay(expectedOffsetIndentText, options.indentChar),
+ actual: toDisplay(actualOffsetIndentText, options.indentChar)
+ },
+ fix: defineFix(line, actualIndentText, expectedIndentText)
+ })
+ }
+ }
+ }
+}
diff --git a/lib/rules/html-end-tags.js b/lib/rules/html-end-tags.js
index c5af75b27..a0d313cf2 100644
--- a/lib/rules/html-end-tags.js
+++ b/lib/rules/html-end-tags.js
@@ -5,56 +5,55 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'enforce end tag style',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/html-end-tags.md'
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/html-end-tags.html'
},
fixable: 'code',
- schema: []
+ schema: [],
+ messages: {
+ missingEndTag: "'<{{name}}>' should have end tag."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
let hasInvalidEOF = false
- return utils.defineTemplateBodyVisitor(context, {
- VElement (node) {
- if (hasInvalidEOF) {
- return
+ return utils.defineTemplateBodyVisitor(
+ context,
+ {
+ VElement(node) {
+ if (hasInvalidEOF) {
+ return
+ }
+
+ const name = node.name
+ const isVoid = utils.isHtmlVoidElementName(name)
+ const isSelfClosing = node.startTag.selfClosing
+ const hasEndTag = node.endTag != null
+
+ if (!isVoid && !hasEndTag && !isSelfClosing) {
+ context.report({
+ node: node.startTag,
+ loc: node.startTag.loc,
+ messageId: 'missingEndTag',
+ data: { name },
+ fix: (fixer) => fixer.insertTextAfter(node, ``)
+ })
+ }
}
-
- const name = node.name
- const isVoid = utils.isHtmlVoidElementName(name)
- const isSelfClosing = node.startTag.selfClosing
- const hasEndTag = node.endTag != null
-
- if (!isVoid && !hasEndTag && !isSelfClosing) {
- context.report({
- node: node.startTag,
- loc: node.startTag.loc,
- message: "'<{{name}}>' should have end tag.",
- data: { name },
- fix: (fixer) => fixer.insertTextAfter(node, ``)
- })
+ },
+ {
+ Program(node) {
+ hasInvalidEOF = utils.hasInvalidEOF(node)
}
}
- }, {
- Program (node) {
- hasInvalidEOF = utils.hasInvalidEOF(node)
- }
- })
+ )
}
}
diff --git a/lib/rules/html-indent.js b/lib/rules/html-indent.js
index 63c81ef69..05cdace92 100644
--- a/lib/rules/html-indent.js
+++ b/lib/rules/html-indent.js
@@ -5,56 +5,64 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const indentCommon = require('../utils/indent-common')
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
+ const sourceCode = context.getSourceCode()
const tokenStore =
- context.parserServices.getTemplateBodyTokenStore &&
- context.parserServices.getTemplateBodyTokenStore()
- const visitor = indentCommon.defineVisitor(context, tokenStore, { baseIndent: 1 })
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+ const visitor = indentCommon.defineVisitor(context, tokenStore, {
+ baseIndent: 1
+ })
return utils.defineTemplateBodyVisitor(context, visitor)
},
+ // eslint-disable-next-line eslint-plugin/prefer-message-ids
meta: {
type: 'layout',
docs: {
description: 'enforce consistent indentation in ``',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/html-indent.md'
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/html-indent.html'
},
+ // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
fixable: 'whitespace',
schema: [
{
- anyOf: [
- { type: 'integer', minimum: 1 },
- { enum: ['tab'] }
- ]
+ oneOf: [{ type: 'integer', minimum: 1 }, { enum: ['tab'] }]
},
{
type: 'object',
properties: {
- 'attribute': { type: 'integer', minimum: 0 },
- 'baseIndent': { type: 'integer', minimum: 0 },
- 'closeBracket': { type: 'integer', minimum: 0 },
- 'switchCase': { type: 'integer', minimum: 0 },
- 'alignAttributesVertically': { type: 'boolean' },
- 'ignores': {
+ attribute: { type: 'integer', minimum: 0 },
+ baseIndent: { type: 'integer', minimum: 0 },
+ closeBracket: {
+ oneOf: [
+ { type: 'integer', minimum: 0 },
+ {
+ type: 'object',
+ properties: {
+ startTag: { type: 'integer', minimum: 0 },
+ endTag: { type: 'integer', minimum: 0 },
+ selfClosingTag: { type: 'integer', minimum: 0 }
+ },
+ additionalProperties: false
+ }
+ ]
+ },
+ switchCase: { type: 'integer', minimum: 0 },
+ alignAttributesVertically: { type: 'boolean' },
+ ignores: {
type: 'array',
items: {
allOf: [
{ type: 'string' },
- { not: { type: 'string', pattern: ':exit$' }},
- { not: { type: 'string', pattern: '^\\s*$' }}
+ { not: { type: 'string', pattern: ':exit$' } },
+ { not: { type: 'string', pattern: String.raw`^\s*$` } }
]
},
uniqueItems: true,
diff --git a/lib/rules/html-quotes.js b/lib/rules/html-quotes.js
index 8eb50425b..f4f6d1c1d 100644
--- a/lib/rules/html-quotes.js
+++ b/lib/rules/html-quotes.js
@@ -5,66 +5,103 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'layout',
docs: {
description: 'enforce quotes style of HTML attributes',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/html-quotes.md'
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/html-quotes.html'
},
fixable: 'code',
schema: [
- { enum: ['double', 'single'] }
- ]
+ { enum: ['double', 'single'] },
+ {
+ type: 'object',
+ properties: {
+ avoidEscape: {
+ type: 'boolean'
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ expected: 'Expected to be enclosed by {{kind}}.'
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const sourceCode = context.getSourceCode()
const double = context.options[0] !== 'single'
+ const avoidEscape =
+ context.options[1] && context.options[1].avoidEscape === true
const quoteChar = double ? '"' : "'"
const quoteName = double ? 'double quotes' : 'single quotes'
- const quotePattern = double ? /"/g : /'/g
- const quoteEscaped = double ? '"' : '''
+ /** @type {boolean} */
let hasInvalidEOF
- return utils.defineTemplateBodyVisitor(context, {
- 'VAttribute[value!=null]' (node) {
- if (hasInvalidEOF) {
- return
- }
+ return utils.defineTemplateBodyVisitor(
+ context,
+ {
+ 'VAttribute[value!=null]'(node) {
+ if (hasInvalidEOF) {
+ return
+ }
+
+ if (utils.isVBindSameNameShorthand(node)) {
+ // v-bind same-name shorthand (Vue 3.4+)
+ return
+ }
- const text = sourceCode.getText(node.value)
- const firstChar = text[0]
+ const text = sourceCode.getText(node.value)
+ const firstChar = text[0]
- if (firstChar !== quoteChar) {
- context.report({
- node: node.value,
- loc: node.value.loc,
- message: 'Expected to be enclosed by {{kind}}.',
- data: { kind: quoteName },
- fix (fixer) {
- const contentText = (firstChar === "'" || firstChar === '"') ? text.slice(1, -1) : text
- const replacement = quoteChar + contentText.replace(quotePattern, quoteEscaped) + quoteChar
- return fixer.replaceText(node.value, replacement)
+ if (firstChar !== quoteChar) {
+ const quoted = firstChar === "'" || firstChar === '"'
+ if (avoidEscape && quoted) {
+ const contentText = text.slice(1, -1)
+ if (contentText.includes(quoteChar)) {
+ return
+ }
}
- })
+
+ context.report({
+ node: node.value,
+ loc: node.value.loc,
+ messageId: 'expected',
+ data: { kind: quoteName },
+ fix(fixer) {
+ const contentText = quoted ? text.slice(1, -1) : text
+
+ let fixToDouble = double
+ if (avoidEscape && !quoted && contentText.includes(quoteChar)) {
+ fixToDouble = double
+ ? contentText.includes("'")
+ : !contentText.includes('"')
+ }
+
+ const quotePattern = fixToDouble ? /"/g : /'/g
+ const quoteEscaped = fixToDouble ? '"' : '''
+ const fixQuoteChar = fixToDouble ? '"' : "'"
+
+ const replacement =
+ fixQuoteChar +
+ contentText.replace(quotePattern, quoteEscaped) +
+ fixQuoteChar
+ return fixer.replaceText(node.value, replacement)
+ }
+ })
+ }
+ }
+ },
+ {
+ Program(node) {
+ hasInvalidEOF = utils.hasInvalidEOF(node)
}
}
- }, {
- Program (node) {
- hasInvalidEOF = utils.hasInvalidEOF(node)
- }
- })
+ )
}
}
diff --git a/lib/rules/html-self-closing.js b/lib/rules/html-self-closing.js
index fa4553ab6..c31c9ab70 100644
--- a/lib/rules/html-self-closing.js
+++ b/lib/rules/html-self-closing.js
@@ -5,64 +5,68 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
/**
* These strings wil be displayed in error messages.
*/
-const ELEMENT_TYPE = Object.freeze({
+const ELEMENT_TYPE_MESSAGES = Object.freeze({
NORMAL: 'HTML elements',
VOID: 'HTML void elements',
COMPONENT: 'Vue.js custom components',
SVG: 'SVG elements',
- MATH: 'MathML elements'
+ MATH: 'MathML elements',
+ UNKNOWN: 'unknown elements'
})
+/**
+ * @typedef {object} Options
+ * @property {'always' | 'never'} NORMAL
+ * @property {'always' | 'never'} VOID
+ * @property {'always' | 'never'} COMPONENT
+ * @property {'always' | 'never'} SVG
+ * @property {'always' | 'never'} MATH
+ * @property {null} UNKNOWN
+ */
+
/**
* Normalize the given options.
- * @param {Object|undefined} options The raw options object.
- * @returns {Object} Normalized options.
+ * @param {any} options The raw options object.
+ * @returns {Options} Normalized options.
*/
-function parseOptions (options) {
+function parseOptions(options) {
return {
- [ELEMENT_TYPE.NORMAL]: (options && options.html && options.html.normal) || 'always',
- [ELEMENT_TYPE.VOID]: (options && options.html && options.html.void) || 'never',
- [ELEMENT_TYPE.COMPONENT]: (options && options.html && options.html.component) || 'always',
- [ELEMENT_TYPE.SVG]: (options && options.svg) || 'always',
- [ELEMENT_TYPE.MATH]: (options && options.math) || 'always'
+ NORMAL: (options && options.html && options.html.normal) || 'always',
+ VOID: (options && options.html && options.html.void) || 'never',
+ COMPONENT: (options && options.html && options.html.component) || 'always',
+ SVG: (options && options.svg) || 'always',
+ MATH: (options && options.math) || 'always',
+ UNKNOWN: null
}
}
/**
* Get the elementType of the given element.
* @param {VElement} node The element node to get.
- * @returns {string} The elementType of the element.
+ * @returns {keyof Options} The elementType of the element.
*/
-function getElementType (node) {
+function getElementType(node) {
if (utils.isCustomComponent(node)) {
- return ELEMENT_TYPE.COMPONENT
+ return 'COMPONENT'
}
if (utils.isHtmlElementNode(node)) {
if (utils.isHtmlVoidElementName(node.name)) {
- return ELEMENT_TYPE.VOID
+ return 'VOID'
}
- return ELEMENT_TYPE.NORMAL
+ return 'NORMAL'
}
if (utils.isSvgElementNode(node)) {
- return ELEMENT_TYPE.SVG
+ return 'SVG'
}
- if (utils.isMathMLElementNode(node)) {
- return ELEMENT_TYPE.MATH
+ if (utils.isMathElementNode(node)) {
+ return 'MATH'
}
- return 'unknown elements'
+ return 'UNKNOWN'
}
/**
@@ -72,24 +76,20 @@ function getElementType (node) {
* @param {SourceCode} sourceCode The source code object of the current context.
* @returns {boolean} `true` if the element is empty.
*/
-function isEmpty (node, sourceCode) {
+function isEmpty(node, sourceCode) {
const start = node.startTag.range[1]
- const end = (node.endTag != null) ? node.endTag.range[0] : node.range[1]
+ const end = node.endTag == null ? node.range[1] : node.endTag.range[0]
return sourceCode.text.slice(start, end).trim() === ''
}
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'layout',
docs: {
description: 'enforce self-closing style',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/html-self-closing.md'
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/html-self-closing.html'
},
fixable: 'code',
schema: {
@@ -99,86 +99,124 @@ module.exports = {
}
},
type: 'array',
- items: [{
- type: 'object',
- properties: {
- html: {
- type: 'object',
- properties: {
- normal: { $ref: '#/definitions/optionValue' },
- void: { $ref: '#/definitions/optionValue' },
- component: { $ref: '#/definitions/optionValue' }
+ items: [
+ {
+ type: 'object',
+ properties: {
+ html: {
+ type: 'object',
+ properties: {
+ normal: { $ref: '#/definitions/optionValue' },
+ void: { $ref: '#/definitions/optionValue' },
+ component: { $ref: '#/definitions/optionValue' }
+ },
+ additionalProperties: false
},
- additionalProperties: false
+ svg: { $ref: '#/definitions/optionValue' },
+ math: { $ref: '#/definitions/optionValue' }
},
- svg: { $ref: '#/definitions/optionValue' },
- math: { $ref: '#/definitions/optionValue' }
- },
- additionalProperties: false
- }],
+ additionalProperties: false
+ }
+ ],
maxItems: 1
+ },
+ messages: {
+ requireSelfClosing:
+ 'Require self-closing on {{elementType}} (<{{name}}>).',
+ disallowSelfClosing:
+ 'Disallow self-closing on {{elementType}} (<{{name}}/>).'
}
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const sourceCode = context.getSourceCode()
const options = parseOptions(context.options[0])
let hasInvalidEOF = false
- return utils.defineTemplateBodyVisitor(context, {
- 'VElement' (node) {
- if (hasInvalidEOF) {
- return
- }
+ return utils.defineTemplateBodyVisitor(
+ context,
+ {
+ VElement(node) {
+ if (hasInvalidEOF || node.parent.type === 'VDocumentFragment') {
+ return
+ }
- const elementType = getElementType(node)
- const mode = options[elementType]
+ const elementType = getElementType(node)
+ const mode = options[elementType]
- if (mode === 'always' && !node.startTag.selfClosing && isEmpty(node, sourceCode)) {
- context.report({
- node,
- loc: node.loc,
- message: 'Require self-closing on {{elementType}} (<{{name}}>).',
- data: { elementType, name: node.rawName },
- fix: (fixer) => {
- const tokens = context.parserServices.getTemplateBodyTokenStore()
- const close = tokens.getLastToken(node.startTag)
- if (close.type !== 'HTMLTagClose') {
- return null
+ if (
+ mode === 'always' &&
+ !node.startTag.selfClosing &&
+ isEmpty(node, sourceCode)
+ ) {
+ context.report({
+ node: node.endTag || node,
+ messageId: 'requireSelfClosing',
+ data: {
+ elementType: ELEMENT_TYPE_MESSAGES[elementType],
+ name: node.rawName
+ },
+ fix(fixer) {
+ const tokens =
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+ const close = tokens.getLastToken(node.startTag)
+ if (close.type !== 'HTMLTagClose') {
+ return null
+ }
+ return fixer.replaceTextRange(
+ [close.range[0], node.range[1]],
+ '/>'
+ )
}
- return fixer.replaceTextRange([close.range[0], node.range[1]], '/>')
- }
- })
- }
+ })
+ }
- if (mode === 'never' && node.startTag.selfClosing) {
- context.report({
- node,
- loc: node.loc,
- message: 'Disallow self-closing on {{elementType}} (<{{name}}/>).',
- data: { elementType, name: node.rawName },
- fix: (fixer) => {
- const tokens = context.parserServices.getTemplateBodyTokenStore()
- const close = tokens.getLastToken(node.startTag)
- if (close.type !== 'HTMLSelfClosingTagClose') {
- return null
- }
- if (elementType === ELEMENT_TYPE.VOID) {
- return fixer.replaceText(close, '>')
+ if (mode === 'never' && node.startTag.selfClosing) {
+ context.report({
+ node,
+ loc: {
+ start: {
+ line: node.loc.end.line,
+ column: node.loc.end.column - 2
+ },
+ end: node.loc.end
+ },
+ messageId: 'disallowSelfClosing',
+ data: {
+ elementType: ELEMENT_TYPE_MESSAGES[elementType],
+ name: node.rawName
+ },
+ fix(fixer) {
+ const tokens =
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+ const close = tokens.getLastToken(node.startTag)
+ if (close.type !== 'HTMLSelfClosingTagClose') {
+ return null
+ }
+ if (elementType === 'VOID') {
+ return fixer.replaceText(close, '>')
+ }
+ // If only `close` is targeted for replacement, it conflicts with `component-name-in-template-casing`,
+ // so replace the entire element.
+ // return fixer.replaceText(close, `>`)
+ const elementPart = sourceCode.text.slice(
+ node.range[0],
+ close.range[0]
+ )
+ return fixer.replaceText(
+ node,
+ `${elementPart}>`
+ )
}
- // If only `close` is targeted for replacement, it conflicts with `component-name-in-template-casing`,
- // so replace the entire element.
- // return fixer.replaceText(close, `>`)
- const elementPart = sourceCode.text.slice(node.range[0], close.range[0])
- return fixer.replaceText(node, elementPart + `>`)
- }
- })
+ })
+ }
+ }
+ },
+ {
+ Program(node) {
+ hasInvalidEOF = utils.hasInvalidEOF(node)
}
}
- }, {
- Program (node) {
- hasInvalidEOF = utils.hasInvalidEOF(node)
- }
- })
+ )
}
}
diff --git a/lib/rules/jsx-uses-vars.js b/lib/rules/jsx-uses-vars.js
index 36648b63d..d9f46972a 100644
--- a/lib/rules/jsx-uses-vars.js
+++ b/lib/rules/jsx-uses-vars.js
@@ -30,32 +30,34 @@ SOFTWARE.
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+const utils = require('../utils')
module.exports = {
+ // eslint-disable-next-line eslint-plugin/prefer-message-ids
meta: {
type: 'problem',
docs: {
- description: 'prevent variables used in JSX to be marked as unused', // eslint-disable-line consistent-docs-description
- category: 'base',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/jsx-uses-vars.md'
+ description: 'prevent variables used in JSX to be marked as unused', // eslint-disable-line eslint-plugin/require-meta-docs-description
+ categories: ['base'],
+ url: 'https://eslint.vuejs.org/rules/jsx-uses-vars.html'
},
schema: []
},
-
- create (context) {
+ /**
+ * @param {RuleContext} context - The rule context.
+ * @returns {RuleListener} AST event handlers.
+ */
+ create(context) {
return {
- JSXOpeningElement (node) {
+ JSXOpeningElement(node) {
let name
- if (node.name.name) {
+ if (node.name.type === 'JSXIdentifier') {
//
name = node.name.name
- } else if (node.name.object) {
+ } else if (node.name.type === 'JSXMemberExpression') {
//
let parent = node.name.object
- while (parent.object) {
+ while (parent.type === 'JSXMemberExpression') {
parent = parent.object
}
name = parent.name
@@ -63,7 +65,7 @@ module.exports = {
return
}
- context.markVariableAsUsed(name)
+ utils.markVariableAsUsed(context, name, node)
}
}
}
diff --git a/lib/rules/key-spacing.js b/lib/rules/key-spacing.js
new file mode 100644
index 000000000..a70a81420
--- /dev/null
+++ b/lib/rules/key-spacing.js
@@ -0,0 +1,11 @@
+/**
+ * @author Toru Nagashima
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('key-spacing', {
+ skipDynamicArguments: true
+})
diff --git a/lib/rules/keyword-spacing.js b/lib/rules/keyword-spacing.js
new file mode 100644
index 000000000..9cb4fd3fc
--- /dev/null
+++ b/lib/rules/keyword-spacing.js
@@ -0,0 +1,11 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('keyword-spacing', {
+ skipDynamicArguments: true
+})
diff --git a/lib/rules/match-component-file-name.js b/lib/rules/match-component-file-name.js
new file mode 100644
index 000000000..181d88f1a
--- /dev/null
+++ b/lib/rules/match-component-file-name.js
@@ -0,0 +1,164 @@
+/**
+ * @fileoverview Require component name property to match its file name
+ * @author Rodrigo Pedra Brum
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+const path = require('path')
+
+/**
+ * @param {Expression | SpreadElement} node
+ * @returns {node is (Literal | TemplateLiteral)}
+ */
+function canVerify(node) {
+ return (
+ node.type === 'Literal' ||
+ (node.type === 'TemplateLiteral' &&
+ node.expressions.length === 0 &&
+ node.quasis.length === 1)
+ )
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'require component name property to match its file name',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/match-component-file-name.html'
+ },
+ fixable: null,
+ hasSuggestions: true,
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ extensions: {
+ type: 'array',
+ items: {
+ type: 'string'
+ },
+ uniqueItems: true,
+ additionalItems: false
+ },
+ shouldMatchCase: {
+ type: 'boolean'
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ shouldMatchFileName:
+ 'Component name `{{name}}` should match file name `{{filename}}`.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const options = context.options[0]
+ const shouldMatchCase = (options && options.shouldMatchCase) || false
+ const extensionsArray = options && options.extensions
+ const allowedExtensions = Array.isArray(extensionsArray)
+ ? extensionsArray
+ : ['jsx']
+
+ const extension = path.extname(context.getFilename())
+ const filename = path.basename(context.getFilename(), extension)
+
+ /** @type {Rule.ReportDescriptor[]} */
+ const errors = []
+ let componentCount = 0
+
+ if (!allowedExtensions.includes(extension.replace(/^\./, ''))) {
+ return {}
+ }
+
+ /**
+ * @param {string} name
+ * @param {string} filename
+ */
+ function compareNames(name, filename) {
+ if (shouldMatchCase) {
+ return name === filename
+ }
+
+ return (
+ casing.pascalCase(name) === filename ||
+ casing.kebabCase(name) === filename
+ )
+ }
+
+ /**
+ * @param {Literal | TemplateLiteral} node
+ */
+ function verifyName(node) {
+ let name
+ if (node.type === 'TemplateLiteral') {
+ const quasis = node.quasis[0]
+ name = quasis.value.cooked
+ } else {
+ name = `${node.value}`
+ }
+
+ if (!compareNames(name, filename)) {
+ errors.push({
+ node,
+ messageId: 'shouldMatchFileName',
+ data: { filename, name },
+ suggest: [
+ {
+ desc: 'Rename component to match file name.',
+ fix(fixer) {
+ const quote =
+ node.type === 'TemplateLiteral' ? '`' : node.raw[0]
+ return fixer.replaceText(node, `${quote}${filename}${quote}`)
+ }
+ }
+ ]
+ })
+ }
+ }
+
+ return utils.compositingVisitors(
+ utils.executeOnCallVueComponent(context, (node) => {
+ if (node.arguments.length === 2) {
+ const argument = node.arguments[0]
+
+ if (canVerify(argument)) {
+ verifyName(argument)
+ }
+ }
+ }),
+ utils.executeOnVue(context, (object) => {
+ const node = utils.findProperty(object, 'name')
+
+ componentCount++
+
+ if (!node) return
+ if (!canVerify(node.value)) return
+ verifyName(node.value)
+ }),
+ utils.defineScriptSetupVisitor(context, {
+ onDefineOptionsEnter(node) {
+ componentCount++
+ if (node.arguments.length === 0) return
+ const define = node.arguments[0]
+ if (define.type !== 'ObjectExpression') return
+ const nameNode = utils.findProperty(define, 'name')
+ if (!nameNode) return
+ if (!canVerify(nameNode.value)) return
+ verifyName(nameNode.value)
+ }
+ }),
+ {
+ 'Program:exit'() {
+ if (componentCount > 1) return
+
+ for (const error of errors) context.report(error)
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/match-component-import-name.js b/lib/rules/match-component-import-name.js
new file mode 100644
index 000000000..344661005
--- /dev/null
+++ b/lib/rules/match-component-import-name.js
@@ -0,0 +1,73 @@
+/**
+ * @author Doug Wade
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+/**
+ * @param {Identifier} identifier
+ * @return {Array}
+ */
+function getExpectedNames(identifier) {
+ return [casing.pascalCase(identifier.name), casing.kebabCase(identifier.name)]
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'require the registered component name to match the imported component name',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/match-component-import-name.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ unexpected:
+ 'Component alias {{importedName}} should be one of: {{expectedName}}.'
+ }
+ },
+ /**
+ * @param {RuleContext} context
+ * @returns {RuleListener}
+ */
+ create(context) {
+ return utils.executeOnVueComponent(context, (obj) => {
+ const components = utils.findProperty(obj, 'components')
+ if (
+ !components ||
+ !components.value ||
+ components.value.type !== 'ObjectExpression'
+ ) {
+ return
+ }
+
+ for (const property of components.value.properties) {
+ if (
+ property.type === 'SpreadElement' ||
+ property.value.type !== 'Identifier' ||
+ property.computed === true
+ ) {
+ continue
+ }
+
+ const importedName = utils.getStaticPropertyName(property) || ''
+ const expectedNames = getExpectedNames(property.value)
+ if (!expectedNames.includes(importedName)) {
+ context.report({
+ node: property,
+ messageId: 'unexpected',
+ data: {
+ importedName,
+ expectedName: expectedNames.join(', ')
+ }
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 480162747..8a9de1349 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -4,26 +4,77 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
const utils = require('../utils')
+/**
+ * @param {any} options
+ */
+function parseOptions(options) {
+ const defaults = {
+ singleline: 1,
+ multiline: 1
+ }
+
+ if (options) {
+ if (typeof options.singleline === 'number') {
+ defaults.singleline = options.singleline
+ } else if (
+ typeof options.singleline === 'object' &&
+ typeof options.singleline.max === 'number'
+ ) {
+ defaults.singleline = options.singleline.max
+ }
+
+ if (options.multiline) {
+ if (typeof options.multiline === 'number') {
+ defaults.multiline = options.multiline
+ } else if (
+ typeof options.multiline === 'object' &&
+ typeof options.multiline.max === 'number'
+ ) {
+ defaults.multiline = options.multiline.max
+ }
+ }
+ }
+
+ return defaults
+}
+
+/**
+ * @param {(VDirective | VAttribute)[]} attributes
+ */
+function groupAttrsByLine(attributes) {
+ const propsPerLine = [[attributes[0]]]
+
+ for (let index = 1; index < attributes.length; index++) {
+ const previous = attributes[index - 1]
+ const current = attributes[index]
+
+ if (previous.loc.end.line === current.loc.start.line) {
+ propsPerLine[propsPerLine.length - 1].push(current)
+ } else {
+ propsPerLine.push([current])
+ }
+ }
+
+ return propsPerLine
+}
+
module.exports = {
meta: {
type: 'layout',
docs: {
description: 'enforce the maximum number of attributes per line',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/max-attributes-per-line.md'
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/max-attributes-per-line.html'
},
- fixable: 'whitespace', // or "code" or "whitespace"
+ fixable: 'whitespace',
schema: [
{
type: 'object',
properties: {
singleline: {
- anyOf: [
+ oneOf: [
{
type: 'number',
minimum: 1
@@ -41,7 +92,7 @@ module.exports = {
]
},
multiline: {
- anyOf: [
+ oneOf: [
{
type: 'number',
minimum: 1
@@ -52,140 +103,81 @@ module.exports = {
max: {
type: 'number',
minimum: 1
- },
- allowFirstLine: {
- type: 'boolean'
}
},
additionalProperties: false
}
]
}
- }
+ },
+ additionalProperties: false
}
- ]
+ ],
+ messages: {
+ shouldBeOnNewLine: "'{{name}}' should be on a new line."
+ }
},
-
- create: function (context) {
+ /** @param {RuleContext} context */
+ create(context) {
+ const sourceCode = context.getSourceCode()
const configuration = parseOptions(context.options[0])
const multilineMaximum = configuration.multiline
const singlelinemMaximum = configuration.singleline
- const canHaveFirstLine = configuration.allowFirstLine
- const template = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
+ const template =
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
return utils.defineTemplateBodyVisitor(context, {
- 'VStartTag' (node) {
+ VStartTag(node) {
const numberOfAttributes = node.attributes.length
if (!numberOfAttributes) return
- if (utils.isSingleLine(node) && numberOfAttributes > singlelinemMaximum) {
+ if (
+ utils.isSingleLine(node) &&
+ numberOfAttributes > singlelinemMaximum
+ ) {
showErrors(node.attributes.slice(singlelinemMaximum))
}
if (!utils.isSingleLine(node)) {
- if (!canHaveFirstLine && node.attributes[0].loc.start.line === node.loc.start.line) {
- showErrors([node.attributes[0]])
- }
-
- groupAttrsByLine(node.attributes)
- .filter(attrs => attrs.length > multilineMaximum)
- .forEach(attrs => showErrors(attrs.splice(multilineMaximum)))
- }
- }
- })
-
- // ----------------------------------------------------------------------
- // Helpers
- // ----------------------------------------------------------------------
- function parseOptions (options) {
- const defaults = {
- singleline: 1,
- multiline: 1,
- allowFirstLine: false
- }
-
- if (options) {
- if (typeof options.singleline === 'number') {
- defaults.singleline = options.singleline
- } else if (options.singleline && options.singleline.max) {
- defaults.singleline = options.singleline.max
- }
-
- if (options.multiline) {
- if (typeof options.multiline === 'number') {
- defaults.multiline = options.multiline
- } else if (typeof options.multiline === 'object') {
- if (options.multiline.max) {
- defaults.multiline = options.multiline.max
- }
-
- if (options.multiline.allowFirstLine) {
- defaults.allowFirstLine = options.multiline.allowFirstLine
+ for (const attrs of groupAttrsByLine(node.attributes)) {
+ if (attrs.length > multilineMaximum) {
+ showErrors(attrs.splice(multilineMaximum))
}
}
}
}
+ })
- return defaults
- }
-
- function getPropData (prop) {
- let propType = 'Attribute'
- let propName = prop.key.name
-
- if (utils.isBindingAttribute(prop)) {
- propType = 'Binding'
- propName = prop.key.raw.argument
- } else if (utils.isEventAttribute(prop)) {
- propType = 'Event'
- propName = prop.key.raw.argument
- } else if (prop.directive) {
- propType = 'Directive'
- }
-
- return { propType, propName }
- }
-
- function showErrors (attributes) {
- attributes.forEach((prop, i) => {
- const fix = (fixer) => {
- if (i !== 0) return null
-
- // Find the closest token before the current prop
- // that is not a white space
- const prevToken = template.getTokenBefore(prop, {
- filter: (token) => token.type !== 'HTMLWhitespace'
- })
-
- const range = [prevToken.range[1], prop.range[0]]
-
- return fixer.replaceTextRange(range, '\n')
- }
-
+ /**
+ * @param {(VDirective | VAttribute)[]} attributes
+ */
+ function showErrors(attributes) {
+ for (const [i, prop] of attributes.entries()) {
context.report({
node: prop,
loc: prop.loc,
- message: '{{propType}} "{{propName}}" should be on a new line.',
- data: getPropData(prop),
- fix
+ messageId: 'shouldBeOnNewLine',
+ data: { name: sourceCode.getText(prop.key) },
+ fix(fixer) {
+ if (i !== 0) return null
+
+ // Find the closest token before the current prop
+ // that is not a white space
+ const prevToken = /** @type {Token} */ (
+ template.getTokenBefore(prop, {
+ filter: (token) => token.type !== 'HTMLWhitespace'
+ })
+ )
+
+ /** @type {Range} */
+ const range = [prevToken.range[1], prop.range[0]]
+
+ return fixer.replaceTextRange(range, '\n')
+ }
})
- })
- }
-
- function groupAttrsByLine (attributes) {
- const propsPerLine = [[attributes[0]]]
-
- attributes.reduce((previous, current) => {
- if (previous.loc.end.line === current.loc.start.line) {
- propsPerLine[propsPerLine.length - 1].push(current)
- } else {
- propsPerLine.push([current])
- }
- return current
- })
-
- return propsPerLine
+ }
}
}
}
diff --git a/lib/rules/max-len.js b/lib/rules/max-len.js
new file mode 100644
index 000000000..b5dce5eb1
--- /dev/null
+++ b/lib/rules/max-len.js
@@ -0,0 +1,516 @@
+/**
+ * @author Yosuke Ota
+ * @fileoverview Rule to check for max length on a line of Vue file.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+const OPTIONS_SCHEMA = {
+ type: 'object',
+ properties: {
+ code: {
+ type: 'integer',
+ minimum: 0
+ },
+ template: {
+ type: 'integer',
+ minimum: 0
+ },
+ comments: {
+ type: 'integer',
+ minimum: 0
+ },
+ tabWidth: {
+ type: 'integer',
+ minimum: 0
+ },
+ ignorePattern: {
+ type: 'string'
+ },
+ ignoreComments: {
+ type: 'boolean'
+ },
+ ignoreTrailingComments: {
+ type: 'boolean'
+ },
+ ignoreUrls: {
+ type: 'boolean'
+ },
+ ignoreStrings: {
+ type: 'boolean'
+ },
+ ignoreTemplateLiterals: {
+ type: 'boolean'
+ },
+ ignoreRegExpLiterals: {
+ type: 'boolean'
+ },
+ ignoreHTMLAttributeValues: {
+ type: 'boolean'
+ },
+ ignoreHTMLTextContents: {
+ type: 'boolean'
+ }
+ },
+ additionalProperties: false
+}
+
+const OPTIONS_OR_INTEGER_SCHEMA = {
+ oneOf: [
+ OPTIONS_SCHEMA,
+ {
+ type: 'integer',
+ minimum: 0
+ }
+ ]
+}
+
+/**
+ * Computes the length of a line that may contain tabs. The width of each
+ * tab will be the number of spaces to the next tab stop.
+ * @param {string} line The line.
+ * @param {number} tabWidth The width of each tab stop in spaces.
+ * @returns {number} The computed line length.
+ * @private
+ */
+function computeLineLength(line, tabWidth) {
+ let extraCharacterCount = 0
+
+ const re = /\t/gu
+ let ret
+ while ((ret = re.exec(line))) {
+ const offset = ret.index
+ const totalOffset = offset + extraCharacterCount
+ const previousTabStopOffset = tabWidth ? totalOffset % tabWidth : 0
+ const spaceCount = tabWidth - previousTabStopOffset
+ extraCharacterCount += spaceCount - 1 // -1 for the replaced tab
+ }
+
+ return [...line].length + extraCharacterCount
+}
+
+/**
+ * Tells if a given comment is trailing: it starts on the current line and
+ * extends to or past the end of the current line.
+ * @param {string} line The source line we want to check for a trailing comment on
+ * @param {number} lineNumber The one-indexed line number for line
+ * @param {Token | null} comment The comment to inspect
+ * @returns {comment is Token} If the comment is trailing on the given line
+ */
+function isTrailingComment(line, lineNumber, comment) {
+ return Boolean(
+ comment &&
+ comment.loc.start.line === lineNumber &&
+ lineNumber <= comment.loc.end.line &&
+ (comment.loc.end.line > lineNumber ||
+ comment.loc.end.column === line.length)
+ )
+}
+
+/**
+ * Tells if a comment encompasses the entire line.
+ * @param {string} line The source line with a trailing comment
+ * @param {number} lineNumber The one-indexed line number this is on
+ * @param {Token | null} comment The comment to remove
+ * @returns {boolean} If the comment covers the entire line
+ */
+function isFullLineComment(line, lineNumber, comment) {
+ if (!comment) {
+ return false
+ }
+ const start = comment.loc.start
+ const end = comment.loc.end
+ const isFirstTokenOnLine = !line.slice(0, comment.loc.start.column).trim()
+
+ return (
+ comment &&
+ (start.line < lineNumber ||
+ (start.line === lineNumber && isFirstTokenOnLine)) &&
+ (end.line > lineNumber ||
+ (end.line === lineNumber && end.column === line.length))
+ )
+}
+
+/**
+ * Gets the line after the comment and any remaining trailing whitespace is
+ * stripped.
+ * @param {string} line The source line with a trailing comment
+ * @param {Token} comment The comment to remove
+ * @returns {string} Line without comment and trailing whitepace
+ */
+function stripTrailingComment(line, comment) {
+ // loc.column is zero-indexed
+ return line.slice(0, comment.loc.start.column).replace(/\s+$/u, '')
+}
+
+/**
+ * Group AST nodes by line number, both start and end.
+ *
+ * @param {Token[]} nodes the AST nodes in question
+ * @returns { { [key: number]: Token[] } } the grouped nodes
+ * @private
+ */
+function groupByLineNumber(nodes) {
+ /** @type { { [key: number]: Token[] } } */
+ const grouped = {}
+ for (const node of nodes) {
+ for (let i = node.loc.start.line; i <= node.loc.end.line; ++i) {
+ if (!Array.isArray(grouped[i])) {
+ grouped[i] = []
+ }
+ grouped[i].push(node)
+ }
+ }
+ return grouped
+}
+
+module.exports = {
+ meta: {
+ type: 'layout',
+
+ docs: {
+ description: 'enforce a maximum line length in `.vue` files',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/max-len.html',
+ extensionSource: {
+ url: 'https://eslint.org/docs/rules/max-len',
+ name: 'ESLint core'
+ }
+ },
+
+ schema: [
+ OPTIONS_OR_INTEGER_SCHEMA,
+ OPTIONS_OR_INTEGER_SCHEMA,
+ OPTIONS_SCHEMA
+ ],
+ messages: {
+ max: 'This line has a length of {{lineLength}}. Maximum allowed is {{maxLength}}.',
+ maxComment:
+ 'This line has a comment length of {{lineLength}}. Maximum allowed is {{maxCommentLength}}.'
+ }
+ },
+ /**
+ * @param {RuleContext} context - The rule context.
+ * @returns {RuleListener} AST event handlers.
+ */
+ create(context) {
+ /*
+ * Inspired by http://tools.ietf.org/html/rfc3986#appendix-B, however:
+ * - They're matching an entire string that we know is a URI
+ * - We're matching part of a string where we think there *might* be a URL
+ * - We're only concerned about URLs, as picking out any URI would cause
+ * too many false positives
+ * - We don't care about matching the entire URL, any small segment is fine
+ */
+ const URL_REGEXP = /[^:/?#]:\/\/[^?#]/u
+
+ const sourceCode = context.getSourceCode()
+ /** @type {Token[]} */
+ const tokens = []
+ /** @type {(HTMLComment | HTMLBogusComment | Comment)[]} */
+ const comments = []
+ /** @type {VLiteral[]} */
+ const htmlAttributeValues = []
+
+ // The options object must be the last option specified…
+ const options = Object.assign(
+ {},
+ context.options[context.options.length - 1]
+ )
+
+ // …but max code length…
+ if (typeof context.options[0] === 'number') {
+ options.code = context.options[0]
+ }
+
+ // …and tabWidth can be optionally specified directly as integers.
+ if (typeof context.options[1] === 'number') {
+ options.tabWidth = context.options[1]
+ }
+ /** @type {number} */
+ const scriptMaxLength = typeof options.code === 'number' ? options.code : 80
+ /** @type {number} */
+ const tabWidth = typeof options.tabWidth === 'number' ? options.tabWidth : 2 // default value of `vue/html-indent`
+ /** @type {number} */
+ const templateMaxLength =
+ typeof options.template === 'number' ? options.template : scriptMaxLength
+ const ignoreComments = !!options.ignoreComments
+ const ignoreStrings = !!options.ignoreStrings
+ const ignoreTemplateLiterals = !!options.ignoreTemplateLiterals
+ const ignoreRegExpLiterals = !!options.ignoreRegExpLiterals
+ const ignoreTrailingComments =
+ !!options.ignoreTrailingComments || !!options.ignoreComments
+ const ignoreUrls = !!options.ignoreUrls
+ const ignoreHTMLAttributeValues = !!options.ignoreHTMLAttributeValues
+ const ignoreHTMLTextContents = !!options.ignoreHTMLTextContents
+ /** @type {number} */
+ const maxCommentLength = options.comments
+ /** @type {RegExp} */
+ let ignorePattern = options.ignorePattern || null
+
+ if (ignorePattern) {
+ ignorePattern = new RegExp(ignorePattern, 'u')
+ }
+
+ /**
+ * Retrieves an array containing all strings (" or ') in the source code.
+ *
+ * @returns {Token[]} An array of string nodes.
+ */
+ function getAllStrings() {
+ return tokens.filter(
+ (token) =>
+ token.type === 'String' ||
+ (token.type === 'JSXText' &&
+ sourceCode.getNodeByRangeIndex(token.range[0] - 1).type ===
+ 'JSXAttribute')
+ )
+ }
+
+ /**
+ * Retrieves an array containing all template literals in the source code.
+ *
+ * @returns {Token[]} An array of template literal nodes.
+ */
+ function getAllTemplateLiterals() {
+ return tokens.filter((token) => token.type === 'Template')
+ }
+
+ /**
+ * Retrieves an array containing all RegExp literals in the source code.
+ *
+ * @returns {Token[]} An array of RegExp literal nodes.
+ */
+ function getAllRegExpLiterals() {
+ return tokens.filter((token) => token.type === 'RegularExpression')
+ }
+
+ /**
+ * Retrieves an array containing all HTML texts in the source code.
+ *
+ * @returns {Token[]} An array of HTML text nodes.
+ */
+ function getAllHTMLTextContents() {
+ return tokens.filter((token) => token.type === 'HTMLText')
+ }
+
+ /**
+ * Check the program for max length
+ * @param {Program} node Node to examine
+ * @returns {void}
+ * @private
+ */
+ function checkProgramForMaxLength(node) {
+ const programNode = node
+ const templateBody = node.templateBody
+
+ // setup tokens
+ const scriptTokens = sourceCode.ast.tokens
+ const scriptComments = sourceCode.getAllComments()
+
+ if (sourceCode.parserServices.getTemplateBodyTokenStore && templateBody) {
+ const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
+
+ const templateTokens = tokenStore.getTokens(templateBody, {
+ includeComments: true
+ })
+
+ if (templateBody.range[0] < programNode.range[0]) {
+ tokens.push(...templateTokens, ...scriptTokens)
+ } else {
+ tokens.push(...scriptTokens, ...templateTokens)
+ }
+ } else {
+ tokens.push(...scriptTokens)
+ }
+
+ if (ignoreComments || maxCommentLength || ignoreTrailingComments) {
+ // list of comments to ignore
+ if (templateBody) {
+ if (templateBody.range[0] < programNode.range[0]) {
+ comments.push(...templateBody.comments, ...scriptComments)
+ } else {
+ comments.push(...scriptComments, ...templateBody.comments)
+ }
+ } else {
+ comments.push(...scriptComments)
+ }
+ }
+
+ /** @type {Range | undefined} */
+ let scriptLinesRange
+ if (scriptTokens.length > 0) {
+ scriptLinesRange =
+ scriptComments.length > 0
+ ? [
+ Math.min(
+ scriptTokens[0].loc.start.line,
+ scriptComments[0].loc.start.line
+ ),
+ Math.max(
+ scriptTokens[scriptTokens.length - 1].loc.end.line,
+ scriptComments[scriptComments.length - 1].loc.end.line
+ )
+ ]
+ : [
+ scriptTokens[0].loc.start.line,
+ scriptTokens[scriptTokens.length - 1].loc.end.line
+ ]
+ } else if (scriptComments.length > 0) {
+ scriptLinesRange = [
+ scriptComments[0].loc.start.line,
+ scriptComments[scriptComments.length - 1].loc.end.line
+ ]
+ }
+ const templateLinesRange = templateBody && [
+ templateBody.loc.start.line,
+ templateBody.loc.end.line
+ ]
+
+ // split (honors line-ending)
+ const lines = sourceCode.lines
+
+ const strings = getAllStrings()
+ const stringsByLine = groupByLineNumber(strings)
+
+ const templateLiterals = getAllTemplateLiterals()
+ const templateLiteralsByLine = groupByLineNumber(templateLiterals)
+
+ const regExpLiterals = getAllRegExpLiterals()
+ const regExpLiteralsByLine = groupByLineNumber(regExpLiterals)
+
+ const htmlAttributeValuesByLine = groupByLineNumber(htmlAttributeValues)
+
+ const htmlTextContents = getAllHTMLTextContents()
+ const htmlTextContentsByLine = groupByLineNumber(htmlTextContents)
+
+ const commentsByLine = groupByLineNumber(comments)
+
+ for (const [i, line] of lines.entries()) {
+ // i is zero-indexed, line numbers are one-indexed
+ const lineNumber = i + 1
+
+ const inScript =
+ scriptLinesRange &&
+ scriptLinesRange[0] <= lineNumber &&
+ lineNumber <= scriptLinesRange[1]
+ const inTemplate =
+ templateLinesRange &&
+ templateLinesRange[0] <= lineNumber &&
+ lineNumber <= templateLinesRange[1]
+ // check if line is inside a script or template.
+ if (!inScript && !inTemplate) {
+ // out of range.
+ continue
+ }
+ const maxLength = Math.max(
+ inScript ? scriptMaxLength : 0,
+ inTemplate ? templateMaxLength : 0
+ )
+
+ if (
+ (ignoreStrings && stringsByLine[lineNumber]) ||
+ (ignoreTemplateLiterals && templateLiteralsByLine[lineNumber]) ||
+ (ignoreRegExpLiterals && regExpLiteralsByLine[lineNumber]) ||
+ (ignoreHTMLAttributeValues &&
+ htmlAttributeValuesByLine[lineNumber]) ||
+ (ignoreHTMLTextContents && htmlTextContentsByLine[lineNumber])
+ ) {
+ // ignore this line
+ continue
+ }
+
+ /*
+ * if we're checking comment length; we need to know whether this
+ * line is a comment
+ */
+ let lineIsComment = false
+ let textToMeasure
+
+ /*
+ * comments to check.
+ */
+ if (commentsByLine[lineNumber]) {
+ const commentList = [...commentsByLine[lineNumber]]
+
+ let comment = commentList.pop() || null
+
+ if (isFullLineComment(line, lineNumber, comment)) {
+ lineIsComment = true
+ textToMeasure = line
+ } else if (
+ ignoreTrailingComments &&
+ isTrailingComment(line, lineNumber, comment)
+ ) {
+ textToMeasure = stripTrailingComment(line, comment)
+
+ // ignore multiple trailing comments in the same line
+ comment = commentList.pop() || null
+
+ while (isTrailingComment(textToMeasure, lineNumber, comment)) {
+ textToMeasure = stripTrailingComment(textToMeasure, comment)
+ }
+ } else {
+ textToMeasure = line
+ }
+ } else {
+ textToMeasure = line
+ }
+
+ if (
+ (ignorePattern && ignorePattern.test(textToMeasure)) ||
+ (ignoreUrls && URL_REGEXP.test(textToMeasure))
+ ) {
+ // ignore this line
+ continue
+ }
+
+ const lineLength = computeLineLength(textToMeasure, tabWidth)
+ const commentLengthApplies = lineIsComment && maxCommentLength
+
+ if (lineIsComment && ignoreComments) {
+ continue
+ }
+
+ if (commentLengthApplies) {
+ if (lineLength > maxCommentLength) {
+ context.report({
+ node,
+ loc: { line: lineNumber, column: 0 },
+ messageId: 'maxComment',
+ data: {
+ lineLength,
+ maxCommentLength
+ }
+ })
+ }
+ } else if (lineLength > maxLength) {
+ context.report({
+ node,
+ loc: { line: lineNumber, column: 0 },
+ messageId: 'max',
+ data: {
+ lineLength,
+ maxLength
+ }
+ })
+ }
+ }
+ }
+
+ return utils.compositingVisitors(
+ utils.defineTemplateBodyVisitor(context, {
+ /** @param {VLiteral} node */
+ 'VAttribute[directive=false] > VLiteral'(node) {
+ htmlAttributeValues.push(node)
+ }
+ }),
+ {
+ 'Program:exit'(node) {
+ checkProgramForMaxLength(node)
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/max-lines-per-block.js b/lib/rules/max-lines-per-block.js
new file mode 100644
index 000000000..c778ef40b
--- /dev/null
+++ b/lib/rules/max-lines-per-block.js
@@ -0,0 +1,111 @@
+/**
+ * @author lsdsjy
+ * @fileoverview Rule for checking the maximum number of lines in Vue SFC blocks.
+ */
+'use strict'
+
+const { SourceCode } = require('eslint')
+const utils = require('../utils')
+
+/**
+ * @param {string} text
+ */
+function isEmptyLine(text) {
+ return !text.trim()
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce maximum number of lines in Vue SFC blocks',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/max-lines-per-block.html'
+ },
+ fixable: null,
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ style: {
+ type: 'integer',
+ minimum: 1
+ },
+ template: {
+ type: 'integer',
+ minimum: 1
+ },
+ script: {
+ type: 'integer',
+ minimum: 1
+ },
+ skipBlankLines: {
+ type: 'boolean',
+ minimum: 0
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ tooManyLines:
+ 'Block has too many lines ({{lineCount}}). Maximum allowed is {{limit}}.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const option = context.options[0] || {}
+ /**
+ * @type {Record}
+ */
+ const limits = {
+ template: option.template,
+ script: option.script,
+ style: option.style
+ }
+
+ const code = context.getSourceCode()
+ const sourceCode = context.getSourceCode()
+ const documentFragment =
+ sourceCode.parserServices.getDocumentFragment &&
+ sourceCode.parserServices.getDocumentFragment()
+
+ function getTopLevelHTMLElements() {
+ if (documentFragment) {
+ return documentFragment.children.filter(utils.isVElement)
+ }
+ return []
+ }
+
+ return {
+ /** @param {Program} node */
+ Program(node) {
+ if (utils.hasInvalidEOF(node)) {
+ return
+ }
+ for (const block of getTopLevelHTMLElements()) {
+ if (limits[block.name]) {
+ // We suppose the start tag and end tag occupy one single line respectively
+ let lineCount = block.loc.end.line - block.loc.start.line - 1
+
+ if (option.skipBlankLines) {
+ const lines = SourceCode.splitLines(code.getText(block))
+ lineCount -= lines.filter(isEmptyLine).length
+ }
+
+ if (lineCount > limits[block.name]) {
+ context.report({
+ node: block,
+ messageId: 'tooManyLines',
+ data: {
+ limit: limits[block.name],
+ lineCount
+ }
+ })
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/lib/rules/max-props.js b/lib/rules/max-props.js
new file mode 100644
index 000000000..0dc3043bf
--- /dev/null
+++ b/lib/rules/max-props.js
@@ -0,0 +1,81 @@
+/**
+ * @author kevsommer Kevin Sommer
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce maximum number of props in Vue component',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/max-props.html'
+ },
+ fixable: null,
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ maxProps: {
+ type: 'integer',
+ minimum: 1
+ }
+ },
+ additionalProperties: false,
+ minProperties: 1
+ }
+ ],
+ messages: {
+ tooManyProps:
+ 'Component has too many props ({{propCount}}). Maximum allowed is {{limit}}.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /** @type {Record} */
+ const option = context.options[0] || {}
+
+ /**
+ * @param {import('../utils').ComponentProp[]} props
+ * @param {CallExpression | Property} node
+ */
+ function checkMaxNumberOfProps(props, node) {
+ const uniqueProps = new Set(props.map((prop) => prop.propName))
+ const propCount = uniqueProps.size
+ if (propCount > option.maxProps && props[0].node) {
+ context.report({
+ node,
+ messageId: 'tooManyProps',
+ data: {
+ propCount,
+ limit: option.maxProps
+ }
+ })
+ }
+ }
+
+ return utils.compositingVisitors(
+ utils.executeOnVue(context, (node) => {
+ const propsNode = node.properties.find(
+ /** @returns {p is Property} */
+ (p) =>
+ p.type === 'Property' && utils.getStaticPropertyName(p) === 'props'
+ )
+
+ if (!propsNode) return
+
+ checkMaxNumberOfProps(
+ utils.getComponentPropsFromOptions(node),
+ propsNode
+ )
+ }),
+ utils.defineScriptSetupVisitor(context, {
+ onDefinePropsEnter(node, props) {
+ checkMaxNumberOfProps(props, node)
+ }
+ })
+ )
+ }
+}
diff --git a/lib/rules/max-template-depth.js b/lib/rules/max-template-depth.js
new file mode 100644
index 000000000..899ec75ce
--- /dev/null
+++ b/lib/rules/max-template-depth.js
@@ -0,0 +1,82 @@
+/**
+ * @author kevsommer Kevin Sommer
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce maximum depth of template',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/max-template-depth.html'
+ },
+ fixable: null,
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ maxDepth: {
+ type: 'integer',
+ minimum: 1
+ }
+ },
+ additionalProperties: false,
+ minProperties: 1
+ }
+ ],
+ messages: {
+ templateTooDeep:
+ 'Element is nested too deeply (depth of {{depth}}, maximum allowed is {{limit}}).'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const option = context.options[0] || {}
+
+ /**
+ * @param {VElement} element
+ * @param {number} curDepth
+ */
+ function checkMaxDepth(element, curDepth) {
+ if (curDepth > option.maxDepth) {
+ context.report({
+ node: element,
+ messageId: 'templateTooDeep',
+ data: {
+ depth: curDepth,
+ limit: option.maxDepth
+ }
+ })
+ }
+
+ if (!element.children) {
+ return
+ }
+
+ for (const child of element.children) {
+ if (child.type === 'VElement') {
+ checkMaxDepth(child, curDepth + 1)
+ }
+ }
+ }
+
+ return {
+ /** @param {Program} program */
+ Program(program) {
+ const element = program.templateBody
+
+ if (element == null) {
+ return
+ }
+
+ if (element.type !== 'VElement') {
+ return
+ }
+
+ checkMaxDepth(element, 0)
+ }
+ }
+ }
+}
diff --git a/lib/rules/multi-word-component-names.js b/lib/rules/multi-word-component-names.js
new file mode 100644
index 000000000..60f70a99e
--- /dev/null
+++ b/lib/rules/multi-word-component-names.js
@@ -0,0 +1,135 @@
+/**
+ * @author Marton Csordas
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const path = require('path')
+const casing = require('../utils/casing')
+const utils = require('../utils')
+
+const RESERVED_NAMES_IN_VUE3 = new Set(
+ require('../utils/vue3-builtin-components')
+)
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'require component names to be always multi-word',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/multi-word-component-names.html'
+ },
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ ignores: {
+ type: 'array',
+ items: { type: 'string' },
+ uniqueItems: true,
+ additionalItems: false
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ unexpected: 'Component name "{{value}}" should always be multi-word.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /** @type {Set} */
+ const ignores = new Set()
+ ignores.add('App')
+ ignores.add('app')
+ for (const ignore of (context.options[0] && context.options[0].ignores) ||
+ []) {
+ ignores.add(ignore)
+ if (casing.isPascalCase(ignore)) {
+ // PascalCase
+ ignores.add(casing.kebabCase(ignore))
+ }
+ }
+ let hasVue = utils.isScriptSetup(context)
+ let hasName = false
+
+ /**
+ * Returns true if the given component name is valid, otherwise false.
+ * @param {string} name
+ * */
+ function isValidComponentName(name) {
+ if (ignores.has(name) || RESERVED_NAMES_IN_VUE3.has(name)) {
+ return true
+ }
+ const elements = casing.kebabCase(name).split('-')
+ return elements.length > 1
+ }
+
+ /**
+ * @param {Expression | SpreadElement} nameNode
+ */
+ function validateName(nameNode) {
+ if (nameNode.type !== 'Literal') return
+ const componentName = `${nameNode.value}`
+ if (!isValidComponentName(componentName)) {
+ context.report({
+ node: nameNode,
+ messageId: 'unexpected',
+ data: {
+ value: componentName
+ }
+ })
+ }
+ }
+
+ return utils.compositingVisitors(
+ utils.executeOnCallVueComponent(context, (node) => {
+ hasVue = true
+ if (node.arguments.length !== 2) return
+ hasName = true
+ validateName(node.arguments[0])
+ }),
+ utils.executeOnVue(context, (obj) => {
+ hasVue = true
+ const node = utils.findProperty(obj, 'name')
+ if (!node) return
+ hasName = true
+ validateName(node.value)
+ }),
+ utils.defineScriptSetupVisitor(context, {
+ onDefineOptionsEnter(node) {
+ if (node.arguments.length === 0) return
+ const define = node.arguments[0]
+ if (define.type !== 'ObjectExpression') return
+ const nameNode = utils.findProperty(define, 'name')
+ if (!nameNode) return
+ hasName = true
+ validateName(nameNode.value)
+ }
+ }),
+ {
+ /** @param {Program} node */
+ 'Program:exit'(node) {
+ if (hasName) return
+ if (!hasVue && node.body.length > 0) return
+ const fileName = context.getFilename()
+ const componentName = path.basename(fileName, path.extname(fileName))
+ if (
+ utils.isVueFile(fileName) &&
+ !isValidComponentName(componentName)
+ ) {
+ context.report({
+ messageId: 'unexpected',
+ data: {
+ value: componentName
+ },
+ loc: { line: 1, column: 0 }
+ })
+ }
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/multiline-html-element-content-newline.js b/lib/rules/multiline-html-element-content-newline.js
index 5252786ef..afe89bd2f 100644
--- a/lib/rules/multiline-html-element-content-newline.js
+++ b/lib/rules/multiline-html-element-content-newline.js
@@ -4,98 +4,128 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
const casing = require('../utils/casing')
+const INLINE_ELEMENTS = require('../utils/inline-non-void-elements.json')
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
-function isMultilineElement (element) {
+/**
+ * @param {VElement & { endTag: VEndTag }} element
+ */
+function isMultilineElement(element) {
return element.loc.start.line < element.endTag.loc.start.line
}
-function parseOptions (options) {
- return Object.assign({
- ignores: ['pre', 'textarea'],
- ignoreWhenEmpty: true
- }, options)
+/**
+ * @param {any} options
+ */
+function parseOptions(options) {
+ return Object.assign(
+ {
+ ignores: ['pre', 'textarea', ...INLINE_ELEMENTS],
+ ignoreWhenEmpty: true,
+ allowEmptyLines: false
+ },
+ options
+ )
}
-function getPhrase (lineBreaks) {
+/**
+ * @param {number} lineBreaks
+ */
+function getPhrase(lineBreaks) {
switch (lineBreaks) {
- case 0: return 'no'
- default: return `${lineBreaks}`
+ case 0: {
+ return 'no'
+ }
+ default: {
+ return `${lineBreaks}`
+ }
}
}
/**
* Check whether the given element is empty or not.
* This ignores whitespaces, doesn't ignore comments.
- * @param {VElement} node The element node to check.
+ * @param {VElement & { endTag: VEndTag }} node The element node to check.
* @param {SourceCode} sourceCode The source code object of the current context.
* @returns {boolean} `true` if the element is empty.
*/
-function isEmpty (node, sourceCode) {
+function isEmpty(node, sourceCode) {
const start = node.startTag.range[1]
const end = node.endTag.range[0]
return sourceCode.text.slice(start, end).trim() === ''
}
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'layout',
docs: {
- description: 'require a line break before and after the contents of a multiline element',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/multiline-html-element-content-newline.md'
+ description:
+ 'require a line break before and after the contents of a multiline element',
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/multiline-html-element-content-newline.html'
},
fixable: 'whitespace',
- schema: [{
- type: 'object',
- properties: {
- ignoreWhenEmpty: {
- type: 'boolean'
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ ignoreWhenEmpty: {
+ type: 'boolean'
+ },
+ ignores: {
+ type: 'array',
+ items: { type: 'string' },
+ uniqueItems: true,
+ additionalItems: false
+ },
+ allowEmptyLines: {
+ type: 'boolean'
+ }
},
- ignores: {
- type: 'array',
- items: { type: 'string' },
- uniqueItems: true,
- additionalItems: false
- }
- },
- additionalProperties: false
- }],
+ additionalProperties: false
+ }
+ ],
messages: {
- unexpectedAfterClosingBracket: 'Expected 1 line break after opening tag (`<{{name}}>`), but {{actual}} line breaks found.',
- unexpectedBeforeOpeningBracket: 'Expected 1 line break before closing tag (``), but {{actual}} line breaks found.'
+ unexpectedAfterClosingBracket:
+ 'Expected 1 line break after opening tag (`<{{name}}>`), but {{actual}} line breaks found.',
+ unexpectedBeforeOpeningBracket:
+ 'Expected 1 line break before closing tag (``), but {{actual}} line breaks found.'
}
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const options = parseOptions(context.options[0])
const ignores = options.ignores
const ignoreWhenEmpty = options.ignoreWhenEmpty
- const template = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
+ const allowEmptyLines = options.allowEmptyLines
const sourceCode = context.getSourceCode()
-
- let inIgnoreElement
-
- function isIgnoredElement (node) {
- return ignores.includes(node.name) ||
+ const template =
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+
+ /** @type {VElement | null} */
+ let inIgnoreElement = null
+
+ /**
+ * @param {VElement} node
+ */
+ function isIgnoredElement(node) {
+ return (
+ ignores.includes(node.name) ||
ignores.includes(casing.pascalCase(node.rawName)) ||
ignores.includes(casing.kebabCase(node.rawName))
+ )
+ }
+
+ /**
+ * @param {number} lineBreaks
+ */
+ function isInvalidLineBreaks(lineBreaks) {
+ return allowEmptyLines ? lineBreaks === 0 : lineBreaks !== 1
}
return utils.defineTemplateBodyVisitor(context, {
- 'VElement' (node) {
+ VElement(node) {
if (inIgnoreElement) {
return
}
@@ -109,67 +139,87 @@ module.exports = {
return
}
- if (!isMultilineElement(node)) {
+ const element = /** @type {VElement & { endTag: VEndTag }} */ (node)
+
+ if (!isMultilineElement(element)) {
return
}
- const getTokenOption = { includeComments: true, filter: (token) => token.type !== 'HTMLWhitespace' }
+ /**
+ * @type {SourceCode.CursorWithCountOptions}
+ */
+ const getTokenOption = {
+ includeComments: true,
+ filter: (token) => token.type !== 'HTMLWhitespace'
+ }
if (
ignoreWhenEmpty &&
- node.children.length === 0 &&
- template.getFirstTokensBetween(node.startTag, node.endTag, getTokenOption).length === 0
+ element.children.length === 0 &&
+ template.getFirstTokensBetween(
+ element.startTag,
+ element.endTag,
+ getTokenOption
+ ).length === 0
) {
return
}
- const contentFirst = template.getTokenAfter(node.startTag, getTokenOption)
- const contentLast = template.getTokenBefore(node.endTag, getTokenOption)
-
- const beforeLineBreaks = contentFirst.loc.start.line - node.startTag.loc.end.line
- const afterLineBreaks = node.endTag.loc.start.line - contentLast.loc.end.line
- if (beforeLineBreaks !== 1) {
+ const contentFirst = /** @type {Token} */ (
+ template.getTokenAfter(element.startTag, getTokenOption)
+ )
+ const contentLast = /** @type {Token} */ (
+ template.getTokenBefore(element.endTag, getTokenOption)
+ )
+
+ const beforeLineBreaks =
+ contentFirst.loc.start.line - element.startTag.loc.end.line
+ const afterLineBreaks =
+ element.endTag.loc.start.line - contentLast.loc.end.line
+ if (isInvalidLineBreaks(beforeLineBreaks)) {
context.report({
- node: template.getLastToken(node.startTag),
+ node: template.getLastToken(element.startTag),
loc: {
- start: node.startTag.loc.end,
+ start: element.startTag.loc.end,
end: contentFirst.loc.start
},
messageId: 'unexpectedAfterClosingBracket',
data: {
- name: node.rawName,
+ name: element.rawName,
actual: getPhrase(beforeLineBreaks)
},
- fix (fixer) {
- const range = [node.startTag.range[1], contentFirst.range[0]]
+ fix(fixer) {
+ /** @type {Range} */
+ const range = [element.startTag.range[1], contentFirst.range[0]]
return fixer.replaceTextRange(range, '\n')
}
})
}
- if (isEmpty(node, sourceCode)) {
+ if (isEmpty(element, sourceCode)) {
return
}
- if (afterLineBreaks !== 1) {
+ if (isInvalidLineBreaks(afterLineBreaks)) {
context.report({
- node: template.getFirstToken(node.endTag),
+ node: template.getFirstToken(element.endTag),
loc: {
start: contentLast.loc.end,
- end: node.endTag.loc.start
+ end: element.endTag.loc.start
},
messageId: 'unexpectedBeforeOpeningBracket',
data: {
- name: node.name,
+ name: element.name,
actual: getPhrase(afterLineBreaks)
},
- fix (fixer) {
- const range = [contentLast.range[1], node.endTag.range[0]]
+ fix(fixer) {
+ /** @type {Range} */
+ const range = [contentLast.range[1], element.endTag.range[0]]
return fixer.replaceTextRange(range, '\n')
}
})
}
},
- 'VElement:exit' (node) {
+ 'VElement:exit'(node) {
if (inIgnoreElement === node) {
inIgnoreElement = null
}
diff --git a/lib/rules/multiline-ternary.js b/lib/rules/multiline-ternary.js
new file mode 100644
index 000000000..84691627e
--- /dev/null
+++ b/lib/rules/multiline-ternary.js
@@ -0,0 +1,13 @@
+/**
+ * @author dev1437
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('multiline-ternary', {
+ skipDynamicArguments: true,
+ applyDocument: true
+})
diff --git a/lib/rules/mustache-interpolation-spacing.js b/lib/rules/mustache-interpolation-spacing.js
index c2770ebf1..304b50c70 100644
--- a/lib/rules/mustache-interpolation-spacing.js
+++ b/lib/rules/mustache-interpolation-spacing.js
@@ -4,44 +4,40 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'layout',
docs: {
description: 'enforce unified spacing in mustache interpolations',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/mustache-interpolation-spacing.md'
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/mustache-interpolation-spacing.html'
},
fixable: 'whitespace',
schema: [
{
enum: ['always', 'never']
}
- ]
+ ],
+ messages: {
+ expectedSpaceAfter: "Expected 1 space after '{{', but not found.",
+ expectedSpaceBefore: "Expected 1 space before '}}', but not found.",
+ unexpectedSpaceAfter: "Expected no space after '{{', but found.",
+ unexpectedSpaceBefore: "Expected no space before '}}', but found."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const options = context.options[0] || 'always'
+ const sourceCode = context.getSourceCode()
const template =
- context.parserServices.getTemplateBodyTokenStore &&
- context.parserServices.getTemplateBodyTokenStore()
-
- // ----------------------------------------------------------------------
- // Public
- // ----------------------------------------------------------------------
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
return utils.defineTemplateBodyVisitor(context, {
- 'VExpressionContainer[expression!=null]' (node) {
+ /** @param {VExpressionContainer} node */
+ 'VExpressionContainer[expression!=null]'(node) {
const openBrace = template.getFirstToken(node)
const closeBrace = template.getLastToken(node)
@@ -54,21 +50,25 @@ module.exports = {
return
}
- const firstToken = template.getTokenAfter(openBrace, { includeComments: true })
- const lastToken = template.getTokenBefore(closeBrace, { includeComments: true })
+ const firstToken = template.getTokenAfter(openBrace, {
+ includeComments: true
+ })
+ const lastToken = template.getTokenBefore(closeBrace, {
+ includeComments: true
+ })
if (options === 'always') {
if (openBrace.range[1] === firstToken.range[0]) {
context.report({
node: openBrace,
- message: "Expected 1 space after '{{', but not found.",
+ messageId: 'expectedSpaceAfter',
fix: (fixer) => fixer.insertTextAfter(openBrace, ' ')
})
}
if (closeBrace.range[0] === lastToken.range[1]) {
context.report({
node: closeBrace,
- message: "Expected 1 space before '}}', but not found.",
+ messageId: 'expectedSpaceBefore',
fix: (fixer) => fixer.insertTextBefore(closeBrace, ' ')
})
}
@@ -79,8 +79,9 @@ module.exports = {
start: openBrace.loc.start,
end: firstToken.loc.start
},
- message: "Expected no space after '{{', but found.",
- fix: (fixer) => fixer.removeRange([openBrace.range[1], firstToken.range[0]])
+ messageId: 'unexpectedSpaceAfter',
+ fix: (fixer) =>
+ fixer.removeRange([openBrace.range[1], firstToken.range[0]])
})
}
if (closeBrace.range[0] !== lastToken.range[1]) {
@@ -89,8 +90,9 @@ module.exports = {
start: lastToken.loc.end,
end: closeBrace.loc.end
},
- message: "Expected no space before '}}', but found.",
- fix: (fixer) => fixer.removeRange([lastToken.range[1], closeBrace.range[0]])
+ messageId: 'unexpectedSpaceBefore',
+ fix: (fixer) =>
+ fixer.removeRange([lastToken.range[1], closeBrace.range[0]])
})
}
}
diff --git a/lib/rules/name-property-casing.js b/lib/rules/name-property-casing.js
deleted file mode 100644
index 907aecfb3..000000000
--- a/lib/rules/name-property-casing.js
+++ /dev/null
@@ -1,63 +0,0 @@
-/**
- * @fileoverview Requires specific casing for the name property in Vue components
- * @author Armano
- */
-'use strict'
-
-const utils = require('../utils')
-const casing = require('../utils/casing')
-const allowedCaseOptions = ['PascalCase', 'kebab-case']
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-module.exports = {
- meta: {
- type: 'suggestion',
- docs: {
- description: 'enforce specific casing for the name property in Vue components',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/name-property-casing.md'
- },
- fixable: 'code', // or "code" or "whitespace"
- schema: [
- {
- enum: allowedCaseOptions
- }
- ]
- },
-
- create (context) {
- const options = context.options[0]
- const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'
-
- // ----------------------------------------------------------------------
- // Public
- // ----------------------------------------------------------------------
-
- return utils.executeOnVue(context, (obj) => {
- const node = obj.properties
- .find(item => (
- item.type === 'Property' &&
- item.key.name === 'name' &&
- item.value.type === 'Literal'
- ))
-
- if (!node) return
-
- const value = casing.getConverter(caseType)(node.value.value)
- if (value !== node.value.value) {
- context.report({
- node: node.value,
- message: 'Property name "{{value}}" is not {{caseType}}.',
- data: {
- value: node.value.value,
- caseType: caseType
- },
- fix: fixer => fixer.replaceText(node.value, node.value.raw.replace(node.value.value, value))
- })
- }
- })
- }
-}
diff --git a/lib/rules/new-line-between-multi-line-property.js b/lib/rules/new-line-between-multi-line-property.js
new file mode 100644
index 000000000..54812869b
--- /dev/null
+++ b/lib/rules/new-line-between-multi-line-property.js
@@ -0,0 +1,154 @@
+/**
+ * @fileoverview Enforce new lines between multi-line properties in Vue components.
+ * @author IWANABETHATGUY
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @param {Token} node
+ */
+function isComma(node) {
+ return node.type === 'Punctuator' && node.value === ','
+}
+
+/**
+ * Check whether the between given nodes has empty line.
+ * @param {SourceCode} sourceCode
+ * @param {ASTNode} pre
+ * @param {ASTNode} cur
+ */
+function* iterateBetweenTokens(sourceCode, pre, cur) {
+ yield sourceCode.getLastToken(pre)
+ yield* sourceCode.getTokensBetween(pre, cur, {
+ includeComments: true
+ })
+ yield sourceCode.getFirstToken(cur)
+}
+
+/**
+ * Check whether the between given nodes has empty line.
+ * @param {SourceCode} sourceCode
+ * @param {ASTNode} pre
+ * @param {ASTNode} cur
+ */
+function hasEmptyLine(sourceCode, pre, cur) {
+ /** @type {Token|null} */
+ let preToken = null
+ for (const token of iterateBetweenTokens(sourceCode, pre, cur)) {
+ if (preToken && token.loc.start.line - preToken.loc.end.line >= 2) {
+ return true
+ }
+ preToken = token
+ }
+ return false
+}
+
+module.exports = {
+ meta: {
+ type: 'layout',
+ docs: {
+ description:
+ 'enforce new lines between multi-line properties in Vue components',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/new-line-between-multi-line-property.html'
+ },
+ fixable: 'whitespace',
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ // number of line you want to insert after multi-line property
+ minLineOfMultilineProperty: {
+ type: 'number',
+ minimum: 2
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ missingEmptyLine:
+ 'Enforce new lines between multi-line properties in Vue components.'
+ }
+ },
+
+ /** @param {RuleContext} context */
+ create(context) {
+ let minLineOfMultilineProperty = 2
+ if (
+ context.options &&
+ context.options[0] &&
+ context.options[0].minLineOfMultilineProperty
+ ) {
+ minLineOfMultilineProperty = context.options[0].minLineOfMultilineProperty
+ }
+
+ /** @type {CallExpression[]} */
+ const callStack = []
+ const sourceCode = context.getSourceCode()
+ return Object.assign(
+ utils.defineVueVisitor(context, {
+ CallExpression(node) {
+ callStack.push(node)
+ },
+ 'CallExpression:exit'() {
+ callStack.pop()
+ },
+
+ /**
+ * @param {ObjectExpression} node
+ */
+ ObjectExpression(node) {
+ if (callStack.length > 0) {
+ return
+ }
+ const properties = node.properties
+ for (let i = 1; i < properties.length; i++) {
+ const cur = properties[i]
+ const pre = properties[i - 1]
+
+ const lineCountOfPreProperty =
+ pre.loc.end.line - pre.loc.start.line + 1
+ if (lineCountOfPreProperty < minLineOfMultilineProperty) {
+ continue
+ }
+
+ if (hasEmptyLine(sourceCode, pre, cur)) {
+ continue
+ }
+
+ context.report({
+ node: pre,
+ loc: {
+ start: pre.loc.end,
+ end: cur.loc.start
+ },
+ messageId: 'missingEmptyLine',
+ fix(fixer) {
+ /** @type {Token|null} */
+ let preToken = null
+ for (const token of iterateBetweenTokens(
+ sourceCode,
+ pre,
+ cur
+ )) {
+ if (
+ preToken &&
+ preToken.loc.end.line < token.loc.start.line
+ ) {
+ return fixer.insertTextAfter(preToken, '\n')
+ }
+ preToken = token
+ }
+ const commaToken = sourceCode.getTokenAfter(pre, isComma)
+ return fixer.insertTextAfter(commaToken || pre, '\n\n')
+ }
+ })
+ }
+ }
+ })
+ )
+ }
+}
diff --git a/lib/rules/next-tick-style.js b/lib/rules/next-tick-style.js
new file mode 100644
index 000000000..08cc85a1b
--- /dev/null
+++ b/lib/rules/next-tick-style.js
@@ -0,0 +1,141 @@
+/**
+ * @fileoverview enforce Promise or callback style in `nextTick`
+ * @author Flo Edelmann
+ * @copyright 2020 Flo Edelmann. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const { findVariable } = require('@eslint-community/eslint-utils')
+
+/**
+ * @param {Identifier} identifier
+ * @param {RuleContext} context
+ * @returns {CallExpression|undefined}
+ */
+function getVueNextTickCallExpression(identifier, context) {
+ // Instance API: this.$nextTick()
+ if (
+ identifier.name === '$nextTick' &&
+ identifier.parent.type === 'MemberExpression' &&
+ utils.isThis(identifier.parent.object, context) &&
+ identifier.parent.parent.type === 'CallExpression' &&
+ identifier.parent.parent.callee === identifier.parent
+ ) {
+ return identifier.parent.parent
+ }
+
+ // Vue 2 Global API: Vue.nextTick()
+ if (
+ identifier.name === 'nextTick' &&
+ identifier.parent.type === 'MemberExpression' &&
+ identifier.parent.object.type === 'Identifier' &&
+ identifier.parent.object.name === 'Vue' &&
+ identifier.parent.parent.type === 'CallExpression' &&
+ identifier.parent.parent.callee === identifier.parent
+ ) {
+ return identifier.parent.parent
+ }
+
+ // Vue 3 Global API: import { nextTick as nt } from 'vue'; nt()
+ if (
+ identifier.parent.type === 'CallExpression' &&
+ identifier.parent.callee === identifier
+ ) {
+ const variable = findVariable(
+ utils.getScope(context, identifier),
+ identifier
+ )
+
+ if (variable != null && variable.defs.length === 1) {
+ const def = variable.defs[0]
+ if (
+ def.type === 'ImportBinding' &&
+ def.node.type === 'ImportSpecifier' &&
+ def.node.imported.type === 'Identifier' &&
+ def.node.imported.name === 'nextTick' &&
+ def.node.parent.type === 'ImportDeclaration' &&
+ def.node.parent.source.value === 'vue'
+ ) {
+ return identifier.parent
+ }
+ }
+ }
+
+ return undefined
+}
+
+/**
+ * @param {CallExpression} callExpression
+ * @returns {boolean}
+ */
+function isAwaitedPromise(callExpression) {
+ return (
+ callExpression.parent.type === 'AwaitExpression' ||
+ (callExpression.parent.type === 'MemberExpression' &&
+ callExpression.parent.property.type === 'Identifier' &&
+ callExpression.parent.property.name === 'then')
+ )
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'enforce Promise or callback style in `nextTick`',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/next-tick-style.html'
+ },
+ fixable: 'code',
+ schema: [{ enum: ['promise', 'callback'] }],
+ messages: {
+ usePromise:
+ 'Use the Promise returned by `nextTick` instead of passing a callback function.',
+ useCallback:
+ 'Pass a callback function to `nextTick` instead of using the returned Promise.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const preferredStyle =
+ /** @type {string|undefined} */ (context.options[0]) || 'promise'
+
+ return utils.defineVueVisitor(context, {
+ /** @param {Identifier} node */
+ Identifier(node) {
+ const callExpression = getVueNextTickCallExpression(node, context)
+ if (!callExpression) {
+ return
+ }
+
+ if (preferredStyle === 'callback') {
+ if (
+ callExpression.arguments.length !== 1 ||
+ isAwaitedPromise(callExpression)
+ ) {
+ context.report({
+ node,
+ messageId: 'useCallback'
+ })
+ }
+
+ return
+ }
+
+ if (
+ callExpression.arguments.length > 0 ||
+ !isAwaitedPromise(callExpression)
+ ) {
+ context.report({
+ node,
+ messageId: 'usePromise',
+ fix(fixer) {
+ return fixer.insertTextAfter(node, '().then')
+ }
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-arrow-functions-in-watch.js b/lib/rules/no-arrow-functions-in-watch.js
new file mode 100644
index 000000000..b16b267f5
--- /dev/null
+++ b/lib/rules/no-arrow-functions-in-watch.js
@@ -0,0 +1,50 @@
+/**
+ * @author Sosuke Suzuki
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'disallow using arrow functions to define watcher',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-arrow-functions-in-watch.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ noArrowFunctionsInWatch:
+ 'You should not use an arrow function to define a watcher.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.executeOnVue(context, (obj) => {
+ const watchNode = utils.findProperty(obj, 'watch')
+ if (watchNode == null) {
+ return
+ }
+ const watchValue = watchNode.value
+ if (watchValue.type !== 'ObjectExpression') {
+ return
+ }
+ for (const property of watchValue.properties) {
+ if (property.type !== 'Property') {
+ continue
+ }
+
+ for (const handler of utils.iterateWatchHandlerValues(property)) {
+ if (handler.type === 'ArrowFunctionExpression') {
+ context.report({
+ node: handler,
+ messageId: 'noArrowFunctionsInWatch'
+ })
+ }
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-async-in-computed-properties.js b/lib/rules/no-async-in-computed-properties.js
index bfd5271bb..e8ed02f0e 100644
--- a/lib/rules/no-async-in-computed-properties.js
+++ b/lib/rules/no-async-in-computed-properties.js
@@ -3,155 +3,290 @@
* @author Armano
*/
'use strict'
-
+const { ReferenceTracker } = require('@eslint-community/eslint-utils')
const utils = require('../utils')
-const PROMISE_FUNCTIONS = [
- 'then',
- 'catch',
- 'finally'
-]
+/**
+ * @typedef {import('../utils').VueObjectData} VueObjectData
+ * @typedef {import('../utils').VueVisitor} VueVisitor
+ * @typedef {import('../utils').ComponentComputedProperty} ComponentComputedProperty
+ */
+
+const PROMISE_FUNCTIONS = new Set(['then', 'catch', 'finally'])
-const PROMISE_METHODS = [
- 'all',
- 'race',
- 'reject',
- 'resolve'
-]
+const PROMISE_METHODS = new Set(['all', 'race', 'reject', 'resolve'])
-const TIMED_FUNCTIONS = [
+const TIMED_FUNCTIONS = new Set([
'setTimeout',
'setInterval',
'setImmediate',
'requestAnimationFrame'
-]
-
-function isTimedFunction (node) {
- return ((
- node.type === 'CallExpression' &&
- node.callee.type === 'Identifier' &&
- TIMED_FUNCTIONS.indexOf(node.callee.name) !== -1
- ) || (
- node.type === 'CallExpression' &&
- node.callee.type === 'MemberExpression' &&
- node.callee.object.type === 'Identifier' &&
- node.callee.object.name === 'window' && (
- TIMED_FUNCTIONS.indexOf(node.callee.property.name) !== -1
- )
- )) && node.arguments.length
+])
+
+/**
+ * @param {CallExpression} node
+ */
+function isTimedFunction(node) {
+ const callee = utils.skipChainExpression(node.callee)
+ return (
+ ((callee.type === 'Identifier' && TIMED_FUNCTIONS.has(callee.name)) ||
+ (callee.type === 'MemberExpression' &&
+ callee.object.type === 'Identifier' &&
+ callee.object.name === 'window' &&
+ TIMED_FUNCTIONS.has(utils.getStaticPropertyName(callee) || ''))) &&
+ node.arguments.length > 0
+ )
}
-function isPromise (node) {
- if (node.type === 'CallExpression' && node.callee.type === 'MemberExpression') {
- return ( // hello.PROMISE_FUNCTION()
- node.callee.property.type === 'Identifier' &&
- PROMISE_FUNCTIONS.indexOf(node.callee.property.name) !== -1
- ) || ( // Promise.PROMISE_METHOD()
- node.callee.object.type === 'Identifier' &&
- node.callee.object.name === 'Promise' &&
- PROMISE_METHODS.indexOf(node.callee.property.name) !== -1
+/**
+ * @param {CallExpression} node
+ */
+function isPromise(node) {
+ const callee = utils.skipChainExpression(node.callee)
+ if (callee.type === 'MemberExpression') {
+ const name = utils.getStaticPropertyName(callee)
+ return (
+ name &&
+ // hello.PROMISE_FUNCTION()
+ (PROMISE_FUNCTIONS.has(name) ||
+ // Promise.PROMISE_METHOD()
+ (callee.object.type === 'Identifier' &&
+ callee.object.name === 'Promise' &&
+ PROMISE_METHODS.has(name)))
)
}
return false
}
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * @param {CallExpression} node
+ * @param {RuleContext} context
+ */
+function isNextTick(node, context) {
+ const callee = utils.skipChainExpression(node.callee)
+ if (callee.type === 'MemberExpression') {
+ const name = utils.getStaticPropertyName(callee)
+ return (
+ (utils.isThis(callee.object, context) && name === '$nextTick') ||
+ (callee.object.type === 'Identifier' &&
+ callee.object.name === 'Vue' &&
+ name === 'nextTick')
+ )
+ }
+ return false
+}
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'disallow asynchronous actions in computed properties',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/no-async-in-computed-properties.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-async-in-computed-properties.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unexpectedInFunction:
+ 'Unexpected {{expressionName}} in computed function.',
+ unexpectedInProperty:
+ 'Unexpected {{expressionName}} in "{{propertyName}}" computed property.'
+ }
},
+ /** @param {RuleContext} context */
+ create(context) {
+ /** @type {Map} */
+ const computedPropertiesMap = new Map()
+ /** @type {(FunctionExpression | ArrowFunctionExpression)[]} */
+ const computedFunctionNodes = []
- create (context) {
- const forbiddenNodes = []
+ /**
+ * @typedef {object} ScopeStack
+ * @property {ScopeStack | null} upper
+ * @property {BlockStatement | Expression} body
+ */
+ /** @type {ScopeStack | null} */
+ let scopeStack = null
const expressionTypes = {
promise: 'asynchronous action',
+ nextTick: 'asynchronous action',
await: 'await operator',
async: 'async function declaration',
new: 'Promise object',
timed: 'timed function'
}
- function onFunctionEnter (node) {
+ /**
+ * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression} node
+ * @param {VueObjectData|undefined} [info]
+ */
+ function onFunctionEnter(node, info) {
if (node.async) {
- forbiddenNodes.push({
- node: node,
- type: 'async'
- })
+ verify(
+ node,
+ node.body,
+ 'async',
+ info ? computedPropertiesMap.get(info.node) : null
+ )
+ }
+
+ scopeStack = {
+ upper: scopeStack,
+ body: node.body
}
}
- return Object.assign({},
- {
- FunctionDeclaration: onFunctionEnter,
+ function onFunctionExit() {
+ scopeStack = scopeStack && scopeStack.upper
+ }
- FunctionExpression: onFunctionEnter,
+ /**
+ * @param {ESNode} node
+ * @param {BlockStatement | Expression} targetBody
+ * @param {keyof expressionTypes} type
+ * @param {ComponentComputedProperty[]|undefined|null} computedProperties
+ */
+ function verify(node, targetBody, type, computedProperties) {
+ for (const cp of computedProperties || []) {
+ if (
+ cp.value &&
+ node.loc.start.line >= cp.value.loc.start.line &&
+ node.loc.end.line <= cp.value.loc.end.line &&
+ targetBody === cp.value
+ ) {
+ context.report({
+ node,
+ messageId: 'unexpectedInProperty',
+ data: {
+ expressionName: expressionTypes[type],
+ propertyName: cp.key || 'unknown'
+ }
+ })
+ return
+ }
+ }
- ArrowFunctionExpression: onFunctionEnter,
+ for (const cf of computedFunctionNodes) {
+ if (
+ node.loc.start.line >= cf.body.loc.start.line &&
+ node.loc.end.line <= cf.body.loc.end.line &&
+ targetBody === cf.body
+ ) {
+ context.report({
+ node,
+ messageId: 'unexpectedInFunction',
+ data: {
+ expressionName: expressionTypes[type]
+ }
+ })
+ return
+ }
+ }
+ }
+ const nodeVisitor = {
+ ':function': onFunctionEnter,
+ ':function:exit': onFunctionExit,
- NewExpression (node) {
- if (node.callee.name === 'Promise') {
- forbiddenNodes.push({
- node: node,
- type: 'new'
- })
- }
- },
-
- CallExpression (node) {
- if (isPromise(node)) {
- forbiddenNodes.push({
- node: node,
- type: 'promise'
- })
- }
- if (isTimedFunction(node)) {
- forbiddenNodes.push({
- node: node,
- type: 'timed'
- })
- }
- },
+ /**
+ * @param {NewExpression} node
+ * @param {VueObjectData|undefined} [info]
+ */
+ NewExpression(node, info) {
+ if (!scopeStack) {
+ return
+ }
+ if (
+ node.callee.type === 'Identifier' &&
+ node.callee.name === 'Promise'
+ ) {
+ verify(
+ node,
+ scopeStack.body,
+ 'new',
+ info ? computedPropertiesMap.get(info.node) : null
+ )
+ }
+ },
- AwaitExpression (node) {
- forbiddenNodes.push({
- node: node,
- type: 'await'
- })
+ /**
+ * @param {CallExpression} node
+ * @param {VueObjectData|undefined} [info]
+ */
+ CallExpression(node, info) {
+ if (!scopeStack) {
+ return
+ }
+ if (isPromise(node)) {
+ verify(
+ node,
+ scopeStack.body,
+ 'promise',
+ info ? computedPropertiesMap.get(info.node) : null
+ )
+ } else if (isTimedFunction(node)) {
+ verify(
+ node,
+ scopeStack.body,
+ 'timed',
+ info ? computedPropertiesMap.get(info.node) : null
+ )
+ } else if (isNextTick(node, context)) {
+ verify(
+ node,
+ scopeStack.body,
+ 'nextTick',
+ info ? computedPropertiesMap.get(info.node) : null
+ )
}
},
- utils.executeOnVue(context, (obj) => {
- const computedProperties = utils.getComputedProperties(obj)
-
- computedProperties.forEach(cp => {
- forbiddenNodes.forEach(el => {
- if (
- cp.value &&
- el.node.loc.start.line >= cp.value.loc.start.line &&
- el.node.loc.end.line <= cp.value.loc.end.line
- ) {
- context.report({
- node: el.node,
- message: 'Unexpected {{expressionName}} in "{{propertyName}}" computed property.',
- data: {
- expressionName: expressionTypes[el.type],
- propertyName: cp.key
- }
- })
+
+ /**
+ * @param {AwaitExpression} node
+ * @param {VueObjectData|undefined} [info]
+ */
+ AwaitExpression(node, info) {
+ if (!scopeStack) {
+ return
+ }
+ verify(
+ node,
+ scopeStack.body,
+ 'await',
+ info ? computedPropertiesMap.get(info.node) : null
+ )
+ }
+ }
+
+ return utils.compositingVisitors(
+ {
+ /** @param {Program} program */
+ Program(program) {
+ const tracker = new ReferenceTracker(utils.getScope(context, program))
+ for (const { node } of utils.iterateReferencesTraceMap(tracker, {
+ computed: {
+ [ReferenceTracker.CALL]: true
}
+ })) {
+ if (node.type !== 'CallExpression') {
+ continue
+ }
+
+ const getter = utils.getGetterBodyFromComputedFunction(node)
+ if (getter) {
+ computedFunctionNodes.push(getter)
+ }
+ }
+ }
+ },
+ utils.isScriptSetup(context)
+ ? utils.defineScriptSetupVisitor(context, nodeVisitor)
+ : utils.defineVueVisitor(context, {
+ onVueObjectEnter(node) {
+ computedPropertiesMap.set(node, utils.getComputedProperties(node))
+ },
+ ...nodeVisitor
})
- })
- })
)
}
}
diff --git a/lib/rules/no-bare-strings-in-template.js b/lib/rules/no-bare-strings-in-template.js
new file mode 100644
index 000000000..8e4acc96d
--- /dev/null
+++ b/lib/rules/no-bare-strings-in-template.js
@@ -0,0 +1,293 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const regexp = require('../utils/regexp')
+const casing = require('../utils/casing')
+
+/**
+ * @typedef { { names: { [tagName in string]: Set }, regexps: { name: RegExp, attrs: Set }[], cache: { [tagName in string]: Set } } } TargetAttrs
+ */
+
+// https://dev.w3.org/html5/html-author/charref
+const DEFAULT_ALLOWLIST = [
+ '(',
+ ')',
+ ',',
+ '.',
+ '&',
+ '+',
+ '-',
+ '=',
+ '*',
+ '/',
+ '#',
+ '%',
+ '!',
+ '?',
+ ':',
+ '[',
+ ']',
+ '{',
+ '}',
+ '<',
+ '>',
+ '\u00B7', // "·"
+ '\u2022', // "•"
+ '\u2010', // "‐"
+ '\u2013', // "–"
+ '\u2014', // "—"
+ '\u2212', // "−"
+ '|'
+]
+
+const DEFAULT_ATTRIBUTES = {
+ '/.+/': [
+ 'title',
+ 'aria-label',
+ 'aria-placeholder',
+ 'aria-roledescription',
+ 'aria-valuetext'
+ ],
+ input: ['placeholder'],
+ img: ['alt']
+}
+
+const DEFAULT_DIRECTIVES = ['v-text']
+
+/**
+ * Parse attributes option
+ * @param {any} options
+ * @returns {TargetAttrs}
+ */
+function parseTargetAttrs(options) {
+ /** @type {TargetAttrs} */
+ const result = { names: {}, regexps: [], cache: {} }
+ for (const tagName of Object.keys(options)) {
+ /** @type { Set } */
+ const attrs = new Set(options[tagName])
+ if (regexp.isRegExp(tagName)) {
+ result.regexps.push({
+ name: regexp.toRegExp(tagName),
+ attrs
+ })
+ } else {
+ result.names[tagName] = attrs
+ }
+ }
+ return result
+}
+
+/**
+ * Get a string from given expression container node
+ * @param {VExpressionContainer} value
+ * @returns { string | null }
+ */
+function getStringValue(value) {
+ const expression = value.expression
+ if (!expression) {
+ return null
+ }
+ if (expression.type !== 'Literal') {
+ return null
+ }
+ if (typeof expression.value === 'string') {
+ return expression.value
+ }
+ return null
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'disallow the use of bare strings in ``',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/no-bare-strings-in-template.html'
+ },
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ allowlist: {
+ type: 'array',
+ items: { type: 'string' },
+ uniqueItems: true
+ },
+ attributes: {
+ type: 'object',
+ patternProperties: {
+ '^(?:\\S+|/.*/[a-z]*)$': {
+ type: 'array',
+ items: { type: 'string' },
+ uniqueItems: true
+ }
+ },
+ additionalProperties: false
+ },
+ directives: {
+ type: 'array',
+ items: { type: 'string', pattern: '^v-' },
+ uniqueItems: true
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ unexpected: 'Unexpected non-translated string used.',
+ unexpectedInAttr: 'Unexpected non-translated string used in `{{attr}}`.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /**
+ * @typedef { { upper: ElementStack | null, name: string, attrs: Set } } ElementStack
+ */
+ const opts = context.options[0] || {}
+ /** @type {string[]} */
+ const rawAllowlist = opts.allowlist || DEFAULT_ALLOWLIST
+ const attributes = parseTargetAttrs(opts.attributes || DEFAULT_ATTRIBUTES)
+ const directives = opts.directives || DEFAULT_DIRECTIVES
+
+ /** @type {string[]} */
+ const stringAllowlist = []
+ /** @type {RegExp[]} */
+ const regexAllowlist = []
+
+ for (const item of rawAllowlist) {
+ if (regexp.isRegExp(item)) {
+ regexAllowlist.push(regexp.toRegExp(item))
+ } else {
+ stringAllowlist.push(item)
+ }
+ }
+
+ const allowlistRe =
+ stringAllowlist.length > 0
+ ? new RegExp(
+ stringAllowlist
+ .map((w) => regexp.escape(w))
+ .sort((a, b) => b.length - a.length)
+ .join('|'),
+ 'gu'
+ )
+ : null
+
+ /** @type {ElementStack | null} */
+ let elementStack = null
+ /**
+ * Gets the bare string from given string
+ * @param {string} str
+ */
+ function getBareString(str) {
+ let result = str.trim()
+
+ if (allowlistRe) {
+ result = result.replace(allowlistRe, '')
+ }
+
+ for (const regex of regexAllowlist) {
+ const flags = regex.flags.includes('g')
+ ? regex.flags
+ : `${regex.flags}g`
+ const globalRegex = new RegExp(regex.source, flags)
+ result = result.replace(globalRegex, '')
+ }
+
+ return result.trim()
+ }
+
+ /**
+ * Get the attribute to be verified from the element name.
+ * @param {string} tagName
+ * @returns {Set}
+ */
+ function getTargetAttrs(tagName) {
+ if (attributes.cache[tagName]) {
+ return attributes.cache[tagName]
+ }
+ /** @type {string[]} */
+ const result = []
+ if (attributes.names[tagName]) {
+ result.push(...attributes.names[tagName])
+ }
+ for (const { name, attrs } of attributes.regexps) {
+ name.lastIndex = 0
+ if (name.test(tagName)) {
+ result.push(...attrs)
+ }
+ }
+ if (casing.isKebabCase(tagName)) {
+ result.push(...getTargetAttrs(casing.pascalCase(tagName)))
+ }
+
+ return (attributes.cache[tagName] = new Set(result))
+ }
+
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VText} node */
+ VText(node) {
+ if (getBareString(node.value)) {
+ context.report({
+ node,
+ messageId: 'unexpected'
+ })
+ }
+ },
+ /**
+ * @param {VElement} node
+ */
+ VElement(node) {
+ elementStack = {
+ upper: elementStack,
+ name: node.rawName,
+ attrs: getTargetAttrs(node.rawName)
+ }
+ },
+ 'VElement:exit'() {
+ elementStack = elementStack && elementStack.upper
+ },
+ /** @param {VAttribute|VDirective} node */
+ VAttribute(node) {
+ if (!node.value || !elementStack) {
+ return
+ }
+ if (node.directive === false) {
+ const attrs = elementStack.attrs
+ if (!attrs.has(node.key.rawName)) {
+ return
+ }
+
+ if (getBareString(node.value.value)) {
+ context.report({
+ node: node.value,
+ messageId: 'unexpectedInAttr',
+ data: {
+ attr: node.key.rawName
+ }
+ })
+ }
+ } else {
+ const directive = `v-${node.key.name.name}`
+ if (!directives.includes(directive)) {
+ return
+ }
+ const str = getStringValue(node.value)
+ if (str && getBareString(str)) {
+ context.report({
+ node: node.value,
+ messageId: 'unexpectedInAttr',
+ data: {
+ attr: directive
+ }
+ })
+ }
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-boolean-default.js b/lib/rules/no-boolean-default.js
new file mode 100644
index 000000000..2ff6a2d06
--- /dev/null
+++ b/lib/rules/no-boolean-default.js
@@ -0,0 +1,148 @@
+/**
+ * @fileoverview Prevents boolean defaults from being set
+ * @author Hiroki Osame
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef {import('../utils').ComponentProp} ComponentProp
+ * @typedef {import('../utils').ComponentObjectProp} ComponentObjectProp
+ */
+
+/**
+ * @param {Expression|undefined} node
+ */
+function isBooleanIdentifier(node) {
+ return Boolean(node && node.type === 'Identifier' && node.name === 'Boolean')
+}
+
+/**
+ * Detects whether given prop node is a Boolean
+ * @param {ComponentObjectProp} prop
+ * @return {Boolean}
+ */
+function isBooleanProp(prop) {
+ const value = utils.skipTSAsExpression(prop.value)
+ return (
+ isBooleanIdentifier(value) ||
+ (value.type === 'ObjectExpression' &&
+ isBooleanIdentifier(utils.findProperty(value, 'type')?.value))
+ )
+}
+
+/**
+ * @param {ObjectExpression} propDefValue
+ */
+function getDefaultNode(propDefValue) {
+ return utils.findProperty(propDefValue, 'default')
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'disallow boolean defaults',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/no-boolean-default.html'
+ },
+ fixable: null,
+ schema: [
+ {
+ enum: ['default-false', 'no-default']
+ }
+ ],
+ messages: {
+ noBooleanDefault:
+ 'Boolean prop should not set a default (Vue defaults it to false).',
+ defaultFalse: 'Boolean prop should only be defaulted to false.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const booleanType = context.options[0] || 'no-default'
+ /**
+ * @param {ComponentProp} prop
+ * @param {(propName: string) => Expression[]} otherDefaultProvider
+ */
+ function processProp(prop, otherDefaultProvider) {
+ if (prop.type === 'object') {
+ if (!isBooleanProp(prop)) {
+ return
+ }
+ if (prop.value.type === 'ObjectExpression') {
+ const defaultNode = getDefaultNode(prop.value)
+ if (defaultNode) {
+ verifyDefaultExpression(defaultNode.value)
+ }
+ }
+ if (prop.propName != null) {
+ for (const defaultNode of otherDefaultProvider(prop.propName)) {
+ verifyDefaultExpression(defaultNode)
+ }
+ }
+ } else if (prop.type === 'type') {
+ if (prop.types.length !== 1 || prop.types[0] !== 'Boolean') {
+ return
+ }
+ for (const defaultNode of otherDefaultProvider(prop.propName)) {
+ verifyDefaultExpression(defaultNode)
+ }
+ }
+ }
+ /**
+ * @param {ComponentProp[]} props
+ * @param {(propName: string) => Expression[]} otherDefaultProvider
+ */
+ function processProps(props, otherDefaultProvider) {
+ for (const prop of props) {
+ processProp(prop, otherDefaultProvider)
+ }
+ }
+
+ /**
+ * @param {Expression} defaultNode
+ */
+ function verifyDefaultExpression(defaultNode) {
+ switch (booleanType) {
+ case 'no-default': {
+ context.report({
+ node: defaultNode,
+ messageId: 'noBooleanDefault'
+ })
+ break
+ }
+
+ case 'default-false': {
+ if (defaultNode.type !== 'Literal' || defaultNode.value !== false) {
+ context.report({
+ node: defaultNode,
+ messageId: 'defaultFalse'
+ })
+ }
+ break
+ }
+ }
+ }
+ return utils.compositingVisitors(
+ utils.executeOnVueComponent(context, (obj) => {
+ processProps(utils.getComponentPropsFromOptions(obj), () => [])
+ }),
+ utils.defineScriptSetupVisitor(context, {
+ onDefinePropsEnter(node, props) {
+ const defaultsByWithDefaults =
+ utils.getWithDefaultsPropExpressions(node)
+ const defaultsByAssignmentPatterns =
+ utils.getDefaultPropExpressionsForPropsDestructure(node)
+ processProps(props, (propName) =>
+ [
+ defaultsByWithDefaults[propName],
+ defaultsByAssignmentPatterns[propName]?.expression
+ ].filter(utils.isDef)
+ )
+ }
+ })
+ )
+ }
+}
diff --git a/lib/rules/no-child-content.js b/lib/rules/no-child-content.js
new file mode 100644
index 000000000..df39c758e
--- /dev/null
+++ b/lib/rules/no-child-content.js
@@ -0,0 +1,163 @@
+/**
+ * @author Flo Edelmann
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+const { defineTemplateBodyVisitor } = require('../utils')
+
+/**
+ * @typedef {object} RuleOption
+ * @property {string[]} additionalDirectives
+ */
+
+/**
+ * @param {VNode | Token} node
+ * @returns {boolean}
+ */
+function isWhiteSpaceTextNode(node) {
+ return node.type === 'VText' && node.value.trim() === ''
+}
+
+/**
+ * @param {Position} pos1
+ * @param {Position} pos2
+ * @returns {'less' | 'equal' | 'greater'}
+ */
+function comparePositions(pos1, pos2) {
+ if (
+ pos1.line < pos2.line ||
+ (pos1.line === pos2.line && pos1.column < pos2.column)
+ ) {
+ return 'less'
+ }
+
+ if (
+ pos1.line > pos2.line ||
+ (pos1.line === pos2.line && pos1.column > pos2.column)
+ ) {
+ return 'greater'
+ }
+
+ return 'equal'
+}
+
+/**
+ * @param {(VNode | Token)[]} nodes
+ * @returns {SourceLocation | undefined}
+ */
+function getLocationRange(nodes) {
+ /** @type {Position | undefined} */
+ let start
+ /** @type {Position | undefined} */
+ let end
+
+ for (const node of nodes) {
+ if (!start || comparePositions(node.loc.start, start) === 'less') {
+ start = node.loc.start
+ }
+
+ if (!end || comparePositions(node.loc.end, end) === 'greater') {
+ end = node.loc.end
+ }
+ }
+
+ if (start === undefined || end === undefined) {
+ return undefined
+ }
+
+ return { start, end }
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ "disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`",
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-child-content.html'
+ },
+ fixable: null,
+ hasSuggestions: true,
+ schema: [
+ {
+ type: 'object',
+ additionalProperties: false,
+ properties: {
+ additionalDirectives: {
+ type: 'array',
+ uniqueItems: true,
+ minItems: 1,
+ items: {
+ type: 'string'
+ }
+ }
+ },
+ required: ['additionalDirectives']
+ }
+ ],
+ messages: {
+ disallowedChildContent:
+ 'Child content is disallowed because it will be overwritten by the v-{{ directiveName }} directive.',
+ removeChildContent: 'Remove child content.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const directives = new Set(['html', 'text'])
+
+ /** @type {RuleOption | undefined} */
+ const option = context.options[0]
+ if (option !== undefined) {
+ for (const directive of option.additionalDirectives) {
+ directives.add(directive)
+ }
+ }
+
+ return defineTemplateBodyVisitor(context, {
+ /** @param {VDirective} directiveNode */
+ 'VAttribute[directive=true]'(directiveNode) {
+ const directiveName = directiveNode.key.name.name
+ const elementNode = directiveNode.parent.parent
+
+ if (elementNode.endTag === null) {
+ return
+ }
+ const sourceCode = context.getSourceCode()
+ const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
+ const elementComments = tokenStore.getTokensBetween(
+ elementNode.startTag,
+ elementNode.endTag,
+ {
+ includeComments: true,
+ filter: (token) => token.type === 'HTMLComment'
+ }
+ )
+
+ const childNodes = [...elementNode.children, ...elementComments]
+
+ if (
+ directives.has(directiveName) &&
+ childNodes.some((childNode) => !isWhiteSpaceTextNode(childNode))
+ ) {
+ context.report({
+ node: elementNode,
+ loc: getLocationRange(childNodes),
+ messageId: 'disallowedChildContent',
+ data: { directiveName },
+ suggest: [
+ {
+ messageId: 'removeChildContent',
+ *fix(fixer) {
+ for (const childNode of childNodes) {
+ yield fixer.remove(childNode)
+ }
+ }
+ }
+ ]
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-computed-properties-in-data.js b/lib/rules/no-computed-properties-in-data.js
new file mode 100644
index 000000000..472d45f4d
--- /dev/null
+++ b/lib/rules/no-computed-properties-in-data.js
@@ -0,0 +1,100 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef {import('../utils').VueObjectData} VueObjectData
+ */
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'disallow accessing computed properties in `data`',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-computed-properties-in-data.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ cannotBeUsed:
+ 'The computed property cannot be used in `data()` because it is before initialization.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /** @type {Map}>} */
+ const contextMap = new Map()
+
+ /**
+ * @typedef {object} ScopeStack
+ * @property {ScopeStack | null} upper
+ * @property {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression} node
+ */
+ /** @type {ScopeStack | null} */
+ let scopeStack = null
+
+ return utils.compositingVisitors(
+ {
+ /**
+ * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression} node
+ */
+ ':function'(node) {
+ scopeStack = {
+ upper: scopeStack,
+ node
+ }
+ },
+ ':function:exit'() {
+ scopeStack = scopeStack && scopeStack.upper
+ }
+ },
+ utils.defineVueVisitor(context, {
+ onVueObjectEnter(node) {
+ const dataProperty = utils.findProperty(node, 'data')
+ if (
+ !dataProperty ||
+ (dataProperty.value.type !== 'FunctionExpression' &&
+ dataProperty.value.type !== 'ArrowFunctionExpression')
+ ) {
+ return
+ }
+ const computedNames = new Set()
+ for (const computed of utils.iterateProperties(
+ node,
+ new Set(['computed'])
+ )) {
+ computedNames.add(computed.name)
+ }
+
+ contextMap.set(node, { data: dataProperty.value, computedNames })
+ },
+ /**
+ * @param {MemberExpression} node
+ * @param {VueObjectData} vueData
+ */
+ MemberExpression(node, vueData) {
+ if (!scopeStack || !utils.isThis(node.object, context)) {
+ return
+ }
+ const ctx = contextMap.get(vueData.node)
+ if (!ctx || ctx.data !== scopeStack.node) {
+ return
+ }
+ const name = utils.getStaticPropertyName(node)
+ if (!name || !ctx.computedNames.has(name)) {
+ return
+ }
+ context.report({
+ node,
+ messageId: 'cannotBeUsed'
+ })
+ }
+ })
+ )
+ }
+}
diff --git a/lib/rules/no-confusing-v-for-v-if.js b/lib/rules/no-confusing-v-for-v-if.js
deleted file mode 100644
index 1336b6f5e..000000000
--- a/lib/rules/no-confusing-v-for-v-if.js
+++ /dev/null
@@ -1,66 +0,0 @@
-/**
- * @author Toru Nagashima
- * @copyright 2017 Toru Nagashima. All rights reserved.
- * See LICENSE file in root directory for full license.
- */
-'use strict'
-
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const utils = require('../utils')
-
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
-/**
- * Check whether the given `v-if` node is using the variable which is defined by the `v-for` directive.
- * @param {ASTNode} vIf The `v-if` attribute node to check.
- * @returns {boolean} `true` if the `v-if` is using the variable which is defined by the `v-for` directive.
- */
-function isUsingIterationVar (vIf) {
- const element = vIf.parent.parent
- return vIf.value.references.some(reference =>
- element.variables.some(variable =>
- variable.id.name === reference.id.name &&
- variable.kind === 'v-for'
- )
- )
-}
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
-module.exports = {
- meta: {
- type: 'suggestion',
- docs: {
- description: 'disallow confusing `v-for` and `v-if` on the same element',
- category: 'recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/no-confusing-v-for-v-if.md',
- replacedBy: ['no-use-v-if-with-v-for']
- },
- deprecated: true,
- fixable: null,
- schema: []
- },
-
- create (context) {
- return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='if']" (node) {
- const element = node.parent.parent
-
- if (utils.hasDirective(element, 'for') && !isUsingIterationVar(node)) {
- context.report({
- node,
- loc: node.loc,
- message: "This 'v-if' should be moved to the wrapper element."
- })
- }
- }
- })
- }
-}
diff --git a/lib/rules/no-console.js b/lib/rules/no-console.js
new file mode 100644
index 000000000..caabebc4d
--- /dev/null
+++ b/lib/rules/no-console.js
@@ -0,0 +1,45 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = utils.wrapCoreRule('no-console', {
+ skipBaseHandlers: true,
+ create(context) {
+ const options = context.options[0] || {}
+ const allowed = options.allow || []
+
+ /**
+ * Copied from the core rule `no-console`.
+ * Checks whether the property name of the given MemberExpression node
+ * is allowed by options or not.
+ * @param {MemberExpression} node The MemberExpression node to check.
+ * @returns {boolean} `true` if the property name of the node is allowed.
+ */
+ function isAllowed(node) {
+ const propertyName = utils.getStaticPropertyName(node)
+
+ return propertyName && allowed.includes(propertyName)
+ }
+
+ return {
+ MemberExpression(node) {
+ if (
+ node.object.type === 'Identifier' &&
+ node.object.name === 'console' &&
+ !isAllowed(node)
+ ) {
+ context.report({
+ node: node.object,
+ loc: node.object.loc,
+ messageId: 'unexpected'
+ })
+ }
+ }
+ }
+ }
+})
diff --git a/lib/rules/no-constant-condition.js b/lib/rules/no-constant-condition.js
new file mode 100644
index 000000000..fc7e83946
--- /dev/null
+++ b/lib/rules/no-constant-condition.js
@@ -0,0 +1,29 @@
+/**
+ * @author Flo Edelmann
+ */
+'use strict'
+
+const { wrapCoreRule } = require('../utils')
+
+const conditionalDirectiveNames = new Set(['v-show', 'v-if', 'v-else-if'])
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapCoreRule('no-constant-condition', {
+ create(_context, { baseHandlers }) {
+ return {
+ VDirectiveKey(node) {
+ if (
+ conditionalDirectiveNames.has(`v-${node.name.name}`) &&
+ node.parent.value &&
+ node.parent.value.expression &&
+ baseHandlers.IfStatement
+ ) {
+ baseHandlers.IfStatement({
+ // @ts-expect-error -- Process expression of VExpressionContainer as IfStatement.
+ test: node.parent.value.expression
+ })
+ }
+ }
+ }
+ }
+})
diff --git a/lib/rules/no-custom-modifiers-on-v-model.js b/lib/rules/no-custom-modifiers-on-v-model.js
new file mode 100644
index 000000000..cef3dfaef
--- /dev/null
+++ b/lib/rules/no-custom-modifiers-on-v-model.js
@@ -0,0 +1,47 @@
+/**
+ * @author Przemyslaw Falowski (@przemkow)
+ * @fileoverview This rule checks whether v-model used on the component do not have custom modifiers
+ */
+'use strict'
+
+const utils = require('../utils')
+
+const VALID_MODIFIERS = new Set(['lazy', 'number', 'trim'])
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'disallow custom modifiers on v-model used on the component',
+ categories: ['vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-custom-modifiers-on-v-model.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ notSupportedModifier:
+ "'v-model' directives don't support the modifier '{{name}}'."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(context, {
+ "VAttribute[directive=true][key.name.name='model']"(node) {
+ const element = node.parent.parent
+
+ if (utils.isCustomComponent(element)) {
+ for (const modifier of node.key.modifiers) {
+ if (!VALID_MODIFIERS.has(modifier.name)) {
+ context.report({
+ node,
+ loc: node.loc,
+ messageId: 'notSupportedModifier',
+ data: { name: modifier.name }
+ })
+ }
+ }
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-data-object-declaration.js b/lib/rules/no-deprecated-data-object-declaration.js
new file mode 100644
index 000000000..1a9f846c5
--- /dev/null
+++ b/lib/rules/no-deprecated-data-object-declaration.js
@@ -0,0 +1,86 @@
+/**
+ * @fileoverview disallow using deprecated object declaration on data
+ * @author yoyo930021
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/** @param {Token} token */
+function isOpenParen(token) {
+ return token.type === 'Punctuator' && token.value === '('
+}
+
+/** @param {Token} token */
+function isCloseParen(token) {
+ return token.type === 'Punctuator' && token.value === ')'
+}
+
+/**
+ * @param {Expression} node
+ * @param {SourceCode} sourceCode
+ */
+function getFirstAndLastTokens(node, sourceCode) {
+ let first = sourceCode.getFirstToken(node)
+ let last = sourceCode.getLastToken(node)
+
+ // If the value enclosed by parentheses, update the 'first' and 'last' by the parentheses.
+ while (true) {
+ const prev = sourceCode.getTokenBefore(first)
+ const next = sourceCode.getTokenAfter(last)
+ if (isOpenParen(prev) && isCloseParen(next)) {
+ first = prev
+ last = next
+ } else {
+ return { first, last }
+ }
+ }
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated object declaration on data (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-data-object-declaration.html'
+ },
+ fixable: 'code',
+ schema: [],
+ messages: {
+ objectDeclarationIsDeprecated:
+ "Object declaration on 'data' property is deprecated. Using function declaration instead."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const sourceCode = context.getSourceCode()
+
+ return utils.executeOnVue(context, (obj) => {
+ const invalidData = utils.findProperty(
+ obj,
+ 'data',
+ (p) =>
+ p.value.type !== 'FunctionExpression' &&
+ p.value.type !== 'ArrowFunctionExpression' &&
+ p.value.type !== 'Identifier'
+ )
+
+ if (invalidData) {
+ context.report({
+ node: invalidData,
+ messageId: 'objectDeclarationIsDeprecated',
+ fix(fixer) {
+ const tokens = getFirstAndLastTokens(invalidData.value, sourceCode)
+
+ return [
+ fixer.insertTextBefore(tokens.first, 'function() {\nreturn '),
+ fixer.insertTextAfter(tokens.last, ';\n}')
+ ]
+ }
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-delete-set.js b/lib/rules/no-deprecated-delete-set.js
new file mode 100644
index 000000000..699c928e1
--- /dev/null
+++ b/lib/rules/no-deprecated-delete-set.js
@@ -0,0 +1,132 @@
+/**
+ * @author Wayne Zhang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const { ReferenceTracker } = require('@eslint-community/eslint-utils')
+
+/**
+ * @typedef {import('@eslint-community/eslint-utils').TYPES.TraceMap} TraceMap
+ */
+
+/** @type {TraceMap} */
+const deletedImportApisMap = {
+ set: {
+ [ReferenceTracker.CALL]: true
+ },
+ del: {
+ [ReferenceTracker.CALL]: true
+ }
+}
+const deprecatedApis = new Set(['set', 'delete'])
+const deprecatedDollarApis = new Set(['$set', '$delete'])
+
+/**
+ * @param {Expression|Super} node
+ */
+function isVue(node) {
+ return node.type === 'Identifier' && node.name === 'Vue'
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-delete-set.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ deprecated: 'The `$delete`, `$set` is deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /**
+ * @param {Identifier} identifier
+ * @param {RuleContext} context
+ * @returns {CallExpression|undefined}
+ */
+ function getVueDeprecatedCallExpression(identifier, context) {
+ // Instance API: this.$set()
+ if (
+ deprecatedDollarApis.has(identifier.name) &&
+ identifier.parent.type === 'MemberExpression' &&
+ utils.isThis(identifier.parent.object, context) &&
+ identifier.parent.parent.type === 'CallExpression' &&
+ identifier.parent.parent.callee === identifier.parent
+ ) {
+ return identifier.parent.parent
+ }
+
+ // Vue 2 Global API: Vue.set()
+ if (
+ deprecatedApis.has(identifier.name) &&
+ identifier.parent.type === 'MemberExpression' &&
+ isVue(identifier.parent.object) &&
+ identifier.parent.parent.type === 'CallExpression' &&
+ identifier.parent.parent.callee === identifier.parent
+ ) {
+ return identifier.parent.parent
+ }
+
+ return undefined
+ }
+
+ const nodeVisitor = {
+ /** @param {Identifier} node */
+ Identifier(node) {
+ const callExpression = getVueDeprecatedCallExpression(node, context)
+ if (!callExpression) {
+ return
+ }
+
+ context.report({
+ node,
+ messageId: 'deprecated'
+ })
+ }
+ }
+
+ return utils.compositingVisitors(
+ utils.defineVueVisitor(context, nodeVisitor),
+ utils.defineScriptSetupVisitor(context, nodeVisitor),
+ {
+ /** @param {Program} node */
+ Program(node) {
+ const tracker = new ReferenceTracker(utils.getScope(context, node))
+
+ // import { set } from 'vue'; set()
+ const esmTraceMap = {
+ vue: {
+ [ReferenceTracker.ESM]: true,
+ ...deletedImportApisMap
+ }
+ }
+ // const { set } = require('vue'); set()
+ const cjsTraceMap = {
+ vue: {
+ ...deletedImportApisMap
+ }
+ }
+
+ for (const { node } of [
+ ...tracker.iterateEsmReferences(esmTraceMap),
+ ...tracker.iterateCjsReferences(cjsTraceMap)
+ ]) {
+ const refNode = /** @type {CallExpression} */ (node)
+ context.report({
+ node: refNode.callee,
+ messageId: 'deprecated'
+ })
+ }
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/no-deprecated-destroyed-lifecycle.js b/lib/rules/no-deprecated-destroyed-lifecycle.js
new file mode 100644
index 000000000..98986cd2e
--- /dev/null
+++ b/lib/rules/no-deprecated-destroyed-lifecycle.js
@@ -0,0 +1,78 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @param {RuleFixer} fixer
+ * @param {Property} property
+ * @param {string} newName
+ */
+function fix(fixer, property, newName) {
+ if (property.computed) {
+ if (
+ property.key.type === 'Literal' ||
+ property.key.type === 'TemplateLiteral'
+ ) {
+ return fixer.replaceTextRange(
+ [property.key.range[0] + 1, property.key.range[1] - 1],
+ newName
+ )
+ }
+ return null
+ }
+ if (property.shorthand) {
+ return fixer.insertTextBefore(property.key, `${newName}:`)
+ }
+ return fixer.replaceText(property.key, newName)
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-destroyed-lifecycle.html'
+ },
+ fixable: 'code',
+ schema: [],
+ messages: {
+ deprecatedDestroyed:
+ 'The `destroyed` lifecycle hook is deprecated. Use `unmounted` instead.',
+ deprecatedBeforeDestroy:
+ 'The `beforeDestroy` lifecycle hook is deprecated. Use `beforeUnmount` instead.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.executeOnVue(context, (obj) => {
+ const destroyed = utils.findProperty(obj, 'destroyed')
+
+ if (destroyed) {
+ context.report({
+ node: destroyed.key,
+ messageId: 'deprecatedDestroyed',
+ fix(fixer) {
+ return fix(fixer, destroyed, 'unmounted')
+ }
+ })
+ }
+
+ const beforeDestroy = utils.findProperty(obj, 'beforeDestroy')
+ if (beforeDestroy) {
+ context.report({
+ node: beforeDestroy.key,
+ messageId: 'deprecatedBeforeDestroy',
+ fix(fixer) {
+ return fix(fixer, beforeDestroy, 'beforeUnmount')
+ }
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-dollar-listeners-api.js b/lib/rules/no-deprecated-dollar-listeners-api.js
new file mode 100644
index 000000000..2db80a116
--- /dev/null
+++ b/lib/rules/no-deprecated-dollar-listeners-api.js
@@ -0,0 +1,63 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'disallow using deprecated `$listeners` (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-dollar-listeners-api.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ deprecated: 'The `$listeners` is deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(
+ context,
+ {
+ VExpressionContainer(node) {
+ for (const reference of node.references) {
+ if (reference.variable != null) {
+ // Not vm reference
+ continue
+ }
+ if (reference.id.name === '$listeners') {
+ context.report({
+ node: reference.id,
+ messageId: 'deprecated'
+ })
+ }
+ }
+ }
+ },
+ utils.defineVueVisitor(context, {
+ MemberExpression(node) {
+ if (
+ node.property.type !== 'Identifier' ||
+ node.property.name !== '$listeners'
+ ) {
+ return
+ }
+ if (!utils.isThis(node.object, context)) {
+ return
+ }
+
+ context.report({
+ node: node.property,
+ messageId: 'deprecated'
+ })
+ }
+ })
+ )
+ }
+}
diff --git a/lib/rules/no-deprecated-dollar-scopedslots-api.js b/lib/rules/no-deprecated-dollar-scopedslots-api.js
new file mode 100644
index 000000000..cca25942c
--- /dev/null
+++ b/lib/rules/no-deprecated-dollar-scopedslots-api.js
@@ -0,0 +1,70 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-dollar-scopedslots-api.html'
+ },
+ fixable: 'code',
+ schema: [],
+ messages: {
+ deprecated: 'The `$scopedSlots` is deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(
+ context,
+ {
+ VExpressionContainer(node) {
+ for (const reference of node.references) {
+ if (reference.variable != null) {
+ // Not vm reference
+ continue
+ }
+ if (reference.id.name === '$scopedSlots') {
+ context.report({
+ node: reference.id,
+ messageId: 'deprecated',
+ fix(fixer) {
+ return fixer.replaceText(reference.id, '$slots')
+ }
+ })
+ }
+ }
+ }
+ },
+ utils.defineVueVisitor(context, {
+ MemberExpression(node) {
+ if (
+ node.property.type !== 'Identifier' ||
+ node.property.name !== '$scopedSlots'
+ ) {
+ return
+ }
+ if (!utils.isThis(node.object, context)) {
+ return
+ }
+
+ context.report({
+ node: node.property,
+ messageId: 'deprecated',
+ fix(fixer) {
+ return fixer.replaceText(node.property, '$slots')
+ }
+ })
+ }
+ })
+ )
+ }
+}
diff --git a/lib/rules/no-deprecated-events-api.js b/lib/rules/no-deprecated-events-api.js
new file mode 100644
index 000000000..fa602f335
--- /dev/null
+++ b/lib/rules/no-deprecated-events-api.js
@@ -0,0 +1,61 @@
+/**
+ * @fileoverview disallow using deprecated events api
+ * @author yoyo930021
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'disallow using deprecated events api (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-events-api.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ noDeprecatedEventsApi:
+ 'The Events api `$on`, `$off` `$once` is deprecated. Using external library instead, for example mitt.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineVueVisitor(context, {
+ /** @param {MemberExpression & ({parent: CallExpression} | {parent: ChainExpression & {parent: CallExpression}})} node */
+ 'CallExpression > MemberExpression, CallExpression > ChainExpression > MemberExpression'(
+ node
+ ) {
+ const call =
+ node.parent.type === 'ChainExpression'
+ ? node.parent.parent
+ : node.parent
+
+ if (call.optional) {
+ // It is OK because checking whether it is deprecated.
+ // e.g. `this.$on?.()`
+ return
+ }
+
+ if (
+ utils.skipChainExpression(call.callee) !== node ||
+ !['$on', '$off', '$once'].includes(
+ utils.getStaticPropertyName(node) || ''
+ )
+ ) {
+ return
+ }
+ if (!utils.isThis(node.object, context)) {
+ return
+ }
+
+ context.report({
+ node: node.property,
+ messageId: 'noDeprecatedEventsApi'
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-filter.js b/lib/rules/no-deprecated-filter.js
new file mode 100644
index 000000000..5e7967385
--- /dev/null
+++ b/lib/rules/no-deprecated-filter.js
@@ -0,0 +1,36 @@
+/**
+ * @author Przemyslaw Falowski (@przemkow)
+ * @fileoverview disallow using deprecated filters syntax
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated filters syntax (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-filter.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ noDeprecatedFilter: 'Filters are deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(context, {
+ VFilterSequenceExpression(node) {
+ context.report({
+ node,
+ loc: node.loc,
+ messageId: 'noDeprecatedFilter'
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-functional-template.js b/lib/rules/no-deprecated-functional-template.js
new file mode 100644
index 000000000..5b3b9dea1
--- /dev/null
+++ b/lib/rules/no-deprecated-functional-template.js
@@ -0,0 +1,47 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated the `functional` template (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-functional-template.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ unexpected: 'The `functional` template are deprecated.'
+ }
+ },
+ /**
+ * @param {RuleContext} context - The rule context.
+ * @returns {RuleListener} AST event handlers.
+ */
+ create(context) {
+ return {
+ Program(program) {
+ const element = program.templateBody
+ if (element == null) {
+ return
+ }
+
+ const functional = utils.getAttribute(element, 'functional')
+
+ if (functional) {
+ context.report({
+ node: functional,
+ messageId: 'unexpected'
+ })
+ }
+ }
+ }
+ }
+}
diff --git a/lib/rules/no-deprecated-html-element-is.js b/lib/rules/no-deprecated-html-element-is.js
new file mode 100644
index 000000000..5253ef2b7
--- /dev/null
+++ b/lib/rules/no-deprecated-html-element-is.js
@@ -0,0 +1,65 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-html-element-is.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ unexpected: 'The `is` attribute on HTML element are deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /** @param {VElement} node */
+ function isValidElement(node) {
+ return (
+ !utils.isHtmlWellKnownElementName(node.rawName) &&
+ !utils.isSvgWellKnownElementName(node.rawName) &&
+ !utils.isMathWellKnownElementName(node.rawName)
+ )
+ }
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='bind'][key.argument.name='is']"(
+ node
+ ) {
+ if (isValidElement(node.parent.parent)) {
+ return
+ }
+ context.report({
+ node,
+ loc: node.loc,
+ messageId: 'unexpected'
+ })
+ },
+ /** @param {VAttribute} node */
+ "VAttribute[directive=false][key.name='is']"(node) {
+ if (isValidElement(node.parent.parent)) {
+ return
+ }
+ if (node.value && node.value.value.startsWith('vue:')) {
+ // Usage on native elements 3.1+
+ return
+ }
+ context.report({
+ node,
+ loc: node.loc,
+ messageId: 'unexpected'
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-inline-template.js b/lib/rules/no-deprecated-inline-template.js
new file mode 100644
index 000000000..36923f2c2
--- /dev/null
+++ b/lib/rules/no-deprecated-inline-template.js
@@ -0,0 +1,39 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-inline-template.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ unexpected: '`inline-template` are deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VIdentifier} node */
+ "VAttribute[directive=false] > VIdentifier[rawName='inline-template']"(
+ node
+ ) {
+ context.report({
+ node,
+ loc: node.loc,
+ messageId: 'unexpected'
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-model-definition.js b/lib/rules/no-deprecated-model-definition.js
new file mode 100644
index 000000000..6c7e4dd8d
--- /dev/null
+++ b/lib/rules/no-deprecated-model-definition.js
@@ -0,0 +1,133 @@
+/**
+ * @author Flo Edelmann
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+const allowedPropNames = new Set(['modelValue', 'model-value'])
+const allowedEventNames = new Set(['update:modelValue', 'update:model-value'])
+
+/**
+ * @param {ObjectExpression} node
+ * @param {string} key
+ * @returns {Literal | TemplateLiteral | undefined}
+ */
+function findPropertyValue(node, key) {
+ const property = node.properties.find(
+ (property) =>
+ property.type === 'Property' &&
+ property.key.type === 'Identifier' &&
+ property.key.name === key
+ )
+ if (
+ !property ||
+ property.type !== 'Property' ||
+ !utils.isStringLiteral(property.value)
+ ) {
+ return undefined
+ }
+ return property.value
+}
+
+/**
+ * @param {RuleFixer} fixer
+ * @param {Literal | TemplateLiteral} node
+ * @param {string} text
+ */
+function replaceLiteral(fixer, node, text) {
+ return fixer.replaceTextRange([node.range[0] + 1, node.range[1] - 1], text)
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'disallow deprecated `model` definition (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-model-definition.html'
+ },
+ fixable: null,
+ hasSuggestions: true,
+ schema: [
+ {
+ type: 'object',
+ additionalProperties: false,
+ properties: {
+ allowVue3Compat: {
+ type: 'boolean'
+ }
+ }
+ }
+ ],
+ messages: {
+ deprecatedModel: '`model` definition is deprecated.',
+ vue3Compat:
+ '`model` definition is deprecated. You may use the Vue 3-compatible `modelValue`/`update:modelValue` though.',
+ changeToModelValue: 'Change to `modelValue`/`update:modelValue`.',
+ changeToKebabModelValue: 'Change to `model-value`/`update:model-value`.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const allowVue3Compat = Boolean(context.options[0]?.allowVue3Compat)
+
+ return utils.executeOnVue(context, (obj) => {
+ const modelProperty = utils.findProperty(obj, 'model')
+ if (!modelProperty || modelProperty.value.type !== 'ObjectExpression') {
+ return
+ }
+
+ if (!allowVue3Compat) {
+ context.report({
+ node: modelProperty,
+ messageId: 'deprecatedModel'
+ })
+ return
+ }
+
+ const propName = findPropertyValue(modelProperty.value, 'prop')
+ const eventName = findPropertyValue(modelProperty.value, 'event')
+
+ if (
+ !propName ||
+ !eventName ||
+ !allowedPropNames.has(
+ utils.getStringLiteralValue(propName, true) ?? ''
+ ) ||
+ !allowedEventNames.has(
+ utils.getStringLiteralValue(eventName, true) ?? ''
+ )
+ ) {
+ context.report({
+ node: modelProperty,
+ messageId: 'vue3Compat',
+ suggest:
+ propName && eventName
+ ? [
+ {
+ messageId: 'changeToModelValue',
+ *fix(fixer) {
+ const newPropName = 'modelValue'
+ const newEventName = 'update:modelValue'
+ yield replaceLiteral(fixer, propName, newPropName)
+ yield replaceLiteral(fixer, eventName, newEventName)
+ }
+ },
+ {
+ messageId: 'changeToKebabModelValue',
+ *fix(fixer) {
+ const newPropName = 'model-value'
+ const newEventName = 'update:model-value'
+ yield replaceLiteral(fixer, propName, newPropName)
+ yield replaceLiteral(fixer, eventName, newEventName)
+ }
+ }
+ ]
+ : []
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-props-default-this.js b/lib/rules/no-deprecated-props-default-this.js
new file mode 100644
index 000000000..5583b12ad
--- /dev/null
+++ b/lib/rules/no-deprecated-props-default-this.js
@@ -0,0 +1,126 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @param {Expression|SpreadElement|null} node
+ */
+function isFunctionIdentifier(node) {
+ return node && node.type === 'Identifier' && node.name === 'Function'
+}
+
+/**
+ * @param {Expression} node
+ * @returns {boolean}
+ */
+function hasFunctionType(node) {
+ if (isFunctionIdentifier(node)) {
+ return true
+ }
+ if (node.type === 'ArrayExpression') {
+ return node.elements.some(isFunctionIdentifier)
+ }
+ return false
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow deprecated `this` access in props default function (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-props-default-this.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ deprecated:
+ 'Props default value factory functions no longer have access to `this`.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /**
+ * @typedef {object} ScopeStack
+ * @property {ScopeStack | null} upper
+ * @property {FunctionExpression | FunctionDeclaration} node
+ * @property {boolean} propDefault
+ */
+ /** @type {Set} */
+ const propsDefault = new Set()
+ /** @type {ScopeStack | null} */
+ let scopeStack = null
+
+ /**
+ * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression} node
+ */
+ function onFunctionEnter(node) {
+ if (node.type === 'ArrowFunctionExpression') {
+ return
+ }
+ if (scopeStack) {
+ scopeStack = {
+ upper: scopeStack,
+ node,
+ propDefault: false
+ }
+ } else if (node.type === 'FunctionExpression' && propsDefault.has(node)) {
+ scopeStack = {
+ upper: scopeStack,
+ node,
+ propDefault: true
+ }
+ }
+ }
+
+ /**
+ * @param {FunctionExpression | FunctionDeclaration | ArrowFunctionExpression} node
+ */
+ function onFunctionExit(node) {
+ if (scopeStack && scopeStack.node === node) {
+ scopeStack = scopeStack.upper
+ }
+ }
+
+ return utils.defineVueVisitor(context, {
+ onVueObjectEnter(node) {
+ for (const prop of utils.getComponentPropsFromOptions(node)) {
+ if (prop.type !== 'object') {
+ continue
+ }
+ if (prop.value.type !== 'ObjectExpression') {
+ continue
+ }
+ const def = utils.findProperty(prop.value, 'default')
+ if (!def) {
+ continue
+ }
+ const type = utils.findProperty(prop.value, 'type')
+ if (type && hasFunctionType(type.value)) {
+ // ignore function type
+ continue
+ }
+ if (def.value.type !== 'FunctionExpression') {
+ continue
+ }
+ propsDefault.add(def.value)
+ }
+ },
+ ':function': onFunctionEnter,
+ ':function:exit': onFunctionExit,
+ ThisExpression(node) {
+ if (scopeStack && scopeStack.propDefault) {
+ context.report({
+ node,
+ messageId: 'deprecated'
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-router-link-tag-prop.js b/lib/rules/no-deprecated-router-link-tag-prop.js
new file mode 100644
index 000000000..e2853f2af
--- /dev/null
+++ b/lib/rules/no-deprecated-router-link-tag-prop.js
@@ -0,0 +1,93 @@
+/**
+ * @author Marton Csordas
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+/** @param {RuleContext} context */
+function getComponentNames(context) {
+ let components = ['RouterLink']
+
+ if (context.options[0] && context.options[0].components) {
+ components = context.options[0].components
+ }
+
+ return new Set(
+ components.flatMap((component) => [
+ casing.kebabCase(component),
+ casing.pascalCase(component)
+ ])
+ )
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-router-link-tag-prop.html'
+ },
+ fixable: null,
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ components: {
+ type: 'array',
+ items: {
+ type: 'string'
+ },
+ uniqueItems: true,
+ minItems: 1
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ deprecated:
+ "'tag' property on '{{element}}' component is deprecated. Use scoped slots instead."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const components = getComponentNames(context)
+
+ return utils.defineTemplateBodyVisitor(context, {
+ VElement(node) {
+ if (!components.has(node.rawName)) return
+
+ /** @type VIdentifier | null */
+ let tagKey = null
+
+ const tagAttr = utils.getAttribute(node, 'tag')
+ if (tagAttr) {
+ tagKey = tagAttr.key
+ } else {
+ const directive = utils.getDirective(node, 'bind', 'tag')
+ if (directive) {
+ const arg = directive.key.argument
+ if (arg && arg.type === 'VIdentifier') {
+ tagKey = arg
+ }
+ }
+ }
+
+ if (tagKey) {
+ context.report({
+ node: tagKey,
+ messageId: 'deprecated',
+ data: {
+ element: node.rawName
+ }
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-scope-attribute.js b/lib/rules/no-deprecated-scope-attribute.js
new file mode 100644
index 000000000..80bcc02bd
--- /dev/null
+++ b/lib/rules/no-deprecated-scope-attribute.js
@@ -0,0 +1,31 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const scopeAttribute = require('./syntaxes/scope-attribute')
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'disallow deprecated `scope` attribute (in Vue.js 2.5.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-scope-attribute.html'
+ },
+ // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
+ fixable: 'code',
+ schema: [],
+ messages: {
+ forbiddenScopeAttribute: '`scope` attributes are deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const templateBodyVisitor =
+ scopeAttribute.createTemplateBodyVisitor(context)
+ return utils.defineTemplateBodyVisitor(context, templateBodyVisitor)
+ }
+}
diff --git a/lib/rules/no-deprecated-slot-attribute.js b/lib/rules/no-deprecated-slot-attribute.js
new file mode 100644
index 000000000..664c14353
--- /dev/null
+++ b/lib/rules/no-deprecated-slot-attribute.js
@@ -0,0 +1,42 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const slotAttribute = require('./syntaxes/slot-attribute')
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'disallow deprecated `slot` attribute (in Vue.js 2.6.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-slot-attribute.html'
+ },
+ // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
+ fixable: 'code',
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ ignore: {
+ type: 'array',
+ items: { type: 'string' },
+ uniqueItems: true
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ forbiddenSlotAttribute: '`slot` attributes are deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const templateBodyVisitor = slotAttribute.createTemplateBodyVisitor(context)
+ return utils.defineTemplateBodyVisitor(context, templateBodyVisitor)
+ }
+}
diff --git a/lib/rules/no-deprecated-slot-scope-attribute.js b/lib/rules/no-deprecated-slot-scope-attribute.js
new file mode 100644
index 000000000..20a4f00bd
--- /dev/null
+++ b/lib/rules/no-deprecated-slot-scope-attribute.js
@@ -0,0 +1,34 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const slotScopeAttribute = require('./syntaxes/slot-scope-attribute')
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description:
+ 'disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-slot-scope-attribute.html'
+ },
+ // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
+ fixable: 'code',
+ schema: [],
+ messages: {
+ forbiddenSlotScopeAttribute: '`slot-scope` are deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const templateBodyVisitor = slotScopeAttribute.createTemplateBodyVisitor(
+ context,
+ { fixToUpgrade: true }
+ )
+ return utils.defineTemplateBodyVisitor(context, templateBodyVisitor)
+ }
+}
diff --git a/lib/rules/no-deprecated-v-bind-sync.js b/lib/rules/no-deprecated-v-bind-sync.js
new file mode 100644
index 000000000..f52c1aead
--- /dev/null
+++ b/lib/rules/no-deprecated-v-bind-sync.js
@@ -0,0 +1,54 @@
+/**
+ * @author Przemyslaw Falowski (@przemkow)
+ * @fileoverview Disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-v-bind-sync.html'
+ },
+ fixable: 'code',
+ schema: [],
+ messages: {
+ syncModifierIsDeprecated:
+ "'.sync' modifier on 'v-bind' directive is deprecated. Use 'v-model:propName' instead."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(context, {
+ "VAttribute[directive=true][key.name.name='bind']"(node) {
+ if (node.key.modifiers.map((mod) => mod.name).includes('sync')) {
+ context.report({
+ node,
+ loc: node.loc,
+ messageId: 'syncModifierIsDeprecated',
+ fix(fixer) {
+ if (node.key.argument == null) {
+ // is using spread syntax
+ return null
+ }
+ if (node.key.modifiers.length > 1) {
+ // has multiple modifiers
+ return null
+ }
+
+ const bindArgument = context
+ .getSourceCode()
+ .getText(node.key.argument)
+ return fixer.replaceText(node.key, `v-model:${bindArgument}`)
+ }
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-v-is.js b/lib/rules/no-deprecated-v-is.js
new file mode 100644
index 000000000..c497b0120
--- /dev/null
+++ b/lib/rules/no-deprecated-v-is.js
@@ -0,0 +1,29 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const vIs = require('./syntaxes/v-is')
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'disallow deprecated `v-is` directive (in Vue.js 3.1.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-v-is.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ forbiddenVIs: '`v-is` directive is deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const templateBodyVisitor = vIs.createTemplateBodyVisitor(context)
+ return utils.defineTemplateBodyVisitor(context, templateBodyVisitor)
+ }
+}
diff --git a/lib/rules/no-deprecated-v-on-native-modifier.js b/lib/rules/no-deprecated-v-on-native-modifier.js
new file mode 100644
index 000000000..929f8d1d8
--- /dev/null
+++ b/lib/rules/no-deprecated-v-on-native-modifier.js
@@ -0,0 +1,41 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-v-on-native-modifier.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ deprecated: "'.native' modifier on 'v-on' directive is deprecated."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VIdentifier & {parent:VDirectiveKey} } node */
+ "VAttribute[directive=true][key.name.name='on'] > VDirectiveKey > VIdentifier[name='native']"(
+ node
+ ) {
+ const key = node.parent
+ if (!key.modifiers.includes(node)) return
+
+ context.report({
+ node,
+ messageId: 'deprecated'
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-v-on-number-modifiers.js b/lib/rules/no-deprecated-v-on-number-modifiers.js
new file mode 100644
index 000000000..1fdcdeaac
--- /dev/null
+++ b/lib/rules/no-deprecated-v-on-number-modifiers.js
@@ -0,0 +1,52 @@
+/**
+ * @fileoverview disallow using deprecated number (keycode) modifiers
+ * @author yoyo930021
+ */
+'use strict'
+
+const utils = require('../utils')
+const keyCodeToKey = require('../utils/keycode-to-key')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-v-on-number-modifiers.html'
+ },
+ fixable: 'code',
+ schema: [],
+ messages: {
+ numberModifierIsDeprecated:
+ "'KeyboardEvent.keyCode' modifier on 'v-on' directive is deprecated. Using 'KeyboardEvent.key' instead."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VDirectiveKey} node */
+ "VAttribute[directive=true][key.name.name='on'] > VDirectiveKey"(node) {
+ const modifier = node.modifiers.find((mod) =>
+ Number.isInteger(Number.parseInt(mod.name, 10))
+ )
+ if (!modifier) return
+
+ const keyCodes = Number.parseInt(modifier.name, 10)
+ if (keyCodes > 9 || keyCodes < 0) {
+ context.report({
+ node: modifier,
+ messageId: 'numberModifierIsDeprecated',
+ fix(fixer) {
+ const key = keyCodeToKey[keyCodes]
+ if (!key) return null
+
+ return fixer.replaceText(modifier, `${key}`)
+ }
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-deprecated-vue-config-keycodes.js b/lib/rules/no-deprecated-vue-config-keycodes.js
new file mode 100644
index 000000000..68af8430a
--- /dev/null
+++ b/lib/rules/no-deprecated-vue-config-keycodes.js
@@ -0,0 +1,48 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-deprecated-vue-config-keycodes.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ unexpected: '`Vue.config.keyCodes` are deprecated.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return {
+ /** @param {MemberExpression} node */
+ "MemberExpression[property.type='Identifier'][property.name='keyCodes']"(
+ node
+ ) {
+ const config = utils.skipChainExpression(node.object)
+ if (
+ config.type !== 'MemberExpression' ||
+ config.property.type !== 'Identifier' ||
+ config.property.name !== 'config' ||
+ config.object.type !== 'Identifier' ||
+ config.object.name !== 'Vue'
+ ) {
+ return
+ }
+ context.report({
+ node,
+ messageId: 'unexpected'
+ })
+ }
+ }
+ }
+}
diff --git a/lib/rules/no-dupe-keys.js b/lib/rules/no-dupe-keys.js
index fa3bae6f1..ecfa787cf 100644
--- a/lib/rules/no-dupe-keys.js
+++ b/lib/rules/no-dupe-keys.js
@@ -4,23 +4,96 @@
*/
'use strict'
+const { findVariable } = require('@eslint-community/eslint-utils')
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * @typedef {import('../utils').GroupName} GroupName
+ * @typedef {import('eslint').Scope.Variable} Variable
+ * @typedef {import('../utils').ComponentProp} ComponentProp
+ */
+
+/** @type {GroupName[]} */
+const GROUP_NAMES = ['props', 'computed', 'data', 'methods', 'setup']
-const GROUP_NAMES = ['props', 'computed', 'data', 'methods']
+/**
+ * Gets the props pattern node from given `defineProps()` node
+ * @param {CallExpression} node
+ * @returns {Pattern|null}
+ */
+function getPropsPattern(node) {
+ let target = node
+ if (
+ target.parent &&
+ target.parent.type === 'CallExpression' &&
+ target.parent.arguments[0] === target &&
+ target.parent.callee.type === 'Identifier' &&
+ target.parent.callee.name === 'withDefaults'
+ ) {
+ target = target.parent
+ }
+
+ if (
+ !target.parent ||
+ target.parent.type !== 'VariableDeclarator' ||
+ target.parent.init !== target
+ ) {
+ return null
+ }
+ return target.parent.id
+}
+
+/**
+ * Checks whether the initialization of the given variable declarator node contains one of the references.
+ * @param {VariableDeclarator} node
+ * @param {ESNode[]} references
+ */
+function isInsideInitializer(node, references) {
+ const init = node.init
+ if (!init) {
+ return false
+ }
+ return references.some(
+ (id) => init.range[0] <= id.range[0] && id.range[1] <= init.range[1]
+ )
+}
+
+/**
+ * Collects all renamed props from a pattern
+ * @param {Pattern | null} pattern - The destructuring pattern
+ * @returns {Set} - Set of prop names that have been renamed
+ */
+function collectRenamedProps(pattern) {
+ const renamedProps = new Set()
+
+ if (!pattern || pattern.type !== 'ObjectPattern') {
+ return renamedProps
+ }
+
+ for (const prop of pattern.properties) {
+ if (prop.type !== 'Property') continue
+
+ if (
+ prop.key.type === 'Identifier' &&
+ prop.value.type === 'Identifier' &&
+ prop.key.name !== prop.value.name
+ ) {
+ renamedProps.add(prop.key.name)
+ }
+ }
+
+ return renamedProps
+}
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'disallow duplication of field names',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/no-dupe-keys.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-dupe-keys.html'
},
- fixable: null, // or "code" or "whitespace"
+ fixable: null,
schema: [
{
type: 'object',
@@ -31,34 +104,105 @@ module.exports = {
},
additionalProperties: false
}
- ]
+ ],
+ messages: {
+ duplicateKey:
+ "Duplicate key '{{name}}'. May cause name collision in script or template tag."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const options = context.options[0] || {}
- const groups = new Set(GROUP_NAMES.concat(options.groups || []))
-
- // ----------------------------------------------------------------------
- // Public
- // ----------------------------------------------------------------------
-
- return utils.executeOnVue(context, (obj) => {
- const usedNames = []
- const properties = utils.iterateProperties(obj, groups)
-
- for (const o of properties) {
- if (usedNames.indexOf(o.name) !== -1) {
- context.report({
- node: o.node,
- message: "Duplicated key '{{name}}'.",
- data: {
- name: o.name
+ const groups = new Set([...GROUP_NAMES, ...(options.groups || [])])
+
+ return utils.compositingVisitors(
+ utils.executeOnVue(context, (obj) => {
+ const properties = utils.iterateProperties(obj, groups)
+ /** @type {Set} */
+ const usedNames = new Set()
+ for (const o of properties) {
+ if (usedNames.has(o.name)) {
+ context.report({
+ node: o.node,
+ messageId: 'duplicateKey',
+ data: {
+ name: o.name
+ }
+ })
+ }
+
+ usedNames.add(o.name)
+ }
+ }),
+ utils.defineScriptSetupVisitor(context, {
+ onDefinePropsEnter(node, props) {
+ const propsNode = getPropsPattern(node)
+ const propReferences = [
+ ...(propsNode ? extractReferences(propsNode) : []),
+ node
+ ]
+
+ const renamedProps = collectRenamedProps(propsNode)
+
+ for (const prop of props) {
+ if (!prop.propName) continue
+
+ if (renamedProps.has(prop.propName)) {
+ continue
}
- })
+
+ const variable = findVariable(
+ utils.getScope(context, node),
+ prop.propName
+ )
+ if (!variable || variable.defs.length === 0) continue
+
+ if (
+ variable.defs.some((def) => {
+ if (def.type !== 'Variable') return false
+ return isInsideInitializer(def.node, propReferences)
+ })
+ ) {
+ continue
+ }
+
+ context.report({
+ node: variable.defs[0].node,
+ messageId: 'duplicateKey',
+ data: {
+ name: prop.propName
+ }
+ })
+ }
}
+ })
+ )
- usedNames.push(o.name)
+ /**
+ * Extracts references from the given node.
+ * @param {Pattern} node
+ * @returns {Identifier[]} References
+ */
+ function extractReferences(node) {
+ if (node.type === 'Identifier') {
+ const variable = findVariable(utils.getScope(context, node), node)
+ if (!variable) {
+ return []
+ }
+ return variable.references.map((ref) => ref.identifier)
+ }
+ if (node.type === 'ObjectPattern') {
+ return node.properties.flatMap((prop) =>
+ extractReferences(prop.type === 'Property' ? prop.value : prop)
+ )
+ }
+ if (node.type === 'AssignmentPattern') {
+ return extractReferences(node.left)
+ }
+ if (node.type === 'RestElement') {
+ return extractReferences(node.argument)
}
- })
+ return []
+ }
}
}
diff --git a/lib/rules/no-dupe-v-else-if.js b/lib/rules/no-dupe-v-else-if.js
new file mode 100644
index 000000000..a20d5256b
--- /dev/null
+++ b/lib/rules/no-dupe-v-else-if.js
@@ -0,0 +1,181 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef {NonNullable} VExpression
+ */
+/**
+ * @typedef {object} OrOperands
+ * @property {VExpression} OrOperands.node
+ * @property {AndOperands[]} OrOperands.operands
+ *
+ * @typedef {object} AndOperands
+ * @property {VExpression} AndOperands.node
+ * @property {VExpression[]} AndOperands.operands
+ */
+/**
+ * Splits the given node by the given logical operator.
+ * @param {string} operator Logical operator `||` or `&&`.
+ * @param {VExpression} node The node to split.
+ * @returns {VExpression[]} Array of conditions that makes the node when joined by the operator.
+ */
+function splitByLogicalOperator(operator, node) {
+ if (node.type === 'LogicalExpression' && node.operator === operator) {
+ return [
+ ...splitByLogicalOperator(operator, node.left),
+ ...splitByLogicalOperator(operator, node.right)
+ ]
+ }
+ return [node]
+}
+
+/**
+ * @param {VExpression} node
+ */
+function splitByOr(node) {
+ return splitByLogicalOperator('||', node)
+}
+/**
+ * @param {VExpression} node
+ */
+function splitByAnd(node) {
+ return splitByLogicalOperator('&&', node)
+}
+
+/**
+ * @param {VExpression} node
+ * @returns {OrOperands}
+ */
+function buildOrOperands(node) {
+ const orOperands = splitByOr(node)
+ return {
+ node,
+ operands: orOperands.map((orOperand) => {
+ const andOperands = splitByAnd(orOperand)
+ return {
+ node: orOperand,
+ operands: andOperands
+ }
+ })
+ }
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'disallow duplicate conditions in `v-if` / `v-else-if` chains',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-dupe-v-else-if.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ unexpected:
+ 'This branch can never execute. Its condition is a duplicate or covered by previous conditions in the `v-if` / `v-else-if` chain.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const sourceCode = context.getSourceCode()
+ const tokenStore =
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+ /**
+ * Determines whether the two given nodes are considered to be equal. In particular, given that the nodes
+ * represent expressions in a boolean context, `||` and `&&` can be considered as commutative operators.
+ * @param {VExpression} a First node.
+ * @param {VExpression} b Second node.
+ * @returns {boolean} `true` if the nodes are considered to be equal.
+ */
+ function equal(a, b) {
+ if (a.type !== b.type) {
+ return false
+ }
+
+ if (
+ a.type === 'LogicalExpression' &&
+ b.type === 'LogicalExpression' &&
+ (a.operator === '||' || a.operator === '&&') &&
+ a.operator === b.operator
+ ) {
+ return (
+ (equal(a.left, b.left) && equal(a.right, b.right)) ||
+ (equal(a.left, b.right) && equal(a.right, b.left))
+ )
+ }
+
+ return utils.equalTokens(a, b, tokenStore)
+ }
+
+ /**
+ * Determines whether the first given AndOperands is a subset of the second given AndOperands.
+ *
+ * e.g. A: (a && b), B: (a && b && c): B is a subset of A.
+ *
+ * @param {AndOperands} operandsA The AndOperands to compare from.
+ * @param {AndOperands} operandsB The AndOperands to compare against.
+ * @returns {boolean} `true` if the `andOperandsA` is a subset of the `andOperandsB`.
+ */
+ function isSubset(operandsA, operandsB) {
+ return operandsA.operands.every((operandA) =>
+ operandsB.operands.some((operandB) => equal(operandA, operandB))
+ )
+ }
+
+ return utils.defineTemplateBodyVisitor(context, {
+ "VAttribute[directive=true][key.name.name='else-if']"(node) {
+ if (!node.value || !node.value.expression) {
+ return
+ }
+ const test = node.value.expression
+ const conditionsToCheck =
+ test.type === 'LogicalExpression' && test.operator === '&&'
+ ? [...splitByAnd(test), test]
+ : [test]
+ const listToCheck = conditionsToCheck.map(buildOrOperands)
+
+ /** @type {VElement | null} */
+ let current = node.parent.parent
+ while (current && (current = utils.prevSibling(current))) {
+ const vIf = utils.getDirective(current, 'if')
+ const currentTestDir = vIf || utils.getDirective(current, 'else-if')
+ if (!currentTestDir) {
+ return
+ }
+ if (currentTestDir.value && currentTestDir.value.expression) {
+ const currentOrOperands = buildOrOperands(
+ currentTestDir.value.expression
+ )
+
+ for (const condition of listToCheck) {
+ const operands = (condition.operands = condition.operands.filter(
+ (orOperand) =>
+ !currentOrOperands.operands.some((currentOrOperand) =>
+ isSubset(currentOrOperand, orOperand)
+ )
+ ))
+ if (operands.length === 0) {
+ context.report({
+ node: condition.node,
+ messageId: 'unexpected'
+ })
+ return
+ }
+ }
+ }
+
+ if (vIf) {
+ return
+ }
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/no-duplicate-attr-inheritance.js b/lib/rules/no-duplicate-attr-inheritance.js
new file mode 100644
index 000000000..31aef7e44
--- /dev/null
+++ b/lib/rules/no-duplicate-attr-inheritance.js
@@ -0,0 +1,134 @@
+/**
+ * @fileoverview Disable inheritAttrs when using v-bind="$attrs"
+ * @author Hiroki Osame
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/** @param {VElement[]} elements */
+function isConditionalGroup(elements) {
+ if (elements.length < 2) {
+ return false
+ }
+
+ const firstElement = elements[0]
+ const lastElement = elements[elements.length - 1]
+ const inBetweenElements = elements.slice(1, -1)
+
+ return (
+ utils.hasDirective(firstElement, 'if') &&
+ (utils.hasDirective(lastElement, 'else-if') ||
+ utils.hasDirective(lastElement, 'else')) &&
+ inBetweenElements.every((element) => utils.hasDirective(element, 'else-if'))
+ )
+}
+
+/** @param {VElement[]} elements */
+function isMultiRootNodes(elements) {
+ if (elements.length > 1 && !isConditionalGroup(elements)) {
+ return true
+ }
+
+ return false
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description:
+ 'enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/no-duplicate-attr-inheritance.html'
+ },
+ fixable: null,
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ checkMultiRootNodes: {
+ type: 'boolean'
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ noDuplicateAttrInheritance: 'Set "inheritAttrs" to false.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const options = context.options[0] || {}
+ const checkMultiRootNodes = options.checkMultiRootNodes === true
+
+ /** @type {Literal['value']} */
+ let inheritsAttrs = true
+ /** @type {VReference[]} */
+ const attrsRefs = []
+
+ /** @param {ObjectExpression} node */
+ function processOptions(node) {
+ const inheritAttrsProp = utils.findProperty(node, 'inheritAttrs')
+
+ if (inheritAttrsProp && inheritAttrsProp.value.type === 'Literal') {
+ inheritsAttrs = inheritAttrsProp.value.value
+ }
+ }
+
+ return utils.compositingVisitors(
+ utils.executeOnVue(context, processOptions),
+ utils.defineScriptSetupVisitor(context, {
+ onDefineOptionsEnter(node) {
+ if (node.arguments.length === 0) return
+ const define = node.arguments[0]
+ if (define.type !== 'ObjectExpression') return
+ processOptions(define)
+ }
+ }),
+ utils.defineTemplateBodyVisitor(context, {
+ /** @param {VExpressionContainer} node */
+ "VAttribute[directive=true][key.name.name='bind'][key.argument=null] > VExpressionContainer"(
+ node
+ ) {
+ if (!inheritsAttrs) {
+ return
+ }
+ const reference = node.references.find((reference) => {
+ if (reference.variable != null) {
+ // Not vm reference
+ return false
+ }
+ return reference.id.name === '$attrs'
+ })
+
+ if (reference) {
+ attrsRefs.push(reference)
+ }
+ }
+ }),
+ {
+ 'Program:exit'(program) {
+ const element = program.templateBody
+ if (element == null) {
+ return
+ }
+
+ const rootElements = element.children.filter(utils.isVElement)
+
+ if (!checkMultiRootNodes && isMultiRootNodes(rootElements)) return
+
+ if (attrsRefs.length > 0) {
+ for (const attrsRef of attrsRefs) {
+ context.report({
+ node: attrsRef.id,
+ messageId: 'noDuplicateAttrInheritance'
+ })
+ }
+ }
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/no-duplicate-attributes.js b/lib/rules/no-duplicate-attributes.js
index 9d6872432..0c7d3eb55 100644
--- a/lib/rules/no-duplicate-attributes.js
+++ b/lib/rules/no-duplicate-attributes.js
@@ -5,42 +5,35 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
/**
* Get the name of the given attribute node.
- * @param {ASTNode} attribute The attribute node to get.
- * @returns {string} The name of the attribute.
+ * @param {VAttribute | VDirective} attribute The attribute node to get.
+ * @returns {string | null} The name of the attribute.
*/
-function getName (attribute) {
+function getName(attribute) {
if (!attribute.directive) {
return attribute.key.name
}
- if (attribute.key.name === 'bind') {
- return attribute.key.argument || null
+ if (attribute.key.name.name === 'bind') {
+ return (
+ (attribute.key.argument &&
+ attribute.key.argument.type === 'VIdentifier' &&
+ attribute.key.argument.name) ||
+ null
+ )
}
return null
}
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'disallow duplication of attributes',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/no-duplicate-attributes.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/no-duplicate-attributes.html'
},
fixable: null,
@@ -54,32 +47,45 @@ module.exports = {
allowCoexistStyle: {
type: 'boolean'
}
- }
+ },
+ additionalProperties: false
}
- ]
+ ],
+ messages: {
+ duplicateAttribute: "Duplicate attribute '{{name}}'."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const options = context.options[0] || {}
const allowCoexistStyle = options.allowCoexistStyle !== false
const allowCoexistClass = options.allowCoexistClass !== false
+ /** @type {Set} */
const directiveNames = new Set()
+ /** @type {Set} */
const attributeNames = new Set()
- function isDuplicate (name, isDirective) {
- if ((allowCoexistStyle && name === 'style') || (allowCoexistClass && name === 'class')) {
+ /**
+ * @param {string} name
+ * @param {boolean} isDirective
+ */
+ function isDuplicate(name, isDirective) {
+ if (
+ (allowCoexistStyle && name === 'style') ||
+ (allowCoexistClass && name === 'class')
+ ) {
return isDirective ? directiveNames.has(name) : attributeNames.has(name)
}
return directiveNames.has(name) || attributeNames.has(name)
}
return utils.defineTemplateBodyVisitor(context, {
- 'VStartTag' () {
+ VStartTag() {
directiveNames.clear()
attributeNames.clear()
},
- 'VAttribute' (node) {
+ VAttribute(node) {
const name = getName(node)
if (name == null) {
return
@@ -89,7 +95,7 @@ module.exports = {
context.report({
node,
loc: node.loc,
- message: "Duplicate attribute '{{name}}'.",
+ messageId: 'duplicateAttribute',
data: { name }
})
}
diff --git a/lib/rules/no-empty-component-block.js b/lib/rules/no-empty-component-block.js
new file mode 100644
index 000000000..e7afc59f6
--- /dev/null
+++ b/lib/rules/no-empty-component-block.js
@@ -0,0 +1,104 @@
+/**
+ * @author tyankatsu
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { isVElement } = require('../utils')
+
+/**
+ * check whether has attribute `src`
+ * @param {VElement} componentBlock
+ */
+function hasAttributeSrc(componentBlock) {
+ const hasAttribute = componentBlock.startTag.attributes.length > 0
+
+ const hasSrc = componentBlock.startTag.attributes.some(
+ (attribute) =>
+ !attribute.directive &&
+ attribute.key.name === 'src' &&
+ attribute.value &&
+ attribute.value.value !== ''
+ )
+
+ return hasAttribute && hasSrc
+}
+
+/**
+ * check whether value under the component block is only whitespaces or break lines
+ * @param {VElement} componentBlock
+ */
+function isValueOnlyWhiteSpacesOrLineBreaks(componentBlock) {
+ return (
+ componentBlock.children.length === 1 &&
+ componentBlock.children[0].type === 'VText' &&
+ !componentBlock.children[0].value.trim()
+ )
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description:
+ 'disallow the `` `\n`
+ ),
+ fixer.removeRange(removeRange)
+ ]
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/define-slots.js b/lib/rules/syntaxes/define-slots.js
new file mode 100644
index 000000000..450ec3e89
--- /dev/null
+++ b/lib/rules/syntaxes/define-slots.js
@@ -0,0 +1,22 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils/index')
+
+module.exports = {
+ supported: '>=3.3.0',
+ /** @param {RuleContext} context @returns {RuleListener} */
+ createScriptVisitor(context) {
+ return utils.defineScriptSetupVisitor(context, {
+ onDefineSlotsEnter(node) {
+ context.report({
+ node,
+ messageId: 'forbiddenDefineSlots'
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/syntaxes/dynamic-directive-arguments.js b/lib/rules/syntaxes/dynamic-directive-arguments.js
new file mode 100644
index 000000000..e670fa3fc
--- /dev/null
+++ b/lib/rules/syntaxes/dynamic-directive-arguments.js
@@ -0,0 +1,27 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+module.exports = {
+ supported: '>=2.6.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ /**
+ * Reports dynamic argument node
+ * @param {VExpressionContainer} dynamicArgument node of dynamic argument
+ * @returns {void}
+ */
+ function reportDynamicArgument(dynamicArgument) {
+ context.report({
+ node: dynamicArgument,
+ messageId: 'forbiddenDynamicDirectiveArguments'
+ })
+ }
+
+ return {
+ 'VAttribute[directive=true] > VDirectiveKey > VExpressionContainer':
+ reportDynamicArgument
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/is-attribute-with-vue-prefix.js b/lib/rules/syntaxes/is-attribute-with-vue-prefix.js
new file mode 100644
index 000000000..9fd2afdd0
--- /dev/null
+++ b/lib/rules/syntaxes/is-attribute-with-vue-prefix.js
@@ -0,0 +1,25 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+module.exports = {
+ supported: '>=3.1.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ return {
+ /** @param {VAttribute} node */
+ "VAttribute[directive=false][key.name='is']"(node) {
+ if (!node.value) {
+ return
+ }
+ if (node.value.value.startsWith('vue:')) {
+ context.report({
+ node: node.value,
+ messageId: 'forbiddenIsAttributeWithVuePrefix'
+ })
+ }
+ }
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/scope-attribute.js b/lib/rules/syntaxes/scope-attribute.js
new file mode 100644
index 000000000..af7dbcd2f
--- /dev/null
+++ b/lib/rules/syntaxes/scope-attribute.js
@@ -0,0 +1,30 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+module.exports = {
+ deprecated: '2.5.0',
+ supported: '<3.0.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ /**
+ * Reports `scope` node
+ * @param {VDirectiveKey} scopeKey node of `scope`
+ * @returns {void}
+ */
+ function reportScope(scopeKey) {
+ context.report({
+ node: scopeKey,
+ messageId: 'forbiddenScopeAttribute',
+ // fix to use `slot-scope`
+ fix: (fixer) => fixer.replaceText(scopeKey, 'slot-scope')
+ })
+ }
+
+ return {
+ "VAttribute[directive=true] > VDirectiveKey[name.name='scope']":
+ reportScope
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/script-setup.js b/lib/rules/syntaxes/script-setup.js
new file mode 100644
index 000000000..7c0538b3d
--- /dev/null
+++ b/lib/rules/syntaxes/script-setup.js
@@ -0,0 +1,28 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils')
+
+module.exports = {
+ supported: '>=2.7.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createScriptVisitor(context) {
+ const scriptSetup = utils.getScriptSetupElement(context)
+ if (!scriptSetup) {
+ return {}
+ }
+ const reportNode =
+ utils.getAttribute(scriptSetup, 'setup') || scriptSetup.startTag
+ return {
+ Program() {
+ context.report({
+ node: reportNode,
+ messageId: 'forbiddenScriptSetup'
+ })
+ }
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/slot-attribute.js b/lib/rules/syntaxes/slot-attribute.js
new file mode 100644
index 000000000..27087cb37
--- /dev/null
+++ b/lib/rules/syntaxes/slot-attribute.js
@@ -0,0 +1,175 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const canConvertToVSlot = require('./utils/can-convert-to-v-slot')
+const casing = require('../../utils/casing')
+
+module.exports = {
+ deprecated: '2.6.0',
+ supported: '<3.0.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ const options = context.options[0] || {}
+ /** @type {Set} */
+ const ignore = new Set(options.ignore)
+
+ const sourceCode = context.getSourceCode()
+ const tokenStore =
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+
+ /**
+ * Checks whether the given node can convert to the `v-slot`.
+ * @param {VAttribute} slotAttr node of `slot`
+ * @returns {boolean} `true` if the given node can convert to the `v-slot`
+ */
+ function canConvertFromSlotToVSlot(slotAttr) {
+ if (!canConvertToVSlot(slotAttr.parent.parent, sourceCode, tokenStore)) {
+ return false
+ }
+ if (!slotAttr.value) {
+ return true
+ }
+ const slotName = slotAttr.value.value
+ // If other than alphanumeric, underscore and hyphen characters are included it can not be converted.
+ return !/[^\w\-]/u.test(slotName)
+ }
+
+ /**
+ * Checks whether the given node can convert to the `v-slot`.
+ * @param {VDirective} slotAttr node of `v-bind:slot`
+ * @returns {boolean} `true` if the given node can convert to the `v-slot`
+ */
+ function canConvertFromVBindSlotToVSlot(slotAttr) {
+ if (!canConvertToVSlot(slotAttr.parent.parent, sourceCode, tokenStore)) {
+ return false
+ }
+
+ if (!slotAttr.value) {
+ return true
+ }
+
+ if (!slotAttr.value.expression) {
+ // parse error or empty expression
+ return false
+ }
+
+ return slotAttr.value.expression.type === 'Identifier'
+ }
+
+ /**
+ * Convert to `v-slot`.
+ * @param {RuleFixer} fixer fixer
+ * @param {VAttribute|VDirective} slotAttr node of `slot`
+ * @param {string | null} slotName name of `slot`
+ * @param {boolean} vBind `true` if `slotAttr` is `v-bind:slot`
+ * @returns {IterableIterator} fix data
+ */
+ function* fixSlotToVSlot(fixer, slotAttr, slotName, vBind) {
+ const startTag = slotAttr.parent
+ const scopeAttr = startTag.attributes.find(
+ (attr) =>
+ attr.directive === true &&
+ attr.key.name &&
+ (attr.key.name.name === 'slot-scope' ||
+ attr.key.name.name === 'scope')
+ )
+ let nameArgument = ''
+ if (slotName) {
+ nameArgument = vBind ? `:[${slotName}]` : `:${slotName}`
+ }
+ const scopeValue =
+ scopeAttr && scopeAttr.value
+ ? `=${sourceCode.getText(scopeAttr.value)}`
+ : ''
+
+ const replaceText = `v-slot${nameArgument}${scopeValue}`
+
+ const element = startTag.parent
+ if (element.name === 'template') {
+ yield fixer.replaceText(slotAttr || scopeAttr, replaceText)
+ if (slotAttr && scopeAttr) {
+ yield fixer.remove(scopeAttr)
+ }
+ } else {
+ yield fixer.remove(slotAttr || scopeAttr)
+ if (slotAttr && scopeAttr) {
+ yield fixer.remove(scopeAttr)
+ }
+
+ const vFor = startTag.attributes.find(
+ (attr) => attr.directive && attr.key.name.name === 'for'
+ )
+ const vForText = vFor ? `${sourceCode.getText(vFor)} ` : ''
+ if (vFor) {
+ yield fixer.remove(vFor)
+ }
+
+ yield fixer.insertTextBefore(
+ element,
+ `\n`
+ )
+ yield fixer.insertTextAfter(element, `\n`)
+ }
+ }
+ /**
+ * Reports `slot` node
+ * @param {VAttribute} slotAttr node of `slot`
+ * @returns {void}
+ */
+ function reportSlot(slotAttr) {
+ const componentName = slotAttr.parent.parent.rawName
+ if (
+ ignore.has(componentName) ||
+ ignore.has(casing.pascalCase(componentName)) ||
+ ignore.has(casing.kebabCase(componentName))
+ ) {
+ return
+ }
+
+ context.report({
+ node: slotAttr.key,
+ messageId: 'forbiddenSlotAttribute',
+ // fix to use `v-slot`
+ *fix(fixer) {
+ if (!canConvertFromSlotToVSlot(slotAttr)) {
+ return
+ }
+ const slotName = slotAttr.value && slotAttr.value.value
+ yield* fixSlotToVSlot(fixer, slotAttr, slotName, false)
+ }
+ })
+ }
+ /**
+ * Reports `v-bind:slot` node
+ * @param {VDirective} slotAttr node of `v-bind:slot`
+ * @returns {void}
+ */
+ function reportVBindSlot(slotAttr) {
+ context.report({
+ node: slotAttr.key,
+ messageId: 'forbiddenSlotAttribute',
+ // fix to use `v-slot`
+ *fix(fixer) {
+ if (!canConvertFromVBindSlotToVSlot(slotAttr)) {
+ return
+ }
+ const slotName =
+ slotAttr.value &&
+ slotAttr.value.expression &&
+ sourceCode.getText(slotAttr.value.expression).trim()
+ yield* fixSlotToVSlot(fixer, slotAttr, slotName, true)
+ }
+ })
+ }
+
+ return {
+ "VAttribute[directive=false][key.name='slot']": reportSlot,
+ "VAttribute[directive=true][key.name.name='bind'][key.argument.name='slot']":
+ reportVBindSlot
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/slot-scope-attribute.js b/lib/rules/syntaxes/slot-scope-attribute.js
new file mode 100644
index 000000000..5f8070498
--- /dev/null
+++ b/lib/rules/syntaxes/slot-scope-attribute.js
@@ -0,0 +1,113 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const canConvertToVSlotForElement = require('./utils/can-convert-to-v-slot')
+
+module.exports = {
+ deprecated: '2.6.0',
+ supported: '>=2.5.0 <3.0.0',
+ /**
+ * @param {RuleContext} context
+ * @param {object} option
+ * @param {boolean} [option.fixToUpgrade]
+ * @returns {TemplateListener}
+ */
+ createTemplateBodyVisitor(context, { fixToUpgrade } = {}) {
+ const sourceCode = context.getSourceCode()
+ const tokenStore =
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+
+ /**
+ * Checks whether the given node can convert to the `v-slot`.
+ * @param {VStartTag} startTag node of ``
+ * @returns {boolean} `true` if the given node can convert to the `v-slot`
+ */
+ function canConvertToVSlot(startTag) {
+ if (
+ !canConvertToVSlotForElement(startTag.parent, sourceCode, tokenStore)
+ ) {
+ return false
+ }
+
+ const slotAttr = startTag.attributes.find(
+ (attr) => attr.directive === false && attr.key.name === 'slot'
+ )
+ if (slotAttr) {
+ // if the element have `slot` it can not be converted.
+ // Conversion of `slot` is done with `vue/no-deprecated-slot-attribute`.
+ return false
+ }
+
+ const vBindSlotAttr = startTag.attributes.find(
+ (attr) =>
+ attr.directive === true &&
+ attr.key.name.name === 'bind' &&
+ attr.key.argument &&
+ attr.key.argument.type === 'VIdentifier' &&
+ attr.key.argument.name === 'slot'
+ )
+ if (vBindSlotAttr) {
+ // if the element have `v-bind:slot` it can not be converted.
+ // Conversion of `v-bind:slot` is done with `vue/no-deprecated-slot-attribute`.
+ return false
+ }
+ return true
+ }
+
+ /**
+ * Convert to `v-slot`.
+ * @param {RuleFixer} fixer fixer
+ * @param {VDirective} scopeAttr node of `slot-scope`
+ * @returns {Fix[]} fix data
+ */
+ function fixSlotScopeToVSlot(fixer, scopeAttr) {
+ const element = scopeAttr.parent.parent
+ const scopeValue =
+ scopeAttr && scopeAttr.value
+ ? `=${sourceCode.getText(scopeAttr.value)}`
+ : ''
+
+ const replaceText = `v-slot${scopeValue}`
+ if (element.name === 'template') {
+ return [fixer.replaceText(scopeAttr, replaceText)]
+ } else {
+ const tokenBefore = tokenStore.getTokenBefore(scopeAttr)
+ return [
+ fixer.removeRange([tokenBefore.range[1], scopeAttr.range[1]]),
+ fixer.insertTextBefore(element, `\n`),
+ fixer.insertTextAfter(element, `\n`)
+ ]
+ }
+ }
+ /**
+ * Reports `slot-scope` node
+ * @param {VDirective} scopeAttr node of `slot-scope`
+ * @returns {void}
+ */
+ function reportSlotScope(scopeAttr) {
+ context.report({
+ node: scopeAttr.key,
+ messageId: 'forbiddenSlotScopeAttribute',
+ fix(fixer) {
+ if (!fixToUpgrade) {
+ return null
+ }
+ // fix to use `v-slot`
+ const startTag = scopeAttr.parent
+ if (!canConvertToVSlot(startTag)) {
+ return null
+ }
+ return fixSlotScopeToVSlot(fixer, scopeAttr)
+ }
+ })
+ }
+
+ return {
+ "VAttribute[directive=true][key.name.name='slot-scope']": reportSlotScope
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/style-css-vars-injection.js b/lib/rules/syntaxes/style-css-vars-injection.js
new file mode 100644
index 000000000..03608b5e1
--- /dev/null
+++ b/lib/rules/syntaxes/style-css-vars-injection.js
@@ -0,0 +1,28 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { getStyleVariablesContext } = require('../../utils/style-variables')
+
+module.exports = {
+ supported: '>=3.0.3 || >=2.7.0 <3.0.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createScriptVisitor(context) {
+ const styleVars = getStyleVariablesContext(context)
+ if (!styleVars) {
+ return {}
+ }
+ return {
+ Program() {
+ for (const vBind of styleVars.vBinds) {
+ context.report({
+ node: vBind,
+ messageId: 'forbiddenStyleCssVarsInjection'
+ })
+ }
+ }
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/utils/can-convert-to-v-slot.js b/lib/rules/syntaxes/utils/can-convert-to-v-slot.js
new file mode 100644
index 000000000..e0e51053d
--- /dev/null
+++ b/lib/rules/syntaxes/utils/can-convert-to-v-slot.js
@@ -0,0 +1,223 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../../utils')
+/**
+ * @typedef {object} SlotVForVariables
+ * @property {VForExpression} expr
+ * @property {VVariable[]} variables
+ */
+/**
+ * @typedef {object} SlotContext
+ * @property {VElement} element
+ * @property {VAttribute | VDirective | null} slot
+ * @property {VDirective | null} vFor
+ * @property {SlotVForVariables | null} slotVForVars
+ * @property {string} normalizedName
+ */
+/**
+ * Checks whether the given element can use v-slot.
+ * @param {VElement} element
+ * @param {SourceCode} sourceCode
+ * @param {ParserServices.TokenStore} tokenStore
+ */
+module.exports = function canConvertToVSlot(element, sourceCode, tokenStore) {
+ const ownerElement = element.parent
+ if (
+ ownerElement.type === 'VDocumentFragment' ||
+ !utils.isCustomComponent(ownerElement) ||
+ ownerElement.name === 'component'
+ ) {
+ return false
+ }
+ const slot = getSlotContext(element, sourceCode)
+ if (slot.vFor && !slot.slotVForVars) {
+ // E.g.,
+ return false
+ }
+ if (hasSameSlotDirective(ownerElement, slot, sourceCode, tokenStore)) {
+ return false
+ }
+ return true
+}
+/**
+ * @param {VElement} element
+ * @param {SourceCode} sourceCode
+ * @returns {SlotContext}
+ */
+function getSlotContext(element, sourceCode) {
+ const slot =
+ utils.getAttribute(element, 'slot') ||
+ utils.getDirective(element, 'bind', 'slot')
+ const vFor = utils.getDirective(element, 'for')
+ const slotVForVars = getSlotVForVariableIfUsingIterationVars(slot, vFor)
+
+ return {
+ element,
+ slot,
+ vFor,
+ slotVForVars,
+ normalizedName: getNormalizedName(slot, sourceCode)
+ }
+}
+
+/**
+ * Gets the `v-for` directive and variable that provide the variables used by the given `slot` attribute.
+ * @param {VAttribute | VDirective | null} slot The current `slot` attribute node.
+ * @param {VDirective | null} [vFor] The current `v-for` directive node.
+ * @returns { SlotVForVariables | null } The SlotVForVariables.
+ */
+function getSlotVForVariableIfUsingIterationVars(slot, vFor) {
+ if (!slot || !slot.directive) {
+ return null
+ }
+ const expr =
+ vFor && vFor.value && /** @type {VForExpression} */ (vFor.value.expression)
+ const variables =
+ expr && getUsingIterationVars(slot.value, slot.parent.parent)
+ return expr && variables && variables.length > 0 ? { expr, variables } : null
+}
+
+/**
+ * Gets iterative variables if a given expression node is using iterative variables that the element defined.
+ * @param {VExpressionContainer|null} expression The expression node to check.
+ * @param {VElement} element The element node which has the expression.
+ * @returns {VVariable[]} The expression node is using iteration variables.
+ */
+function getUsingIterationVars(expression, element) {
+ const vars = []
+ if (expression && expression.type === 'VExpressionContainer') {
+ for (const { variable } of expression.references) {
+ if (
+ variable != null &&
+ variable.kind === 'v-for' &&
+ variable.id.range[0] > element.startTag.range[0] &&
+ variable.id.range[1] < element.startTag.range[1]
+ ) {
+ vars.push(variable)
+ }
+ }
+ }
+ return vars
+}
+
+/**
+ * Get the normalized name of a given `slot` attribute node.
+ * @param {VAttribute | VDirective | null} slotAttr node of `slot`
+ * @param {SourceCode} sourceCode The source code.
+ * @returns {string} The normalized name.
+ */
+function getNormalizedName(slotAttr, sourceCode) {
+ if (!slotAttr) {
+ return 'default'
+ }
+ if (!slotAttr.directive) {
+ return slotAttr.value ? slotAttr.value.value : 'default'
+ }
+ return slotAttr.value ? `[${sourceCode.getText(slotAttr.value)}]` : '[null]'
+}
+
+/**
+ * Checks whether parent element has the same slot as the given slot.
+ * @param {VElement} ownerElement The parent element.
+ * @param {SlotContext} targetSlot The SlotContext with a slot to check if they are the same.
+ * @param {SourceCode} sourceCode
+ * @param {ParserServices.TokenStore} tokenStore
+ */
+function hasSameSlotDirective(
+ ownerElement,
+ targetSlot,
+ sourceCode,
+ tokenStore
+) {
+ for (const group of utils.iterateChildElementsChains(ownerElement)) {
+ if (group.includes(targetSlot.element)) {
+ continue
+ }
+ for (const childElement of group) {
+ const slot = getSlotContext(childElement, sourceCode)
+ if (!targetSlot.slotVForVars || !slot.slotVForVars) {
+ if (
+ !targetSlot.slotVForVars &&
+ !slot.slotVForVars &&
+ targetSlot.normalizedName === slot.normalizedName
+ ) {
+ return true
+ }
+ continue
+ }
+ if (
+ equalSlotVForVariables(
+ targetSlot.slotVForVars,
+ slot.slotVForVars,
+ tokenStore
+ )
+ ) {
+ return true
+ }
+ }
+ }
+ return false
+}
+
+/**
+ * Determines whether the two given `v-slot` variables are considered to be equal.
+ * @param {SlotVForVariables} a First element.
+ * @param {SlotVForVariables} b Second element.
+ * @param {ParserServices.TokenStore} tokenStore The token store.
+ * @returns {boolean} `true` if the elements are considered to be equal.
+ */
+function equalSlotVForVariables(a, b, tokenStore) {
+ if (a.variables.length !== b.variables.length) {
+ return false
+ }
+ if (!equal(a.expr.right, b.expr.right)) {
+ return false
+ }
+
+ const checkedVarNames = new Set()
+ const len = Math.min(a.expr.left.length, b.expr.left.length)
+ for (let index = 0; index < len; index++) {
+ const aPtn = a.expr.left[index]
+ const bPtn = b.expr.left[index]
+
+ const aVar = a.variables.find(
+ (v) => aPtn.range[0] <= v.id.range[0] && v.id.range[1] <= aPtn.range[1]
+ )
+ const bVar = b.variables.find(
+ (v) => bPtn.range[0] <= v.id.range[0] && v.id.range[1] <= bPtn.range[1]
+ )
+ if (aVar && bVar) {
+ if (aVar.id.name !== bVar.id.name) {
+ return false
+ }
+ if (!equal(aPtn, bPtn)) {
+ return false
+ }
+ checkedVarNames.add(aVar.id.name)
+ } else if (aVar || bVar) {
+ return false
+ }
+ }
+ return a.variables.every(
+ (v) =>
+ checkedVarNames.has(v.id.name) ||
+ b.variables.some((bv) => v.id.name === bv.id.name)
+ )
+
+ /**
+ * Determines whether the two given nodes are considered to be equal.
+ * @param {ASTNode} a First node.
+ * @param {ASTNode} b Second node.
+ * @returns {boolean} `true` if the nodes are considered to be equal.
+ */
+ function equal(a, b) {
+ if (a.type !== b.type) {
+ return false
+ }
+ return utils.equalTokens(a, b, tokenStore)
+ }
+}
diff --git a/lib/rules/syntaxes/v-bind-attr-modifier.js b/lib/rules/syntaxes/v-bind-attr-modifier.js
new file mode 100644
index 000000000..82a0922aa
--- /dev/null
+++ b/lib/rules/syntaxes/v-bind-attr-modifier.js
@@ -0,0 +1,32 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+module.exports = {
+ supported: '>=3.2.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ /**
+ * Reports `v-bind.attr` node
+ * @param { VIdentifier } mod node of `v-bind.attr`
+ * @returns {void}
+ */
+ function report(mod) {
+ context.report({
+ node: mod,
+ messageId: 'forbiddenVBindAttrModifier'
+ })
+ }
+
+ return {
+ "VAttribute[directive=true][key.name.name='bind']"(node) {
+ const attrMod = node.key.modifiers.find((m) => m.name === 'attr')
+ if (attrMod) {
+ report(attrMod)
+ }
+ }
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/v-bind-prop-modifier-shorthand.js b/lib/rules/syntaxes/v-bind-prop-modifier-shorthand.js
new file mode 100644
index 000000000..645ed375d
--- /dev/null
+++ b/lib/rules/syntaxes/v-bind-prop-modifier-shorthand.js
@@ -0,0 +1,34 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+module.exports = {
+ supported: '>=3.2.0 || >=2.6.0-beta.1 <=2.6.0-beta.3',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ /**
+ * Reports `.prop` shorthand node
+ * @param { VDirectiveKey & { argument: VIdentifier } } bindPropKey node of `.prop` shorthand
+ * @returns {void}
+ */
+ function reportPropModifierShorthand(bindPropKey) {
+ context.report({
+ node: bindPropKey,
+ messageId: 'forbiddenVBindPropModifierShorthand',
+ // fix to use `:x.prop` (downgrade)
+ fix: (fixer) =>
+ fixer.replaceText(
+ bindPropKey,
+ `:${bindPropKey.argument.rawName}.prop`
+ )
+ })
+ }
+
+ return {
+ "VAttribute[directive=true] > VDirectiveKey[name.name='bind'][name.rawName='.']":
+ reportPropModifierShorthand
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/v-bind-same-name-shorthand.js b/lib/rules/syntaxes/v-bind-same-name-shorthand.js
new file mode 100644
index 000000000..d9e7a388c
--- /dev/null
+++ b/lib/rules/syntaxes/v-bind-same-name-shorthand.js
@@ -0,0 +1,34 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../../utils')
+
+module.exports = {
+ supported: '>=3.4.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ /**
+ * Verify the directive node
+ * @param {VDirective} node The directive node to check
+ * @returns {void}
+ */
+ function checkDirective(node) {
+ if (utils.isVBindSameNameShorthand(node)) {
+ context.report({
+ node,
+ messageId: 'forbiddenVBindSameNameShorthand',
+ // fix to use `:x="x"` (downgrade)
+ fix: (fixer) =>
+ fixer.insertTextAfter(node, `="${node.value.expression.name}"`)
+ })
+ }
+ }
+
+ return {
+ "VAttribute[directive=true][key.name.name='bind']": checkDirective
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/v-is.js b/lib/rules/syntaxes/v-is.js
new file mode 100644
index 000000000..7fb1f862e
--- /dev/null
+++ b/lib/rules/syntaxes/v-is.js
@@ -0,0 +1,27 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+module.exports = {
+ deprecated: '3.1.0',
+ supported: '>=3.0.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ /**
+ * Reports `v-is` node
+ * @param {VDirective} vIsAttr node of `v-is`
+ * @returns {void}
+ */
+ function reportVIs(vIsAttr) {
+ context.report({
+ node: vIsAttr.key,
+ messageId: 'forbiddenVIs'
+ })
+ }
+
+ return {
+ "VAttribute[directive=true][key.name.name='is']": reportVIs
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/v-memo.js b/lib/rules/syntaxes/v-memo.js
new file mode 100644
index 000000000..958b51cf3
--- /dev/null
+++ b/lib/rules/syntaxes/v-memo.js
@@ -0,0 +1,26 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+module.exports = {
+ supported: '>=3.2.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ /**
+ * Reports `v-is` node
+ * @param {VDirective} vMemoAttr node of `v-is`
+ * @returns {void}
+ */
+ function reportVMemo(vMemoAttr) {
+ context.report({
+ node: vMemoAttr.key,
+ messageId: 'forbiddenVMemo'
+ })
+ }
+
+ return {
+ "VAttribute[directive=true][key.name.name='memo']": reportVMemo
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/v-model-argument.js b/lib/rules/syntaxes/v-model-argument.js
new file mode 100644
index 000000000..d1bd59738
--- /dev/null
+++ b/lib/rules/syntaxes/v-model-argument.js
@@ -0,0 +1,23 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+module.exports = {
+ supported: '>=3.0.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ return {
+ /** @param {VDirectiveKey & { argument: VExpressionContainer | VIdentifier }} node */
+ "VAttribute[directive=true] > VDirectiveKey[name.name='model'][argument!=null]"(
+ node
+ ) {
+ context.report({
+ node: node.argument,
+ messageId: 'forbiddenVModelArgument'
+ })
+ }
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/v-model-custom-modifiers.js b/lib/rules/syntaxes/v-model-custom-modifiers.js
new file mode 100644
index 000000000..4b17b47d6
--- /dev/null
+++ b/lib/rules/syntaxes/v-model-custom-modifiers.js
@@ -0,0 +1,29 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const BUILTIN_MODIFIERS = new Set(['lazy', 'number', 'trim'])
+
+module.exports = {
+ supported: '>=3.0.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ return {
+ /** @param {VDirectiveKey} node */
+ "VAttribute[directive=true] > VDirectiveKey[name.name='model'][modifiers.length>0]"(
+ node
+ ) {
+ for (const modifier of node.modifiers) {
+ if (!BUILTIN_MODIFIERS.has(modifier.name)) {
+ context.report({
+ node: modifier,
+ messageId: 'forbiddenVModelCustomModifiers'
+ })
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/lib/rules/syntaxes/v-slot.js b/lib/rules/syntaxes/v-slot.js
new file mode 100644
index 000000000..a6a4b4ebd
--- /dev/null
+++ b/lib/rules/syntaxes/v-slot.js
@@ -0,0 +1,84 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+/**
+ * Checks whether the given node can convert to the `slot`.
+ * @param {VDirective} vSlotAttr node of `v-slot`
+ * @returns {boolean} `true` if the given node can convert to the `slot`
+ */
+function canConvertToSlot(vSlotAttr) {
+ return vSlotAttr.parent.parent.name === 'template'
+}
+
+module.exports = {
+ supported: '>=2.6.0',
+ /** @param {RuleContext} context @returns {TemplateListener} */
+ createTemplateBodyVisitor(context) {
+ const sourceCode = context.getSourceCode()
+
+ /**
+ * Convert to `slot` and `slot-scope`.
+ * @param {RuleFixer} fixer fixer
+ * @param {VDirective} vSlotAttr node of `v-slot`
+ * @returns {null|Fix} fix data
+ */
+ function fixVSlotToSlot(fixer, vSlotAttr) {
+ const key = vSlotAttr.key
+ if (key.modifiers.length > 0) {
+ // unknown modifiers
+ return null
+ }
+
+ const attrs = []
+ const argument = key.argument
+ if (argument) {
+ if (argument.type === 'VIdentifier') {
+ const name = argument.rawName
+ attrs.push(`slot="${name}"`)
+ } else if (
+ argument.type === 'VExpressionContainer' &&
+ argument.expression
+ ) {
+ const expression = sourceCode.getText(argument.expression)
+ attrs.push(`:slot="${expression}"`)
+ } else {
+ // unknown or syntax error
+ return null
+ }
+ }
+ const scopedValueNode = vSlotAttr.value
+ if (scopedValueNode) {
+ attrs.push(`slot-scope=${sourceCode.getText(scopedValueNode)}`)
+ }
+ if (attrs.length === 0) {
+ attrs.push('slot') // useless
+ }
+ return fixer.replaceText(vSlotAttr, attrs.join(' '))
+ }
+ /**
+ * Reports `v-slot` node
+ * @param {VDirective} vSlotAttr node of `v-slot`
+ * @returns {void}
+ */
+ function reportVSlot(vSlotAttr) {
+ context.report({
+ node: vSlotAttr.key,
+ messageId: 'forbiddenVSlot',
+ // fix to use `slot` (downgrade)
+ fix(fixer) {
+ if (!canConvertToSlot(vSlotAttr)) {
+ return null
+ }
+ return fixVSlotToSlot(fixer, vSlotAttr)
+ }
+ })
+ }
+
+ return {
+ "VAttribute[directive=true][key.name.name='slot']": reportVSlot
+ }
+ }
+}
diff --git a/lib/rules/template-curly-spacing.js b/lib/rules/template-curly-spacing.js
new file mode 100644
index 000000000..e215108e9
--- /dev/null
+++ b/lib/rules/template-curly-spacing.js
@@ -0,0 +1,12 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const { wrapStylisticOrCoreRule } = require('../utils')
+
+// eslint-disable-next-line internal/no-invalid-meta
+module.exports = wrapStylisticOrCoreRule('template-curly-spacing', {
+ skipDynamicArguments: true,
+ applyDocument: true
+})
diff --git a/lib/rules/this-in-template.js b/lib/rules/this-in-template.js
index fecd17f06..a664a8edf 100644
--- a/lib/rules/this-in-template.js
+++ b/lib/rules/this-in-template.js
@@ -4,31 +4,27 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
const RESERVED_NAMES = new Set(require('../utils/js-reserved.json'))
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'disallow usage of `this` in template',
- category: 'recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/this-in-template.md'
+ categories: ['vue3-recommended', 'vue2-recommended'],
+ url: 'https://eslint.vuejs.org/rules/this-in-template.html'
},
- fixable: null,
+ fixable: 'code',
schema: [
{
enum: ['always', 'never']
}
- ]
+ ],
+ messages: {
+ unexpected: "Unexpected usage of 'this'.",
+ expected: "Expected 'this'."
+ }
},
/**
@@ -37,66 +33,99 @@ module.exports = {
* @param {RuleContext} context - The rule context.
* @returns {Object} AST event handlers.
*/
- create (context) {
- const options = context.options[0] !== 'always' ? 'never' : 'always'
- let scope = {
- parent: null,
- nodes: []
- }
+ create(context) {
+ const options = context.options[0] === 'always' ? 'always' : 'never'
+ /**
+ * @typedef {object} ScopeStack
+ * @property {ScopeStack | null} parent
+ * @property {Identifier[]} nodes
+ */
+
+ /** @type {ScopeStack | null} */
+ let scopeStack = null
- return utils.defineTemplateBodyVisitor(context, Object.assign({
- VElement (node) {
- scope = {
- parent: scope,
- nodes: scope.nodes.slice() // make copy
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VElement} node */
+ VElement(node) {
+ scopeStack = {
+ parent: scopeStack,
+ nodes: scopeStack
+ ? [...scopeStack.nodes] // make copy
+ : []
}
if (node.variables) {
for (const variable of node.variables) {
const varNode = variable.id
const name = varNode.name
- if (!scope.nodes.some(node => node.name === name)) { // Prevent adding duplicates
- scope.nodes.push(varNode)
+ if (!scopeStack.nodes.some((node) => node.name === name)) {
+ // Prevent adding duplicates
+ scopeStack.nodes.push(varNode)
}
}
}
},
- 'VElement:exit' (node) {
- scope = scope.parent
- }
- }, options === 'never'
- ? {
- 'VExpressionContainer MemberExpression > ThisExpression' (node) {
- const propertyName = utils.getStaticPropertyName(node.parent.property)
- if (!propertyName ||
- scope.nodes.some(el => el.name === propertyName) ||
- RESERVED_NAMES.has(propertyName) || // this.class | this['class']
- /^[0-9].*$|[^a-zA-Z0-9_]/.test(propertyName) // this['0aaaa'] | this['foo-bar bas']
- ) {
- return
- }
-
- context.report({
- node,
- loc: node.loc,
- message: "Unexpected usage of 'this'."
- })
- }
- }
- : {
- 'VExpressionContainer' (node) {
- if (node.references) {
- for (const reference of node.references) {
- if (!scope.nodes.some(el => el.name === reference.id.name)) {
- context.report({
- node: reference.id,
- loc: reference.id.loc,
- message: "Expected 'this'."
- })
+ 'VElement:exit'() {
+ scopeStack = scopeStack && scopeStack.parent
+ },
+ ...(options === 'never'
+ ? {
+ /** @param { ThisExpression & { parent: MemberExpression } } node */
+ 'VExpressionContainer MemberExpression > ThisExpression'(node) {
+ if (!scopeStack) {
+ return
+ }
+ const propertyName = utils.getStaticPropertyName(node.parent)
+ if (
+ !propertyName ||
+ scopeStack.nodes.some((el) => el.name === propertyName) ||
+ RESERVED_NAMES.has(propertyName) || // this.class | this['class']
+ /^\d.*$|[^\w$]/.test(propertyName) // this['0aaaa'] | this['foo-bar bas']
+ ) {
+ return
}
+
+ context.report({
+ node,
+ loc: node.loc,
+ fix(fixer) {
+ // node.parent should be some code like `this.test`, `this?.['result']`
+ return fixer.replaceText(node.parent, propertyName)
+ },
+ messageId: 'unexpected'
+ })
}
}
- }
- }
- ))
+ : {
+ /** @param {VExpressionContainer} node */
+ VExpressionContainer(node) {
+ if (!scopeStack) {
+ return
+ }
+ if (node.parent.type === 'VDirectiveKey') {
+ // We cannot use `.` in dynamic arguments because the right of the `.` becomes a modifier.
+ // For example, In `:[this.prop]` case, `:[this` is an argument and `prop]` is a modifier.
+ return
+ }
+ if (node.references) {
+ for (const reference of node.references) {
+ if (
+ !scopeStack.nodes.some(
+ (el) => el.name === reference.id.name
+ )
+ ) {
+ context.report({
+ node: reference.id,
+ loc: reference.id.loc,
+ messageId: 'expected',
+ fix(fixer) {
+ return fixer.insertTextBefore(reference.id, 'this.')
+ }
+ })
+ }
+ }
+ }
+ }
+ })
+ })
}
}
diff --git a/lib/rules/use-v-on-exact.js b/lib/rules/use-v-on-exact.js
index 43bf199e3..f048b70ef 100644
--- a/lib/rules/use-v-on-exact.js
+++ b/lib/rules/use-v-on-exact.js
@@ -4,26 +4,174 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
+/**
+ * @typedef { {name: string, node: VDirectiveKey, modifiers: string[] } } EventDirective
+ */
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+const SYSTEM_MODIFIERS = new Set(['ctrl', 'shift', 'alt', 'meta'])
+const GLOBAL_MODIFIERS = new Set([
+ 'stop',
+ 'prevent',
+ 'capture',
+ 'self',
+ 'once',
+ 'passive',
+ 'native'
+])
+
+/**
+ * Finds and returns all keys for event directives
+ *
+ * @param {VStartTag} startTag Element startTag
+ * @param {SourceCode} sourceCode The source code object.
+ * @returns {EventDirective[]} [{ name, node, modifiers }]
+ */
+function getEventDirectives(startTag, sourceCode) {
+ return utils.getDirectives(startTag, 'on').map((attribute) => ({
+ name: attribute.key.argument
+ ? sourceCode.getText(attribute.key.argument)
+ : '',
+ node: attribute.key,
+ modifiers: attribute.key.modifiers.map((modifier) => modifier.name)
+ }))
+}
+
+/**
+ * Checks whether given modifier is key modifier
+ *
+ * @param {string} modifier
+ * @returns {boolean}
+ */
+function isKeyModifier(modifier) {
+ return !GLOBAL_MODIFIERS.has(modifier) && !SYSTEM_MODIFIERS.has(modifier)
+}
+
+/**
+ * Checks whether given modifier is system one
+ *
+ * @param {string} modifier
+ * @returns {boolean}
+ */
+function isSystemModifier(modifier) {
+ return SYSTEM_MODIFIERS.has(modifier)
+}
+
+/**
+ * Checks whether given any of provided modifiers
+ * has system modifier
+ *
+ * @param {string[]} modifiers
+ * @returns {boolean}
+ */
+function hasSystemModifier(modifiers) {
+ return modifiers.some(isSystemModifier)
+}
+
+/**
+ * Groups all events in object,
+ * with keys represinting each event name
+ *
+ * @param {EventDirective[]} events
+ * @returns { { [key: string]: EventDirective[] } } { click: [], keypress: [] }
+ */
+function groupEvents(events) {
+ /** @type { { [key: string]: EventDirective[] } } */
+ const grouped = {}
+ for (const event of events) {
+ if (!grouped[event.name]) {
+ grouped[event.name] = []
+ }
+ grouped[event.name].push(event)
+ }
+ return grouped
+}
+
+/**
+ * Creates alphabetically sorted string with system modifiers
+ *
+ * @param {string[]} modifiers
+ * @returns {string} e.g. "alt,ctrl,del,shift"
+ */
+function getSystemModifiersString(modifiers) {
+ return modifiers.filter(isSystemModifier).sort().join(',')
+}
+
+/**
+ * Creates alphabetically sorted string with key modifiers
+ *
+ * @param {string[]} modifiers
+ * @returns {string} e.g. "enter,tab"
+ */
+function getKeyModifiersString(modifiers) {
+ return modifiers.filter(isKeyModifier).sort().join(',')
+}
+
+/**
+ * Compares two events based on their modifiers
+ * to detect possible event leakeage
+ *
+ * @param {EventDirective} baseEvent
+ * @param {EventDirective} event
+ * @returns {boolean}
+ */
+function hasConflictedModifiers(baseEvent, event) {
+ if (event.node === baseEvent.node || event.modifiers.includes('exact'))
+ return false
+
+ const eventKeyModifiers = getKeyModifiersString(event.modifiers)
+ const baseEventKeyModifiers = getKeyModifiersString(baseEvent.modifiers)
+
+ if (
+ eventKeyModifiers &&
+ baseEventKeyModifiers &&
+ eventKeyModifiers !== baseEventKeyModifiers
+ )
+ return false
+
+ const eventSystemModifiers = getSystemModifiersString(event.modifiers)
+ const baseEventSystemModifiers = getSystemModifiersString(baseEvent.modifiers)
+
+ return (
+ baseEvent.modifiers.length > 0 &&
+ baseEventSystemModifiers !== eventSystemModifiers &&
+ baseEventSystemModifiers.includes(eventSystemModifiers)
+ )
+}
+
+/**
+ * Searches for events that might conflict with each other
+ *
+ * @param {EventDirective[]} events
+ * @returns {EventDirective[]} conflicted events, without duplicates
+ */
+function findConflictedEvents(events) {
+ /** @type {EventDirective[]} */
+ const conflictedEvents = []
+ for (const event of events) {
+ conflictedEvents.push(
+ ...events
+ .filter((evt) => !conflictedEvents.includes(evt)) // No duplicates
+ .filter(hasConflictedModifiers.bind(null, event))
+ )
+ }
+ return conflictedEvents
+}
module.exports = {
meta: {
type: 'suggestion',
docs: {
description: 'enforce usage of `exact` modifier on `v-on`',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/use-v-on-exact.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/use-v-on-exact.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ considerExact: "Consider to use '.exact' modifier."
+ }
},
/**
@@ -32,32 +180,40 @@ module.exports = {
* @param {RuleContext} context - The rule context.
* @returns {Object} AST event handlers.
*/
- create (context) {
+ create(context) {
+ const sourceCode = context.getSourceCode()
+
return utils.defineTemplateBodyVisitor(context, {
- VStartTag (node) {
- if (node.attributes.length > 1) {
- const groups = node.attributes
- .map(item => item.key)
- .filter(item => item && item.type === 'VDirectiveKey' && item.name === 'on')
- .reduce((rv, item) => {
- (rv[item.argument] = rv[item.argument] || []).push(item)
- return rv
- }, {})
-
- const directives = Object.keys(groups).map(key => groups[key])
- // const directives = Object.values(groups) // Uncomment after node 6 is dropped
- .filter(item => item.length > 1)
- for (const group of directives) {
- if (group.some(item => item.modifiers.length > 0)) { // check if there are directives with modifiers
- const invalid = group.filter(item => item.modifiers.length === 0)
- for (const node of invalid) {
- context.report({
- node,
- loc: node.loc,
- message: "Consider to use '.exact' modifier."
- })
- }
- }
+ /** @param {VStartTag} node */
+ VStartTag(node) {
+ if (node.attributes.length === 0) return
+
+ const isCustomComponent = utils.isCustomComponent(node.parent)
+ let events = getEventDirectives(node, sourceCode)
+
+ if (isCustomComponent) {
+ // For components consider only events with `native` modifier
+ events = events.filter((event) => event.modifiers.includes('native'))
+ }
+
+ const grouppedEvents = groupEvents(events)
+
+ for (const eventName of Object.keys(grouppedEvents)) {
+ const eventsInGroup = grouppedEvents[eventName]
+ const hasEventWithKeyModifier = eventsInGroup.some((event) =>
+ hasSystemModifier(event.modifiers)
+ )
+
+ if (!hasEventWithKeyModifier) continue
+
+ const conflictedEvents = findConflictedEvents(eventsInGroup)
+
+ for (const e of conflictedEvents) {
+ context.report({
+ node: e.node,
+ loc: e.node.loc,
+ messageId: 'considerExact'
+ })
}
}
}
diff --git a/lib/rules/v-bind-style.js b/lib/rules/v-bind-style.js
index 328e14988..752a8fdf0 100644
--- a/lib/rules/v-bind-style.js
+++ b/lib/rules/v-bind-style.js
@@ -5,49 +5,166 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
+const casing = require('../utils/casing')
+
+/**
+ * @typedef { VDirectiveKey & { name: VIdentifier & { name: 'bind' }, argument: VExpressionContainer | VIdentifier } } VBindDirectiveKey
+ * @typedef { VDirective & { key: VBindDirectiveKey } } VBindDirective
+ */
+
+/**
+ * @param {string} name
+ * @returns {string}
+ */
+function kebabCaseToCamelCase(name) {
+ return casing.isKebabCase(name) ? casing.camelCase(name) : name
+}
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+/**
+ * @param {VBindDirective} node
+ * @returns {boolean}
+ */
+function isSameName(node) {
+ const attrName =
+ node.key.argument.type === 'VIdentifier' ? node.key.argument.rawName : null
+ const valueName =
+ node.value?.expression?.type === 'Identifier'
+ ? node.value.expression.name
+ : null
+
+ if (!attrName || !valueName) return false
+
+ return kebabCaseToCamelCase(attrName) === kebabCaseToCamelCase(valueName)
+}
+
+/**
+ * @param {VBindDirectiveKey} key
+ * @returns {number}
+ */
+function getCutStart(key) {
+ const modifiers = key.modifiers
+ return modifiers.length > 0
+ ? modifiers[modifiers.length - 1].range[1]
+ : key.argument.range[1]
+}
module.exports = {
meta: {
- type: 'layout',
+ type: 'suggestion',
docs: {
description: 'enforce `v-bind` directive style',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/v-bind-style.md'
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/v-bind-style.html'
},
fixable: 'code',
schema: [
- { enum: ['shorthand', 'longform'] }
- ]
+ { enum: ['shorthand', 'longform'] },
+ {
+ type: 'object',
+ properties: {
+ sameNameShorthand: { enum: ['always', 'never', 'ignore'] }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ expectedLonghand: "Expected 'v-bind' before ':'.",
+ unexpectedLonghand: "Unexpected 'v-bind' before ':'.",
+ expectedLonghandForProp: "Expected 'v-bind:' instead of '.'.",
+ expectedShorthand: 'Expected same-name shorthand.',
+ unexpectedShorthand: 'Unexpected same-name shorthand.'
+ }
},
+ /** @param {RuleContext} context */
+ create(context) {
+ const preferShorthand = context.options[0] !== 'longform'
+ /** @type {"always" | "never" | "ignore"} */
+ const sameNameShorthand = context.options[1]?.sameNameShorthand || 'ignore'
- create (context) {
- const shorthand = context.options[0] !== 'longform'
+ /** @param {VBindDirective} node */
+ function checkAttributeStyle(node) {
+ const shorthandProp = node.key.name.rawName === '.'
+ const shorthand = node.key.name.rawName === ':' || shorthandProp
+ if (shorthand === preferShorthand) {
+ return
+ }
- return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='bind'][key.argument!=null]" (node) {
- if (node.key.shorthand === shorthand) {
- return
+ let messageId = 'expectedLonghand'
+ if (preferShorthand) {
+ messageId = 'unexpectedLonghand'
+ } else if (shorthandProp) {
+ messageId = 'expectedLonghandForProp'
+ }
+
+ context.report({
+ node,
+ loc: node.loc,
+ messageId,
+ *fix(fixer) {
+ if (preferShorthand) {
+ yield fixer.remove(node.key.name)
+ } else {
+ yield fixer.insertTextBefore(node, 'v-bind')
+
+ if (shorthandProp) {
+ // Replace `.` by `:`.
+ yield fixer.replaceText(node.key.name, ':')
+
+ // Insert `.prop` modifier if it doesn't exist.
+ const modifier = node.key.modifiers[0]
+ const isAutoGeneratedPropModifier =
+ modifier.name === 'prop' && modifier.rawName === ''
+ if (isAutoGeneratedPropModifier) {
+ yield fixer.insertTextBefore(modifier, '.prop')
+ }
+ }
+ }
}
+ })
+ }
- context.report({
- node,
- loc: node.loc,
- message: shorthand
- ? "Unexpected 'v-bind' before ':'."
- : "Expected 'v-bind' before ':'.",
- fix: (fixer) => shorthand
- ? fixer.removeRange([node.range[0], node.range[0] + 6])
- : fixer.insertTextBefore(node, 'v-bind')
- })
+ /** @param {VBindDirective} node */
+ function checkAttributeSameName(node) {
+ if (sameNameShorthand === 'ignore' || !isSameName(node)) return
+
+ const preferShorthand = sameNameShorthand === 'always'
+ const isShorthand = utils.isVBindSameNameShorthand(node)
+ if (isShorthand === preferShorthand) {
+ return
+ }
+
+ const messageId = preferShorthand
+ ? 'expectedShorthand'
+ : 'unexpectedShorthand'
+
+ context.report({
+ node,
+ loc: node.loc,
+ messageId,
+ *fix(fixer) {
+ if (preferShorthand) {
+ /** @type {Range} */
+ const valueRange = [getCutStart(node.key), node.range[1]]
+
+ yield fixer.removeRange(valueRange)
+ } else if (node.key.argument.type === 'VIdentifier') {
+ yield fixer.insertTextAfter(
+ node,
+ `="${kebabCaseToCamelCase(node.key.argument.rawName)}"`
+ )
+ }
+ }
+ })
+ }
+
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VBindDirective} node */
+ "VAttribute[directive=true][key.name.name='bind'][key.argument!=null]"(
+ node
+ ) {
+ checkAttributeSameName(node)
+ checkAttributeStyle(node)
}
})
}
diff --git a/lib/rules/v-for-delimiter-style.js b/lib/rules/v-for-delimiter-style.js
new file mode 100644
index 000000000..2b20cfd0a
--- /dev/null
+++ b/lib/rules/v-for-delimiter-style.js
@@ -0,0 +1,67 @@
+/**
+ * @fileoverview enforce `v-for` directive's delimiter style
+ * @author Flo Edelmann
+ * @copyright 2020 Flo Edelmann. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'layout',
+ docs: {
+ description: "enforce `v-for` directive's delimiter style",
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/v-for-delimiter-style.html'
+ },
+ fixable: 'code',
+ schema: [{ enum: ['in', 'of'] }],
+ messages: {
+ expected:
+ "Expected '{{preferredDelimiter}}' instead of '{{usedDelimiter}}' in 'v-for'."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const preferredDelimiter =
+ /** @type {string|undefined} */ (context.options[0]) || 'in'
+
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VForExpression} node */
+ VForExpression(node) {
+ const sourceCode = context.getSourceCode()
+ const tokenStore =
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+
+ const delimiterToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(
+ node.left.length > 0
+ ? node.left[node.left.length - 1]
+ : tokenStore.getFirstToken(node),
+ (token) => token.type !== 'Punctuator'
+ )
+ )
+
+ if (delimiterToken.value === preferredDelimiter) {
+ return
+ }
+
+ context.report({
+ node,
+ loc: node.loc,
+ messageId: 'expected',
+ data: {
+ preferredDelimiter,
+ usedDelimiter: delimiterToken.value
+ },
+ *fix(fixer) {
+ yield fixer.replaceText(delimiterToken, preferredDelimiter)
+ }
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/v-if-else-key.js b/lib/rules/v-if-else-key.js
new file mode 100644
index 000000000..d8e913670
--- /dev/null
+++ b/lib/rules/v-if-else-key.js
@@ -0,0 +1,317 @@
+/**
+ * @author Felipe Melendez
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// =============================================================================
+// Requirements
+// =============================================================================
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// =============================================================================
+// Rule Helpers
+// =============================================================================
+
+/**
+ * A conditional family is made up of a group of repeated components that are conditionally rendered
+ * using v-if, v-else-if, and v-else.
+ *
+ * @typedef {Object} ConditionalFamily
+ * @property {VElement} if - The node associated with the 'v-if' directive.
+ * @property {VElement[]} elseIf - An array of nodes associated with 'v-else-if' directives.
+ * @property {VElement | null} else - The node associated with the 'v-else' directive, or null if there isn't one.
+ */
+
+/**
+ * Checks if a given node has sibling nodes of the same type that are also conditionally rendered.
+ * This is used to determine if multiple instances of the same component are being conditionally
+ * rendered within the same parent scope.
+ *
+ * @param {VElement} node - The Vue component node to check for conditional rendering siblings.
+ * @param {string} componentName - The name of the component to check for sibling instances.
+ * @returns {boolean} True if there are sibling nodes of the same type and conditionally rendered, false otherwise.
+ */
+const hasConditionalRenderedSiblings = (node, componentName) => {
+ if (!node.parent || node.parent.type !== 'VElement') {
+ return false
+ }
+ return node.parent.children.some(
+ (sibling) =>
+ sibling !== node &&
+ sibling.type === 'VElement' &&
+ sibling.rawName === componentName &&
+ hasConditionalDirective(sibling)
+ )
+}
+
+/**
+ * Checks for the presence of a 'key' attribute in the given node. If the 'key' attribute is missing
+ * and the node is part of a conditional family a report is generated.
+ * The fix proposed adds a unique key based on the component's name and count,
+ * following the format '${kebabCase(componentName)}-${componentCount}', e.g., 'some-component-2'.
+ *
+ * @param {VElement} node - The Vue component node to check for a 'key' attribute.
+ * @param {RuleContext} context - The rule's context object, used for reporting.
+ * @param {string} componentName - Name of the component.
+ * @param {string} uniqueKey - A unique key for the repeated component, used for the fix.
+ * @param {Map} conditionalFamilies - Map of conditionally rendered components and their respective conditional directives.
+ */
+const checkForKey = (
+ node,
+ context,
+ componentName,
+ uniqueKey,
+ conditionalFamilies
+) => {
+ if (
+ !node.parent ||
+ node.parent.type !== 'VElement' ||
+ !hasConditionalRenderedSiblings(node, componentName)
+ ) {
+ return
+ }
+
+ const conditionalFamily = conditionalFamilies.get(node.parent)
+
+ if (!conditionalFamily || utils.hasAttribute(node, 'key')) {
+ return
+ }
+
+ const needsKey =
+ conditionalFamily.if === node ||
+ conditionalFamily.else === node ||
+ conditionalFamily.elseIf.includes(node)
+
+ if (needsKey) {
+ context.report({
+ node: node.startTag,
+ loc: node.startTag.loc,
+ messageId: 'requireKey',
+ data: { componentName },
+ fix(fixer) {
+ const afterComponentNamePosition =
+ node.startTag.range[0] + componentName.length + 1
+ return fixer.insertTextBeforeRange(
+ [afterComponentNamePosition, afterComponentNamePosition],
+ ` key="${uniqueKey}"`
+ )
+ }
+ })
+ }
+}
+
+/**
+ * Checks for the presence of conditional directives in the given node.
+ *
+ * @param {VElement} node - The node to check for conditional directives.
+ * @returns {boolean} Returns true if a conditional directive is found in the node or its parents,
+ * false otherwise.
+ */
+const hasConditionalDirective = (node) =>
+ utils.hasDirective(node, 'if') ||
+ utils.hasDirective(node, 'else-if') ||
+ utils.hasDirective(node, 'else')
+
+// =============================================================================
+// Rule Definition
+// =============================================================================
+
+/** @type {import('eslint').Rule.RuleModule} */
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description:
+ 'require key attribute for conditionally rendered repeated components',
+ categories: null,
+ url: 'https://eslint.vuejs.org/rules/v-if-else-key.html'
+ },
+ // eslint-disable-next-line eslint-plugin/require-meta-fixable -- fixer is not recognized
+ fixable: 'code',
+ schema: [],
+ messages: {
+ requireKey:
+ "Conditionally rendered repeated component '{{componentName}}' expected to have a 'key' attribute."
+ }
+ },
+ /**
+ * Creates and returns a rule object which checks usage of repeated components. If a component
+ * is used more than once, it checks for the presence of a key.
+ *
+ * @param {RuleContext} context - The context object.
+ * @returns {Object} A dictionary of functions to be called on traversal of the template body by
+ * the eslint parser.
+ */
+ create(context) {
+ /**
+ * Map to store conditionally rendered components and their respective conditional directives.
+ *
+ * @type {Map}
+ */
+ const conditionalFamilies = new Map()
+
+ /**
+ * Array of Maps to keep track of components and their usage counts along with the first
+ * node instance. Each Map represents a different scope level, and maps a component name to
+ * an object containing the count and a reference to the first node.
+ */
+ /** @type {Map[]} */
+ const componentUsageStack = [new Map()]
+
+ /**
+ * Checks if a given node represents a custom component without any conditional directives.
+ *
+ * @param {VElement} node - The AST node to check.
+ * @returns {boolean} True if the node represents a custom component without any conditional directives, false otherwise.
+ */
+ const isCustomComponentWithoutCondition = (node) =>
+ node.type === 'VElement' &&
+ utils.isCustomComponent(node) &&
+ !hasConditionalDirective(node)
+
+ /** Set of built-in Vue components that are exempt from the rule. */
+ /** @type {Set} */
+ const exemptTags = new Set(['component', 'slot', 'template'])
+
+ /** Set to keep track of nodes we've pushed to the stack. */
+ /** @type {Set} */
+ const pushedNodes = new Set()
+
+ /**
+ * Creates and returns an object representing a conditional family.
+ *
+ * @param {VElement} ifNode - The VElement associated with the 'v-if' directive.
+ * @returns {ConditionalFamily}
+ */
+ const createConditionalFamily = (ifNode) => ({
+ if: ifNode,
+ elseIf: [],
+ else: null
+ })
+
+ return utils.defineTemplateBodyVisitor(context, {
+ /**
+ * Callback to be executed when a Vue element is traversed. This function checks if the
+ * element is a component, increments the usage count of the component in the
+ * current scope, and checks for the key directive if the component is repeated.
+ *
+ * @param {VElement} node - The traversed Vue element.
+ */
+ VElement(node) {
+ if (exemptTags.has(node.rawName)) {
+ return
+ }
+
+ const condition =
+ utils.getDirective(node, 'if') ||
+ utils.getDirective(node, 'else-if') ||
+ utils.getDirective(node, 'else')
+
+ if (condition) {
+ const conditionType = condition.key.name.name
+
+ if (node.parent && node.parent.type === 'VElement') {
+ let conditionalFamily = conditionalFamilies.get(node.parent)
+
+ if (!conditionalFamily) {
+ conditionalFamily = createConditionalFamily(node)
+ conditionalFamilies.set(node.parent, conditionalFamily)
+ }
+
+ if (conditionalFamily) {
+ switch (conditionType) {
+ case 'if': {
+ conditionalFamily = createConditionalFamily(node)
+ conditionalFamilies.set(node.parent, conditionalFamily)
+ break
+ }
+ case 'else-if': {
+ conditionalFamily.elseIf.push(node)
+ break
+ }
+ case 'else': {
+ conditionalFamily.else = node
+ break
+ }
+ }
+ }
+ }
+ }
+
+ if (isCustomComponentWithoutCondition(node)) {
+ componentUsageStack.push(new Map())
+ return
+ }
+
+ if (!utils.isCustomComponent(node)) {
+ return
+ }
+
+ const componentName = node.rawName
+ const currentScope = componentUsageStack[componentUsageStack.length - 1]
+ const usageInfo = currentScope.get(componentName) || {
+ count: 0,
+ firstNode: null
+ }
+
+ if (hasConditionalDirective(node)) {
+ // Store the first node if this is the first occurrence
+ if (usageInfo.count === 0) {
+ usageInfo.firstNode = node
+ }
+
+ if (usageInfo.count > 0) {
+ const uniqueKey = `${casing.kebabCase(componentName)}-${
+ usageInfo.count + 1
+ }`
+ checkForKey(
+ node,
+ context,
+ componentName,
+ uniqueKey,
+ conditionalFamilies
+ )
+
+ // If this is the second occurrence, also apply a fix to the first occurrence
+ if (usageInfo.count === 1) {
+ const uniqueKeyForFirstInstance = `${casing.kebabCase(
+ componentName
+ )}-1`
+ checkForKey(
+ usageInfo.firstNode,
+ context,
+ componentName,
+ uniqueKeyForFirstInstance,
+ conditionalFamilies
+ )
+ }
+ }
+ usageInfo.count += 1
+ currentScope.set(componentName, usageInfo)
+ }
+ componentUsageStack.push(new Map())
+ pushedNodes.add(node)
+ },
+
+ 'VElement:exit'(node) {
+ if (exemptTags.has(node.rawName)) {
+ return
+ }
+ if (isCustomComponentWithoutCondition(node)) {
+ componentUsageStack.pop()
+ return
+ }
+ if (!utils.isCustomComponent(node)) {
+ return
+ }
+ if (pushedNodes.has(node)) {
+ componentUsageStack.pop()
+ pushedNodes.delete(node)
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/v-on-event-hyphenation.js b/lib/rules/v-on-event-hyphenation.js
new file mode 100644
index 000000000..c9fac76e8
--- /dev/null
+++ b/lib/rules/v-on-event-hyphenation.js
@@ -0,0 +1,138 @@
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+const { toRegExp } = require('../utils/regexp')
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description:
+ 'enforce v-on event naming style on custom components in template',
+ categories: ['vue3-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/v-on-event-hyphenation.html',
+ defaultOptions: {
+ vue3: ['always', { autofix: true }]
+ }
+ },
+ fixable: 'code',
+ schema: [
+ {
+ enum: ['always', 'never']
+ },
+ {
+ type: 'object',
+ properties: {
+ autofix: { type: 'boolean' },
+ ignore: {
+ type: 'array',
+ items: {
+ allOf: [
+ { type: 'string' },
+ { not: { type: 'string', pattern: ':exit$' } },
+ { not: { type: 'string', pattern: String.raw`^\s*$` } }
+ ]
+ },
+ uniqueItems: true,
+ additionalItems: false
+ },
+ ignoreTags: {
+ type: 'array',
+ items: { type: 'string' },
+ uniqueItems: true,
+ additionalItems: false
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ // eslint-disable-next-line eslint-plugin/report-message-format
+ mustBeHyphenated: "v-on event '{{text}}' must be hyphenated.",
+ // eslint-disable-next-line eslint-plugin/report-message-format
+ cannotBeHyphenated: "v-on event '{{text}}' can't be hyphenated."
+ }
+ },
+
+ /** @param {RuleContext} context */
+ create(context) {
+ const sourceCode = context.getSourceCode()
+ const option = context.options[0]
+ const optionsPayload = context.options[1]
+ const useHyphenated = option !== 'never'
+ /** @type {string[]} */
+ const ignoredAttributes = (optionsPayload && optionsPayload.ignore) || []
+ /** @type {RegExp[]} */
+ const ignoredTagsRegexps = (
+ (optionsPayload && optionsPayload.ignoreTags) ||
+ []
+ ).map(toRegExp)
+ const autofix = Boolean(optionsPayload && optionsPayload.autofix)
+
+ const caseConverter = casing.getConverter(
+ useHyphenated ? 'kebab-case' : 'camelCase'
+ )
+
+ /**
+ * @param {VDirective} node
+ * @param {VIdentifier} argument
+ * @param {string} name
+ */
+ function reportIssue(node, argument, name) {
+ const text = sourceCode.getText(node.key)
+
+ context.report({
+ node: node.key,
+ loc: node.loc,
+ messageId: useHyphenated ? 'mustBeHyphenated' : 'cannotBeHyphenated',
+ data: {
+ text
+ },
+ fix:
+ autofix &&
+ // It cannot be converted in snake_case.
+ !name.includes('_')
+ ? (fixer) => fixer.replaceText(argument, caseConverter(name))
+ : null
+ })
+ }
+
+ /**
+ * @param {string} value
+ */
+ function isIgnoredAttribute(value) {
+ const isIgnored = ignoredAttributes.some((attr) => value.includes(attr))
+
+ if (isIgnored) {
+ return true
+ }
+
+ return useHyphenated ? value.toLowerCase() === value : !/-/.test(value)
+ }
+
+ /** @param {string} name */
+ function isIgnoredTagName(name) {
+ return ignoredTagsRegexps.some((re) => re.test(name))
+ }
+
+ return utils.defineTemplateBodyVisitor(context, {
+ "VAttribute[directive=true][key.name.name='on']"(node) {
+ const element = node.parent.parent
+ if (
+ !utils.isCustomComponent(element) ||
+ isIgnoredTagName(element.rawName)
+ ) {
+ return
+ }
+ if (!node.key.argument || node.key.argument.type !== 'VIdentifier') {
+ return
+ }
+ const name = node.key.argument.rawName
+ if (!name || isIgnoredAttribute(name)) return
+
+ reportIssue(node, node.key.argument, name)
+ }
+ })
+ }
+}
diff --git a/lib/rules/v-on-handler-style.js b/lib/rules/v-on-handler-style.js
new file mode 100644
index 000000000..10ff9b6b1
--- /dev/null
+++ b/lib/rules/v-on-handler-style.js
@@ -0,0 +1,587 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef {import('eslint').ReportDescriptorFix} ReportDescriptorFix
+ * @typedef {'method' | 'inline' | 'inline-function'} HandlerKind
+ * @typedef {object} ObjectOption
+ * @property {boolean} [ignoreIncludesComment]
+ */
+
+/**
+ * @param {RuleContext} context
+ */
+function parseOptions(context) {
+ /** @type {[HandlerKind | HandlerKind[] | undefined, ObjectOption | undefined]} */
+ const options = /** @type {any} */ (context.options)
+ /** @type {HandlerKind[]} */
+ const allows = []
+ if (options[0]) {
+ if (Array.isArray(options[0])) {
+ allows.push(...options[0])
+ } else {
+ allows.push(options[0])
+ }
+ } else {
+ allows.push('method', 'inline-function')
+ }
+
+ const option = options[1] || {}
+ const ignoreIncludesComment = !!option.ignoreIncludesComment
+
+ return { allows, ignoreIncludesComment }
+}
+
+/**
+ * Check whether the given token is a quote.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a quote.
+ */
+function isQuote(token) {
+ return (
+ token != null &&
+ token.type === 'Punctuator' &&
+ (token.value === '"' || token.value === "'")
+ )
+}
+/**
+ * Check whether the given node is an identifier call expression. e.g. `foo()`
+ * @param {Expression} node The node to check.
+ * @returns {node is CallExpression & {callee: Identifier}}
+ */
+function isIdentifierCallExpression(node) {
+ if (node.type !== 'CallExpression') {
+ return false
+ }
+ if (node.optional) {
+ // optional chaining
+ return false
+ }
+ const callee = node.callee
+ return callee.type === 'Identifier'
+}
+
+/**
+ * Returns a call expression node if the given VOnExpression or BlockStatement consists
+ * of only a single identifier call expression.
+ * e.g.
+ * @click="foo()"
+ * @click="{ foo() }"
+ * @click="foo();;"
+ * @param {VOnExpression | BlockStatement} node
+ * @returns {CallExpression & {callee: Identifier} | null}
+ */
+function getIdentifierCallExpression(node) {
+ /** @type {ExpressionStatement} */
+ let exprStatement
+ let body = node.body
+ while (true) {
+ const statements = body.filter((st) => st.type !== 'EmptyStatement')
+ if (statements.length !== 1) {
+ return null
+ }
+ const statement = statements[0]
+ if (statement.type === 'ExpressionStatement') {
+ exprStatement = statement
+ break
+ }
+ if (statement.type === 'BlockStatement') {
+ body = statement.body
+ continue
+ }
+ return null
+ }
+ const expression = exprStatement.expression
+ if (!isIdentifierCallExpression(expression)) {
+ return null
+ }
+ return expression
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'enforce writing style for handlers in `v-on` directives',
+ categories: undefined,
+ url: 'https://eslint.vuejs.org/rules/v-on-handler-style.html'
+ },
+ fixable: 'code',
+ schema: [
+ {
+ oneOf: [
+ { enum: ['inline', 'inline-function'] },
+ {
+ type: 'array',
+ items: [
+ { const: 'method' },
+ { enum: ['inline', 'inline-function'] }
+ ],
+ uniqueItems: true,
+ additionalItems: false,
+ minItems: 2,
+ maxItems: 2
+ }
+ ]
+ },
+ {
+ type: 'object',
+ properties: {
+ ignoreIncludesComment: {
+ type: 'boolean'
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ preferMethodOverInline:
+ 'Prefer method handler over inline handler in v-on.',
+ preferMethodOverInlineWithoutIdCall:
+ 'Prefer method handler over inline handler in v-on. Note that you may need to create a new method.',
+ preferMethodOverInlineFunction:
+ 'Prefer method handler over inline function in v-on.',
+ preferMethodOverInlineFunctionWithoutIdCall:
+ 'Prefer method handler over inline function in v-on. Note that you may need to create a new method.',
+ preferInlineOverMethod:
+ 'Prefer inline handler over method handler in v-on.',
+ preferInlineOverInlineFunction:
+ 'Prefer inline handler over inline function in v-on.',
+ preferInlineOverInlineFunctionWithMultipleParams:
+ 'Prefer inline handler over inline function in v-on. Note that the custom event must be changed to a single payload.',
+ preferInlineFunctionOverMethod:
+ 'Prefer inline function over method handler in v-on.',
+ preferInlineFunctionOverInline:
+ 'Prefer inline function over inline handler in v-on.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const { allows, ignoreIncludesComment } = parseOptions(context)
+
+ /** @type {Set} */
+ const upperElements = new Set()
+ /** @type {Map} */
+ const methodParamCountMap = new Map()
+ /** @type {Identifier[]} */
+ const $eventIdentifiers = []
+
+ /**
+ * Verify for inline handler.
+ * @param {VOnExpression} node
+ * @param {HandlerKind} kind
+ * @returns {boolean} Returns `true` if reported.
+ */
+ function verifyForInlineHandler(node, kind) {
+ switch (kind) {
+ case 'method': {
+ return verifyCanUseMethodHandlerForInlineHandler(node)
+ }
+ case 'inline-function': {
+ reportCanUseInlineFunctionForInlineHandler(node)
+ return true
+ }
+ }
+ return false
+ }
+ /**
+ * Report for method handler.
+ * @param {Identifier} node
+ * @param {HandlerKind} kind
+ * @returns {boolean} Returns `true` if reported.
+ */
+ function reportForMethodHandler(node, kind) {
+ switch (kind) {
+ case 'inline':
+ case 'inline-function': {
+ context.report({
+ node,
+ messageId:
+ kind === 'inline'
+ ? 'preferInlineOverMethod'
+ : 'preferInlineFunctionOverMethod'
+ })
+ return true
+ }
+ }
+ // This path is currently not taken.
+ return false
+ }
+ /**
+ * Verify for inline function handler.
+ * @param {ArrowFunctionExpression | FunctionExpression} node
+ * @param {HandlerKind} kind
+ * @returns {boolean} Returns `true` if reported.
+ */
+ function verifyForInlineFunction(node, kind) {
+ switch (kind) {
+ case 'method': {
+ return verifyCanUseMethodHandlerForInlineFunction(node)
+ }
+ case 'inline': {
+ reportCanUseInlineHandlerForInlineFunction(node)
+ return true
+ }
+ }
+ return false
+ }
+
+ /**
+ * Get token information for the given VExpressionContainer node.
+ * @param {VExpressionContainer} node
+ */
+ function getVExpressionContainerTokenInfo(node) {
+ const sourceCode = context.getSourceCode()
+ const tokenStore = sourceCode.parserServices.getTemplateBodyTokenStore()
+ const tokens = tokenStore.getTokens(node, {
+ includeComments: true
+ })
+ const firstToken = tokens[0]
+ const lastToken = tokens[tokens.length - 1]
+
+ const hasQuote = isQuote(firstToken)
+ /** @type {Range} */
+ const rangeWithoutQuotes = hasQuote
+ ? [firstToken.range[1], lastToken.range[0]]
+ : [firstToken.range[0], lastToken.range[1]]
+
+ return {
+ rangeWithoutQuotes,
+ get hasComment() {
+ return tokens.some(
+ (token) => token.type === 'Block' || token.type === 'Line'
+ )
+ },
+ hasQuote
+ }
+ }
+
+ /**
+ * Checks whether the given node refers to a variable of the element.
+ * @param {Expression | VOnExpression} node
+ */
+ function hasReferenceUpperElementVariable(node) {
+ for (const element of upperElements) {
+ for (const vv of element.variables) {
+ for (const reference of vv.references) {
+ const { range } = reference.id
+ if (node.range[0] <= range[0] && range[1] <= node.range[1]) {
+ return true
+ }
+ }
+ }
+ }
+ return false
+ }
+ /**
+ * Check if `v-on:click="foo()"` can be converted to `v-on:click="foo"` and report if it can.
+ * @param {VOnExpression} node
+ * @returns {boolean} Returns `true` if reported.
+ */
+ function verifyCanUseMethodHandlerForInlineHandler(node) {
+ const { rangeWithoutQuotes, hasComment } =
+ getVExpressionContainerTokenInfo(node.parent)
+ if (ignoreIncludesComment && hasComment) {
+ return false
+ }
+
+ const idCallExpr = getIdentifierCallExpression(node)
+ if (
+ (!idCallExpr || idCallExpr.arguments.length > 0) &&
+ hasReferenceUpperElementVariable(node)
+ ) {
+ // It cannot be converted to method because it refers to the variable of the element.
+ // e.g.
+ return false
+ }
+
+ context.report({
+ node,
+ messageId: idCallExpr
+ ? 'preferMethodOverInline'
+ : 'preferMethodOverInlineWithoutIdCall',
+ fix: (fixer) => {
+ if (
+ hasComment /* The statement contains comment and cannot be fixed. */ ||
+ !idCallExpr /* The statement is not a simple identifier call and cannot be fixed. */ ||
+ idCallExpr.arguments.length > 0
+ ) {
+ return null
+ }
+ const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
+ if (paramCount != null && paramCount > 0) {
+ // The behavior of target method can change given the arguments.
+ return null
+ }
+ return fixer.replaceTextRange(
+ rangeWithoutQuotes,
+ context.getSourceCode().getText(idCallExpr.callee)
+ )
+ }
+ })
+ return true
+ }
+ /**
+ * Check if `v-on:click="() => foo()"` can be converted to `v-on:click="foo"` and report if it can.
+ * @param {ArrowFunctionExpression | FunctionExpression} node
+ * @returns {boolean} Returns `true` if reported.
+ */
+ function verifyCanUseMethodHandlerForInlineFunction(node) {
+ const { rangeWithoutQuotes, hasComment } =
+ getVExpressionContainerTokenInfo(
+ /** @type {VExpressionContainer} */ (node.parent)
+ )
+ if (ignoreIncludesComment && hasComment) {
+ return false
+ }
+
+ /** @type {CallExpression & {callee: Identifier} | null} */
+ let idCallExpr = null
+ if (node.body.type === 'BlockStatement') {
+ idCallExpr = getIdentifierCallExpression(node.body)
+ } else if (isIdentifierCallExpression(node.body)) {
+ idCallExpr = node.body
+ }
+ if (
+ (!idCallExpr || !isSameParamsAndArgs(idCallExpr)) &&
+ hasReferenceUpperElementVariable(node)
+ ) {
+ // It cannot be converted to method because it refers to the variable of the element.
+ // e.g.
+ return false
+ }
+
+ context.report({
+ node,
+ messageId: idCallExpr
+ ? 'preferMethodOverInlineFunction'
+ : 'preferMethodOverInlineFunctionWithoutIdCall',
+ fix: (fixer) => {
+ if (
+ hasComment /* The function contains comment and cannot be fixed. */ ||
+ !idCallExpr /* The function is not a simple identifier call and cannot be fixed. */
+ ) {
+ return null
+ }
+ if (!isSameParamsAndArgs(idCallExpr)) {
+ // It is not a call with the arguments given as is.
+ return null
+ }
+ const paramCount = methodParamCountMap.get(idCallExpr.callee.name)
+ if (
+ paramCount != null &&
+ paramCount !== idCallExpr.arguments.length
+ ) {
+ // The behavior of target method can change given the arguments.
+ return null
+ }
+ return fixer.replaceTextRange(
+ rangeWithoutQuotes,
+ context.getSourceCode().getText(idCallExpr.callee)
+ )
+ }
+ })
+ return true
+
+ /**
+ * Checks whether parameters are passed as arguments as-is.
+ * @param {CallExpression} expression
+ */
+ function isSameParamsAndArgs(expression) {
+ return (
+ node.params.length === expression.arguments.length &&
+ node.params.every((param, index) => {
+ if (param.type !== 'Identifier') {
+ return false
+ }
+ const arg = expression.arguments[index]
+ if (!arg || arg.type !== 'Identifier') {
+ return false
+ }
+ return param.name === arg.name
+ })
+ )
+ }
+ }
+ /**
+ * Report `v-on:click="foo()"` can be converted to `v-on:click="()=>foo()"`.
+ * @param {VOnExpression} node
+ * @returns {void}
+ */
+ function reportCanUseInlineFunctionForInlineHandler(node) {
+ context.report({
+ node,
+ messageId: 'preferInlineFunctionOverInline',
+ *fix(fixer) {
+ const has$Event = $eventIdentifiers.some(
+ ({ range }) =>
+ node.range[0] <= range[0] && range[1] <= node.range[1]
+ )
+ if (has$Event) {
+ /* The statements contains $event and cannot be fixed. */
+ return
+ }
+ const { rangeWithoutQuotes, hasQuote } =
+ getVExpressionContainerTokenInfo(node.parent)
+ if (!hasQuote) {
+ /* The statements is not enclosed in quotes and cannot be fixed. */
+ return
+ }
+ yield fixer.insertTextBeforeRange(rangeWithoutQuotes, '() => ')
+ const sourceCode = context.getSourceCode()
+ const tokenStore =
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+ const firstToken = tokenStore.getFirstToken(node)
+ const lastToken = tokenStore.getLastToken(node)
+ if (firstToken.value === '{' && lastToken.value === '}') return
+ if (
+ lastToken.value !== ';' &&
+ node.body.length === 1 &&
+ node.body[0].type === 'ExpressionStatement'
+ ) {
+ // it is a single expression
+ return
+ }
+ yield fixer.insertTextBefore(firstToken, '{')
+ yield fixer.insertTextAfter(lastToken, '}')
+ }
+ })
+ }
+ /**
+ * Report `v-on:click="() => foo()"` can be converted to `v-on:click="foo()"`.
+ * @param {ArrowFunctionExpression | FunctionExpression} node
+ * @returns {void}
+ */
+ function reportCanUseInlineHandlerForInlineFunction(node) {
+ // If a function has one parameter, you can turn it into an inline handler using $event.
+ // If a function has two or more parameters, it cannot be easily converted to an inline handler.
+ // However, users can use inline handlers by changing the payload of the component's custom event.
+ // So we report it regardless of the number of parameters.
+
+ context.report({
+ node,
+ messageId:
+ node.params.length > 1
+ ? 'preferInlineOverInlineFunctionWithMultipleParams'
+ : 'preferInlineOverInlineFunction',
+ fix:
+ node.params.length > 0
+ ? null /* The function has parameters and cannot be fixed. */
+ : (fixer) => {
+ let text = context.getSourceCode().getText(node.body)
+ if (node.body.type === 'BlockStatement') {
+ text = text.slice(1, -1) // strip braces
+ }
+ return fixer.replaceText(node, text)
+ }
+ })
+ }
+
+ return utils.defineTemplateBodyVisitor(
+ context,
+ {
+ VElement(node) {
+ upperElements.add(node)
+ },
+ 'VElement:exit'(node) {
+ upperElements.delete(node)
+ },
+ /** @param {VExpressionContainer} node */
+ "VAttribute[directive=true][key.name.name='on'][key.argument!=null] > VExpressionContainer.value:exit"(
+ node
+ ) {
+ const expression = node.expression
+ if (!expression) {
+ return
+ }
+ switch (expression.type) {
+ case 'VOnExpression': {
+ // e.g. v-on:click="foo()"
+ if (allows[0] === 'inline') {
+ return
+ }
+ for (const allow of allows) {
+ if (verifyForInlineHandler(expression, allow)) {
+ return
+ }
+ }
+ break
+ }
+ case 'Identifier': {
+ // e.g. v-on:click="foo"
+ if (allows[0] === 'method') {
+ return
+ }
+ for (const allow of allows) {
+ if (reportForMethodHandler(expression, allow)) {
+ return
+ }
+ }
+ break
+ }
+ case 'ArrowFunctionExpression':
+ case 'FunctionExpression': {
+ // e.g. v-on:click="()=>foo()"
+ if (allows[0] === 'inline-function') {
+ return
+ }
+ for (const allow of allows) {
+ if (verifyForInlineFunction(expression, allow)) {
+ return
+ }
+ }
+ break
+ }
+ default: {
+ return
+ }
+ }
+ },
+ ...(allows.includes('inline-function')
+ ? // Collect $event identifiers to check for side effects
+ // when converting from `v-on:click="foo($event)"` to `v-on:click="()=>foo($event)"` .
+ {
+ 'Identifier[name="$event"]'(node) {
+ $eventIdentifiers.push(node)
+ }
+ }
+ : {})
+ },
+ allows.includes('method')
+ ? // Collect method definition with params information to check for side effects.
+ // when converting from `v-on:click="foo()"` to `v-on:click="foo"`, or
+ // converting from `v-on:click="() => foo()"` to `v-on:click="foo"`.
+ utils.defineVueVisitor(context, {
+ onVueObjectEnter(node) {
+ for (const method of utils.iterateProperties(
+ node,
+ new Set(['methods'])
+ )) {
+ if (method.type !== 'object') {
+ // This branch is usually not passed.
+ continue
+ }
+ const value = method.property.value
+ if (
+ value.type === 'FunctionExpression' ||
+ value.type === 'ArrowFunctionExpression'
+ ) {
+ methodParamCountMap.set(
+ method.name,
+ value.params.some((p) => p.type === 'RestElement')
+ ? Number.POSITIVE_INFINITY
+ : value.params.length
+ )
+ }
+ }
+ }
+ })
+ : {}
+ )
+ }
+}
diff --git a/lib/rules/v-on-style.js b/lib/rules/v-on-style.js
index 6dbb6919f..eb5950026 100644
--- a/lib/rules/v-on-style.js
+++ b/lib/rules/v-on-style.js
@@ -5,36 +5,34 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
- type: 'layout',
+ type: 'suggestion',
docs: {
description: 'enforce `v-on` directive style',
- category: 'strongly-recommended',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/v-on-style.md'
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/v-on-style.html'
},
fixable: 'code',
- schema: [
- { enum: ['shorthand', 'longform'] }
- ]
+ schema: [{ enum: ['shorthand', 'longform'] }],
+ messages: {
+ expectedShorthand: "Expected '@' instead of 'v-on:'.",
+ expectedLonghand: "Expected 'v-on:' instead of '@'."
+ }
},
-
- create (context) {
- const shorthand = context.options[0] !== 'longform'
+ /** @param {RuleContext} context */
+ create(context) {
+ const preferShorthand = context.options[0] !== 'longform'
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='on'][key.argument!=null]" (node) {
- if (node.key.shorthand === shorthand) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='on'][key.argument!=null]"(
+ node
+ ) {
+ const shorthand = node.key.name.rawName === '@'
+ if (shorthand === preferShorthand) {
return
}
@@ -42,12 +40,11 @@ module.exports = {
context.report({
node,
loc: node.loc,
- message: shorthand
- ? "Expected '@' instead of 'v-on:'."
- : "Expected 'v-on:' instead of '@'.",
- fix: (fixer) => shorthand
- ? fixer.replaceTextRange([pos, pos + 5], '@')
- : fixer.replaceTextRange([pos, pos + 1], 'v-on:')
+ messageId: preferShorthand ? 'expectedShorthand' : 'expectedLonghand',
+ fix: (fixer) =>
+ preferShorthand
+ ? fixer.replaceTextRange([pos, pos + 5], '@')
+ : fixer.replaceTextRange([pos, pos + 1], 'v-on:')
})
}
})
diff --git a/lib/rules/v-slot-style.js b/lib/rules/v-slot-style.js
new file mode 100644
index 000000000..964550b98
--- /dev/null
+++ b/lib/rules/v-slot-style.js
@@ -0,0 +1,162 @@
+/**
+ * @author Toru Nagashima
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { pascalCase } = require('../utils/casing')
+const utils = require('../utils')
+
+/**
+ * @typedef {Object} Options
+ * @property {"shorthand" | "longform" | "v-slot"} atComponent The style for the default slot at a custom component directly.
+ * @property {"shorthand" | "longform" | "v-slot"} default The style for the default slot at a template wrapper.
+ * @property {"shorthand" | "longform"} named The style for named slots at a template wrapper.
+ */
+
+/**
+ * Normalize options.
+ * @param {any} options The raw options to normalize.
+ * @returns {Options} The normalized options.
+ */
+function normalizeOptions(options) {
+ /** @type {Options} */
+ const normalized = {
+ atComponent: 'v-slot',
+ default: 'shorthand',
+ named: 'shorthand'
+ }
+
+ if (typeof options === 'string') {
+ normalized.atComponent =
+ normalized.default =
+ normalized.named =
+ /** @type {"shorthand" | "longform"} */ (options)
+ } else if (options != null) {
+ /** @type {(keyof Options)[]} */
+ const keys = ['atComponent', 'default', 'named']
+ for (const key of keys) {
+ if (options[key] != null) {
+ normalized[key] = options[key]
+ }
+ }
+ }
+
+ return normalized
+}
+
+/**
+ * Get the expected style.
+ * @param {Options} options The options that defined expected types.
+ * @param {VDirective} node The `v-slot` node to check.
+ * @returns {"shorthand" | "longform" | "v-slot"} The expected style.
+ */
+function getExpectedStyle(options, node) {
+ const { argument } = node.key
+
+ if (
+ argument == null ||
+ (argument.type === 'VIdentifier' && argument.name === 'default')
+ ) {
+ const element = node.parent.parent
+ return element.name === 'template' ? options.default : options.atComponent
+ }
+ return options.named
+}
+
+/**
+ * Get the expected style.
+ * @param {VDirective} node The `v-slot` node to check.
+ * @returns {"shorthand" | "longform" | "v-slot"} The expected style.
+ */
+function getActualStyle(node) {
+ const { name, argument } = node.key
+
+ if (name.rawName === '#') {
+ return 'shorthand'
+ }
+ if (argument != null) {
+ return 'longform'
+ }
+ return 'v-slot'
+}
+
+module.exports = {
+ meta: {
+ type: 'suggestion',
+ docs: {
+ description: 'enforce `v-slot` directive style',
+ categories: ['vue3-strongly-recommended', 'vue2-strongly-recommended'],
+ url: 'https://eslint.vuejs.org/rules/v-slot-style.html'
+ },
+ fixable: 'code',
+ schema: [
+ {
+ oneOf: [
+ { enum: ['shorthand', 'longform'] },
+ {
+ type: 'object',
+ properties: {
+ atComponent: { enum: ['shorthand', 'longform', 'v-slot'] },
+ default: { enum: ['shorthand', 'longform', 'v-slot'] },
+ named: { enum: ['shorthand', 'longform'] }
+ },
+ additionalProperties: false
+ }
+ ]
+ }
+ ],
+ messages: {
+ expectedShorthand: "Expected '#{{argument}}' instead of '{{actual}}'.",
+ expectedLongform:
+ "Expected 'v-slot:{{argument}}' instead of '{{actual}}'.",
+ expectedVSlot: "Expected 'v-slot' instead of '{{actual}}'."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const sourceCode = context.getSourceCode()
+ const options = normalizeOptions(context.options[0])
+
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='slot']"(node) {
+ const expected = getExpectedStyle(options, node)
+ const actual = getActualStyle(node)
+ if (actual === expected) {
+ return
+ }
+
+ const { name, argument } = node.key
+ /** @type {Range} */
+ const range = [name.range[0], (argument || name).range[1]]
+ const argumentText = argument ? sourceCode.getText(argument) : 'default'
+ context.report({
+ node,
+ messageId: `expected${pascalCase(expected)}`,
+ data: {
+ actual: sourceCode.text.slice(range[0], range[1]),
+ argument: argumentText
+ },
+
+ fix(fixer) {
+ switch (expected) {
+ case 'shorthand': {
+ return fixer.replaceTextRange(range, `#${argumentText}`)
+ }
+ case 'longform': {
+ return fixer.replaceTextRange(range, `v-slot:${argumentText}`)
+ }
+ case 'v-slot': {
+ return fixer.replaceTextRange(range, 'v-slot')
+ }
+ default: {
+ return null
+ }
+ }
+ }
+ })
+ }
+ })
+ }
+}
diff --git a/lib/rules/valid-attribute-name.js b/lib/rules/valid-attribute-name.js
new file mode 100644
index 000000000..51d52a1b6
--- /dev/null
+++ b/lib/rules/valid-attribute-name.js
@@ -0,0 +1,69 @@
+/**
+ * @author Doug Wade
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const xnv = require('xml-name-validator')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'require valid attribute names',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-attribute-name.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ attribute: 'Attribute name {{name}} is not valid.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /**
+ * @param {string | VIdentifier} key
+ * @return {string}
+ */
+ const getName = (key) => (typeof key === 'string' ? key : key.name)
+
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VDirective | VAttribute} node */
+ VAttribute(node) {
+ if (utils.isCustomComponent(node.parent.parent)) {
+ return
+ }
+
+ const name = getName(node.key.name)
+
+ if (
+ node.directive &&
+ name === 'bind' &&
+ node.key.argument &&
+ node.key.argument.type === 'VIdentifier' &&
+ !xnv.name(node.key.argument.name)
+ ) {
+ context.report({
+ node,
+ messageId: 'attribute',
+ data: {
+ name: node.key.argument.name
+ }
+ })
+ }
+
+ if (!node.directive && !xnv.name(name)) {
+ context.report({
+ node,
+ messageId: 'attribute',
+ data: {
+ name
+ }
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/valid-define-emits.js b/lib/rules/valid-define-emits.js
new file mode 100644
index 000000000..8d2306c23
--- /dev/null
+++ b/lib/rules/valid-define-emits.js
@@ -0,0 +1,144 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { findVariable } = require('@eslint-community/eslint-utils')
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce valid `defineEmits` compiler macro',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-define-emits.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ hasTypeAndArg: '`defineEmits` has both a type-only emit and an argument.',
+ referencingLocally:
+ '`defineEmits` is referencing locally declared variables.',
+ multiple: '`defineEmits` has been called multiple times.',
+ notDefined: 'Custom events are not defined.',
+ definedInBoth:
+ 'Custom events are defined in both `defineEmits` and `export default {}`.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const scriptSetup = utils.getScriptSetupElement(context)
+ if (!scriptSetup) {
+ return {}
+ }
+
+ /** @type {Set} */
+ const emitsDefExpressions = new Set()
+ let hasDefaultExport = false
+ /** @type {CallExpression[]} */
+ const defineEmitsNodes = []
+ /** @type {CallExpression | null} */
+ let emptyDefineEmits = null
+
+ return utils.compositingVisitors(
+ utils.defineScriptSetupVisitor(context, {
+ onDefineEmitsEnter(node) {
+ defineEmitsNodes.push(node)
+
+ const typeArguments =
+ 'typeArguments' in node ? node.typeArguments : node.typeParameters
+ if (node.arguments.length > 0) {
+ if (typeArguments && typeArguments.params.length > 0) {
+ // `defineEmits` has both a literal type and an argument.
+ context.report({
+ node,
+ messageId: 'hasTypeAndArg'
+ })
+ return
+ }
+
+ emitsDefExpressions.add(node.arguments[0])
+ } else {
+ if (!typeArguments || typeArguments.params.length === 0) {
+ emptyDefineEmits = node
+ }
+ }
+ },
+ Identifier(node) {
+ for (const defineEmits of emitsDefExpressions) {
+ if (utils.inRange(defineEmits.range, node)) {
+ const variable = findVariable(utils.getScope(context, node), node)
+ if (
+ variable &&
+ variable.references.some((ref) => ref.identifier === node) &&
+ variable.defs.length > 0 &&
+ variable.defs.every(
+ (def) =>
+ def.type !== 'ImportBinding' &&
+ utils.inRange(scriptSetup.range, def.name) &&
+ !utils.inRange(defineEmits.range, def.name)
+ )
+ ) {
+ if (utils.withinTypeNode(node)) {
+ continue
+ }
+ //`defineEmits` is referencing locally declared variables.
+ context.report({
+ node,
+ messageId: 'referencingLocally'
+ })
+ }
+ }
+ }
+ }
+ }),
+ utils.defineVueVisitor(context, {
+ onVueObjectEnter(node, { type }) {
+ if (type !== 'export' || utils.inRange(scriptSetup.range, node)) {
+ return
+ }
+
+ hasDefaultExport = Boolean(utils.findProperty(node, 'emits'))
+ }
+ }),
+ {
+ 'Program:exit'() {
+ if (defineEmitsNodes.length === 0) {
+ return
+ }
+ if (defineEmitsNodes.length > 1) {
+ // `defineEmits` has been called multiple times.
+ for (const node of defineEmitsNodes) {
+ context.report({
+ node,
+ messageId: 'multiple'
+ })
+ }
+ return
+ }
+ if (emptyDefineEmits) {
+ if (!hasDefaultExport) {
+ // Custom events are not defined.
+ context.report({
+ node: emptyDefineEmits,
+ messageId: 'notDefined'
+ })
+ }
+ } else {
+ if (hasDefaultExport) {
+ // Custom events are defined in both `defineEmits` and `export default {}`.
+ for (const node of defineEmitsNodes) {
+ context.report({
+ node,
+ messageId: 'definedInBoth'
+ })
+ }
+ }
+ }
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/valid-define-options.js b/lib/rules/valid-define-options.js
new file mode 100644
index 000000000..12771b8fe
--- /dev/null
+++ b/lib/rules/valid-define-options.js
@@ -0,0 +1,127 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { findVariable } = require('@eslint-community/eslint-utils')
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce valid `defineOptions` compiler macro',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-define-options.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ referencingLocally:
+ '`defineOptions` is referencing locally declared variables.',
+ multiple: '`defineOptions` has been called multiple times.',
+ notDefined: 'Options are not defined.',
+ disallowProp:
+ '`defineOptions()` cannot be used to declare `{{propName}}`. Use `{{insteadMacro}}()` instead.',
+ typeArgs: '`defineOptions()` cannot accept type arguments.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const scriptSetup = utils.getScriptSetupElement(context)
+ if (!scriptSetup) {
+ return {}
+ }
+
+ /** @type {Set} */
+ const optionsDefExpressions = new Set()
+ /** @type {CallExpression[]} */
+ const defineOptionsNodes = []
+
+ return utils.compositingVisitors(
+ utils.defineScriptSetupVisitor(context, {
+ onDefineOptionsEnter(node) {
+ defineOptionsNodes.push(node)
+
+ if (node.arguments.length > 0) {
+ const define = node.arguments[0]
+ if (define.type === 'ObjectExpression') {
+ for (const [propName, insteadMacro] of [
+ ['props', 'defineProps'],
+ ['emits', 'defineEmits'],
+ ['expose', 'defineExpose'],
+ ['slots', 'defineSlots']
+ ]) {
+ const prop = utils.findProperty(define, propName)
+ if (prop) {
+ context.report({
+ node,
+ messageId: 'disallowProp',
+ data: { propName, insteadMacro }
+ })
+ }
+ }
+ }
+
+ optionsDefExpressions.add(node.arguments[0])
+ } else {
+ context.report({
+ node,
+ messageId: 'notDefined'
+ })
+ }
+
+ const typeArguments =
+ 'typeArguments' in node ? node.typeArguments : node.typeParameters
+ if (typeArguments) {
+ context.report({
+ node: typeArguments,
+ messageId: 'typeArgs'
+ })
+ }
+ },
+ Identifier(node) {
+ for (const defineOptions of optionsDefExpressions) {
+ if (utils.inRange(defineOptions.range, node)) {
+ const variable = findVariable(utils.getScope(context, node), node)
+ if (
+ variable &&
+ variable.references.some((ref) => ref.identifier === node) &&
+ variable.defs.length > 0 &&
+ variable.defs.every(
+ (def) =>
+ def.type !== 'ImportBinding' &&
+ utils.inRange(scriptSetup.range, def.name) &&
+ !utils.inRange(defineOptions.range, def.name)
+ )
+ ) {
+ if (utils.withinTypeNode(node)) {
+ continue
+ }
+ //`defineOptions` is referencing locally declared variables.
+ context.report({
+ node,
+ messageId: 'referencingLocally'
+ })
+ }
+ }
+ }
+ }
+ }),
+ {
+ 'Program:exit'() {
+ if (defineOptionsNodes.length > 1) {
+ // `defineOptions` has been called multiple times.
+ for (const node of defineOptionsNodes) {
+ context.report({
+ node,
+ messageId: 'multiple'
+ })
+ }
+ }
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/valid-define-props.js b/lib/rules/valid-define-props.js
new file mode 100644
index 000000000..2ba81b188
--- /dev/null
+++ b/lib/rules/valid-define-props.js
@@ -0,0 +1,145 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const { findVariable } = require('@eslint-community/eslint-utils')
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce valid `defineProps` compiler macro',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-define-props.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ hasTypeAndArg:
+ '`defineProps` has both a type-only props and an argument.',
+ referencingLocally:
+ '`defineProps` is referencing locally declared variables.',
+ multiple: '`defineProps` has been called multiple times.',
+ notDefined: 'Props are not defined.',
+ definedInBoth:
+ 'Props are defined in both `defineProps` and `export default {}`.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const scriptSetup = utils.getScriptSetupElement(context)
+ if (!scriptSetup) {
+ return {}
+ }
+
+ /** @type {Set} */
+ const propsDefExpressions = new Set()
+ let hasDefaultExport = false
+ /** @type {CallExpression[]} */
+ const definePropsNodes = []
+ /** @type {CallExpression | null} */
+ let emptyDefineProps = null
+
+ return utils.compositingVisitors(
+ utils.defineScriptSetupVisitor(context, {
+ onDefinePropsEnter(node) {
+ definePropsNodes.push(node)
+
+ const typeArguments =
+ 'typeArguments' in node ? node.typeArguments : node.typeParameters
+ if (node.arguments.length > 0) {
+ if (typeArguments && typeArguments.params.length > 0) {
+ // `defineProps` has both a literal type and an argument.
+ context.report({
+ node,
+ messageId: 'hasTypeAndArg'
+ })
+ return
+ }
+
+ propsDefExpressions.add(node.arguments[0])
+ } else {
+ if (!typeArguments || typeArguments.params.length === 0) {
+ emptyDefineProps = node
+ }
+ }
+ },
+ Identifier(node) {
+ for (const defineProps of propsDefExpressions) {
+ if (utils.inRange(defineProps.range, node)) {
+ const variable = findVariable(utils.getScope(context, node), node)
+ if (
+ variable &&
+ variable.references.some((ref) => ref.identifier === node) &&
+ variable.defs.length > 0 &&
+ variable.defs.every(
+ (def) =>
+ def.type !== 'ImportBinding' &&
+ utils.inRange(scriptSetup.range, def.name) &&
+ !utils.inRange(defineProps.range, def.name)
+ )
+ ) {
+ if (utils.withinTypeNode(node)) {
+ continue
+ }
+ //`defineProps` is referencing locally declared variables.
+ context.report({
+ node,
+ messageId: 'referencingLocally'
+ })
+ }
+ }
+ }
+ }
+ }),
+ utils.defineVueVisitor(context, {
+ onVueObjectEnter(node, { type }) {
+ if (type !== 'export' || utils.inRange(scriptSetup.range, node)) {
+ return
+ }
+
+ hasDefaultExport = Boolean(utils.findProperty(node, 'props'))
+ }
+ }),
+ {
+ 'Program:exit'() {
+ if (definePropsNodes.length === 0) {
+ return
+ }
+ if (definePropsNodes.length > 1) {
+ // `defineProps` has been called multiple times.
+ for (const node of definePropsNodes) {
+ context.report({
+ node,
+ messageId: 'multiple'
+ })
+ }
+ return
+ }
+ if (emptyDefineProps) {
+ if (!hasDefaultExport) {
+ // Props are not defined.
+ context.report({
+ node: emptyDefineProps,
+ messageId: 'notDefined'
+ })
+ }
+ } else {
+ if (hasDefaultExport) {
+ // Props are defined in both `defineProps` and `export default {}`.
+ for (const node of definePropsNodes) {
+ context.report({
+ node,
+ messageId: 'definedInBoth'
+ })
+ }
+ }
+ }
+ }
+ }
+ )
+ }
+}
diff --git a/lib/rules/valid-model-definition.js b/lib/rules/valid-model-definition.js
new file mode 100644
index 000000000..6d82fca32
--- /dev/null
+++ b/lib/rules/valid-model-definition.js
@@ -0,0 +1,54 @@
+/**
+ * @fileoverview Requires valid keys in model option.
+ * @author Alex Sokolov
+ */
+'use strict'
+
+const utils = require('../utils')
+
+const VALID_MODEL_KEYS = new Set(['prop', 'event'])
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'require valid keys in model option',
+ categories: ['vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-model-definition.html'
+ },
+ fixable: null,
+ deprecated: true,
+ schema: [],
+ messages: {
+ invalidKey: "Invalid key '{{name}}' in model option."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.executeOnVue(context, (obj) => {
+ const modelProperty = utils.findProperty(obj, 'model')
+ if (!modelProperty || modelProperty.value.type !== 'ObjectExpression') {
+ return
+ }
+
+ for (const p of modelProperty.value.properties) {
+ if (p.type !== 'Property') {
+ continue
+ }
+ const name = utils.getStaticPropertyName(p)
+ if (!name) {
+ continue
+ }
+ if (!VALID_MODEL_KEYS.has(name)) {
+ context.report({
+ node: p,
+ messageId: 'invalidKey',
+ data: {
+ name
+ }
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/valid-next-tick.js b/lib/rules/valid-next-tick.js
new file mode 100644
index 000000000..c384f6ac0
--- /dev/null
+++ b/lib/rules/valid-next-tick.js
@@ -0,0 +1,211 @@
+/**
+ * @fileoverview enforce valid `nextTick` function calls
+ * @author Flo Edelmann
+ * @copyright 2021 Flo Edelmann. All rights reserved.
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const { findVariable } = require('@eslint-community/eslint-utils')
+
+/**
+ * @param {Identifier} identifier
+ * @param {RuleContext} context
+ * @returns {ASTNode|undefined}
+ */
+function getVueNextTickNode(identifier, context) {
+ // Instance API: this.$nextTick()
+ if (
+ identifier.name === '$nextTick' &&
+ identifier.parent.type === 'MemberExpression' &&
+ utils.isThis(identifier.parent.object, context)
+ ) {
+ return identifier.parent
+ }
+
+ // Vue 2 Global API: Vue.nextTick()
+ if (
+ identifier.name === 'nextTick' &&
+ identifier.parent.type === 'MemberExpression' &&
+ identifier.parent.object.type === 'Identifier' &&
+ identifier.parent.object.name === 'Vue'
+ ) {
+ return identifier.parent
+ }
+
+ // Vue 3 Global API: import { nextTick as nt } from 'vue'; nt()
+ const variable = findVariable(utils.getScope(context, identifier), identifier)
+
+ if (variable != null && variable.defs.length === 1) {
+ const def = variable.defs[0]
+ if (
+ def.type === 'ImportBinding' &&
+ def.node.type === 'ImportSpecifier' &&
+ def.node.imported.type === 'Identifier' &&
+ def.node.imported.name === 'nextTick' &&
+ def.node.parent.type === 'ImportDeclaration' &&
+ def.node.parent.source.value === 'vue'
+ ) {
+ return identifier
+ }
+ }
+
+ return undefined
+}
+
+/**
+ * @param {CallExpression} callExpression
+ * @returns {boolean}
+ */
+function isAwaitedPromise(callExpression) {
+ if (callExpression.parent.type === 'AwaitExpression') {
+ // cases like `await nextTick()`
+ return true
+ }
+
+ if (callExpression.parent.type === 'ReturnStatement') {
+ // cases like `return nextTick()`
+ return true
+ }
+ if (
+ callExpression.parent.type === 'ArrowFunctionExpression' &&
+ callExpression.parent.body === callExpression
+ ) {
+ // cases like `() => nextTick()`
+ return true
+ }
+
+ if (
+ callExpression.parent.type === 'MemberExpression' &&
+ callExpression.parent.property.type === 'Identifier' &&
+ callExpression.parent.property.name === 'then'
+ ) {
+ // cases like `nextTick().then()`
+ return true
+ }
+
+ if (
+ callExpression.parent.type === 'VariableDeclarator' ||
+ callExpression.parent.type === 'AssignmentExpression'
+ ) {
+ // cases like `let foo = nextTick()` or `foo = nextTick()`
+ return true
+ }
+
+ if (
+ callExpression.parent.type === 'ArrayExpression' &&
+ callExpression.parent.parent.type === 'CallExpression' &&
+ callExpression.parent.parent.callee.type === 'MemberExpression' &&
+ callExpression.parent.parent.callee.object.type === 'Identifier' &&
+ callExpression.parent.parent.callee.object.name === 'Promise' &&
+ callExpression.parent.parent.callee.property.type === 'Identifier'
+ ) {
+ // cases like `Promise.all([nextTick()])`
+ return true
+ }
+
+ return false
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce valid `nextTick` function calls',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-next-tick.html'
+ },
+ fixable: 'code',
+ hasSuggestions: true,
+ schema: [],
+ messages: {
+ shouldBeFunction: '`nextTick` is a function.',
+ missingCallbackOrAwait:
+ 'Await the Promise returned by `nextTick` or pass a callback function.',
+ addAwait: 'Add missing `await` statement.',
+ tooManyParameters: '`nextTick` expects zero or one parameters.',
+ eitherAwaitOrCallback:
+ 'Either await the Promise or pass a callback function to `nextTick`.'
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineVueVisitor(context, {
+ /** @param {Identifier} node */
+ Identifier(node) {
+ const nextTickNode = getVueNextTickNode(node, context)
+ if (!nextTickNode || !nextTickNode.parent) {
+ return
+ }
+
+ let parentNode = nextTickNode.parent
+
+ // skip conditional expressions like `foo ? nextTick : bar`
+ if (parentNode.type === 'ConditionalExpression') {
+ parentNode = parentNode.parent
+ }
+
+ if (
+ parentNode.type === 'CallExpression' &&
+ parentNode.callee !== nextTickNode
+ ) {
+ // cases like `foo.then(nextTick)` are allowed
+ return
+ }
+
+ if (
+ parentNode.type === 'VariableDeclarator' ||
+ parentNode.type === 'AssignmentExpression'
+ ) {
+ // cases like `let foo = nextTick` or `foo = nextTick` are allowed
+ return
+ }
+
+ if (parentNode.type !== 'CallExpression') {
+ context.report({
+ node,
+ messageId: 'shouldBeFunction',
+ fix(fixer) {
+ return fixer.insertTextAfter(node, '()')
+ }
+ })
+ return
+ }
+
+ if (parentNode.arguments.length === 0) {
+ if (!isAwaitedPromise(parentNode)) {
+ context.report({
+ node,
+ messageId: 'missingCallbackOrAwait',
+ suggest: [
+ {
+ messageId: 'addAwait',
+ fix(fixer) {
+ return fixer.insertTextBefore(parentNode, 'await ')
+ }
+ }
+ ]
+ })
+ }
+ return
+ }
+
+ if (parentNode.arguments.length > 1) {
+ context.report({
+ node,
+ messageId: 'tooManyParameters'
+ })
+ return
+ }
+
+ if (isAwaitedPromise(parentNode)) {
+ context.report({
+ node,
+ messageId: 'eitherAwaitOrCallback'
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/valid-template-root.js b/lib/rules/valid-template-root.js
index acee65bbe..c604a43a8 100644
--- a/lib/rules/valid-template-root.js
+++ b/lib/rules/valid-template-root.js
@@ -5,33 +5,31 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid template root',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-template-root.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-template-root.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ emptySrc:
+ "The template root with 'src' attribute is required to be empty.",
+ noChild: 'The template requires child element.'
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const sourceCode = context.getSourceCode()
return {
- Program (program) {
+ /** @param {Program} program */
+ Program(program) {
const element = program.templateBody
if (element == null) {
return
@@ -39,72 +37,27 @@ module.exports = {
const hasSrc = utils.hasAttribute(element, 'src')
const rootElements = []
- let extraText = null
- let extraElement = null
- let vIf = false
+
for (const child of element.children) {
- if (child.type === 'VElement') {
- if (rootElements.length === 0 && !hasSrc) {
- rootElements.push(child)
- vIf = utils.hasDirective(child, 'if')
- } else if (vIf && utils.hasDirective(child, 'else-if')) {
- rootElements.push(child)
- } else if (vIf && utils.hasDirective(child, 'else')) {
- rootElements.push(child)
- vIf = false
- } else {
- extraElement = child
- }
- } else if (sourceCode.getText(child).trim() !== '') {
- extraText = child
+ if (sourceCode.getText(child).trim() !== '') {
+ rootElements.push(child)
}
}
- if (hasSrc && (extraText != null || extraElement != null)) {
- context.report({
- node: extraText || extraElement,
- loc: (extraText || extraElement).loc,
- message: "The template root with 'src' attribute is required to be empty."
- })
- } else if (extraText != null) {
- context.report({
- node: extraText,
- loc: extraText.loc,
- message: 'The template root requires an element rather than texts.'
- })
- } else if (extraElement != null) {
- context.report({
- node: extraElement,
- loc: extraElement.loc,
- message: 'The template root requires exactly one element.'
- })
+ if (hasSrc && rootElements.length > 0) {
+ for (const element of rootElements) {
+ context.report({
+ node: element,
+ loc: element.loc,
+ messageId: 'emptySrc'
+ })
+ }
} else if (rootElements.length === 0 && !hasSrc) {
context.report({
node: element,
loc: element.loc,
- message: 'The template root requires exactly one element.'
+ messageId: 'noChild'
})
- } else {
- for (const element of rootElements) {
- const tag = element.startTag
- const name = element.name
-
- if (name === 'template' || name === 'slot') {
- context.report({
- node: tag,
- loc: tag.loc,
- message: "The template root disallows '<{{name}}>' elements.",
- data: { name }
- })
- }
- if (utils.hasDirective(element, 'for')) {
- context.report({
- node: tag,
- loc: tag.loc,
- message: "The template root disallows 'v-for' directives."
- })
- }
- }
}
}
}
diff --git a/lib/rules/valid-v-bind-sync.js b/lib/rules/valid-v-bind-sync.js
new file mode 100644
index 000000000..ba04d6117
--- /dev/null
+++ b/lib/rules/valid-v-bind-sync.js
@@ -0,0 +1,159 @@
+/**
+ * @fileoverview enforce valid `.sync` modifier on `v-bind` directives
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * Check whether the given node is valid or not.
+ * @param {VElement} node The element node to check.
+ * @returns {boolean} `true` if the node is valid.
+ */
+function isValidElement(node) {
+ if (!utils.isCustomComponent(node)) {
+ // non Vue-component
+ return false
+ }
+ return true
+}
+
+/**
+ * Check whether the given node is a MemberExpression containing an optional chaining.
+ * e.g.
+ * - `a?.b`
+ * - `a?.b.c`
+ * @param {ASTNode} node The node to check.
+ * @returns {boolean} `true` if the node is a MemberExpression containing an optional chaining.
+ */
+function isOptionalChainingMemberExpression(node) {
+ return (
+ node.type === 'ChainExpression' &&
+ node.expression.type === 'MemberExpression'
+ )
+}
+
+/**
+ * Check whether the given node can be LHS (left-hand side).
+ * @param {ASTNode} node The node to check.
+ * @returns {boolean} `true` if the node can be LHS.
+ */
+function isLhs(node) {
+ return node.type === 'Identifier' || node.type === 'MemberExpression'
+}
+
+/**
+ * Check whether the given node is a MemberExpression of a possibly null object.
+ * e.g.
+ * - `(a?.b).c`
+ * - `(null).foo`
+ * @param {ASTNode} node The node to check.
+ * @returns {boolean} `true` if the node is a MemberExpression of a possibly null object.
+ */
+function maybeNullObjectMemberExpression(node) {
+ if (node.type !== 'MemberExpression') {
+ return false
+ }
+ const { object } = node
+ if (object.type === 'ChainExpression') {
+ // `(a?.b).c`
+ return true
+ }
+ if (object.type === 'Literal' && object.value === null && !object.bigint) {
+ // `(null).foo`
+ return true
+ }
+ if (object.type === 'MemberExpression') {
+ return maybeNullObjectMemberExpression(object)
+ }
+ return false
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce valid `.sync` modifier on `v-bind` directives',
+ categories: ['vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-bind-sync.html'
+ },
+ fixable: null,
+ deprecated: true,
+ schema: [],
+ messages: {
+ unexpectedInvalidElement:
+ "'.sync' modifiers aren't supported on <{{name}}> non Vue-components.",
+ unexpectedOptionalChaining:
+ "Optional chaining cannot appear in 'v-bind' with '.sync' modifiers.",
+ unexpectedNonLhsExpression:
+ "'.sync' modifiers require the attribute value which is valid as LHS.",
+ unexpectedNullObject:
+ "'.sync' modifier has potential null object property access.",
+ unexpectedUpdateIterationVariable:
+ "'.sync' modifiers cannot update the iteration variable '{{varName}}' itself."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='bind']"(node) {
+ if (!node.key.modifiers.map((mod) => mod.name).includes('sync')) {
+ return
+ }
+ const element = node.parent.parent
+ const name = element.name
+
+ if (!isValidElement(element)) {
+ context.report({
+ node,
+ messageId: 'unexpectedInvalidElement',
+ data: { name }
+ })
+ }
+
+ if (!node.value) {
+ return
+ }
+
+ const expression = node.value.expression
+ if (!expression) {
+ // Parsing error
+ return
+ }
+ if (isOptionalChainingMemberExpression(expression)) {
+ context.report({
+ node: expression,
+ messageId: 'unexpectedOptionalChaining'
+ })
+ } else if (!isLhs(expression)) {
+ context.report({
+ node: expression,
+ messageId: 'unexpectedNonLhsExpression'
+ })
+ } else if (maybeNullObjectMemberExpression(expression)) {
+ context.report({
+ node: expression,
+ messageId: 'unexpectedNullObject'
+ })
+ }
+
+ for (const reference of node.value.references) {
+ const id = reference.id
+ if (id.parent.type !== 'VExpressionContainer') {
+ continue
+ }
+ const variable = reference.variable
+ if (variable) {
+ context.report({
+ node: expression,
+ messageId: 'unexpectedUpdateIterationVariable',
+ data: { varName: id.name }
+ })
+ }
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/valid-v-bind.js b/lib/rules/valid-v-bind.js
index f7e822463..0f44dad26 100644
--- a/lib/rules/valid-v-bind.js
+++ b/lib/rules/valid-v-bind.js
@@ -5,53 +5,45 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
-const VALID_MODIFIERS = new Set(['prop', 'camel', 'sync'])
-
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
+const VALID_MODIFIERS = new Set(['prop', 'camel', 'sync', 'attr'])
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-bind` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-bind.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-bind.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unsupportedModifier:
+ "'v-bind' directives don't support the modifier '{{name}}'.",
+ expectedValue: "'v-bind' directives require an attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='bind']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='bind']"(node) {
for (const modifier of node.key.modifiers) {
- if (!VALID_MODIFIERS.has(modifier)) {
+ if (!VALID_MODIFIERS.has(modifier.name)) {
context.report({
- node,
- loc: node.key.loc,
- message: "'v-bind' directives don't support the modifier '{{name}}'.",
- data: { name: modifier }
+ node: modifier,
+ messageId: 'unsupportedModifier',
+ data: { name: modifier.name }
})
}
}
- if (!utils.hasAttributeValue(node)) {
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
context.report({
node,
- loc: node.loc,
- message: "'v-bind' directives require an attribute value."
+ messageId: 'expectedValue'
})
}
}
diff --git a/lib/rules/valid-v-cloak.js b/lib/rules/valid-v-cloak.js
index 7f1780b0b..5ff956818 100644
--- a/lib/rules/valid-v-cloak.js
+++ b/lib/rules/valid-v-cloak.js
@@ -5,50 +5,49 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-cloak` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-cloak.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-cloak.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unexpectedArgument: "'v-cloak' directives require no argument.",
+ unexpectedModifier: "'v-cloak' directives require no modifier.",
+ unexpectedValue: "'v-cloak' directives require no attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='cloak']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='cloak']"(node) {
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-cloak' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-cloak' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
if (node.value) {
context.report({
- node,
- loc: node.loc,
- message: "'v-cloak' directives require no attribute value."
+ node: node.value,
+ messageId: 'unexpectedValue'
})
}
}
diff --git a/lib/rules/valid-v-else-if.js b/lib/rules/valid-v-else-if.js
index 644edbe45..b94437466 100644
--- a/lib/rules/valid-v-else-if.js
+++ b/lib/rules/valid-v-else-if.js
@@ -5,73 +5,75 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-else-if` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-else-if.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-else-if.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ missingVIf:
+ "'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive.",
+ withVIf:
+ "'v-else-if' and 'v-if' directives can't exist on the same element.",
+ withVElse:
+ "'v-else-if' and 'v-else' directives can't exist on the same element.",
+ unexpectedArgument: "'v-else-if' directives require no argument.",
+ unexpectedModifier: "'v-else-if' directives require no modifier.",
+ expectedValue: "'v-else-if' directives require that attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='else-if']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='else-if']"(node) {
const element = node.parent.parent
if (!utils.prevElementHasIf(element)) {
context.report({
node,
- loc: node.loc,
- message: "'v-else-if' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive."
+ messageId: 'missingVIf'
})
}
if (utils.hasDirective(element, 'if')) {
context.report({
node,
- loc: node.loc,
- message: "'v-else-if' and 'v-if' directives can't exist on the same element."
+ messageId: 'withVIf'
})
}
if (utils.hasDirective(element, 'else')) {
context.report({
node,
- loc: node.loc,
- message: "'v-else-if' and 'v-else' directives can't exist on the same element."
+ messageId: 'withVElse'
})
}
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-else-if' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-else-if' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
- if (!utils.hasAttributeValue(node)) {
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
context.report({
node,
- loc: node.loc,
- message: "'v-else-if' directives require that attribute value."
+ messageId: 'expectedValue'
})
}
}
diff --git a/lib/rules/valid-v-else.js b/lib/rules/valid-v-else.js
index 16625a2a7..f35ac661d 100644
--- a/lib/rules/valid-v-else.js
+++ b/lib/rules/valid-v-else.js
@@ -5,73 +5,75 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-else` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-else.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-else.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ missingVIf:
+ "'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else-if' directive.",
+ withVIf:
+ "'v-else' and 'v-if' directives can't exist on the same element. You may want 'v-else-if' directives.",
+ withVElseIf:
+ "'v-else' and 'v-else-if' directives can't exist on the same element.",
+ unexpectedArgument: "'v-else' directives require no argument.",
+ unexpectedModifier: "'v-else' directives require no modifier.",
+ unexpectedValue: "'v-else' directives require no attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='else']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='else']"(node) {
const element = node.parent.parent
if (!utils.prevElementHasIf(element)) {
context.report({
node,
- loc: node.loc,
- message: "'v-else' directives require being preceded by the element which has a 'v-if' or 'v-else' directive."
+ messageId: 'missingVIf'
})
}
if (utils.hasDirective(element, 'if')) {
context.report({
node,
- loc: node.loc,
- message: "'v-else' and 'v-if' directives can't exist on the same element. You may want 'v-else-if' directives."
+ messageId: 'withVIf'
})
}
if (utils.hasDirective(element, 'else-if')) {
context.report({
node,
- loc: node.loc,
- message: "'v-else' and 'v-else-if' directives can't exist on the same element."
+ messageId: 'withVElseIf'
})
}
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-else' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-else' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
- if (utils.hasAttributeValue(node)) {
+ if (node.value) {
context.report({
- node,
- loc: node.loc,
- message: "'v-else' directives require no attribute value."
+ node: node.value,
+ messageId: 'unexpectedValue'
})
}
}
diff --git a/lib/rules/valid-v-for.js b/lib/rules/valid-v-for.js
index b6edf905c..05183dd7e 100644
--- a/lib/rules/valid-v-for.js
+++ b/lib/rules/valid-v-for.js
@@ -5,32 +5,24 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
/**
* Check whether the given attribute is using the variables which are defined by `v-for` directives.
- * @param {ASTNode} vFor The attribute node of `v-for` to check.
- * @param {ASTNode} vBindKey The attribute node of `v-bind:key` to check.
+ * @param {VDirective} vFor The attribute node of `v-for` to check.
+ * @param {VDirective} vBindKey The attribute node of `v-bind:key` to check.
* @returns {boolean} `true` if the node is using the variables which are defined by `v-for` directives.
*/
-function isUsingIterationVar (vFor, vBindKey) {
+function isUsingIterationVar(vFor, vBindKey) {
if (vBindKey.value == null) {
return false
}
const references = vBindKey.value.references
const variables = vFor.parent.parent.variables
- return references.some(reference =>
- variables.some(variable =>
- variable.id.name === reference.id.name &&
- variable.kind === 'v-for'
+ return references.some((reference) =>
+ variables.some(
+ (variable) =>
+ variable.id.name === reference.id.name && variable.kind === 'v-for'
)
)
}
@@ -38,19 +30,19 @@ function isUsingIterationVar (vFor, vBindKey) {
/**
* Check the child element in tempalte v-for about `v-bind:key` attributes.
* @param {RuleContext} context The rule context to report.
- * @param {ASTNode} vFor The attribute node of `v-for` to check.
- * @param {ASTNode} child The child node to check.
+ * @param {VDirective} vFor The attribute node of `v-for` to check.
+ * @param {VElement} child The child node to check.
*/
-function checkChildKey (context, vFor, child) {
+function checkChildKey(context, vFor, child) {
const childFor = utils.getDirective(child, 'for')
// if child has v-for, check if parent iterator is used in v-for
if (childFor != null) {
- const childForRefs = childFor.value.references
+ const childForRefs = (childFor.value && childFor.value.references) || []
const variables = vFor.parent.parent.variables
- const usedInFor = childForRefs.some(cref =>
- variables.some(variable =>
- cref.id.name === variable.id.name &&
- variable.kind === 'v-for'
+ const usedInFor = childForRefs.some((cref) =>
+ variables.some(
+ (variable) =>
+ cref.id.name === variable.id.name && variable.kind === 'v-for'
)
)
// if parent iterator is used, skip other checks
@@ -66,11 +58,13 @@ function checkChildKey (context, vFor, child) {
/**
* Check the given element about `v-bind:key` attributes.
* @param {RuleContext} context The rule context to report.
- * @param {ASTNode} vFor The attribute node of `v-for` to check.
- * @param {ASTNode} element The element node to check.
+ * @param {VDirective} vFor The attribute node of `v-for` to check.
+ * @param {VElement} element The element node to check.
*/
-function checkKey (context, vFor, element) {
- if (element.name === 'template') {
+function checkKey(context, vFor, element) {
+ const vBindKey = utils.getDirective(element, 'bind', 'key')
+
+ if (vBindKey == null && element.name === 'template') {
for (const child of element.children) {
if (child.type === 'VElement') {
checkChildKey(context, vFor, child)
@@ -79,68 +73,75 @@ function checkKey (context, vFor, element) {
return
}
- const vBindKey = utils.getDirective(element, 'bind', 'key')
-
if (utils.isCustomComponent(element) && vBindKey == null) {
context.report({
node: element.startTag,
- loc: element.startTag.loc,
- message: "Custom elements in iteration require 'v-bind:key' directives."
+ messageId: 'requireKey'
})
}
if (vBindKey != null && !isUsingIterationVar(vFor, vBindKey)) {
context.report({
node: vBindKey,
- loc: vBindKey.loc,
- message: "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive."
+ messageId: 'keyUseFVorVars'
})
}
}
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-for` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-for.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-for.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ requireKey:
+ "Custom elements in iteration require 'v-bind:key' directives.",
+ keyUseFVorVars:
+ "Expected 'v-bind:key' directive to use the variables which are defined by the 'v-for' directive.",
+ unexpectedArgument: "'v-for' directives require no argument.",
+ unexpectedModifier: "'v-for' directives require no modifier.",
+ expectedValue: "'v-for' directives require that attribute value.",
+ unexpectedExpression:
+ "'v-for' directives require the special syntax ' in '.",
+ invalidEmptyAlias: "Invalid alias ''.",
+ invalidAlias: "Invalid alias '{{text}}'."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const sourceCode = context.getSourceCode()
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='for']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='for']"(node) {
const element = node.parent.parent
checkKey(context, node, element)
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-for' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-for' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
- if (!utils.hasAttributeValue(node)) {
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
context.report({
node,
- loc: node.loc,
- message: "'v-for' directives require that attribute value."
+ messageId: 'expectedValue'
})
return
}
@@ -152,8 +153,7 @@ module.exports = {
if (expr.type !== 'VForExpression') {
context.report({
node: node.value,
- loc: node.value.loc,
- message: "'v-for' directives require the special syntax ' in '."
+ messageId: 'unexpectedExpression'
})
return
}
@@ -165,24 +165,21 @@ module.exports = {
if (value === null) {
context.report({
- node: value || expr,
- loc: value && value.loc,
- message: "Invalid alias ''."
+ node: expr,
+ messageId: 'invalidEmptyAlias'
})
}
if (key !== undefined && (!key || key.type !== 'Identifier')) {
context.report({
node: key || expr,
- loc: key && key.loc,
- message: "Invalid alias '{{text}}'.",
+ messageId: 'invalidAlias',
data: { text: key ? sourceCode.getText(key) : '' }
})
}
if (index !== undefined && (!index || index.type !== 'Identifier')) {
context.report({
node: index || expr,
- loc: index && index.loc,
- message: "Invalid alias '{{text}}'.",
+ messageId: 'invalidAlias',
data: { text: index ? sourceCode.getText(index) : '' }
})
}
diff --git a/lib/rules/valid-v-html.js b/lib/rules/valid-v-html.js
index 5112bab40..1df254033 100644
--- a/lib/rules/valid-v-html.js
+++ b/lib/rules/valid-v-html.js
@@ -5,50 +5,49 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-html` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-html.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-html.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unexpectedArgument: "'v-html' directives require no argument.",
+ unexpectedModifier: "'v-html' directives require no modifier.",
+ expectedValue: "'v-html' directives require that attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='html']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='html']"(node) {
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-html' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-html' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
- if (!utils.hasAttributeValue(node)) {
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
context.report({
node,
- loc: node.loc,
- message: "'v-html' directives require that attribute value."
+ messageId: 'expectedValue'
})
}
}
diff --git a/lib/rules/valid-v-if.js b/lib/rules/valid-v-if.js
index caad07838..2e8651b44 100644
--- a/lib/rules/valid-v-if.js
+++ b/lib/rules/valid-v-if.js
@@ -5,66 +5,67 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-if` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-if.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-if.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ withVElse:
+ "'v-if' and 'v-else' directives can't exist on the same element. You may want 'v-else-if' directives.",
+ withVElseIf:
+ "'v-if' and 'v-else-if' directives can't exist on the same element.",
+ unexpectedArgument: "'v-if' directives require no argument.",
+ unexpectedModifier: "'v-if' directives require no modifier.",
+ expectedValue: "'v-if' directives require that attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='if']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='if']"(node) {
const element = node.parent.parent
if (utils.hasDirective(element, 'else')) {
context.report({
node,
- loc: node.loc,
- message: "'v-if' and 'v-else' directives can't exist on the same element. You may want 'v-else-if' directives."
+ messageId: 'withVElse'
})
}
if (utils.hasDirective(element, 'else-if')) {
context.report({
node,
- loc: node.loc,
- message: "'v-if' and 'v-else-if' directives can't exist on the same element."
+ messageId: 'withVElseIf'
})
}
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-if' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-if' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
- if (!utils.hasAttributeValue(node)) {
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
context.report({
node,
- loc: node.loc,
- message: "'v-if' directives require that attribute value."
+ messageId: 'expectedValue'
})
}
}
diff --git a/lib/rules/valid-v-is.js b/lib/rules/valid-v-is.js
new file mode 100644
index 000000000..2f97d1fd9
--- /dev/null
+++ b/lib/rules/valid-v-is.js
@@ -0,0 +1,83 @@
+/**
+ * @fileoverview enforce valid `v-is` directives
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * Check whether the given node is valid or not.
+ * @param {VElement} node The element node to check.
+ * @returns {boolean} `true` if the node is valid.
+ */
+function isValidElement(node) {
+ if (
+ utils.isHtmlElementNode(node) &&
+ !utils.isHtmlWellKnownElementName(node.rawName)
+ ) {
+ // Vue-component
+ return false
+ }
+ return true
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce valid `v-is` directives',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-is.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ unexpectedArgument: "'v-is' directives require no argument.",
+ unexpectedModifier: "'v-is' directives require no modifier.",
+ expectedValue: "'v-is' directives require that attribute value.",
+ ownerMustBeHTMLElement:
+ "'v-is' directive must be owned by a native HTML element, but '{{name}}' is not."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ return utils.defineTemplateBodyVisitor(context, {
+ "VAttribute[directive=true][key.name.name='is']"(node) {
+ if (node.key.argument) {
+ context.report({
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
+ })
+ }
+ if (node.key.modifiers.length > 0) {
+ context.report({
+ node,
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
+ })
+ }
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
+ context.report({
+ node,
+ messageId: 'expectedValue'
+ })
+ }
+
+ const element = node.parent.parent
+
+ if (!isValidElement(element)) {
+ const name = element.name
+ context.report({
+ node,
+ messageId: 'ownerMustBeHTMLElement',
+ data: { name }
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/valid-v-memo.js b/lib/rules/valid-v-memo.js
new file mode 100644
index 000000000..66ba9a75d
--- /dev/null
+++ b/lib/rules/valid-v-memo.js
@@ -0,0 +1,119 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce valid `v-memo` directives',
+ categories: ['vue3-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-memo.html'
+ },
+ fixable: null,
+ schema: [],
+ messages: {
+ unexpectedArgument: "'v-memo' directives require no argument.",
+ unexpectedModifier: "'v-memo' directives require no modifier.",
+ expectedValue: "'v-memo' directives require that attribute value.",
+ expectedArray:
+ "'v-memo' directives require the attribute value to be an array.",
+ insideVFor: "'v-memo' directive does not work inside 'v-for'."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ /** @type {VElement | null} */
+ let vForElement = null
+ return utils.defineTemplateBodyVisitor(context, {
+ VElement(node) {
+ if (!vForElement && utils.hasDirective(node, 'for')) {
+ vForElement = node
+ }
+ },
+ 'VElement:exit'(node) {
+ if (vForElement === node) {
+ vForElement = null
+ }
+ },
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='memo']"(node) {
+ if (vForElement && vForElement !== node.parent.parent) {
+ context.report({
+ node: node.key,
+ messageId: 'insideVFor'
+ })
+ }
+ if (node.key.argument) {
+ context.report({
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
+ })
+ }
+ if (node.key.modifiers.length > 0) {
+ context.report({
+ node,
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
+ })
+ }
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
+ context.report({
+ node,
+ messageId: 'expectedValue'
+ })
+ return
+ }
+ if (!node.value.expression) {
+ return
+ }
+ const expressions = [node.value.expression]
+ let expression
+ while ((expression = expressions.pop())) {
+ switch (expression.type) {
+ case 'ObjectExpression':
+ case 'ClassExpression':
+ case 'ArrowFunctionExpression':
+ case 'FunctionExpression':
+ case 'Literal':
+ case 'TemplateLiteral':
+ case 'UnaryExpression':
+ case 'BinaryExpression':
+ case 'UpdateExpression': {
+ context.report({
+ node: expression,
+ messageId: 'expectedArray'
+ })
+ break
+ }
+ case 'AssignmentExpression': {
+ expressions.push(expression.right)
+ break
+ }
+ case 'TSAsExpression': {
+ expressions.push(expression.expression)
+ break
+ }
+ case 'SequenceExpression': {
+ expressions.push(
+ expression.expressions[expression.expressions.length - 1]
+ )
+ break
+ }
+ case 'ConditionalExpression': {
+ expressions.push(expression.consequent, expression.alternate)
+ break
+ }
+ }
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/valid-v-model.js b/lib/rules/valid-v-model.js
index d004ef3ba..ca2830dc6 100644
--- a/lib/rules/valid-v-model.js
+++ b/lib/rules/valid-v-model.js
@@ -5,101 +5,153 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
const VALID_MODIFIERS = new Set(['lazy', 'number', 'trim'])
/**
* Check whether the given node is valid or not.
- * @param {ASTNode} node The element node to check.
+ * @param {VElement} node The element node to check.
* @returns {boolean} `true` if the node is valid.
*/
-function isValidElement (node) {
+function isValidElement(node) {
const name = node.name
return (
name === 'input' ||
name === 'select' ||
name === 'textarea' ||
- (
- name !== 'keep-alive' &&
+ (name !== 'keep-alive' &&
name !== 'slot' &&
name !== 'transition' &&
name !== 'transition-group' &&
- utils.isCustomComponent(node)
- )
+ utils.isCustomComponent(node))
)
}
/**
- * Check whether the given node can be LHS.
+ * Check whether the given node is a MemberExpression containing an optional chaining.
+ * e.g.
+ * - `a?.b`
+ * - `a?.b.c`
* @param {ASTNode} node The node to check.
- * @returns {boolean} `true` if the node can be LHS.
+ * @returns {boolean} `true` if the node is a MemberExpression containing an optional chaining.
*/
-function isLhs (node) {
- return node != null && (
- node.type === 'Identifier' ||
- node.type === 'MemberExpression'
+function isOptionalChainingMemberExpression(node) {
+ return (
+ node.type === 'ChainExpression' &&
+ node.expression.type === 'MemberExpression'
)
}
+/**
+ * Check whether the given node can be LHS (left-hand side).
+ * @param {ASTNode} node The node to check.
+ * @returns {boolean} `true` if the node can be LHS.
+ */
+function isLhs(node) {
+ if (node.type === 'TSAsExpression' || node.type === 'TSNonNullExpression') {
+ return isLhs(node.expression)
+ }
+
+ return node.type === 'Identifier' || node.type === 'MemberExpression'
+}
+
+/**
+ * Check whether the given node is a MemberExpression of a possibly null object.
+ * e.g.
+ * - `(a?.b).c`
+ * - `(null).foo`
+ * @param {ASTNode} node The node to check.
+ * @returns {boolean} `true` if the node is a MemberExpression of a possibly null object.
+ */
+function maybeNullObjectMemberExpression(node) {
+ if (node.type !== 'MemberExpression') {
+ return false
+ }
+ const { object } = node
+ if (object.type === 'ChainExpression') {
+ // `(a?.b).c`
+ return true
+ }
+ if (object.type === 'Literal' && object.value === null && !object.bigint) {
+ // `(null).foo`
+ return true
+ }
+ if (object.type === 'MemberExpression') {
+ return maybeNullObjectMemberExpression(object)
+ }
+ return false
+}
+
/**
* Get the variable by names.
* @param {string} name The variable name to find.
- * @param {ASTNode} leafNode The node to look up.
- * @returns {Variable|null} The found variable or null.
+ * @param {VElement} leafNode The node to look up.
+ * @returns {VVariable|null} The found variable or null.
*/
-function getVariable (name, leafNode) {
+function getVariable(name, leafNode) {
let node = leafNode
while (node != null) {
const variables = node.variables
- const variable = variables && variables.find(v => v.id.name === name)
+ const variable = variables && variables.find((v) => v.id.name === name)
if (variable != null) {
return variable
}
+ if (node.parent.type === 'VDocumentFragment') {
+ break
+ }
+
node = node.parent
}
return null
}
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
+/** @type {RuleModule} */
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-model` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-model.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-model.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unexpectedInvalidElement:
+ "'v-model' directives aren't supported on <{{name}}> elements.",
+ unexpectedInputFile:
+ "'v-model' directives don't support 'file' input type.",
+ unexpectedArgument: "'v-model' directives require no argument.",
+ unexpectedModifier:
+ "'v-model' directives don't support the modifier '{{name}}'.",
+ missingValue: "'v-model' directives require that attribute value.",
+ unexpectedOptionalChaining:
+ "Optional chaining cannot appear in 'v-model' directives.",
+ unexpectedNonLhsExpression:
+ "'v-model' directives require the attribute value which is valid as LHS.",
+ unexpectedNullObject:
+ "'v-model' directive has potential null object property access.",
+ unexpectedUpdateIterationVariable:
+ "'v-model' directives cannot update the iteration variable '{{varName}}' itself."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='model']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='model']"(node) {
const element = node.parent.parent
const name = element.name
if (!isValidElement(element)) {
context.report({
node,
- loc: node.loc,
- message: "'v-model' directives aren't supported on <{{name}}> elements.",
+ messageId: 'unexpectedInvalidElement',
data: { name }
})
}
@@ -107,60 +159,72 @@ module.exports = {
if (name === 'input' && utils.hasAttribute(element, 'type', 'file')) {
context.report({
node,
- loc: node.loc,
- message: "'v-model' directives don't support 'file' input type."
- })
- }
-
- if (node.key.argument) {
- context.report({
- node,
- loc: node.loc,
- message: "'v-model' directives require no argument."
+ messageId: 'unexpectedInputFile'
})
}
- for (const modifier of node.key.modifiers) {
- if (!VALID_MODIFIERS.has(modifier)) {
+ if (!utils.isCustomComponent(element)) {
+ if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-model' directives don't support the modifier '{{name}}'.",
- data: { name: modifier }
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
+
+ for (const modifier of node.key.modifiers) {
+ if (!VALID_MODIFIERS.has(modifier.name)) {
+ context.report({
+ node: modifier,
+ messageId: 'unexpectedModifier',
+ data: { name: modifier.name }
+ })
+ }
+ }
}
- if (!utils.hasAttributeValue(node)) {
+
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
context.report({
node,
- loc: node.loc,
- message: "'v-model' directives require that attribute value."
+ messageId: 'missingValue'
})
+ return
}
- if (node.value) {
- if (!isLhs(node.value.expression)) {
- context.report({
- node,
- loc: node.loc,
- message: "'v-model' directives require the attribute value which is valid as LHS."
- })
+ const expression = node.value.expression
+ if (!expression) {
+ // Parsing error
+ return
+ }
+ if (isOptionalChainingMemberExpression(expression)) {
+ context.report({
+ node: expression,
+ messageId: 'unexpectedOptionalChaining'
+ })
+ } else if (!isLhs(expression)) {
+ context.report({
+ node: expression,
+ messageId: 'unexpectedNonLhsExpression'
+ })
+ } else if (maybeNullObjectMemberExpression(expression)) {
+ context.report({
+ node: expression,
+ messageId: 'unexpectedNullObject'
+ })
+ }
+
+ for (const reference of node.value.references) {
+ const id = reference.id
+ if (id.parent.type !== 'VExpressionContainer') {
+ continue
}
- for (const reference of node.value.references) {
- const id = reference.id
- if (id.parent.type !== 'VExpressionContainer') {
- continue
- }
+ const variable = getVariable(id.name, element)
+ if (variable != null) {
+ context.report({
+ node: expression,
+ messageId: 'unexpectedUpdateIterationVariable',
- const variable = getVariable(id.name, element)
- if (variable != null) {
- context.report({
- node,
- loc: node.loc,
- message: "'v-model' directives cannot update the iteration variable '{{varName}}' itself.",
- data: { varName: id.name }
- })
- }
+ data: { varName: id.name }
+ })
}
}
}
diff --git a/lib/rules/valid-v-on.js b/lib/rules/valid-v-on.js
index 7d3258b97..82612d496 100644
--- a/lib/rules/valid-v-on.js
+++ b/lib/rules/valid-v-on.js
@@ -5,102 +5,52 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
+const keyAliases = require('../utils/key-aliases.json')
const VALID_MODIFIERS = new Set([
- 'stop', 'prevent', 'capture', 'self', 'ctrl', 'shift', 'alt', 'meta',
- 'native', 'once', 'left', 'right', 'middle', 'passive', 'esc', 'tab',
- 'enter', 'space', 'up', 'left', 'right', 'down', 'delete', 'exact'
-])
-const VERB_MODIFIERS = new Set([
- 'stop', 'prevent'
+ 'stop',
+ 'prevent',
+ 'capture',
+ 'self',
+ 'ctrl',
+ 'shift',
+ 'alt',
+ 'meta',
+ 'native',
+ 'once',
+ 'left',
+ 'right',
+ 'middle',
+ 'passive',
+ 'esc',
+ 'tab',
+ 'enter',
+ 'space',
+ 'up',
+ 'left',
+ 'right',
+ 'down',
+ 'delete',
+ 'exact'
])
+const VERB_MODIFIERS = new Set(['stop', 'prevent'])
// https://www.w3.org/TR/uievents-key/
-const KEY_ALIASES = new Set([
- 'unidentified', 'alt', 'alt-graph', 'caps-lock', 'control', 'fn', 'fn-lock',
- 'meta', 'num-lock', 'scroll-lock', 'shift', 'symbol', 'symbol-lock', 'hyper',
- 'super', 'enter', 'tab', 'arrow-down', 'arrow-left', 'arrow-right',
- 'arrow-up', 'end', 'home', 'page-down', 'page-up', 'backspace', 'clear',
- 'copy', 'cr-sel', 'cut', 'delete', 'erase-eof', 'ex-sel', 'insert', 'paste',
- 'redo', 'undo', 'accept', 'again', 'attn', 'cancel', 'context-menu', 'escape',
- 'execute', 'find', 'help', 'pause', 'select', 'zoom-in', 'zoom-out',
- 'brightness-down', 'brightness-up', 'eject', 'log-off', 'power',
- 'print-screen', 'hibernate', 'standby', 'wake-up', 'all-candidates',
- 'alphanumeric', 'code-input', 'compose', 'convert', 'dead', 'final-mode',
- 'group-first', 'group-last', 'group-next', 'group-previous', 'mode-change',
- 'next-candidate', 'non-convert', 'previous-candidate', 'process',
- 'single-candidate', 'hangul-mode', 'hanja-mode', 'junja-mode', 'eisu',
- 'hankaku', 'hiragana', 'hiragana-katakana', 'kana-mode', 'kanji-mode',
- 'katakana', 'romaji', 'zenkaku', 'zenkaku-hankaku', 'f1', 'f2', 'f3', 'f4',
- 'f5', 'f6', 'f7', 'f8', 'f9', 'f10', 'f11', 'f12', 'soft1', 'soft2', 'soft3',
- 'soft4', 'channel-down', 'channel-up', 'close', 'mail-forward', 'mail-reply',
- 'mail-send', 'media-close', 'media-fast-forward', 'media-pause',
- 'media-play-pause', 'media-record', 'media-rewind', 'media-stop',
- 'media-track-next', 'media-track-previous', 'new', 'open', 'print', 'save',
- 'spell-check', 'key11', 'key12', 'audio-balance-left', 'audio-balance-right',
- 'audio-bass-boost-down', 'audio-bass-boost-toggle', 'audio-bass-boost-up',
- 'audio-fader-front', 'audio-fader-rear', 'audio-surround-mode-next',
- 'audio-treble-down', 'audio-treble-up', 'audio-volume-down',
- 'audio-volume-up', 'audio-volume-mute', 'microphone-toggle',
- 'microphone-volume-down', 'microphone-volume-up', 'microphone-volume-mute',
- 'speech-correction-list', 'speech-input-toggle', 'launch-application1',
- 'launch-application2', 'launch-calendar', 'launch-contacts', 'launch-mail',
- 'launch-media-player', 'launch-music-player', 'launch-phone',
- 'launch-screen-saver', 'launch-spreadsheet', 'launch-web-browser',
- 'launch-web-cam', 'launch-word-processor', 'browser-back',
- 'browser-favorites', 'browser-forward', 'browser-home', 'browser-refresh',
- 'browser-search', 'browser-stop', 'app-switch', 'call', 'camera',
- 'camera-focus', 'end-call', 'go-back', 'go-home', 'headset-hook',
- 'last-number-redial', 'notification', 'manner-mode', 'voice-dial', 't-v',
- 't-v3-d-mode', 't-v-antenna-cable', 't-v-audio-description',
- 't-v-audio-description-mix-down', 't-v-audio-description-mix-up',
- 't-v-contents-menu', 't-v-data-service', 't-v-input', 't-v-input-component1',
- 't-v-input-component2', 't-v-input-composite1', 't-v-input-composite2',
- 't-v-input-h-d-m-i1', 't-v-input-h-d-m-i2', 't-v-input-h-d-m-i3',
- 't-v-input-h-d-m-i4', 't-v-input-v-g-a1', 't-v-media-context', 't-v-network',
- 't-v-number-entry', 't-v-power', 't-v-radio-service', 't-v-satellite',
- 't-v-satellite-b-s', 't-v-satellite-c-s', 't-v-satellite-toggle',
- 't-v-terrestrial-analog', 't-v-terrestrial-digital', 't-v-timer',
- 'a-v-r-input', 'a-v-r-power', 'color-f0-red', 'color-f1-green',
- 'color-f2-yellow', 'color-f3-blue', 'color-f4-grey', 'color-f5-brown',
- 'closed-caption-toggle', 'dimmer', 'display-swap', 'd-v-r', 'exit',
- 'favorite-clear0', 'favorite-clear1', 'favorite-clear2', 'favorite-clear3',
- 'favorite-recall0', 'favorite-recall1', 'favorite-recall2',
- 'favorite-recall3', 'favorite-store0', 'favorite-store1', 'favorite-store2',
- 'favorite-store3', 'guide', 'guide-next-day', 'guide-previous-day', 'info',
- 'instant-replay', 'link', 'list-program', 'live-content', 'lock',
- 'media-apps', 'media-last', 'media-skip-backward', 'media-skip-forward',
- 'media-step-backward', 'media-step-forward', 'media-top-menu', 'navigate-in',
- 'navigate-next', 'navigate-out', 'navigate-previous', 'next-favorite-channel',
- 'next-user-profile', 'on-demand', 'pairing', 'pin-p-down', 'pin-p-move',
- 'pin-p-toggle', 'pin-p-up', 'play-speed-down', 'play-speed-reset',
- 'play-speed-up', 'random-toggle', 'rc-low-battery', 'record-speed-next',
- 'rf-bypass', 'scan-channels-toggle', 'screen-mode-next', 'settings',
- 'split-screen-toggle', 's-t-b-input', 's-t-b-power', 'subtitle', 'teletext',
- 'video-mode-next', 'wink', 'zoom-toggle', 'audio-volume-down',
- 'audio-volume-up', 'audio-volume-mute', 'browser-back', 'browser-forward',
- 'channel-down', 'channel-up', 'context-menu', 'eject', 'end', 'enter', 'home',
- 'media-fast-forward', 'media-play', 'media-play-pause', 'media-record',
- 'media-rewind', 'media-stop', 'media-next-track', 'media-pause',
- 'media-previous-track', 'power', 'unidentified'
-])
+const KEY_ALIASES = new Set(keyAliases)
-function isValidModifier (modifier, customModifiers) {
+/**
+ * @param {VIdentifier} modifierNode
+ * @param {Set} customModifiers
+ */
+function isValidModifier(modifierNode, customModifiers) {
+ const modifier = modifierNode.name
return (
// built-in aliases
VALID_MODIFIERS.has(modifier) ||
// keyCode
- Number.isInteger(parseInt(modifier, 10)) ||
+ Number.isInteger(Number.parseInt(modifier, 10)) ||
// keyAlias (an Unicode character)
- Array.from(modifier).length === 1 ||
+ [...modifier].length === 1 ||
// keyAlias (special keys)
KEY_ALIASES.has(modifier) ||
// custom modifiers
@@ -108,17 +58,13 @@ function isValidModifier (modifier, customModifiers) {
)
}
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-on` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-on.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-on.html'
},
fixable: null,
schema: [
@@ -131,44 +77,63 @@ module.exports = {
},
additionalProperties: false
}
- ]
+ ],
+ messages: {
+ unsupportedModifier:
+ "'v-on' directives don't support the modifier '{{modifier}}'.",
+ avoidKeyword:
+ 'Avoid using JavaScript keyword as "v-on" value: {{value}}.',
+ expectedValueOrVerb:
+ "'v-on' directives require a value or verb modifier (like 'stop' or 'prevent')."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
const options = context.options[0] || {}
+ /** @type {Set} */
const customModifiers = new Set(options.modifiers || [])
const sourceCode = context.getSourceCode()
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='on']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='on']"(node) {
for (const modifier of node.key.modifiers) {
if (!isValidModifier(modifier, customModifiers)) {
context.report({
- node,
- loc: node.loc,
- message: "'v-on' directives don't support the modifier '{{modifier}}'.",
- data: { modifier }
+ node: modifier,
+ messageId: 'unsupportedModifier',
+ data: { modifier: modifier.name }
})
}
}
if (
- !utils.hasAttributeValue(node) &&
- !node.key.modifiers.some(VERB_MODIFIERS.has, VERB_MODIFIERS)
+ (!node.value || !node.value.expression) &&
+ !node.key.modifiers.some((modifier) =>
+ VERB_MODIFIERS.has(modifier.name)
+ )
) {
- if (node.value && sourceCode.getText(node.value.expression)) {
- const value = sourceCode.getText(node.value)
- context.report({
- node,
- loc: node.loc,
- message: 'Avoid using JavaScript keyword as "v-on" value: {{value}}.',
- data: { value }
- })
+ if (node.value && !utils.isEmptyValueDirective(node, context)) {
+ const valueText = sourceCode.getText(node.value)
+ let innerText = valueText
+ if (
+ (valueText[0] === '"' || valueText[0] === "'") &&
+ valueText[0] === valueText[valueText.length - 1]
+ ) {
+ // quoted
+ innerText = valueText.slice(1, -1)
+ }
+ if (/^\w+$/.test(innerText)) {
+ context.report({
+ node: node.value,
+ messageId: 'avoidKeyword',
+ data: { value: valueText }
+ })
+ }
} else {
context.report({
node,
- loc: node.loc,
- message: "'v-on' directives require a value or verb modifier (like 'stop' or 'prevent')."
+ messageId: 'expectedValueOrVerb'
})
}
}
diff --git a/lib/rules/valid-v-once.js b/lib/rules/valid-v-once.js
index 54a41a4c5..9d3d8bf8f 100644
--- a/lib/rules/valid-v-once.js
+++ b/lib/rules/valid-v-once.js
@@ -5,50 +5,49 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-once` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-once.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-once.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unexpectedArgument: "'v-once' directives require no argument.",
+ unexpectedModifier: "'v-once' directives require no modifier.",
+ unexpectedValue: "'v-once' directives require no attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='once']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='once']"(node) {
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-once' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-once' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
if (node.value) {
context.report({
- node,
- loc: node.loc,
- message: "'v-once' directives require no attribute value."
+ node: node.value,
+ messageId: 'unexpectedValue'
})
}
}
diff --git a/lib/rules/valid-v-pre.js b/lib/rules/valid-v-pre.js
index 67cdc9fa0..0505b9cb5 100644
--- a/lib/rules/valid-v-pre.js
+++ b/lib/rules/valid-v-pre.js
@@ -5,50 +5,49 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-pre` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-pre.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-pre.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unexpectedArgument: "'v-pre' directives require no argument.",
+ unexpectedModifier: "'v-pre' directives require no modifier.",
+ unexpectedValue: "'v-pre' directives require no attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='pre']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='pre']"(node) {
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-pre' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-pre' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
if (node.value) {
context.report({
- node,
- loc: node.loc,
- message: "'v-pre' directives require no attribute value."
+ node: node.value,
+ messageId: 'unexpectedValue'
})
}
}
diff --git a/lib/rules/valid-v-show.js b/lib/rules/valid-v-show.js
index 994a16513..1da617806 100644
--- a/lib/rules/valid-v-show.js
+++ b/lib/rules/valid-v-show.js
@@ -5,50 +5,57 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-show` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-show.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-show.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unexpectedArgument: "'v-show' directives require no argument.",
+ unexpectedModifier: "'v-show' directives require no modifier.",
+ expectedValue: "'v-show' directives require that attribute value.",
+ unexpectedTemplate:
+ "'v-show' directives cannot be put on tags."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='show']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='show']"(node) {
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-show' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-show' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
+ })
+ }
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
+ context.report({
+ node,
+ messageId: 'expectedValue'
})
}
- if (!utils.hasAttributeValue(node)) {
+ if (node.parent.parent.name === 'template') {
context.report({
node,
- loc: node.loc,
- message: "'v-show' directives require that attribute value."
+ messageId: 'unexpectedTemplate'
})
}
}
diff --git a/lib/rules/valid-v-slot.js b/lib/rules/valid-v-slot.js
new file mode 100644
index 000000000..d5c0efd1e
--- /dev/null
+++ b/lib/rules/valid-v-slot.js
@@ -0,0 +1,402 @@
+/**
+ * @author Toru Nagashima
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+
+/**
+ * @typedef { { expr: VForExpression, variables: VVariable[] } } VSlotVForVariables
+ */
+
+/**
+ * Get all `v-slot` directives on a given element.
+ * @param {VElement} node The VElement node to check.
+ * @returns {VDirective[]} The array of `v-slot` directives.
+ */
+function getSlotDirectivesOnElement(node) {
+ return utils.getDirectives(node, 'slot')
+}
+
+/**
+ * Get all `v-slot` directives on the children of a given element.
+ * @param {VElement} node The VElement node to check.
+ * @returns {VDirective[][]}
+ * The array of the group of `v-slot` directives.
+ * The group bundles `v-slot` directives of element sequence which is connected
+ * by `v-if`/`v-else-if`/`v-else`.
+ */
+function getSlotDirectivesOnChildren(node) {
+ /** @type {VDirective[][]} */
+ const groups = []
+ for (const group of utils.iterateChildElementsChains(node)) {
+ const slotDirs = group
+ .map((childElement) =>
+ childElement.name === 'template'
+ ? utils.getDirective(childElement, 'slot')
+ : null
+ )
+ .filter(utils.isDef)
+ if (slotDirs.length > 0) {
+ groups.push(slotDirs)
+ }
+ }
+
+ return groups
+}
+
+/**
+ * Get the normalized name of a given `v-slot` directive node with modifiers after `v-slot:` directive.
+ * @param {VDirective} node The `v-slot` directive node.
+ * @param {SourceCode} sourceCode The source code.
+ * @returns {string} The normalized name.
+ */
+function getNormalizedName(node, sourceCode) {
+ if (node.key.argument == null) {
+ return 'default'
+ }
+ return node.key.modifiers.length === 0
+ ? sourceCode.getText(node.key.argument)
+ : sourceCode.text.slice(node.key.argument.range[0], node.key.range[1])
+}
+
+/**
+ * Get all `v-slot` directives which are distributed to the same slot as a given `v-slot` directive node.
+ * @param {VDirective[][]} vSlotGroups The result of `getAllNamedSlotElements()`.
+ * @param {VDirective} currentVSlot The current `v-slot` directive node.
+ * @param {VSlotVForVariables | null} currentVSlotVForVars The current `v-for` variables.
+ * @param {SourceCode} sourceCode The source code.
+ * @param {ParserServices.TokenStore} tokenStore The token store.
+ * @returns {VDirective[][]} The array of the group of `v-slot` directives.
+ */
+function filterSameSlot(
+ vSlotGroups,
+ currentVSlot,
+ currentVSlotVForVars,
+ sourceCode,
+ tokenStore
+) {
+ const currentName = getNormalizedName(currentVSlot, sourceCode)
+ return vSlotGroups
+ .map((vSlots) =>
+ vSlots.filter((vSlot) => {
+ if (getNormalizedName(vSlot, sourceCode) !== currentName) {
+ return false
+ }
+ const vForExpr = getVSlotVForVariableIfUsingIterationVars(
+ vSlot,
+ utils.getDirective(vSlot.parent.parent, 'for')
+ )
+ if (!currentVSlotVForVars || !vForExpr) {
+ return !currentVSlotVForVars && !vForExpr
+ }
+ if (
+ !equalVSlotVForVariables(currentVSlotVForVars, vForExpr, tokenStore)
+ ) {
+ return false
+ }
+ //
+ return true
+ })
+ )
+ .filter((slots) => slots.length > 0)
+}
+
+/**
+ * Determines whether the two given `v-slot` variables are considered to be equal.
+ * @param {VSlotVForVariables} a First element.
+ * @param {VSlotVForVariables} b Second element.
+ * @param {ParserServices.TokenStore} tokenStore The token store.
+ * @returns {boolean} `true` if the elements are considered to be equal.
+ */
+function equalVSlotVForVariables(a, b, tokenStore) {
+ if (a.variables.length !== b.variables.length) {
+ return false
+ }
+ if (!equal(a.expr.right, b.expr.right)) {
+ return false
+ }
+
+ const checkedVarNames = new Set()
+ const len = Math.min(a.expr.left.length, b.expr.left.length)
+ for (let index = 0; index < len; index++) {
+ const aPtn = a.expr.left[index]
+ const bPtn = b.expr.left[index]
+
+ const aVar = a.variables.find(
+ (v) => aPtn.range[0] <= v.id.range[0] && v.id.range[1] <= aPtn.range[1]
+ )
+ const bVar = b.variables.find(
+ (v) => bPtn.range[0] <= v.id.range[0] && v.id.range[1] <= bPtn.range[1]
+ )
+ if (aVar && bVar) {
+ if (aVar.id.name !== bVar.id.name) {
+ return false
+ }
+ if (!equal(aPtn, bPtn)) {
+ return false
+ }
+ checkedVarNames.add(aVar.id.name)
+ } else if (aVar || bVar) {
+ return false
+ }
+ }
+ return a.variables.every(
+ (v) =>
+ checkedVarNames.has(v.id.name) ||
+ b.variables.some((bv) => v.id.name === bv.id.name)
+ )
+
+ /**
+ * Determines whether the two given nodes are considered to be equal.
+ * @param {ASTNode} a First node.
+ * @param {ASTNode} b Second node.
+ * @returns {boolean} `true` if the nodes are considered to be equal.
+ */
+ function equal(a, b) {
+ if (a.type !== b.type) {
+ return false
+ }
+ return utils.equalTokens(a, b, tokenStore)
+ }
+}
+
+/**
+ * Gets the `v-for` directive and variable that provide the variables used by the given` v-slot` directive.
+ * @param {VDirective} vSlot The current `v-slot` directive node.
+ * @param {VDirective | null} [vFor] The current `v-for` directive node.
+ * @returns { VSlotVForVariables | null } The VSlotVForVariable.
+ */
+function getVSlotVForVariableIfUsingIterationVars(vSlot, vFor) {
+ const expr =
+ vFor && vFor.value && /** @type {VForExpression} */ (vFor.value.expression)
+ const variables =
+ expr && getUsingIterationVars(vSlot.key.argument, vSlot.parent.parent)
+ return expr && variables && variables.length > 0 ? { expr, variables } : null
+}
+
+/**
+ * Gets iterative variables if a given argument node is using iterative variables that the element defined.
+ * @param {VExpressionContainer|VIdentifier|null} argument The argument node to check.
+ * @param {VElement} element The element node which has the argument.
+ * @returns {VVariable[]} The argument node is using iteration variables.
+ */
+function getUsingIterationVars(argument, element) {
+ const vars = []
+ if (argument && argument.type === 'VExpressionContainer') {
+ for (const { variable } of argument.references) {
+ if (
+ variable != null &&
+ variable.kind === 'v-for' &&
+ variable.id.range[0] > element.startTag.range[0] &&
+ variable.id.range[1] < element.startTag.range[1]
+ ) {
+ vars.push(variable)
+ }
+ }
+ }
+ return vars
+}
+
+/**
+ * Check whether a given argument node is using an scope variable that the directive defined.
+ * @param {VDirective} vSlot The `v-slot` directive to check.
+ * @returns {boolean} `true` if that argument node is using a scope variable the directive defined.
+ */
+function isUsingScopeVar(vSlot) {
+ const argument = vSlot.key.argument
+ const value = vSlot.value
+
+ if (argument && value && argument.type === 'VExpressionContainer') {
+ for (const { variable } of argument.references) {
+ if (
+ variable != null &&
+ variable.kind === 'scope' &&
+ variable.id.range[0] > value.range[0] &&
+ variable.id.range[1] < value.range[1]
+ ) {
+ return true
+ }
+ }
+ }
+ return false
+}
+
+/**
+ * If `allowModifiers` option is set to `true`, check whether a given argument node has invalid modifiers like `v-slot.foo`.
+ * Otherwise, check whether a given argument node has at least one modifier.
+ * @param {VDirective} vSlot The `v-slot` directive to check.
+ * @param {boolean} allowModifiers `allowModifiers` option in context.
+ * @return {boolean} `true` if that argument node has invalid modifiers like `v-slot.foo`.
+ */
+function hasInvalidModifiers(vSlot, allowModifiers) {
+ return allowModifiers
+ ? vSlot.key.argument == null && vSlot.key.modifiers.length > 0
+ : vSlot.key.modifiers.length > 0
+}
+
+module.exports = {
+ meta: {
+ type: 'problem',
+ docs: {
+ description: 'enforce valid `v-slot` directives',
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-slot.html'
+ },
+ fixable: null,
+ schema: [
+ {
+ type: 'object',
+ properties: {
+ allowModifiers: {
+ type: 'boolean'
+ }
+ },
+ additionalProperties: false
+ }
+ ],
+ messages: {
+ ownerMustBeCustomElement:
+ "'v-slot' directive must be owned by a custom element, but '{{name}}' is not.",
+ namedSlotMustBeOnTemplate:
+ "Named slots must use '' on a custom element.",
+ defaultSlotMustBeOnTemplate:
+ "Default slot must use '' on a custom element when there are other named slots.",
+ disallowDuplicateSlotsOnElement:
+ "An element cannot have multiple 'v-slot' directives.",
+ disallowDuplicateSlotsOnChildren:
+ "An element cannot have multiple '' elements which are distributed to the same slot.",
+ disallowArgumentUseSlotParams:
+ "Dynamic argument of 'v-slot' directive cannot use that slot parameter.",
+ disallowAnyModifier: "'v-slot' directive doesn't support any modifier.",
+ requireAttributeValue:
+ "'v-slot' directive on a custom element requires that attribute value."
+ }
+ },
+ /** @param {RuleContext} context */
+ create(context) {
+ const sourceCode = context.getSourceCode()
+ const tokenStore =
+ sourceCode.parserServices.getTemplateBodyTokenStore &&
+ sourceCode.parserServices.getTemplateBodyTokenStore()
+ const options = context.options[0] || {}
+ const allowModifiers = options.allowModifiers === true
+
+ return utils.defineTemplateBodyVisitor(context, {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='slot']"(node) {
+ const isDefaultSlot =
+ node.key.argument == null ||
+ (node.key.argument.type === 'VIdentifier' &&
+ node.key.argument.name === 'default')
+ const element = node.parent.parent
+ const parentElement = element.parent
+ const ownerElement =
+ element.name === 'template' ? parentElement : element
+ if (ownerElement.type === 'VDocumentFragment') {
+ return
+ }
+ const vSlotsOnElement = getSlotDirectivesOnElement(element)
+ const vSlotGroupsOnChildren = getSlotDirectivesOnChildren(ownerElement)
+
+ // Verify location.
+ if (!utils.isCustomComponent(ownerElement)) {
+ context.report({
+ node,
+ messageId: 'ownerMustBeCustomElement',
+ data: { name: ownerElement.rawName }
+ })
+ }
+ if (!isDefaultSlot && element.name !== 'template') {
+ context.report({
+ node,
+ messageId: 'namedSlotMustBeOnTemplate'
+ })
+ }
+ if (ownerElement === element && vSlotGroupsOnChildren.length > 0) {
+ context.report({
+ node,
+ messageId: 'defaultSlotMustBeOnTemplate'
+ })
+ }
+
+ // Verify duplication.
+ if (vSlotsOnElement.length >= 2 && vSlotsOnElement[0] !== node) {
+ // E.g.,
+ context.report({
+ node,
+ messageId: 'disallowDuplicateSlotsOnElement'
+ })
+ }
+ if (ownerElement === parentElement) {
+ const vFor = utils.getDirective(element, 'for')
+ const vSlotVForVar = getVSlotVForVariableIfUsingIterationVars(
+ node,
+ vFor
+ )
+ const vSlotGroupsOfSameSlot = filterSameSlot(
+ vSlotGroupsOnChildren,
+ node,
+ vSlotVForVar,
+ sourceCode,
+ tokenStore
+ )
+ if (
+ vSlotGroupsOfSameSlot.length >= 2 &&
+ !vSlotGroupsOfSameSlot[0].includes(node)
+ ) {
+ // E.g.,
+ //
+ context.report({
+ node,
+ messageId: 'disallowDuplicateSlotsOnChildren'
+ })
+ }
+ if (vFor && !vSlotVForVar) {
+ // E.g.,
+ context.report({
+ node,
+ messageId: 'disallowDuplicateSlotsOnChildren'
+ })
+ }
+ }
+
+ // Verify argument.
+ if (isUsingScopeVar(node)) {
+ context.report({
+ node,
+ messageId: 'disallowArgumentUseSlotParams'
+ })
+ }
+
+ // Verify modifiers.
+ if (hasInvalidModifiers(node, allowModifiers)) {
+ // E.g.,
+ context.report({
+ node,
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'disallowAnyModifier'
+ })
+ }
+
+ // Verify value.
+ if (
+ ownerElement === element &&
+ isDefaultSlot &&
+ (!node.value ||
+ utils.isEmptyValueDirective(node, context) ||
+ utils.isEmptyExpressionValueDirective(node, context))
+ ) {
+ context.report({
+ node,
+ messageId: 'requireAttributeValue'
+ })
+ }
+ }
+ })
+ }
+}
diff --git a/lib/rules/valid-v-text.js b/lib/rules/valid-v-text.js
index 0bc03de27..b41e7f2b3 100644
--- a/lib/rules/valid-v-text.js
+++ b/lib/rules/valid-v-text.js
@@ -5,50 +5,49 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const utils = require('../utils')
-// ------------------------------------------------------------------------------
-// Rule Definition
-// ------------------------------------------------------------------------------
-
module.exports = {
meta: {
type: 'problem',
docs: {
description: 'enforce valid `v-text` directives',
- category: 'essential',
- url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/valid-v-text.md'
+ categories: ['vue3-essential', 'vue2-essential'],
+ url: 'https://eslint.vuejs.org/rules/valid-v-text.html'
},
fixable: null,
- schema: []
+ schema: [],
+ messages: {
+ unexpectedArgument: "'v-text' directives require no argument.",
+ unexpectedModifier: "'v-text' directives require no modifier.",
+ expectedValue: "'v-text' directives require that attribute value."
+ }
},
-
- create (context) {
+ /** @param {RuleContext} context */
+ create(context) {
return utils.defineTemplateBodyVisitor(context, {
- "VAttribute[directive=true][key.name='text']" (node) {
+ /** @param {VDirective} node */
+ "VAttribute[directive=true][key.name.name='text']"(node) {
if (node.key.argument) {
context.report({
- node,
- loc: node.loc,
- message: "'v-text' directives require no argument."
+ node: node.key.argument,
+ messageId: 'unexpectedArgument'
})
}
if (node.key.modifiers.length > 0) {
context.report({
node,
- loc: node.loc,
- message: "'v-text' directives require no modifier."
+ loc: {
+ start: node.key.modifiers[0].loc.start,
+ end: node.key.modifiers[node.key.modifiers.length - 1].loc.end
+ },
+ messageId: 'unexpectedModifier'
})
}
- if (!utils.hasAttributeValue(node)) {
+ if (!node.value || utils.isEmptyValueDirective(node, context)) {
context.report({
node,
- loc: node.loc,
- message: "'v-text' directives require that attribute value."
+ messageId: 'expectedValue'
})
}
}
diff --git a/lib/utils/casing.js b/lib/utils/casing.js
index 741481ef8..a47e978cd 100644
--- a/lib/utils/casing.js
+++ b/lib/utils/casing.js
@@ -1,47 +1,88 @@
-const assert = require('assert')
-
-const invalidChars = /[^a-zA-Z0-9:]+/g
+/**
+ * Capitalize a string.
+ * @param {string} str
+ */
+function capitalize(str) {
+ return str.charAt(0).toUpperCase() + str.slice(1)
+}
+/**
+ * Checks whether the given string has symbols.
+ * @param {string} str
+ */
+function hasSymbols(str) {
+ return /[!"#%&'()*+,./:;<=>?@[\\\]^`{|}]/u.exec(str) // without " ", "$", "-" and "_"
+}
+/**
+ * Checks whether the given string has upper.
+ * @param {string} str
+ */
+function hasUpper(str) {
+ return /[A-Z]/u.exec(str)
+}
/**
* Convert text to kebab-case
* @param {string} str Text to be converted
* @return {string}
*/
-function kebabCase (str) {
+function kebabCase(str) {
return str
- .replace(/[A-Z]/g, match => '-' + match)
- .replace(/([^a-zA-Z])-([A-Z])/g, match => match[0] + match[2])
- .replace(/^-/, '')
- .replace(invalidChars, '-')
+ .replace(/_/gu, '-')
+ .replace(/\B([A-Z])/gu, '-$1')
.toLowerCase()
}
+/**
+ * Checks whether the given string is kebab-case.
+ * @param {string} str
+ */
+function isKebabCase(str) {
+ return (
+ !hasUpper(str) &&
+ !hasSymbols(str) &&
+ !str.startsWith('-') && // starts with hyphen is not kebab-case
+ !/_|--|\s/u.test(str)
+ )
+}
+
/**
* Convert text to snake_case
* @param {string} str Text to be converted
* @return {string}
*/
-function snakeCase (str) {
+function snakeCase(str) {
return str
- .replace(/[A-Z]/g, match => '_' + match)
- .replace(/([^a-zA-Z])_([A-Z])/g, match => match[0] + match[2])
- .replace(/^_/, '')
- .replace(invalidChars, '_')
+ .replace(/\B([A-Z])/gu, '_$1')
+ .replace(/-/gu, '_')
.toLowerCase()
}
+/**
+ * Checks whether the given string is snake_case.
+ * @param {string} str
+ */
+function isSnakeCase(str) {
+ return !hasUpper(str) && !hasSymbols(str) && !/-|__|\s/u.test(str)
+}
+
/**
* Convert text to camelCase
* @param {string} str Text to be converted
* @return {string} Converted string
*/
-function camelCase (str) {
- return str
- .replace(/_/g, (_, index) => index === 0 ? _ : '-')
- .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) =>
- index === 0 ? letter.toLowerCase() : letter.toUpperCase()
- )
- .replace(invalidChars, '')
+function camelCase(str) {
+ if (isPascalCase(str)) {
+ return str.charAt(0).toLowerCase() + str.slice(1)
+ }
+ return str.replace(/[-_](\w)/gu, (_, c) => (c ? c.toUpperCase() : ''))
+}
+
+/**
+ * Checks whether the given string is camelCase.
+ * @param {string} str
+ */
+function isCamelCase(str) {
+ return !hasSymbols(str) && !/^[A-Z]/u.test(str) && !/-|_|\s/u.test(str)
}
/**
@@ -49,40 +90,90 @@ function camelCase (str) {
* @param {string} str Text to be converted
* @return {string} Converted string
*/
-function pascalCase (str) {
- return str
- .replace(/_/g, (_, index) => index === 0 ? _ : '-')
- .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => letter.toUpperCase())
- .replace(invalidChars, '')
+function pascalCase(str) {
+ return capitalize(camelCase(str))
+}
+
+/**
+ * Checks whether the given string is PascalCase.
+ * @param {string} str
+ */
+function isPascalCase(str) {
+ return !hasSymbols(str) && !/^[a-z]/u.test(str) && !/-|_|\s/u.test(str)
}
const convertersMap = {
'kebab-case': kebabCase,
- 'snake_case': snakeCase,
- 'camelCase': camelCase,
- 'PascalCase': pascalCase
+ snake_case: snakeCase,
+ camelCase,
+ PascalCase: pascalCase
+}
+
+const checkersMap = {
+ 'kebab-case': isKebabCase,
+ snake_case: isSnakeCase,
+ camelCase: isCamelCase,
+ PascalCase: isPascalCase
+}
+/**
+ * Return case checker
+ * @param { 'camelCase' | 'kebab-case' | 'PascalCase' | 'snake_case' } name type of checker to return ('camelCase', 'kebab-case', 'PascalCase')
+ * @return {isKebabCase|isCamelCase|isPascalCase|isSnakeCase}
+ */
+function getChecker(name) {
+ return checkersMap[name] || isPascalCase
+}
+
+/**
+ * Return case converter
+ * @param { 'camelCase' | 'kebab-case' | 'PascalCase' | 'snake_case' } name type of converter to return ('camelCase', 'kebab-case', 'PascalCase')
+ * @return {kebabCase|camelCase|pascalCase|snakeCase}
+ */
+function getConverter(name) {
+ return convertersMap[name] || pascalCase
}
module.exports = {
- allowedCaseOptions: [
- 'camelCase',
- 'kebab-case',
- 'PascalCase'
- ],
+ allowedCaseOptions: ['camelCase', 'kebab-case', 'PascalCase'],
/**
* Return case converter
* @param {string} name type of converter to return ('camelCase', 'kebab-case', 'PascalCase')
- * @return {kebabCase|camelCase|pascalCase}
+ * @return {kebabCase|camelCase|pascalCase|snakeCase}
*/
- getConverter (name) {
- assert(typeof name === 'string')
+ getConverter,
- return convertersMap[name] || pascalCase
+ /**
+ * Return case checker
+ * @param {string} name type of checker to return ('camelCase', 'kebab-case', 'PascalCase')
+ * @return {isKebabCase|isCamelCase|isPascalCase|isSnakeCase}
+ */
+ getChecker,
+
+ /**
+ * Return case exact converter.
+ * If the converted result is not the correct case, the original value is returned.
+ * @param { 'camelCase' | 'kebab-case' | 'PascalCase' | 'snake_case' } name type of converter to return ('camelCase', 'kebab-case', 'PascalCase')
+ * @return {kebabCase|camelCase|pascalCase|snakeCase}
+ */
+ getExactConverter(name) {
+ const converter = getConverter(name)
+ const checker = getChecker(name)
+ return (str) => {
+ const result = converter(str)
+ return checker(result) ? result : str /* cannot convert */
+ }
},
camelCase,
pascalCase,
kebabCase,
- snakeCase
+ snakeCase,
+
+ isCamelCase,
+ isPascalCase,
+ isKebabCase,
+ isSnakeCase,
+
+ capitalize
}
diff --git a/lib/utils/comments.js b/lib/utils/comments.js
new file mode 100644
index 000000000..d285e7cac
--- /dev/null
+++ b/lib/utils/comments.js
@@ -0,0 +1,21 @@
+/**
+ * @param {Comment} node
+ * @returns {boolean}
+ */
+const isJSDocComment = (node) =>
+ node.type === 'Block' &&
+ node.value.charAt(0) === '*' &&
+ node.value.charAt(1) !== '*'
+
+/**
+ * @param {Comment} node
+ * @returns {boolean}
+ */
+const isBlockComment = (node) =>
+ node.type === 'Block' &&
+ (node.value.charAt(0) !== '*' || node.value.charAt(1) === '*')
+
+module.exports = {
+ isJSDocComment,
+ isBlockComment
+}
diff --git a/lib/utils/deprecated-html-elements.json b/lib/utils/deprecated-html-elements.json
new file mode 100644
index 000000000..63a3f7162
--- /dev/null
+++ b/lib/utils/deprecated-html-elements.json
@@ -0,0 +1,31 @@
+[
+ "acronym",
+ "applet",
+ "basefont",
+ "bgsound",
+ "big",
+ "blink",
+ "center",
+ "dir",
+ "font",
+ "frame",
+ "frameset",
+ "isindex",
+ "keygen",
+ "listing",
+ "marquee",
+ "menuitem",
+ "multicol",
+ "nextid",
+ "nobr",
+ "noembed",
+ "noframes",
+ "param",
+ "plaintext",
+ "rb",
+ "rtc",
+ "spacer",
+ "strike",
+ "tt",
+ "xmp"
+]
diff --git a/lib/utils/html-comments.js b/lib/utils/html-comments.js
new file mode 100644
index 000000000..53f7df5ae
--- /dev/null
+++ b/lib/utils/html-comments.js
@@ -0,0 +1,251 @@
+/**
+ * @typedef { { exceptions?: string[] } } CommentParserConfig
+ * @typedef { (comment: ParsedHTMLComment) => void } HTMLCommentVisitor
+ * @typedef { { includeDirectives?: boolean } } CommentVisitorOption
+ *
+ * @typedef { Token & { type: 'HTMLCommentOpen' } } HTMLCommentOpen
+ * @typedef { Token & { type: 'HTMLCommentOpenDecoration' } } HTMLCommentOpenDecoration
+ * @typedef { Token & { type: 'HTMLCommentValue' } } HTMLCommentValue
+ * @typedef { Token & { type: 'HTMLCommentClose' } } HTMLCommentClose
+ * @typedef { Token & { type: 'HTMLCommentCloseDecoration' } } HTMLCommentCloseDecoration
+ * @typedef { { open: HTMLCommentOpen, openDecoration: HTMLCommentOpenDecoration | null, value: HTMLCommentValue | null, closeDecoration: HTMLCommentCloseDecoration | null, close: HTMLCommentClose } } ParsedHTMLComment
+ */
+const utils = require('./')
+
+const COMMENT_DIRECTIVE = /^\s*eslint-(?:en|dis)able/
+const IE_CONDITIONAL_IF = /^\[if\s+/
+const IE_CONDITIONAL_ENDIF = /\[endif]$/
+
+/** @type { 'HTMLCommentOpen' } */
+const TYPE_HTML_COMMENT_OPEN = 'HTMLCommentOpen'
+/** @type { 'HTMLCommentOpenDecoration' } */
+const TYPE_HTML_COMMENT_OPEN_DECORATION = 'HTMLCommentOpenDecoration'
+/** @type { 'HTMLCommentValue' } */
+const TYPE_HTML_COMMENT_VALUE = 'HTMLCommentValue'
+/** @type { 'HTMLCommentClose' } */
+const TYPE_HTML_COMMENT_CLOSE = 'HTMLCommentClose'
+/** @type { 'HTMLCommentCloseDecoration' } */
+const TYPE_HTML_COMMENT_CLOSE_DECORATION = 'HTMLCommentCloseDecoration'
+
+/**
+ * @param {HTMLComment} comment
+ * @returns {boolean}
+ */
+function isCommentDirective(comment) {
+ return COMMENT_DIRECTIVE.test(comment.value)
+}
+
+/**
+ * @param {HTMLComment} comment
+ * @returns {boolean}
+ */
+function isIEConditionalComment(comment) {
+ return (
+ IE_CONDITIONAL_IF.test(comment.value) ||
+ IE_CONDITIONAL_ENDIF.test(comment.value)
+ )
+}
+
+/**
+ * Define HTML comment parser
+ *
+ * @param {SourceCode} sourceCode The source code instance.
+ * @param {CommentParserConfig | null} config The config.
+ * @returns { (node: Token) => (ParsedHTMLComment | null) } HTML comment parser.
+ */
+function defineParser(sourceCode, config) {
+ config = config || {}
+
+ const exceptions = config.exceptions || []
+
+ /**
+ * Get a open decoration string from comment contents.
+ * @param {string} contents comment contents
+ * @returns {string} decoration string
+ */
+ function getOpenDecoration(contents) {
+ let decoration = ''
+ for (const exception of exceptions) {
+ const length = exception.length
+ let index = 0
+ while (contents.startsWith(exception, index)) {
+ index += length
+ }
+ const exceptionLength = index
+ if (decoration.length < exceptionLength) {
+ decoration = contents.slice(0, exceptionLength)
+ }
+ }
+ return decoration
+ }
+
+ /**
+ * Get a close decoration string from comment contents.
+ * @param {string} contents comment contents
+ * @returns {string} decoration string
+ */
+ function getCloseDecoration(contents) {
+ let decoration = ''
+ for (const exception of exceptions) {
+ const length = exception.length
+ let index = contents.length
+ while (contents.endsWith(exception, index)) {
+ index -= length
+ }
+ const exceptionLength = contents.length - index
+ if (decoration.length < exceptionLength) {
+ decoration = contents.slice(index)
+ }
+ }
+ return decoration
+ }
+
+ /**
+ * Parse HTMLComment.
+ * @param {Token} node a comment token
+ * @returns {ParsedHTMLComment | null} the result of HTMLComment tokens.
+ */
+ return function parseHTMLComment(node) {
+ if (node.type !== 'HTMLComment') {
+ // Is not HTMLComment
+ return null
+ }
+
+ const htmlCommentText = sourceCode.getText(node)
+
+ if (
+ !htmlCommentText.startsWith('')
+ ) {
+ // Is not normal HTML Comment
+ // e.g. Error Code: "abrupt-closing-of-empty-comment", "incorrectly-closed-comment"
+ return null
+ }
+
+ let valueText = htmlCommentText.slice(4, -3)
+ const openDecorationText = getOpenDecoration(valueText)
+ valueText = valueText.slice(openDecorationText.length)
+ const firstCharIndex = valueText.search(/\S/)
+ const beforeSpace =
+ firstCharIndex >= 0 ? valueText.slice(0, firstCharIndex) : valueText
+ valueText = valueText.slice(beforeSpace.length)
+
+ const closeDecorationText = getCloseDecoration(valueText)
+ if (closeDecorationText) {
+ valueText = valueText.slice(0, -closeDecorationText.length)
+ }
+ const lastCharIndex = valueText.search(/\S\s*$/)
+ const afterSpace =
+ lastCharIndex >= 0 ? valueText.slice(lastCharIndex + 1) : valueText
+ if (afterSpace) {
+ valueText = valueText.slice(0, -afterSpace.length)
+ }
+
+ let tokenIndex = node.range[0]
+ /**
+ * @param {string} type
+ * @param {string} value
+ * @returns {any}
+ */
+ const createToken = (type, value) => {
+ /** @type {Range} */
+ const range = [tokenIndex, tokenIndex + value.length]
+ tokenIndex = range[1]
+ /** @type {SourceLocation} */
+ let loc
+ return {
+ type,
+ value,
+ range,
+ get loc() {
+ if (loc) {
+ return loc
+ }
+ return (loc = {
+ start: sourceCode.getLocFromIndex(range[0]),
+ end: sourceCode.getLocFromIndex(range[1])
+ })
+ }
+ }
+ }
+
+ /** @type {HTMLCommentOpen} */
+ const open = createToken(TYPE_HTML_COMMENT_OPEN, '')
+
+ return {
+ /** HTML comment open (``) */
+ closeDecoration,
+ /** HTML comment close (`-->`) */
+ close
+ }
+ }
+}
+
+/**
+ * Define HTML comment visitor
+ *
+ * @param {RuleContext} context The rule context.
+ * @param {CommentParserConfig | null} config The config.
+ * @param {HTMLCommentVisitor} visitHTMLComment The HTML comment visitor.
+ * @param {CommentVisitorOption} [visitorOption] The option for visitor.
+ * @returns {RuleListener} HTML comment visitor.
+ */
+function defineVisitor(context, config, visitHTMLComment, visitorOption) {
+ return {
+ Program(node) {
+ visitorOption = visitorOption || {}
+ if (utils.hasInvalidEOF(node)) {
+ return
+ }
+ if (!node.templateBody) {
+ return
+ }
+ const parse = defineParser(context.getSourceCode(), config)
+
+ for (const comment of node.templateBody.comments) {
+ if (comment.type !== 'HTMLComment') {
+ continue
+ }
+ if (!visitorOption.includeDirectives && isCommentDirective(comment)) {
+ // ignore directives
+ continue
+ }
+ if (isIEConditionalComment(comment)) {
+ // ignore IE conditional
+ continue
+ }
+
+ const tokens = parse(comment)
+ if (tokens) {
+ visitHTMLComment(tokens)
+ }
+ }
+ }
+ }
+}
+
+module.exports = {
+ defineVisitor
+}
diff --git a/lib/utils/html-elements.json b/lib/utils/html-elements.json
index 721f7876d..ff9cdf313 100644
--- a/lib/utils/html-elements.json
+++ b/lib/utils/html-elements.json
@@ -1 +1,116 @@
-["html","body","base","head","link","meta","style","title","address","article","aside","footer","header","h1","h2","h3","h4","h5","h6","hgroup","nav","section","div","dd","dl","dt","figcaption","figure","hr","img","li","main","ol","p","pre","ul","a","b","abbr","bdi","bdo","br","cite","code","data","dfn","em","i","kbd","mark","q","rp","rt","rtc","ruby","s","samp","small","span","strong","sub","sup","time","u","var","wbr","area","audio","map","track","video","embed","object","param","source","canvas","script","noscript","del","ins","caption","col","colgroup","table","thead","tbody","tfoot","td","th","tr","button","datalist","fieldset","form","input","label","legend","meter","optgroup","option","output","progress","select","textarea","details","dialog","menu","menuitem","summary","content","element","shadow","template","slot","blockquote","iframe","noframes","picture"]
+[
+ "a",
+ "abbr",
+ "address",
+ "area",
+ "article",
+ "aside",
+ "audio",
+ "b",
+ "base",
+ "bdi",
+ "bdo",
+ "blockquote",
+ "body",
+ "br",
+ "button",
+ "canvas",
+ "caption",
+ "cite",
+ "code",
+ "col",
+ "colgroup",
+ "data",
+ "datalist",
+ "dd",
+ "del",
+ "details",
+ "dfn",
+ "dialog",
+ "div",
+ "dl",
+ "dt",
+ "em",
+ "embed",
+ "fencedframe",
+ "fieldset",
+ "figcaption",
+ "figure",
+ "footer",
+ "form",
+ "h1",
+ "h2",
+ "h3",
+ "h4",
+ "h5",
+ "h6",
+ "head",
+ "header",
+ "hgroup",
+ "hr",
+ "html",
+ "i",
+ "iframe",
+ "img",
+ "input",
+ "ins",
+ "kbd",
+ "label",
+ "legend",
+ "li",
+ "link",
+ "main",
+ "map",
+ "mark",
+ "menu",
+ "meta",
+ "meter",
+ "nav",
+ "noscript",
+ "object",
+ "ol",
+ "optgroup",
+ "option",
+ "output",
+ "p",
+ "picture",
+ "pre",
+ "progress",
+ "q",
+ "rp",
+ "rt",
+ "ruby",
+ "s",
+ "samp",
+ "script",
+ "search",
+ "section",
+ "select",
+ "selectedcontent",
+ "slot",
+ "small",
+ "source",
+ "span",
+ "strong",
+ "style",
+ "sub",
+ "summary",
+ "sup",
+ "table",
+ "tbody",
+ "td",
+ "template",
+ "textarea",
+ "tfoot",
+ "th",
+ "thead",
+ "time",
+ "title",
+ "tr",
+ "track",
+ "u",
+ "ul",
+ "var",
+ "video",
+ "wbr"
+]
diff --git a/lib/utils/indent-common.js b/lib/utils/indent-common.js
index c86460dac..d2879b120 100644
--- a/lib/utils/indent-common.js
+++ b/lib/utils/indent-common.js
@@ -4,59 +4,129 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
+const {
+ isArrowToken,
+ isOpeningParenToken,
+ isClosingParenToken,
+ isNotOpeningParenToken,
+ isNotClosingParenToken,
+ isOpeningBraceToken,
+ isClosingBraceToken,
+ isNotOpeningBraceToken,
+ isOpeningBracketToken,
+ isClosingBracketToken,
+ isSemicolonToken,
+ isNotSemicolonToken
+} = require('@eslint-community/eslint-utils')
+const {
+ isComment,
+ isNotComment,
+ isWildcard,
+ isExtendsKeyword,
+ isNotWhitespace,
+ isNotEmptyTextNode,
+ isPipeOperator,
+ last
+} = require('./indent-utils')
+const { defineVisitor: tsDefineVisitor } = require('./indent-ts')
-const assert = require('assert')
-
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
+/**
+ * @typedef {import('../../typings/eslint-plugin-vue/util-types/node').HasLocation} HasLocation
+ * @typedef { { type: string } & HasLocation } MaybeNode
+ */
-const KNOWN_NODES = new Set(['ArrayExpression', 'ArrayPattern', 'ArrowFunctionExpression', 'AssignmentExpression', 'AssignmentPattern', 'AwaitExpression', 'BinaryExpression', 'BlockStatement', 'BreakStatement', 'CallExpression', 'CatchClause', 'ClassBody', 'ClassDeclaration', 'ClassExpression', 'ConditionalExpression', 'ContinueStatement', 'DebuggerStatement', 'DoWhileStatement', 'EmptyStatement', 'ExperimentalRestProperty', 'ExperimentalSpreadProperty', 'ExportAllDeclaration', 'ExportDefaultDeclaration', 'ExportNamedDeclaration', 'ExportSpecifier', 'ExpressionStatement', 'ForInStatement', 'ForOfStatement', 'ForStatement', 'FunctionDeclaration', 'FunctionExpression', 'Identifier', 'IfStatement', 'ImportDeclaration', 'ImportDefaultSpecifier', 'ImportNamespaceSpecifier', 'ImportSpecifier', 'LabeledStatement', 'Literal', 'LogicalExpression', 'MemberExpression', 'MetaProperty', 'MethodDefinition', 'NewExpression', 'ObjectExpression', 'ObjectPattern', 'Program', 'Property', 'RestElement', 'ReturnStatement', 'SequenceExpression', 'SpreadElement', 'Super', 'SwitchCase', 'SwitchStatement', 'TaggedTemplateExpression', 'TemplateElement', 'TemplateLiteral', 'ThisExpression', 'ThrowStatement', 'TryStatement', 'UnaryExpression', 'UpdateExpression', 'VariableDeclaration', 'VariableDeclarator', 'WhileStatement', 'WithStatement', 'YieldExpression', 'VAttribute', 'VDirectiveKey', 'VDocumentFragment', 'VElement', 'VEndTag', 'VExpressionContainer', 'VFilter', 'VFilterSequenceExpression', 'VForExpression', 'VIdentifier', 'VLiteral', 'VOnExpression', 'VSlotScopeExpression', 'VStartTag', 'VText'])
-const LT_CHAR = /[\r\n\u2028\u2029]/
-const LINES = /[^\r\n\u2028\u2029]+(?:$|\r\n|[\r\n\u2028\u2029])/g
+const LT_CHAR = /[\n\r\u2028\u2029]/
+const LINES = /[^\n\r\u2028\u2029]+(?:$|\r\n|[\n\r\u2028\u2029])/g
const BLOCK_COMMENT_PREFIX = /^\s*\*/
-const ITERATION_OPTS = Object.freeze({ includeComments: true, filter: isNotWhitespace })
-const PREFORMATTED_ELEMENT_NAMES = ['pre', 'textarea']
+const ITERATION_OPTS = Object.freeze({
+ includeComments: true,
+ filter: isNotWhitespace
+})
+const PREFORMATTED_ELEMENT_NAMES = new Set(['pre', 'textarea'])
+/**
+ * @typedef {object} IndentOptions
+ * @property { " " | "\t" } IndentOptions.indentChar
+ * @property {number} IndentOptions.indentSize
+ * @property {number} IndentOptions.baseIndent
+ * @property {number} IndentOptions.attribute
+ * @property {object} IndentOptions.closeBracket
+ * @property {number} IndentOptions.closeBracket.startTag
+ * @property {number} IndentOptions.closeBracket.endTag
+ * @property {number} IndentOptions.closeBracket.selfClosingTag
+ * @property {number} IndentOptions.switchCase
+ * @property {boolean} IndentOptions.alignAttributesVertically
+ * @property {string[]} IndentOptions.ignores
+ */
+/**
+ * @typedef {object} IndentUserOptions
+ * @property { " " | "\t" } [IndentUserOptions.indentChar]
+ * @property {number} [IndentUserOptions.indentSize]
+ * @property {number} [IndentUserOptions.baseIndent]
+ * @property {number} [IndentUserOptions.attribute]
+ * @property {IndentOptions['closeBracket'] | number} [IndentUserOptions.closeBracket]
+ * @property {number} [IndentUserOptions.switchCase]
+ * @property {boolean} [IndentUserOptions.alignAttributesVertically]
+ * @property {string[]} [IndentUserOptions.ignores]
+ */
/**
* Normalize options.
* @param {number|"tab"|undefined} type The type of indentation.
- * @param {Object} options Other options.
- * @param {Object} defaultOptions The default value of options.
- * @returns {{indentChar:" "|"\t",indentSize:number,baseIndent:number,attribute:number,closeBracket:number,switchCase:number,alignAttributesVertically:boolean,ignores:string[]}} Normalized options.
+ * @param {IndentUserOptions} options Other options.
+ * @param {Partial} defaultOptions The default value of options.
+ * @returns {IndentOptions} Normalized options.
*/
-function parseOptions (type, options, defaultOptions) {
- const ret = Object.assign({
- indentChar: ' ',
- indentSize: 2,
- baseIndent: 0,
- attribute: 1,
- closeBracket: 0,
- switchCase: 0,
- alignAttributesVertically: true,
- ignores: []
- }, defaultOptions)
+function parseOptions(type, options, defaultOptions) {
+ /** @type {IndentOptions} */
+ const ret = Object.assign(
+ {
+ indentChar: ' ',
+ indentSize: 2,
+ baseIndent: 0,
+ attribute: 1,
+ closeBracket: {
+ startTag: 0,
+ endTag: 0,
+ selfClosingTag: 0
+ },
+ switchCase: 0,
+ alignAttributesVertically: true,
+ ignores: []
+ },
+ defaultOptions
+ )
if (Number.isSafeInteger(type)) {
- ret.indentSize = type
+ ret.indentSize = Number(type)
} else if (type === 'tab') {
ret.indentChar = '\t'
ret.indentSize = 1
}
- if (Number.isSafeInteger(options.baseIndent)) {
+ if (options.baseIndent != null && Number.isSafeInteger(options.baseIndent)) {
ret.baseIndent = options.baseIndent
}
- if (Number.isSafeInteger(options.attribute)) {
+ if (options.attribute != null && Number.isSafeInteger(options.attribute)) {
ret.attribute = options.attribute
}
if (Number.isSafeInteger(options.closeBracket)) {
- ret.closeBracket = options.closeBracket
+ const num = Number(options.closeBracket)
+ ret.closeBracket = {
+ startTag: num,
+ endTag: num,
+ selfClosingTag: num
+ }
+ } else if (options.closeBracket) {
+ ret.closeBracket = Object.assign(
+ {
+ startTag: 0,
+ endTag: 0,
+ selfClosingTag: 0
+ },
+ options.closeBracket
+ )
}
- if (Number.isSafeInteger(options.switchCase)) {
+ if (options.switchCase != null && Number.isSafeInteger(options.switchCase)) {
ret.switchCase = options.switchCase
}
@@ -70,167 +140,14 @@ function parseOptions (type, options, defaultOptions) {
return ret
}
-/**
- * Check whether the given token is an arrow.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is an arrow.
- */
-function isArrow (token) {
- return token != null && token.type === 'Punctuator' && token.value === '=>'
-}
-
-/**
- * Check whether the given token is a left parenthesis.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a left parenthesis.
- */
-function isLeftParen (token) {
- return token != null && token.type === 'Punctuator' && token.value === '('
-}
-
-/**
- * Check whether the given token is a left parenthesis.
- * @param {Token} token The token to check.
- * @returns {boolean} `false` if the token is a left parenthesis.
- */
-function isNotLeftParen (token) {
- return token != null && (token.type !== 'Punctuator' || token.value !== '(')
-}
-
-/**
- * Check whether the given token is a right parenthesis.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a right parenthesis.
- */
-function isRightParen (token) {
- return token != null && token.type === 'Punctuator' && token.value === ')'
-}
-
-/**
- * Check whether the given token is a right parenthesis.
- * @param {Token} token The token to check.
- * @returns {boolean} `false` if the token is a right parenthesis.
- */
-function isNotRightParen (token) {
- return token != null && (token.type !== 'Punctuator' || token.value !== ')')
-}
-
-/**
- * Check whether the given token is a left brace.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a left brace.
- */
-function isLeftBrace (token) {
- return token != null && token.type === 'Punctuator' && token.value === '{'
-}
-
-/**
- * Check whether the given token is a right brace.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a right brace.
- */
-function isRightBrace (token) {
- return token != null && token.type === 'Punctuator' && token.value === '}'
-}
-
-/**
- * Check whether the given token is a left bracket.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a left bracket.
- */
-function isLeftBracket (token) {
- return token != null && token.type === 'Punctuator' && token.value === '['
-}
-
-/**
- * Check whether the given token is a right bracket.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a right bracket.
- */
-function isRightBracket (token) {
- return token != null && token.type === 'Punctuator' && token.value === ']'
-}
-
-/**
- * Check whether the given token is a semicolon.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a semicolon.
- */
-function isSemicolon (token) {
- return token != null && token.type === 'Punctuator' && token.value === ';'
-}
-
-/**
- * Check whether the given token is a comma.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a comma.
- */
-function isComma (token) {
- return token != null && token.type === 'Punctuator' && token.value === ','
-}
-
-/**
- * Check whether the given token is a whitespace.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a whitespace.
- */
-function isNotWhitespace (token) {
- return token != null && token.type !== 'HTMLWhitespace'
-}
-
-/**
- * Check whether the given token is a comment.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a comment.
- */
-function isComment (token) {
- return token != null && (token.type === 'Block' || token.type === 'Line' || token.type === 'Shebang' || token.type.endsWith('Comment'))
-}
-
-/**
- * Check whether the given token is a comment.
- * @param {Token} token The token to check.
- * @returns {boolean} `false` if the token is a comment.
- */
-function isNotComment (token) {
- return token != null && token.type !== 'Block' && token.type !== 'Line' && token.type !== 'Shebang' && !token.type.endsWith('Comment')
-}
-
-/**
- * Check whether the given node is not an empty text node.
- * @param {Node} node The node to check.
- * @returns {boolean} `false` if the token is empty text node.
- */
-function isNotEmptyTextNode (node) {
- return !(node.type === 'VText' && node.value.trim() === '')
-}
-
-/**
- * Check whether the given token is a pipe operator.
- * @param {Token} token The token to check.
- * @returns {boolean} `true` if the token is a pipe operator.
- */
-function isPipeOperator (token) {
- return token != null && token.type === 'Punctuator' && token.value === '|'
-}
-
-/**
- * Get the last element.
- * @param {Array} xs The array to get the last element.
- * @returns {any|undefined} The last element or undefined.
- */
-function last (xs) {
- return xs.length === 0 ? undefined : xs[xs.length - 1]
-}
-
/**
* Check whether the node is at the beginning of line.
- * @param {Node} node The node to check.
+ * @param {MaybeNode|null} node The node to check.
* @param {number} index The index of the node in the nodes.
- * @param {Node[]} nodes The array of nodes.
+ * @param {(MaybeNode|null)[]} nodes The array of nodes.
* @returns {boolean} `true` if the node is at the beginning of line.
*/
-function isBeginningOfLine (node, index, nodes) {
+function isBeginningOfLine(node, index, nodes) {
if (node != null) {
for (let i = index - 1; i >= 0; --i) {
const prevNode = nodes[i]
@@ -249,50 +166,67 @@ function isBeginningOfLine (node, index, nodes) {
* @param {Token} token The token to check.
* @returns {boolean} `true` if the token is a closing token.
*/
-function isClosingToken (token) {
- return token != null && (
- token.type === 'HTMLEndTagOpen' ||
- token.type === 'VExpressionEnd' ||
- (
- token.type === 'Punctuator' &&
- (
- token.value === ')' ||
- token.value === '}' ||
- token.value === ']'
- )
- )
+function isClosingToken(token) {
+ return (
+ token != null &&
+ (token.type === 'HTMLEndTagOpen' ||
+ token.type === 'VExpressionEnd' ||
+ (token.type === 'Punctuator' &&
+ (token.value === ')' || token.value === '}' || token.value === ']')))
)
}
+/**
+ * Checks whether a given token is a optional token.
+ * @param {Token} token The token to check.
+ * @returns {boolean} `true` if the token is a optional token.
+ */
+function isOptionalToken(token) {
+ return token.type === 'Punctuator' && token.value === '?.'
+}
+
/**
* Creates AST event handlers for html-indent.
*
* @param {RuleContext} context The rule context.
- * @param {TokenStore} tokenStore The token store object to get tokens.
- * @param {Object} defaultOptions The default value of options.
- * @returns {object} AST event handlers.
+ * @param {ParserServices.TokenStore | SourceCode} tokenStore The token store object to get tokens.
+ * @param {Partial} defaultOptions The default value of options.
+ * @returns {NodeListener} AST event handlers.
*/
-module.exports.defineVisitor = function create (context, tokenStore, defaultOptions) {
+module.exports.defineVisitor = function create(
+ context,
+ tokenStore,
+ defaultOptions
+) {
if (!context.getFilename().endsWith('.vue')) return {}
- const options = parseOptions(context.options[0], context.options[1] || {}, defaultOptions)
+ const options = parseOptions(
+ context.options[0],
+ context.options[1] || {},
+ defaultOptions
+ )
const sourceCode = context.getSourceCode()
+ /**
+ * @typedef { { baseToken: Token | null, offset: number, baseline: boolean, expectedIndent: number | undefined } } OffsetData
+ */
+ /** @type {Map} */
const offsets = new Map()
- const preformattedTokens = new Set()
+ const ignoreTokens = new Set()
/**
* Set offset to the given tokens.
- * @param {Token|Token[]} token The token to set.
+ * @param {Token|Token[]|null|(Token|null)[]} token The token to set.
* @param {number} offset The offset of the tokens.
* @param {Token} baseToken The token of the base offset.
- * @param {boolean} [trivial=false] The flag for trivial tokens.
* @returns {void}
*/
- function setOffset (token, offset, baseToken) {
- assert(baseToken != null, "'baseToken' should not be null or undefined.")
-
+ function setOffset(token, offset, baseToken) {
+ if (!token || token === baseToken) {
+ return
+ }
if (Array.isArray(token)) {
for (const t of token) {
+ if (!t || t === baseToken) continue
offsets.set(t, {
baseToken,
offset,
@@ -310,12 +244,39 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
}
}
+ /**
+ * Copy offset to the given tokens from srcToken.
+ * @param {Token} token The token to set.
+ * @param {Token} srcToken The token of the source offset.
+ * @returns {void}
+ */
+ function copyOffset(token, srcToken) {
+ if (!token) {
+ return
+ }
+ const offsetData = offsets.get(srcToken)
+ if (!offsetData) {
+ return
+ }
+
+ setOffset(
+ token,
+ offsetData.offset,
+ /** @type {Token} */ (offsetData.baseToken)
+ )
+ if (offsetData.baseline) {
+ setBaseline(token)
+ }
+ const o = /** @type {OffsetData} */ (offsets.get(token))
+ o.expectedIndent = offsetData.expectedIndent
+ }
+
/**
* Set baseline flag to the given token.
* @param {Token} token The token to set.
* @returns {void}
*/
- function setBaseline (token) {
+ function setBaseline(token) {
const offsetInfo = offsets.get(token)
if (offsetInfo != null) {
offsetInfo.baseline = true
@@ -324,44 +285,57 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
/**
* Sets preformatted tokens to the given element node.
- * @param {Node} node The node to set.
+ * @param {VElement} node The node to set.
* @returns {void}
*/
- function setPreformattedTokens (node) {
- const endToken = (node.endTag && tokenStore.getFirstToken(node.endTag)) || tokenStore.getTokenAfter(node)
+ function setPreformattedTokens(node) {
+ const endToken =
+ (node.endTag && tokenStore.getFirstToken(node.endTag)) ||
+ tokenStore.getTokenAfter(node)
- const option = {
+ /** @type {SourceCode.CursorWithSkipOptions} */
+ const cursorOptions = {
includeComments: true,
- filter: token => token != null && (
- token.type === 'HTMLText' ||
- token.type === 'HTMLRCDataText' ||
- token.type === 'HTMLTagOpen' ||
- token.type === 'HTMLEndTagOpen' ||
- token.type === 'HTMLComment'
- )
+ filter: (token) =>
+ token != null &&
+ (token.type === 'HTMLText' ||
+ token.type === 'HTMLRCDataText' ||
+ token.type === 'HTMLTagOpen' ||
+ token.type === 'HTMLEndTagOpen' ||
+ token.type === 'HTMLComment')
}
- for (const token of tokenStore.getTokensBetween(node.startTag, endToken, option)) {
- preformattedTokens.add(token)
+ const contentTokens = endToken
+ ? tokenStore.getTokensBetween(node.startTag, endToken, cursorOptions)
+ : tokenStore.getTokensAfter(node.startTag, cursorOptions)
+
+ for (const token of contentTokens) {
+ ignoreTokens.add(token)
}
- preformattedTokens.add(endToken)
+ ignoreTokens.add(endToken)
}
/**
* Get the first and last tokens of the given node.
* If the node is parenthesized, this gets the outermost parentheses.
- * @param {Node} node The node to get.
+ * @param {MaybeNode} node The node to get.
* @param {number} [borderOffset] The least offset of the first token. Defailt is 0. This value is used to prevent false positive in the following case: `(a) => {}` The parentheses are enclosing the whole parameter part rather than the first parameter, but this offset parameter is needed to distinguish.
* @returns {{firstToken:Token,lastToken:Token}} The gotten tokens.
*/
- function getFirstAndLastTokens (node, borderOffset) {
- borderOffset |= 0
+ function getFirstAndLastTokens(node, borderOffset = 0) {
+ borderOffset = Math.trunc(borderOffset)
let firstToken = tokenStore.getFirstToken(node)
let lastToken = tokenStore.getLastToken(node)
// Get the outermost left parenthesis if it's parenthesized.
let t, u
- while ((t = tokenStore.getTokenBefore(firstToken)) != null && (u = tokenStore.getTokenAfter(lastToken)) != null && isLeftParen(t) && isRightParen(u) && t.range[0] >= borderOffset) {
+ while (
+ (t = tokenStore.getTokenBefore(firstToken)) != null &&
+ (u = tokenStore.getTokenAfter(lastToken)) != null &&
+ isOpeningParenToken(t) &&
+ isClosingParenToken(u) &&
+ t.range[0] >= borderOffset
+ ) {
firstToken = t
lastToken = u
}
@@ -373,31 +347,33 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
* Process the given node list.
* The first node is offsetted from the given left token.
* Rest nodes are adjusted to the first node.
- * @param {Node[]} nodeList The node to process.
- * @param {Node|Token|null} left The left parenthesis token.
- * @param {Node|Token|null} right The right parenthesis token.
+ * @param {(MaybeNode|null)[]} nodeList The node to process.
+ * @param {MaybeNode|Token|null} left The left parenthesis token.
+ * @param {MaybeNode|Token|null} right The right parenthesis token.
* @param {number} offset The offset to set.
* @param {boolean} [alignVertically=true] The flag to align vertically. If `false`, this doesn't align vertically even if the first node is not at beginning of line.
* @returns {void}
*/
- function processNodeList (nodeList, left, right, offset, alignVertically) {
+ function processNodeList(nodeList, left, right, offset, alignVertically) {
let t
- const leftToken = (left && tokenStore.getFirstToken(left)) || left
- const rightToken = (right && tokenStore.getFirstToken(right)) || right
+ const leftToken = left && tokenStore.getFirstToken(left)
+ const rightToken = right && tokenStore.getFirstToken(right)
- if (nodeList.length >= 1) {
+ if (nodeList.length > 0) {
let baseToken = null
let lastToken = left
const alignTokensBeforeBaseToken = []
const alignTokens = []
- for (let i = 0; i < nodeList.length; ++i) {
- const node = nodeList[i]
+ for (const node of nodeList) {
if (node == null) {
// Holes of an array.
continue
}
- const elementTokens = getFirstAndLastTokens(node, lastToken != null ? lastToken.range[1] : 0)
+ const elementTokens = getFirstAndLastTokens(
+ node,
+ lastToken == null ? 0 : lastToken.range[1]
+ )
// Collect comma/comment tokens between the last token of the previous node and the first token of this node.
if (lastToken != null) {
@@ -464,7 +440,7 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
}
}
- if (rightToken != null) {
+ if (rightToken != null && leftToken != null) {
setOffset(rightToken, 0, leftToken)
}
}
@@ -472,43 +448,56 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
/**
* Process the given node as body.
* The body node maybe a block statement or an expression node.
- * @param {Node} node The body node to process.
+ * @param {ASTNode} node The body node to process.
* @param {Token} baseToken The base token.
* @returns {void}
*/
- function processMaybeBlock (node, baseToken) {
+ function processMaybeBlock(node, baseToken) {
const firstToken = getFirstAndLastTokens(node).firstToken
- setOffset(firstToken, isLeftBrace(firstToken) ? 0 : 1, baseToken)
+ setOffset(firstToken, isOpeningBraceToken(firstToken) ? 0 : 1, baseToken)
}
/**
- * Collect prefix tokens of the given property.
- * The prefix includes `async`, `get`, `set`, `static`, and `*`.
- * @param {Property|MethodDefinition} node The property node to collect prefix tokens.
+ * Process semicolons of the given statement node.
+ * @param {MaybeNode} node The statement node to process.
+ * @returns {void}
*/
- function getPrefixTokens (node) {
- const prefixes = []
-
- let token = tokenStore.getFirstToken(node)
- while (token != null && token.range[1] <= node.key.range[0]) {
- prefixes.push(token)
- token = tokenStore.getTokenAfter(token)
- }
- while (isLeftParen(last(prefixes)) || isLeftBracket(last(prefixes))) {
- prefixes.pop()
+ function processSemicolons(node) {
+ const firstToken = tokenStore.getFirstToken(node)
+ const lastToken = tokenStore.getLastToken(node)
+ if (isSemicolonToken(lastToken) && firstToken !== lastToken) {
+ setOffset(lastToken, 0, firstToken)
}
- return prefixes
+ // Set to the semicolon of the previous token for semicolon-free style.
+ // E.g.,
+ // foo
+ // ;[1,2,3].forEach(f)
+ const info = offsets.get(firstToken)
+ const prevToken = tokenStore.getTokenBefore(firstToken)
+ if (
+ info != null &&
+ prevToken &&
+ isSemicolonToken(prevToken) &&
+ prevToken.loc.end.line === firstToken.loc.start.line
+ ) {
+ offsets.set(prevToken, info)
+ }
}
/**
* Find the head of chaining nodes.
- * @param {Node} node The start node to find the head.
+ * @param {ASTNode} node The start node to find the head.
* @returns {Token} The head token of the chain.
*/
- function getChainHeadToken (node) {
+ function getChainHeadToken(node) {
const type = node.type
- while (node.parent.type === type) {
+ while (node.parent && node.parent.type === type) {
+ const prevToken = tokenStore.getTokenBefore(node)
+ if (isOpeningParenToken(prevToken)) {
+ // The chaining is broken by parentheses.
+ break
+ }
node = node.parent
}
return tokenStore.getFirstToken(node)
@@ -524,36 +513,53 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
* - An expression of SequenceExpression
*
* @param {Token} token The token to check.
- * @param {Node} belongingNode The node that the token is belonging to.
+ * @param {ASTNode} belongingNode The node that the token is belonging to.
* @returns {boolean} `true` if the token is the first token of an element.
*/
- function isBeginningOfElement (token, belongingNode) {
+ function isBeginningOfElement(token, belongingNode) {
let node = belongingNode
- while (node != null) {
+ while (node != null && node.parent != null) {
const parent = node.parent
- const t = parent && parent.type
- if (t != null && (t.endsWith('Statement') || t.endsWith('Declaration'))) {
+ if (
+ parent.type.endsWith('Statement') ||
+ parent.type.endsWith('Declaration')
+ ) {
return parent.range[0] === token.range[0]
}
- if (t === 'VExpressionContainer') {
- return node.range[0] === token.range[0]
+ if (parent.type === 'VExpressionContainer') {
+ if (node.range[0] !== token.range[0]) {
+ return false
+ }
+ const prevToken = tokenStore.getTokenBefore(belongingNode)
+ if (isOpeningParenToken(prevToken)) {
+ // It is not the first token because it is enclosed in parentheses.
+ return false
+ }
+ return true
}
- if (t === 'CallExpression' || t === 'NewExpression') {
- const openParen = tokenStore.getTokenAfter(parent.callee, isNotRightParen)
- return parent.arguments.some(param =>
- getFirstAndLastTokens(param, openParen.range[1]).firstToken.range[0] === token.range[0]
+ if (parent.type === 'CallExpression' || parent.type === 'NewExpression') {
+ const openParen = /** @type {Token} */ (
+ tokenStore.getTokenAfter(parent.callee, isNotClosingParenToken)
+ )
+ return parent.arguments.some(
+ (param) =>
+ getFirstAndLastTokens(param, openParen.range[1]).firstToken
+ .range[0] === token.range[0]
)
}
- if (t === 'ArrayExpression') {
- return parent.elements.some(element =>
- element != null &&
- getFirstAndLastTokens(element).firstToken.range[0] === token.range[0]
+ if (parent.type === 'ArrayExpression') {
+ return parent.elements.some(
+ (element) =>
+ element != null &&
+ getFirstAndLastTokens(element).firstToken.range[0] ===
+ token.range[0]
)
}
- if (t === 'SequenceExpression') {
- return parent.expressions.some(expr =>
- getFirstAndLastTokens(expr).firstToken.range[0] === token.range[0]
+ if (parent.type === 'SequenceExpression') {
+ return parent.expressions.some(
+ (expr) =>
+ getFirstAndLastTokens(expr).firstToken.range[0] === token.range[0]
)
}
@@ -565,44 +571,51 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
/**
* Set the base indentation to a given top-level AST node.
- * @param {Node} node The node to set.
+ * @param {ASTNode} node The node to set.
* @param {number} expectedIndent The number of expected indent.
* @returns {void}
*/
- function processTopLevelNode (node, expectedIndent) {
+ function processTopLevelNode(node, expectedIndent) {
const token = tokenStore.getFirstToken(node)
const offsetInfo = offsets.get(token)
- if (offsetInfo != null) {
- offsetInfo.expectedIndent = expectedIndent
+ if (offsetInfo == null) {
+ offsets.set(token, {
+ baseToken: null,
+ offset: 0,
+ baseline: false,
+ expectedIndent
+ })
} else {
- offsets.set(token, { baseToken: null, offset: 0, baseline: false, expectedIndent })
+ offsetInfo.expectedIndent = expectedIndent
}
}
/**
* Ignore all tokens of the given node.
- * @param {Node} node The node to ignore.
+ * @param {ASTNode} node The node to ignore.
* @returns {void}
*/
- function ignore (node) {
+ function ignore(node) {
for (const token of tokenStore.getTokens(node)) {
offsets.delete(token)
+ ignoreTokens.add(token)
}
}
/**
* Define functions to ignore nodes into the given visitor.
- * @param {Object} visitor The visitor to define functions to ignore nodes.
- * @returns {Object} The visitor.
+ * @param {NodeListener} visitor The visitor to define functions to ignore nodes.
+ * @returns {NodeListener} The visitor.
*/
- function processIgnores (visitor) {
+ function processIgnores(visitor) {
for (const ignorePattern of options.ignores) {
const key = `${ignorePattern}:exit`
if (visitor.hasOwnProperty(key)) {
const handler = visitor[key]
- visitor[key] = function (node) {
- const ret = handler.apply(this, arguments)
+ visitor[key] = function (node, ...args) {
+ // @ts-expect-error
+ const ret = handler.call(this, node, ...args)
ignore(node)
return ret
}
@@ -617,36 +630,42 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
/**
* Calculate correct indentation of the line of the given tokens.
* @param {Token[]} tokens Tokens which are on the same line.
- * @returns {object|null} Correct indentation. If it failed to calculate then `null`.
+ * @returns { { expectedIndent: number, expectedBaseIndent: number } |null } Correct indentation. If it failed to calculate then `null`.
*/
- function getExpectedIndents (tokens) {
+ function getExpectedIndents(tokens) {
const expectedIndents = []
- for (let i = 0; i < tokens.length; ++i) {
- const token = tokens[i]
+ for (const [i, token] of tokens.entries()) {
const offsetInfo = offsets.get(token)
if (offsetInfo != null) {
- if (offsetInfo.expectedIndent != null) {
- expectedIndents.push(offsetInfo.expectedIndent)
- } else {
+ if (offsetInfo.expectedIndent == null) {
const baseOffsetInfo = offsets.get(offsetInfo.baseToken)
- if (baseOffsetInfo != null && baseOffsetInfo.expectedIndent != null && (i === 0 || !baseOffsetInfo.baseline)) {
- expectedIndents.push(baseOffsetInfo.expectedIndent + (offsetInfo.offset * options.indentSize))
+ if (
+ baseOffsetInfo != null &&
+ baseOffsetInfo.expectedIndent != null &&
+ (i === 0 || !baseOffsetInfo.baseline)
+ ) {
+ expectedIndents.push(
+ baseOffsetInfo.expectedIndent +
+ offsetInfo.offset * options.indentSize
+ )
if (baseOffsetInfo.baseline) {
break
}
}
+ } else {
+ expectedIndents.push(offsetInfo.expectedIndent)
}
}
}
- if (!expectedIndents.length) {
+ if (expectedIndents.length === 0) {
return null
}
return {
expectedIndent: expectedIndents[0],
- expectedBaseIndent: expectedIndents.reduce((a, b) => Math.min(a, b))
+ expectedBaseIndent: Math.min(...expectedIndents)
}
}
@@ -655,7 +674,7 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
* @param {Token} firstToken The first token on a line.
* @returns {string} The text of indentation part.
*/
- function getIndentText (firstToken) {
+ function getIndentText(firstToken) {
const text = sourceCode.text
let i = firstToken.range[0] - 1
@@ -669,29 +688,33 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
/**
* Define the function which fixes the problem.
* @param {Token} token The token to fix.
- * @param {number} actualIndent The number of actual indentaion.
+ * @param {number} actualIndent The number of actual indentation.
* @param {number} expectedIndent The number of expected indentation.
- * @returns {Function} The defined function.
+ * @returns { (fixer: RuleFixer) => Fix } The defined function.
*/
- function defineFix (token, actualIndent, expectedIndent) {
+ function defineFix(token, actualIndent, expectedIndent) {
if (token.type === 'Block' && token.loc.start.line !== token.loc.end.line) {
// Fix indentation in multiline block comments.
- const lines = sourceCode.getText(token).match(LINES)
+ const lines = sourceCode.getText(token).match(LINES) || []
const firstLine = lines.shift()
- if (lines.every(l => BLOCK_COMMENT_PREFIX.test(l))) {
- return fixer => {
+ if (lines.every((l) => BLOCK_COMMENT_PREFIX.test(l))) {
+ return (fixer) => {
+ /** @type {Range} */
const range = [token.range[0] - actualIndent, token.range[1]]
const indent = options.indentChar.repeat(expectedIndent)
return fixer.replaceTextRange(
range,
- `${indent}${firstLine}${lines.map(l => l.replace(BLOCK_COMMENT_PREFIX, `${indent} *`)).join('')}`
+ `${indent}${firstLine}${lines
+ .map((l) => l.replace(BLOCK_COMMENT_PREFIX, `${indent} *`))
+ .join('')}`
)
}
}
}
- return fixer => {
+ return (fixer) => {
+ /** @type {Range} */
const range = [token.range[0] - actualIndent, token.range[0]]
const indent = options.indentChar.repeat(expectedIndent)
return fixer.replaceTextRange(range, indent)
@@ -702,10 +725,10 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
* Validate the given token with the pre-calculated expected indentation.
* @param {Token} token The token to validate.
* @param {number} expectedIndent The expected indentation.
- * @param {number[]|undefined} optionalExpectedIndents The optional expected indentation.
+ * @param {[number, number?]} [optionalExpectedIndents] The optional expected indentation.
* @returns {void}
*/
- function validateCore (token, expectedIndent, optionalExpectedIndents) {
+ function validateCore(token, expectedIndent, optionalExpectedIndents) {
const line = token.loc.start.line
const indentText = getIndentText(token)
@@ -717,19 +740,20 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
}
const actualIndent = token.loc.start.column
- const unit = (options.indentChar === '\t' ? 'tab' : 'space')
+ const unit = options.indentChar === '\t' ? 'tab' : 'space'
- for (let i = 0; i < indentText.length; ++i) {
- if (indentText[i] !== options.indentChar) {
+ for (const [i, char] of [...indentText].entries()) {
+ if (char !== options.indentChar) {
context.report({
loc: {
start: { line, column: i },
end: { line, column: i + 1 }
},
- message: 'Expected {{expected}} character, but found {{actual}} character.',
+ message:
+ 'Expected {{expected}} character, but found {{actual}} character.',
data: {
expected: JSON.stringify(options.indentChar),
- actual: JSON.stringify(indentText[i])
+ actual: JSON.stringify(char)
},
fix: defineFix(token, actualIndent, expectedIndent)
})
@@ -737,19 +761,24 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
}
}
- if (actualIndent !== expectedIndent && (optionalExpectedIndents == null || !optionalExpectedIndents.includes(actualIndent))) {
+ if (
+ actualIndent !== expectedIndent &&
+ (optionalExpectedIndents == null ||
+ !optionalExpectedIndents.includes(actualIndent))
+ ) {
context.report({
loc: {
start: { line, column: 0 },
end: { line, column: actualIndent }
},
- message: 'Expected indentation of {{expectedIndent}} {{unit}}{{expectedIndentPlural}} but found {{actualIndent}} {{unit}}{{actualIndentPlural}}.',
+ message:
+ 'Expected indentation of {{expectedIndent}} {{unit}}{{expectedIndentPlural}} but found {{actualIndent}} {{unit}}{{actualIndentPlural}}.',
data: {
expectedIndent,
actualIndent,
unit,
- expectedIndentPlural: (expectedIndent === 1) ? '' : 's',
- actualIndentPlural: (actualIndent === 1) ? '' : 's'
+ expectedIndentPlural: expectedIndent === 1 ? '' : 's',
+ actualIndentPlural: actualIndent === 1 ? '' : 's'
},
fix: defineFix(token, actualIndent, expectedIndent)
})
@@ -758,12 +787,16 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
/**
* Get the expected indent of comments.
- * @param {Token|null} nextToken The next token of comments.
- * @param {number|undefined} nextExpectedIndent The expected indent of the next token.
+ * @param {Token} nextToken The next token of comments.
+ * @param {number} nextExpectedIndent The expected indent of the next token.
* @param {number|undefined} lastExpectedIndent The expected indent of the last token.
- * @returns {number[]}
+ * @returns {[number, number?]}
*/
- function getCommentExpectedIndents (nextToken, nextExpectedIndent, lastExpectedIndent) {
+ function getCommentExpectedIndents(
+ nextToken,
+ nextExpectedIndent,
+ lastExpectedIndent
+ ) {
if (typeof lastExpectedIndent === 'number' && isClosingToken(nextToken)) {
if (nextExpectedIndent === lastExpectedIndent) {
// For solo comment. E.g.,
@@ -796,7 +829,7 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
* @param {Token|null} lastToken The last validated token. Comments can adjust to the token.
* @returns {void}
*/
- function validate (tokens, comments, lastToken) {
+ function validate(tokens, comments, lastToken) {
// Calculate and save expected indentation.
const firstToken = tokens[0]
const actualIndent = firstToken.loc.start.column
@@ -829,17 +862,21 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
if (offsetInfo != null) {
if (offsetInfo.baseline) {
// This is a baseline token, so the expected indent is the column of this token.
- if (options.indentChar === ' ') {
- offsetInfo.expectedIndent = Math.max(0, token.loc.start.column + expectedBaseIndent - actualIndent)
- } else {
- // In hard-tabs mode, it cannot align tokens strictly, so use one additional offset.
- // But the additional offset isn't needed if it's at the beginning of the line.
- offsetInfo.expectedIndent = expectedBaseIndent + (token === tokens[0] ? 0 : 1)
- }
+ offsetInfo.expectedIndent =
+ options.indentChar === ' '
+ ? Math.max(
+ 0,
+ token.loc.start.column + expectedBaseIndent - actualIndent
+ )
+ : // In hard-tabs mode, it cannot align tokens strictly, so use one additional offset.
+ // But the additional offset isn't needed if it's at the beginning of the line.
+ expectedBaseIndent + (token === tokens[0] ? 0 : 1)
baseline.add(token)
} else if (baseline.has(offsetInfo.baseToken)) {
// The base token is a baseline token on this line, so inherit it.
- offsetInfo.expectedIndent = offsets.get(offsetInfo.baseToken).expectedIndent
+ offsetInfo.expectedIndent = /** @type {OffsetData} */ (
+ offsets.get(offsetInfo.baseToken)
+ ).expectedIndent
baseline.add(token)
} else {
// Otherwise, set the expected indent of this line.
@@ -848,8 +885,8 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
}
}
- // It does not validate preformatted tokens.
- if (preformattedTokens.has(firstToken)) {
+ // It does not validate ignore tokens.
+ if (ignoreTokens.has(firstToken)) {
return
}
@@ -857,17 +894,24 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
// It allows the same indent level with the previous line.
const lastOffsetInfo = offsets.get(lastToken)
const lastExpectedIndent = lastOffsetInfo && lastOffsetInfo.expectedIndent
- const commentOptionalExpectedIndents = getCommentExpectedIndents(firstToken, expectedIndent, lastExpectedIndent)
+ const commentOptionalExpectedIndents = getCommentExpectedIndents(
+ firstToken,
+ expectedIndent,
+ lastExpectedIndent
+ )
// Validate.
for (const comment of comments) {
const commentExpectedIndents = getExpectedIndents([comment])
- const commentExpectedIndent =
- commentExpectedIndents
- ? commentExpectedIndents.expectedIndent
- : commentOptionalExpectedIndents[0]
-
- validateCore(comment, commentExpectedIndent, commentOptionalExpectedIndents)
+ const commentExpectedIndent = commentExpectedIndents
+ ? commentExpectedIndents.expectedIndent
+ : commentOptionalExpectedIndents[0]
+
+ validateCore(
+ comment,
+ commentExpectedIndent,
+ commentOptionalExpectedIndents
+ )
}
validateCore(firstToken, expectedIndent)
}
@@ -876,45 +920,62 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
// Main
// ------------------------------------------------------------------------------
- return processIgnores({
- VAttribute (node) {
+ /** @type {Set} */
+ const knownNodes = new Set()
+ /** @type {TemplateListener} */
+ const visitor = {
+ // ----------------------------------------------------------------------
+ // Vue NODES
+ // ----------------------------------------------------------------------
+ /** @param {VAttribute | VDirective} node */
+ VAttribute(node) {
const keyToken = tokenStore.getFirstToken(node)
- const eqToken = tokenStore.getFirstToken(node, 1)
+ const eqToken = tokenStore.getTokenAfter(node.key)
- if (eqToken != null) {
+ if (eqToken != null && eqToken.range[1] <= node.range[1]) {
setOffset(eqToken, 1, keyToken)
- const valueToken = tokenStore.getFirstToken(node, 2)
- if (valueToken != null) {
+ const valueToken = tokenStore.getTokenAfter(eqToken)
+ if (valueToken != null && valueToken.range[1] <= node.range[1]) {
setOffset(valueToken, 1, keyToken)
}
}
},
-
- VElement (node) {
- if (!PREFORMATTED_ELEMENT_NAMES.includes(node.name)) {
- const isTopLevel = node.parent.type !== 'VElement'
- const offset = isTopLevel ? options.baseIndent : 1
- processNodeList(node.children.filter(isNotEmptyTextNode), node.startTag, node.endTag, offset)
- } else {
+ /** @param {VElement} node */
+ VElement(node) {
+ if (PREFORMATTED_ELEMENT_NAMES.has(node.name)) {
const startTagToken = tokenStore.getFirstToken(node)
const endTagToken = node.endTag && tokenStore.getFirstToken(node.endTag)
setOffset(endTagToken, 0, startTagToken)
setPreformattedTokens(node)
+ } else {
+ const isTopLevel = node.parent.type !== 'VElement'
+ const offset = isTopLevel ? options.baseIndent : 1
+ processNodeList(
+ node.children.filter(isNotEmptyTextNode),
+ node.startTag,
+ node.endTag,
+ offset,
+ false
+ )
}
},
-
- VEndTag (node) {
- const openToken = tokenStore.getFirstToken(node)
+ /** @param {VEndTag} node */
+ VEndTag(node) {
+ const element = node.parent
+ const startTagOpenToken = tokenStore.getFirstToken(element.startTag)
const closeToken = tokenStore.getLastToken(node)
if (closeToken.type.endsWith('TagClose')) {
- setOffset(closeToken, options.closeBracket, openToken)
+ setOffset(closeToken, options.closeBracket.endTag, startTagOpenToken)
}
},
-
- VExpressionContainer (node) {
- if (node.expression != null && node.range[0] !== node.expression.range[0]) {
+ /** @param {VExpressionContainer} node */
+ VExpressionContainer(node) {
+ if (
+ node.expression != null &&
+ node.range[0] !== node.expression.range[0]
+ ) {
const startQuoteToken = tokenStore.getFirstToken(node)
const endQuoteToken = tokenStore.getLastToken(node)
const childToken = tokenStore.getTokenAfter(startQuoteToken)
@@ -923,23 +984,24 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset(endQuoteToken, 0, startQuoteToken)
}
},
-
- VFilter (node) {
+ /** @param {VFilter} node */
+ VFilter(node) {
const idToken = tokenStore.getFirstToken(node)
const lastToken = tokenStore.getLastToken(node)
- if (isRightParen(lastToken)) {
+ if (isClosingParenToken(lastToken)) {
const leftParenToken = tokenStore.getTokenAfter(node.callee)
setOffset(leftParenToken, 1, idToken)
processNodeList(node.arguments, leftParenToken, lastToken, 1)
}
},
-
- VFilterSequenceExpression (node) {
+ /** @param {VFilterSequenceExpression} node */
+ VFilterSequenceExpression(node) {
if (node.filters.length === 0) {
return
}
const firstToken = tokenStore.getFirstToken(node)
+ /** @type {(Token|null)[]} */
const tokens = []
for (const filter of node.filters) {
@@ -951,26 +1013,31 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset(tokens, 1, firstToken)
},
-
- VForExpression (node) {
+ /** @param {VForExpression} node */
+ VForExpression(node) {
const firstToken = tokenStore.getFirstToken(node)
const lastOfLeft = last(node.left) || firstToken
- const inToken = tokenStore.getTokenAfter(lastOfLeft, isNotRightParen)
+ const inToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(lastOfLeft, isNotClosingParenToken)
+ )
const rightToken = tokenStore.getFirstToken(node.right)
- if (isLeftParen(firstToken)) {
- const rightToken = tokenStore.getTokenAfter(lastOfLeft, isRightParen)
+ if (isOpeningParenToken(firstToken)) {
+ const rightToken = tokenStore.getTokenAfter(
+ lastOfLeft,
+ isClosingParenToken
+ )
processNodeList(node.left, firstToken, rightToken, 1)
}
setOffset(inToken, 1, firstToken)
setOffset(rightToken, 1, inToken)
},
-
- VOnExpression (node) {
+ /** @param {VOnExpression} node */
+ VOnExpression(node) {
processNodeList(node.body, null, null, 0)
},
-
- VStartTag (node) {
+ /** @param {VStartTag} node */
+ VStartTag(node) {
const openToken = tokenStore.getFirstToken(node)
const closeToken = tokenStore.getLastToken(node)
@@ -982,85 +1049,165 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
options.alignAttributesVertically
)
if (closeToken != null && closeToken.type.endsWith('TagClose')) {
- setOffset(closeToken, options.closeBracket, openToken)
+ const offset =
+ closeToken.type === 'HTMLSelfClosingTagClose'
+ ? options.closeBracket.selfClosingTag
+ : options.closeBracket.startTag
+ setOffset(closeToken, offset, openToken)
}
},
-
- VText (node) {
+ /** @param {VText} node */
+ VText(node) {
const tokens = tokenStore.getTokens(node, isNotWhitespace)
const firstTokenInfo = offsets.get(tokenStore.getFirstToken(node))
for (const token of tokens) {
- offsets.set(token, firstTokenInfo)
+ offsets.set(token, Object.assign({}, firstTokenInfo))
}
},
-
- 'ArrayExpression, ArrayPattern' (node) {
- processNodeList(node.elements, tokenStore.getFirstToken(node), tokenStore.getLastToken(node), 1)
+ // ----------------------------------------------------------------------
+ // SINGLE TOKEN NODES
+ // ----------------------------------------------------------------------
+ VIdentifier() {},
+ VLiteral() {},
+ // ----------------------------------------------------------------------
+ // WRAPPER NODES
+ // ----------------------------------------------------------------------
+ VDirectiveKey() {},
+ VSlotScopeExpression() {},
+ // ----------------------------------------------------------------------
+ // ES NODES
+ // ----------------------------------------------------------------------
+ /** @param {ArrayExpression | ArrayPattern} node */
+ 'ArrayExpression, ArrayPattern'(node) {
+ const firstToken = tokenStore.getFirstToken(node)
+ const rightToken = tokenStore.getTokenAfter(
+ node.elements[node.elements.length - 1] || firstToken,
+ isClosingBracketToken
+ )
+ processNodeList(node.elements, firstToken, rightToken, 1)
},
-
- ArrowFunctionExpression (node) {
+ /** @param {ArrowFunctionExpression} node */
+ ArrowFunctionExpression(node) {
const firstToken = tokenStore.getFirstToken(node)
const secondToken = tokenStore.getTokenAfter(firstToken)
const leftToken = node.async ? secondToken : firstToken
- const arrowToken = tokenStore.getTokenBefore(node.body, isArrow)
+ const arrowToken = tokenStore.getTokenBefore(node.body, isArrowToken)
if (node.async) {
setOffset(secondToken, 1, firstToken)
}
- if (isLeftParen(leftToken)) {
- const rightToken = tokenStore.getTokenAfter(last(node.params) || leftToken, isRightParen)
+ if (isOpeningParenToken(leftToken)) {
+ const rightToken = tokenStore.getTokenAfter(
+ last(node.params) || leftToken,
+ isClosingParenToken
+ )
processNodeList(node.params, leftToken, rightToken, 1)
}
setOffset(arrowToken, 1, firstToken)
processMaybeBlock(node.body, firstToken)
},
-
- 'AssignmentExpression, AssignmentPattern, BinaryExpression, LogicalExpression' (node) {
+ /** @param {AssignmentExpression | AssignmentPattern | BinaryExpression | LogicalExpression} node */
+ 'AssignmentExpression, AssignmentPattern, BinaryExpression, LogicalExpression'(
+ node
+ ) {
const leftToken = getChainHeadToken(node)
- const opToken = tokenStore.getTokenAfter(node.left, isNotRightParen)
+ const opToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(node.left, isNotClosingParenToken)
+ )
const rightToken = tokenStore.getTokenAfter(opToken)
const prevToken = tokenStore.getTokenBefore(leftToken)
- const shouldIndent = (
+ const shouldIndent =
prevToken == null ||
prevToken.loc.end.line === leftToken.loc.start.line ||
isBeginningOfElement(leftToken, node)
- )
setOffset([opToken, rightToken], shouldIndent ? 1 : 0, leftToken)
},
-
- 'AwaitExpression, RestElement, SpreadElement, UnaryExpression' (node) {
+ /** @param {AwaitExpression | RestElement | SpreadElement | UnaryExpression} node */
+ 'AwaitExpression, RestElement, SpreadElement, UnaryExpression'(node) {
const firstToken = tokenStore.getFirstToken(node)
const nextToken = tokenStore.getTokenAfter(firstToken)
setOffset(nextToken, 1, firstToken)
},
-
- 'BlockStatement, ClassBody' (node) {
- processNodeList(node.body, tokenStore.getFirstToken(node), tokenStore.getLastToken(node), 1)
+ /** @param {BlockStatement | ClassBody} node */
+ 'BlockStatement, ClassBody'(node) {
+ processNodeList(
+ node.body,
+ tokenStore.getFirstToken(node),
+ tokenStore.getLastToken(node),
+ 1
+ )
},
-
- 'BreakStatement, ContinueStatement, ReturnStatement, ThrowStatement' (node) {
- if (node.argument != null || node.label != null) {
+ StaticBlock(node) {
+ const firstToken = tokenStore.getFirstToken(node)
+ let next = tokenStore.getTokenAfter(firstToken)
+ while (next && isNotOpeningBraceToken(next)) {
+ setOffset(next, 0, firstToken)
+ next = tokenStore.getTokenAfter(next)
+ }
+ setOffset(next, 0, firstToken)
+ processNodeList(node.body, next, tokenStore.getLastToken(node), 1)
+ },
+ /** @param {BreakStatement | ContinueStatement | ReturnStatement | ThrowStatement} node */
+ 'BreakStatement, ContinueStatement, ReturnStatement, ThrowStatement'(node) {
+ if (
+ ((node.type === 'ReturnStatement' || node.type === 'ThrowStatement') &&
+ node.argument != null) ||
+ ((node.type === 'BreakStatement' ||
+ node.type === 'ContinueStatement') &&
+ node.label != null)
+ ) {
const firstToken = tokenStore.getFirstToken(node)
const nextToken = tokenStore.getTokenAfter(firstToken)
setOffset(nextToken, 1, firstToken)
}
},
-
- CallExpression (node) {
+ /** @param {CallExpression} node */
+ CallExpression(node) {
+ const typeArguments =
+ 'typeArguments' in node ? node.typeArguments : node.typeParameters
const firstToken = tokenStore.getFirstToken(node)
const rightToken = tokenStore.getLastToken(node)
- const leftToken = tokenStore.getTokenAfter(node.callee, isLeftParen)
+ const leftToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(
+ typeArguments || node.callee,
+ isOpeningParenToken
+ )
+ )
+
+ if (typeArguments) {
+ setOffset(tokenStore.getFirstToken(typeArguments), 1, firstToken)
+ }
+
+ for (const optionalToken of tokenStore.getTokensBetween(
+ tokenStore.getLastToken(typeArguments || node.callee),
+ leftToken,
+ isOptionalToken
+ )) {
+ setOffset(optionalToken, 1, firstToken)
+ }
setOffset(leftToken, 1, firstToken)
processNodeList(node.arguments, leftToken, rightToken, 1)
},
+ /** @param {ImportExpression} node */
+ ImportExpression(node) {
+ const firstToken = tokenStore.getFirstToken(node)
+ const rightToken = tokenStore.getLastToken(node)
+ const leftToken = tokenStore.getTokenAfter(
+ firstToken,
+ isOpeningParenToken
+ )
- CatchClause (node) {
+ setOffset(leftToken, 1, firstToken)
+ processNodeList([node.source], leftToken, rightToken, 1)
+ },
+ /** @param {CatchClause} node */
+ CatchClause(node) {
const firstToken = tokenStore.getFirstToken(node)
const bodyToken = tokenStore.getFirstToken(node.body)
@@ -1073,8 +1220,8 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
}
setOffset(bodyToken, 0, firstToken)
},
-
- 'ClassDeclaration, ClassExpression' (node) {
+ /** @param {ClassDeclaration | ClassExpression} node */
+ 'ClassDeclaration, ClassExpression'(node) {
const firstToken = tokenStore.getFirstToken(node)
const bodyToken = tokenStore.getFirstToken(node.body)
@@ -1082,20 +1229,26 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset(tokenStore.getFirstToken(node.id), 1, firstToken)
}
if (node.superClass != null) {
- const extendsToken = tokenStore.getTokenAfter(node.id || firstToken)
+ const extendsToken = /** @type {Token} */ (
+ tokenStore.getTokenBefore(node.superClass, isExtendsKeyword)
+ )
const superClassToken = tokenStore.getTokenAfter(extendsToken)
setOffset(extendsToken, 1, firstToken)
setOffset(superClassToken, 1, extendsToken)
}
setOffset(bodyToken, 0, firstToken)
},
-
- ConditionalExpression (node) {
+ /** @param {ConditionalExpression} node */
+ ConditionalExpression(node) {
const prevToken = tokenStore.getTokenBefore(node)
const firstToken = tokenStore.getFirstToken(node)
- const questionToken = tokenStore.getTokenAfter(node.test, isNotRightParen)
+ const questionToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(node.test, isNotClosingParenToken)
+ )
const consequentToken = tokenStore.getTokenAfter(questionToken)
- const colonToken = tokenStore.getTokenAfter(node.consequent, isNotRightParen)
+ const colonToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(node.consequent, isNotClosingParenToken)
+ )
const alternateToken = tokenStore.getTokenAfter(colonToken)
const isFlat =
prevToken &&
@@ -1103,20 +1256,28 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
node.test.loc.end.line === node.consequent.loc.start.line
if (isFlat) {
- setOffset([questionToken, consequentToken, colonToken, alternateToken], 0, firstToken)
+ setOffset(
+ [questionToken, consequentToken, colonToken, alternateToken],
+ 0,
+ firstToken
+ )
} else {
setOffset([questionToken, colonToken], 1, firstToken)
setOffset([consequentToken, alternateToken], 1, questionToken)
}
},
-
- DoWhileStatement (node) {
+ /** @param {DoWhileStatement} node */
+ DoWhileStatement(node) {
const doToken = tokenStore.getFirstToken(node)
- const whileToken = tokenStore.getTokenAfter(node.body, isNotRightParen)
+ const whileToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(node.body, isNotClosingParenToken)
+ )
const leftToken = tokenStore.getTokenAfter(whileToken)
const testToken = tokenStore.getTokenAfter(leftToken)
const lastToken = tokenStore.getLastToken(node)
- const rightToken = isSemicolon(lastToken) ? tokenStore.getTokenBefore(lastToken) : lastToken
+ const rightToken = isSemicolonToken(lastToken)
+ ? tokenStore.getTokenBefore(lastToken)
+ : lastToken
processMaybeBlock(node.body, doToken)
setOffset(whileToken, 0, doToken)
@@ -1124,59 +1285,150 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset(testToken, 1, leftToken)
setOffset(rightToken, 0, leftToken)
},
+ /** @param {ExportAllDeclaration} node */
+ ExportAllDeclaration(node) {
+ const exportToken = tokenStore.getFirstToken(node)
+ const tokens = [
+ ...tokenStore.getTokensBetween(exportToken, node.source),
+ tokenStore.getFirstToken(node.source)
+ ]
+ if (node.exported) {
+ // export * as foo from "mod"
+ const starToken = /** @type {Token} */ (tokens.find(isWildcard))
+ const asToken = tokenStore.getTokenAfter(starToken)
+ const exportedToken = tokenStore.getTokenAfter(asToken)
+ const afterTokens = tokens.slice(tokens.indexOf(exportedToken) + 1)
+
+ setOffset(starToken, 1, exportToken)
+ setOffset(asToken, 1, starToken)
+ setOffset(exportedToken, 1, starToken)
+ setOffset(afterTokens, 1, exportToken)
+ } else {
+ setOffset(tokens, 1, exportToken)
+ }
- ExportAllDeclaration (node) {
- const tokens = tokenStore.getTokens(node)
- const firstToken = tokens.shift()
- if (isSemicolon(last(tokens))) {
- tokens.pop()
+ // assertions
+ const lastToken = /** @type {Token} */ (
+ tokenStore.getLastToken(node, isNotSemicolonToken)
+ )
+ const assertionTokens = tokenStore.getTokensBetween(
+ node.source,
+ lastToken
+ )
+ if (assertionTokens.length > 0) {
+ const assertToken = /** @type {Token} */ (assertionTokens.shift())
+ setOffset(assertToken, 0, exportToken)
+ const assertionOpen = assertionTokens.shift()
+ if (assertionOpen) {
+ setOffset(assertionOpen, 1, assertToken)
+ processNodeList(assertionTokens, assertionOpen, lastToken, 1)
+ }
}
- setOffset(tokens, 1, firstToken)
},
-
- ExportDefaultDeclaration (node) {
+ /** @param {ExportDefaultDeclaration} node */
+ ExportDefaultDeclaration(node) {
const exportToken = tokenStore.getFirstToken(node)
const defaultToken = tokenStore.getFirstToken(node, 1)
- const declarationToken = getFirstAndLastTokens(node.declaration).firstToken
+ const declarationToken = getFirstAndLastTokens(
+ node.declaration
+ ).firstToken
setOffset([defaultToken, declarationToken], 1, exportToken)
},
-
- ExportNamedDeclaration (node) {
+ /** @param {ExportNamedDeclaration} node */
+ ExportNamedDeclaration(node) {
const exportToken = tokenStore.getFirstToken(node)
if (node.declaration) {
// export var foo = 1;
const declarationToken = tokenStore.getFirstToken(node, 1)
setOffset(declarationToken, 1, exportToken)
} else {
- // export {foo, bar}; or export {foo, bar} from "mod";
- const leftParenToken = tokenStore.getFirstToken(node, 1)
- const rightParenToken = tokenStore.getLastToken(node, isRightBrace)
- setOffset(leftParenToken, 0, exportToken)
- processNodeList(node.specifiers, leftParenToken, rightParenToken, 1)
-
- const maybeFromToken = tokenStore.getTokenAfter(rightParenToken)
- if (maybeFromToken != null && sourceCode.getText(maybeFromToken) === 'from') {
- const fromToken = maybeFromToken
- const nameToken = tokenStore.getTokenAfter(fromToken)
- setOffset([fromToken, nameToken], 1, exportToken)
+ const firstSpecifier = node.specifiers[0]
+ if (!firstSpecifier || firstSpecifier.type === 'ExportSpecifier') {
+ // export {foo, bar}; or export {foo, bar} from "mod";
+ const leftBraceTokens = firstSpecifier
+ ? tokenStore.getTokensBetween(exportToken, firstSpecifier)
+ : [tokenStore.getTokenAfter(exportToken)]
+ const rightBraceToken = /** @type {Token} */ (
+ node.source
+ ? tokenStore.getTokenBefore(node.source, isClosingBraceToken)
+ : tokenStore.getLastToken(node, isClosingBraceToken)
+ )
+ setOffset(leftBraceTokens, 0, exportToken)
+ processNodeList(
+ node.specifiers,
+ /** @type {Token} */ (last(leftBraceTokens)),
+ rightBraceToken,
+ 1
+ )
+
+ if (node.source) {
+ const tokens = tokenStore.getTokensBetween(
+ rightBraceToken,
+ node.source
+ )
+ setOffset(
+ [...tokens, sourceCode.getFirstToken(node.source)],
+ 1,
+ exportToken
+ )
+
+ // assertions
+ const lastToken = /** @type {Token} */ (
+ tokenStore.getLastToken(node, isNotSemicolonToken)
+ )
+ const assertionTokens = tokenStore.getTokensBetween(
+ node.source,
+ lastToken
+ )
+ if (assertionTokens.length > 0) {
+ const assertToken = /** @type {Token} */ (assertionTokens.shift())
+ setOffset(assertToken, 0, exportToken)
+ const assertionOpen = assertionTokens.shift()
+ if (assertionOpen) {
+ setOffset(assertionOpen, 1, assertToken)
+ processNodeList(assertionTokens, assertionOpen, lastToken, 1)
+ }
+ }
+ }
+ } else {
+ // maybe babel parser
}
}
},
-
- ExportSpecifier (node) {
+ /** @param {ExportSpecifier | ImportSpecifier} node */
+ 'ExportSpecifier, ImportSpecifier'(node) {
const tokens = tokenStore.getTokens(node)
- const firstToken = tokens.shift()
+ let firstToken = /** @type {Token} */ (tokens.shift())
+ if (firstToken.value === 'type') {
+ const typeToken = firstToken
+ firstToken = /** @type {Token} */ (tokens.shift())
+ setOffset(firstToken, 0, typeToken)
+ }
+
setOffset(tokens, 1, firstToken)
},
-
- 'ForInStatement, ForOfStatement' (node) {
+ /** @param {ForInStatement | ForOfStatement} node */
+ 'ForInStatement, ForOfStatement'(node) {
const forToken = tokenStore.getFirstToken(node)
- const leftParenToken = tokenStore.getTokenAfter(forToken)
+ const awaitToken =
+ (node.type === 'ForOfStatement' &&
+ node.await &&
+ tokenStore.getTokenAfter(forToken)) ||
+ null
+ const leftParenToken = tokenStore.getTokenAfter(awaitToken || forToken)
const leftToken = tokenStore.getTokenAfter(leftParenToken)
- const inToken = tokenStore.getTokenAfter(leftToken, isNotRightParen)
+ const inToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(leftToken, isNotClosingParenToken)
+ )
const rightToken = tokenStore.getTokenAfter(inToken)
- const rightParenToken = tokenStore.getTokenBefore(node.body, isNotLeftParen)
+ const rightParenToken = tokenStore.getTokenBefore(
+ node.body,
+ isNotOpeningParenToken
+ )
+ if (awaitToken != null) {
+ setOffset(awaitToken, 0, forToken)
+ }
setOffset(leftParenToken, 1, forToken)
setOffset(leftToken, 1, leftParenToken)
setOffset(inToken, 1, leftToken)
@@ -1184,181 +1436,218 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset(rightParenToken, 0, leftParenToken)
processMaybeBlock(node.body, forToken)
},
-
- ForStatement (node) {
+ /** @param {ForStatement} node */
+ ForStatement(node) {
const forToken = tokenStore.getFirstToken(node)
const leftParenToken = tokenStore.getTokenAfter(forToken)
- const rightParenToken = tokenStore.getTokenBefore(node.body, isNotLeftParen)
+ const rightParenToken = tokenStore.getTokenBefore(
+ node.body,
+ isNotOpeningParenToken
+ )
setOffset(leftParenToken, 1, forToken)
- processNodeList([node.init, node.test, node.update], leftParenToken, rightParenToken, 1)
+ processNodeList(
+ [node.init, node.test, node.update],
+ leftParenToken,
+ rightParenToken,
+ 1
+ )
processMaybeBlock(node.body, forToken)
},
-
- 'FunctionDeclaration, FunctionExpression' (node) {
+ /** @param {FunctionDeclaration | FunctionExpression} node */
+ 'FunctionDeclaration, FunctionExpression'(node) {
const firstToken = tokenStore.getFirstToken(node)
- if (isLeftParen(firstToken)) {
+ let leftParenToken, bodyBaseToken
+ if (isOpeningParenToken(firstToken)) {
// Methods.
- const leftToken = firstToken
- const rightToken = tokenStore.getTokenAfter(last(node.params) || leftToken, isRightParen)
- const bodyToken = tokenStore.getFirstToken(node.body)
-
- processNodeList(node.params, leftToken, rightToken, 1)
- setOffset(bodyToken, 0, tokenStore.getFirstToken(node.parent))
+ leftParenToken = firstToken
+ bodyBaseToken = tokenStore.getFirstToken(node.parent)
} else {
// Normal functions.
- const functionToken = node.async ? tokenStore.getTokenAfter(firstToken) : firstToken
- const starToken = node.generator ? tokenStore.getTokenAfter(functionToken) : null
- const idToken = node.id && tokenStore.getFirstToken(node.id)
- const leftToken = tokenStore.getTokenAfter(idToken || starToken || functionToken)
- const rightToken = tokenStore.getTokenAfter(last(node.params) || leftToken, isRightParen)
- const bodyToken = tokenStore.getFirstToken(node.body)
-
- if (node.async) {
- setOffset(functionToken, 0, firstToken)
- }
- if (node.generator) {
- setOffset(starToken, 1, firstToken)
- }
- if (node.id != null) {
- setOffset(idToken, 1, firstToken)
+ let nextToken = tokenStore.getTokenAfter(firstToken)
+ let nextTokenOffset = 0
+ while (
+ nextToken &&
+ !isOpeningParenToken(nextToken) &&
+ nextToken.value !== '<'
+ ) {
+ if (
+ nextToken.value === '*' ||
+ (node.id && nextToken.range[0] === node.id.range[0])
+ ) {
+ nextTokenOffset = 1
+ }
+ setOffset(nextToken, nextTokenOffset, firstToken)
+ nextToken = tokenStore.getTokenAfter(nextToken)
}
- setOffset(leftToken, 1, firstToken)
- processNodeList(node.params, leftToken, rightToken, 1)
- setOffset(bodyToken, 0, firstToken)
+
+ leftParenToken = nextToken
+ bodyBaseToken = firstToken
}
- },
- IfStatement (node) {
+ if (
+ !isOpeningParenToken(leftParenToken) &&
+ /** @type {any} */ (node).typeParameters
+ ) {
+ leftParenToken = tokenStore.getTokenAfter(
+ /** @type {any} */ (node).typeParameters
+ )
+ }
+ const rightParenToken = tokenStore.getTokenAfter(
+ node.params[node.params.length - 1] || leftParenToken,
+ isClosingParenToken
+ )
+ setOffset(leftParenToken, 1, bodyBaseToken)
+ processNodeList(node.params, leftParenToken, rightParenToken, 1)
+
+ const bodyToken = tokenStore.getFirstToken(node.body)
+ setOffset(bodyToken, 0, bodyBaseToken)
+ },
+ /** @param {IfStatement} node */
+ IfStatement(node) {
const ifToken = tokenStore.getFirstToken(node)
const ifLeftParenToken = tokenStore.getTokenAfter(ifToken)
- const ifRightParenToken = tokenStore.getTokenBefore(node.consequent, isRightParen)
+ const ifRightParenToken = tokenStore.getTokenBefore(
+ node.consequent,
+ isClosingParenToken
+ )
setOffset(ifLeftParenToken, 1, ifToken)
setOffset(ifRightParenToken, 0, ifLeftParenToken)
processMaybeBlock(node.consequent, ifToken)
if (node.alternate != null) {
- const elseToken = tokenStore.getTokenAfter(node.consequent, isNotRightParen)
+ const elseToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(node.consequent, isNotClosingParenToken)
+ )
setOffset(elseToken, 0, ifToken)
processMaybeBlock(node.alternate, elseToken)
}
},
-
- ImportDeclaration (node) {
- const firstSpecifier = node.specifiers[0]
- const secondSpecifier = node.specifiers[1]
+ /** @param {ImportDeclaration} node */
+ ImportDeclaration(node) {
const importToken = tokenStore.getFirstToken(node)
- const hasSemi = tokenStore.getLastToken(node).value === ';'
- const tokens = [] // tokens to one indent
-
- if (!firstSpecifier) {
- // There are 2 patterns:
- // import "foo"
- // import {} from "foo"
- const secondToken = tokenStore.getFirstToken(node, 1)
- if (isLeftBrace(secondToken)) {
- setOffset(
- [secondToken, tokenStore.getTokenAfter(secondToken)],
- 0,
- importToken
- )
- tokens.push(
- tokenStore.getLastToken(node, hasSemi ? 2 : 1), // from
- tokenStore.getLastToken(node, hasSemi ? 1 : 0) // "foo"
- )
+ const tokens = tokenStore.getTokensBetween(importToken, node.source)
+ const fromIndex = tokens.map((t) => t.value).lastIndexOf('from')
+ const { fromToken, beforeTokens, afterTokens } =
+ fromIndex === -1
+ ? {
+ fromToken: null,
+ beforeTokens: [...tokens, tokenStore.getFirstToken(node.source)],
+ afterTokens: []
+ }
+ : {
+ fromToken: tokens[fromIndex],
+ beforeTokens: tokens.slice(0, fromIndex),
+ afterTokens: [
+ ...tokens.slice(fromIndex + 1),
+ tokenStore.getFirstToken(node.source)
+ ]
+ }
+
+ /** @type {ImportSpecifier[]} */
+ const namedSpecifiers = []
+ for (const specifier of node.specifiers) {
+ if (specifier.type === 'ImportSpecifier') {
+ namedSpecifiers.push(specifier)
} else {
- tokens.push(tokenStore.getLastToken(node, hasSemi ? 1 : 0))
+ const removeTokens = tokenStore.getTokens(specifier)
+ removeTokens.shift()
+ for (const token of removeTokens) {
+ const i = beforeTokens.indexOf(token)
+ if (i !== -1) {
+ beforeTokens.splice(i, 1)
+ }
+ }
}
- } else if (firstSpecifier.type === 'ImportDefaultSpecifier') {
- if (secondSpecifier && secondSpecifier.type === 'ImportNamespaceSpecifier') {
- // There is a pattern:
- // import Foo, * as foo from "foo"
- tokens.push(
- tokenStore.getFirstToken(firstSpecifier), // Foo
- tokenStore.getTokenAfter(firstSpecifier), // comma
- tokenStore.getFirstToken(secondSpecifier), // *
- tokenStore.getLastToken(node, hasSemi ? 2 : 1), // from
- tokenStore.getLastToken(node, hasSemi ? 1 : 0) // "foo"
+ }
+ if (namedSpecifiers.length > 0) {
+ const leftBrace = tokenStore.getTokenBefore(namedSpecifiers[0])
+ const rightBrace = /** @type {Token} */ (
+ tokenStore.getTokenAfter(
+ namedSpecifiers[namedSpecifiers.length - 1],
+ isClosingBraceToken
)
- } else {
- // There are 3 patterns:
- // import Foo from "foo"
- // import Foo, {} from "foo"
- // import Foo, {a} from "foo"
- const idToken = tokenStore.getFirstToken(firstSpecifier)
- const nextToken = tokenStore.getTokenAfter(firstSpecifier)
- if (isComma(nextToken)) {
- const leftBrace = tokenStore.getTokenAfter(nextToken)
- const rightBrace = tokenStore.getLastToken(node, hasSemi ? 3 : 2)
- setOffset([idToken, nextToken], 1, importToken)
- setOffset(leftBrace, 0, idToken)
- processNodeList(node.specifiers.slice(1), leftBrace, rightBrace, 1)
- tokens.push(
- tokenStore.getLastToken(node, hasSemi ? 2 : 1), // from
- tokenStore.getLastToken(node, hasSemi ? 1 : 0) // "foo"
- )
- } else {
- tokens.push(
- idToken,
- nextToken, // from
- tokenStore.getTokenAfter(nextToken) // "foo"
- )
+ )
+ processNodeList(namedSpecifiers, leftBrace, rightBrace, 1)
+ for (const token of [
+ ...tokenStore.getTokensBetween(leftBrace, rightBrace),
+ rightBrace
+ ]) {
+ const i = beforeTokens.indexOf(token)
+ if (i !== -1) {
+ beforeTokens.splice(i, 1)
}
}
- } else if (firstSpecifier.type === 'ImportNamespaceSpecifier') {
- // There is a pattern:
- // import * as foo from "foo"
- tokens.push(
- tokenStore.getFirstToken(firstSpecifier), // *
- tokenStore.getLastToken(node, hasSemi ? 2 : 1), // from
- tokenStore.getLastToken(node, hasSemi ? 1 : 0) // "foo"
+ }
+
+ if (
+ beforeTokens.every(
+ (t) => isOpeningBraceToken(t) || isClosingBraceToken(t)
)
+ ) {
+ setOffset(beforeTokens, 0, importToken)
} else {
- // There is a pattern:
- // import {a} from "foo"
- const leftBrace = tokenStore.getFirstToken(node, 1)
- const rightBrace = tokenStore.getLastToken(node, hasSemi ? 3 : 2)
- setOffset(leftBrace, 0, importToken)
- processNodeList(node.specifiers, leftBrace, rightBrace, 1)
- tokens.push(
- tokenStore.getLastToken(node, hasSemi ? 2 : 1), // from
- tokenStore.getLastToken(node, hasSemi ? 1 : 0) // "foo"
- )
+ setOffset(beforeTokens, 1, importToken)
+ }
+ if (fromToken) {
+ setOffset(fromToken, 1, importToken)
+ setOffset(afterTokens, 0, fromToken)
}
- setOffset(tokens, 1, importToken)
- },
-
- ImportSpecifier (node) {
- if (node.local.range[0] !== node.imported.range[0]) {
- const tokens = tokenStore.getTokens(node)
- const firstToken = tokens.shift()
- setOffset(tokens, 1, firstToken)
+ // assertions
+ const lastToken = /** @type {Token} */ (
+ tokenStore.getLastToken(node, isNotSemicolonToken)
+ )
+ const assertionTokens = tokenStore.getTokensBetween(
+ node.source,
+ lastToken
+ )
+ if (assertionTokens.length > 0) {
+ const assertToken = /** @type {Token} */ (assertionTokens.shift())
+ setOffset(assertToken, 0, importToken)
+ const assertionOpen = assertionTokens.shift()
+ if (assertionOpen) {
+ setOffset(assertionOpen, 1, assertToken)
+ processNodeList(assertionTokens, assertionOpen, lastToken, 1)
+ }
}
},
-
- ImportNamespaceSpecifier (node) {
+ /** @param {ImportNamespaceSpecifier} node */
+ ImportNamespaceSpecifier(node) {
const tokens = tokenStore.getTokens(node)
- const firstToken = tokens.shift()
+ const firstToken = /** @type {Token} */ (tokens.shift())
setOffset(tokens, 1, firstToken)
},
-
- LabeledStatement (node) {
+ /** @param {LabeledStatement} node */
+ LabeledStatement(node) {
const labelToken = tokenStore.getFirstToken(node)
const colonToken = tokenStore.getTokenAfter(labelToken)
const bodyToken = tokenStore.getTokenAfter(colonToken)
setOffset([colonToken, bodyToken], 1, labelToken)
},
-
- 'MemberExpression, MetaProperty' (node) {
+ /** @param {MemberExpression | MetaProperty} node */
+ 'MemberExpression, MetaProperty'(node) {
const objectToken = tokenStore.getFirstToken(node)
- if (node.computed) {
- const leftBracketToken = tokenStore.getTokenBefore(node.property, isLeftBracket)
+ if (node.type === 'MemberExpression' && node.computed) {
+ const leftBracketToken = /** @type {Token} */ (
+ tokenStore.getTokenBefore(node.property, isOpeningBracketToken)
+ )
const propertyToken = tokenStore.getTokenAfter(leftBracketToken)
- const rightBracketToken = tokenStore.getTokenAfter(node.property, isRightBracket)
+ const rightBracketToken = tokenStore.getTokenAfter(
+ node.property,
+ isClosingBracketToken
+ )
+
+ for (const optionalToken of tokenStore.getTokensBetween(
+ tokenStore.getLastToken(node.object),
+ leftBracketToken,
+ isOptionalToken
+ )) {
+ setOffset(optionalToken, 1, objectToken)
+ }
setOffset(leftBracketToken, 1, objectToken)
setOffset(propertyToken, 1, leftBracketToken)
@@ -1370,97 +1659,115 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset([dotToken, propertyToken], 1, objectToken)
}
},
-
- 'MethodDefinition, Property' (node) {
- const isMethod = (node.type === 'MethodDefinition' || node.method === true)
- const prefixTokens = getPrefixTokens(node)
- const hasPrefix = prefixTokens.length >= 1
-
- for (let i = 1; i < prefixTokens.length; ++i) {
- setOffset(prefixTokens[i], 0, prefixTokens[i - 1])
+ /** @param {MethodDefinition | Property | PropertyDefinition} node */
+ 'MethodDefinition, Property, PropertyDefinition'(node) {
+ const firstToken = tokenStore.getFirstToken(node)
+ const keyTokens = getFirstAndLastTokens(node.key)
+ const prefixTokens = tokenStore.getTokensBetween(
+ firstToken,
+ keyTokens.firstToken
+ )
+ if (node.computed) {
+ prefixTokens.pop() // pop [
}
+ setOffset(prefixTokens, 0, firstToken)
- let lastKeyToken = null
+ let lastKeyToken
if (node.computed) {
- const keyLeftToken = tokenStore.getFirstToken(node, isLeftBracket)
- const keyToken = tokenStore.getTokenAfter(keyLeftToken)
- const keyRightToken = lastKeyToken = tokenStore.getTokenAfter(node.key, isRightBracket)
-
- if (hasPrefix) {
- setOffset(keyLeftToken, 0, last(prefixTokens))
- }
- setOffset(keyToken, 1, keyLeftToken)
- setOffset(keyRightToken, 0, keyLeftToken)
+ const leftBracketToken = tokenStore.getTokenBefore(keyTokens.firstToken)
+ const rightBracketToken = (lastKeyToken = tokenStore.getTokenAfter(
+ keyTokens.lastToken
+ ))
+ setOffset(leftBracketToken, 0, firstToken)
+ processNodeList([node.key], leftBracketToken, rightBracketToken, 1)
} else {
- const idToken = lastKeyToken = tokenStore.getFirstToken(node.key)
-
- if (hasPrefix) {
- setOffset(idToken, 0, last(prefixTokens))
- }
+ setOffset(keyTokens.firstToken, 0, firstToken)
+ lastKeyToken = keyTokens.lastToken
}
- if (isMethod) {
- const leftParenToken = tokenStore.getTokenAfter(lastKeyToken)
-
- setOffset(leftParenToken, 1, lastKeyToken)
- } else if (!node.shorthand) {
- const colonToken = tokenStore.getTokenAfter(lastKeyToken)
- const valueToken = tokenStore.getTokenAfter(colonToken)
-
- setOffset([colonToken, valueToken], 1, lastKeyToken)
+ if (node.value != null) {
+ const initToken = tokenStore.getFirstToken(node.value)
+ setOffset(
+ [...tokenStore.getTokensBetween(lastKeyToken, initToken), initToken],
+ 1,
+ lastKeyToken
+ )
}
},
-
- NewExpression (node) {
+ /** @param {NewExpression} node */
+ NewExpression(node) {
+ const typeArguments =
+ 'typeArguments' in node ? node.typeArguments : node.typeParameters
const newToken = tokenStore.getFirstToken(node)
const calleeToken = tokenStore.getTokenAfter(newToken)
const rightToken = tokenStore.getLastToken(node)
- const leftToken = isRightParen(rightToken)
- ? tokenStore.getFirstTokenBetween(node.callee, rightToken, isLeftParen)
+ const leftToken = isClosingParenToken(rightToken)
+ ? tokenStore.getFirstTokenBetween(
+ typeArguments || node.callee,
+ rightToken,
+ isOpeningParenToken
+ )
: null
+ if (typeArguments) {
+ setOffset(tokenStore.getFirstToken(typeArguments), 1, calleeToken)
+ }
+
setOffset(calleeToken, 1, newToken)
if (leftToken != null) {
setOffset(leftToken, 1, calleeToken)
processNodeList(node.arguments, leftToken, rightToken, 1)
}
},
-
- 'ObjectExpression, ObjectPattern' (node) {
- processNodeList(node.properties, tokenStore.getFirstToken(node), tokenStore.getLastToken(node), 1)
+ /** @param {ObjectExpression | ObjectPattern} node */
+ 'ObjectExpression, ObjectPattern'(node) {
+ const firstToken = tokenStore.getFirstToken(node)
+ const rightToken = tokenStore.getTokenAfter(
+ node.properties[node.properties.length - 1] || firstToken,
+ isClosingBraceToken
+ )
+ processNodeList(node.properties, firstToken, rightToken, 1)
},
-
- SequenceExpression (node) {
+ /** @param {SequenceExpression} node */
+ SequenceExpression(node) {
processNodeList(node.expressions, null, null, 0)
},
-
- SwitchCase (node) {
+ /** @param {SwitchCase} node */
+ SwitchCase(node) {
const caseToken = tokenStore.getFirstToken(node)
- if (node.test != null) {
- const testToken = tokenStore.getTokenAfter(caseToken)
- const colonToken = tokenStore.getTokenAfter(node.test, isNotRightParen)
-
- setOffset([testToken, colonToken], 1, caseToken)
- } else {
+ if (node.test == null) {
const colonToken = tokenStore.getTokenAfter(caseToken)
setOffset(colonToken, 1, caseToken)
+ } else {
+ const testToken = tokenStore.getTokenAfter(caseToken)
+ const colonToken = tokenStore.getTokenAfter(
+ node.test,
+ isNotClosingParenToken
+ )
+
+ setOffset([testToken, colonToken], 1, caseToken)
}
- if (node.consequent.length === 1 && node.consequent[0].type === 'BlockStatement') {
+ if (
+ node.consequent.length === 1 &&
+ node.consequent[0].type === 'BlockStatement'
+ ) {
setOffset(tokenStore.getFirstToken(node.consequent[0]), 0, caseToken)
- } else if (node.consequent.length >= 1) {
+ } else if (node.consequent.length > 0) {
setOffset(tokenStore.getFirstToken(node.consequent[0]), 1, caseToken)
processNodeList(node.consequent, null, null, 0)
}
},
-
- SwitchStatement (node) {
+ /** @param {SwitchStatement} node */
+ SwitchStatement(node) {
const switchToken = tokenStore.getFirstToken(node)
const leftParenToken = tokenStore.getTokenAfter(switchToken)
const discriminantToken = tokenStore.getTokenAfter(leftParenToken)
- const leftBraceToken = tokenStore.getTokenAfter(node.discriminant, isLeftBrace)
+ const leftBraceToken = /** @type {Token} */ (
+ tokenStore.getTokenAfter(node.discriminant, isOpeningBraceToken)
+ )
const rightParenToken = tokenStore.getTokenBefore(leftBraceToken)
const rightBraceToken = tokenStore.getLastToken(node)
@@ -1468,26 +1775,35 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset(discriminantToken, 1, leftParenToken)
setOffset(rightParenToken, 0, leftParenToken)
setOffset(leftBraceToken, 0, switchToken)
- processNodeList(node.cases, leftBraceToken, rightBraceToken, options.switchCase)
+ processNodeList(
+ node.cases,
+ leftBraceToken,
+ rightBraceToken,
+ options.switchCase
+ )
},
-
- TaggedTemplateExpression (node) {
+ /** @param {TaggedTemplateExpression} node */
+ TaggedTemplateExpression(node) {
const tagTokens = getFirstAndLastTokens(node.tag, node.range[0])
const quasiToken = tokenStore.getTokenAfter(tagTokens.lastToken)
setOffset(quasiToken, 1, tagTokens.firstToken)
},
-
- TemplateLiteral (node) {
+ /** @param {TemplateLiteral} node */
+ TemplateLiteral(node) {
const firstToken = tokenStore.getFirstToken(node)
- const quasiTokens = node.quasis.slice(1).map(n => tokenStore.getFirstToken(n))
- const expressionToken = node.quasis.slice(0, -1).map(n => tokenStore.getTokenAfter(n))
+ const quasiTokens = node.quasis
+ .slice(1)
+ .map((n) => tokenStore.getFirstToken(n))
+ const expressionToken = node.quasis
+ .slice(0, -1)
+ .map((n) => tokenStore.getTokenAfter(n))
setOffset(quasiTokens, 0, firstToken)
setOffset(expressionToken, 1, firstToken)
},
-
- TryStatement (node) {
+ /** @param {TryStatement} node */
+ TryStatement(node) {
const tryToken = tokenStore.getFirstToken(node)
const tryBlockToken = tokenStore.getFirstToken(node.block)
@@ -1506,19 +1822,24 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset([finallyToken, finallyBlockToken], 0, tryToken)
}
},
-
- UpdateExpression (node) {
+ /** @param {UpdateExpression} node */
+ UpdateExpression(node) {
const firstToken = tokenStore.getFirstToken(node)
const nextToken = tokenStore.getTokenAfter(firstToken)
setOffset(nextToken, 1, firstToken)
},
-
- VariableDeclaration (node) {
- processNodeList(node.declarations, tokenStore.getFirstToken(node), null, 1)
+ /** @param {VariableDeclaration} node */
+ VariableDeclaration(node) {
+ processNodeList(
+ node.declarations,
+ tokenStore.getFirstToken(node),
+ null,
+ 1
+ )
},
-
- VariableDeclarator (node) {
+ /** @param {VariableDeclarator} node */
+ VariableDeclarator(node) {
if (node.init != null) {
const idToken = tokenStore.getFirstToken(node)
const eqToken = tokenStore.getTokenAfter(node.id)
@@ -1527,18 +1848,21 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
setOffset([eqToken, initToken], 1, idToken)
}
},
-
- 'WhileStatement, WithStatement' (node) {
+ /** @param {WhileStatement | WithStatement} node */
+ 'WhileStatement, WithStatement'(node) {
const firstToken = tokenStore.getFirstToken(node)
const leftParenToken = tokenStore.getTokenAfter(firstToken)
- const rightParenToken = tokenStore.getTokenBefore(node.body, isRightParen)
+ const rightParenToken = tokenStore.getTokenBefore(
+ node.body,
+ isClosingParenToken
+ )
setOffset(leftParenToken, 1, firstToken)
setOffset(rightParenToken, 0, leftParenToken)
processMaybeBlock(node.body, firstToken)
},
-
- YieldExpression (node) {
+ /** @param {YieldExpression} node */
+ YieldExpression(node) {
if (node.argument != null) {
const yieldToken = tokenStore.getFirstToken(node)
@@ -1548,34 +1872,45 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
}
}
},
-
+ // ----------------------------------------------------------------------
+ // SINGLE TOKEN NODES
+ // ----------------------------------------------------------------------
+ DebuggerStatement() {},
+ Identifier() {},
+ ImportDefaultSpecifier() {},
+ Literal() {},
+ PrivateIdentifier() {},
+ Super() {},
+ TemplateElement() {},
+ ThisExpression() {},
+ // ----------------------------------------------------------------------
+ // WRAPPER NODES
+ // ----------------------------------------------------------------------
+ ExpressionStatement() {},
+ ChainExpression() {},
+ EmptyStatement() {},
+ // ----------------------------------------------------------------------
+ // COMMONS
+ // ----------------------------------------------------------------------
+ /** @param {Statement} node */
// Process semicolons.
- ':statement' (node) {
- const firstToken = tokenStore.getFirstToken(node)
- const lastToken = tokenStore.getLastToken(node)
- if (isSemicolon(lastToken) && firstToken !== lastToken) {
- setOffset(lastToken, 0, firstToken)
- }
-
- // Set to the semicolon of the previous token for semicolon-free style.
- // E.g.,
- // foo
- // ;[1,2,3].forEach(f)
- const info = offsets.get(firstToken)
- const prevToken = tokenStore.getTokenBefore(firstToken)
- if (info != null && isSemicolon(prevToken) && prevToken.loc.end.line === firstToken.loc.start.line) {
- offsets.set(prevToken, info)
- }
+ ':statement, PropertyDefinition'(node) {
+ processSemicolons(node)
},
-
+ /** @param {Expression | MetaProperty | TemplateLiteral} node */
// Process parentheses.
// `:expression` does not match with MetaProperty and TemplateLiteral as a bug: https://github.com/estools/esquery/pull/59
- ':expression, MetaProperty, TemplateLiteral' (node) {
+ ':expression'(node) {
let leftToken = tokenStore.getTokenBefore(node)
let rightToken = tokenStore.getTokenAfter(node)
let firstToken = tokenStore.getFirstToken(node)
- while (isLeftParen(leftToken) && isRightParen(rightToken)) {
+ while (
+ leftToken &&
+ rightToken &&
+ isOpeningParenToken(leftToken) &&
+ isClosingParenToken(rightToken)
+ ) {
setOffset(firstToken, 1, leftToken)
setOffset(rightToken, 0, leftToken)
@@ -1585,49 +1920,69 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
}
},
+ .../** @type {TemplateListener} */ (
+ tsDefineVisitor({
+ processNodeList,
+ tokenStore,
+ setOffset,
+ copyOffset,
+ processSemicolons,
+ getFirstAndLastTokens
+ })
+ ),
+
+ /** @param {ASTNode} node */
// Ignore tokens of unknown nodes.
- '*:exit' (node) {
- if (!KNOWN_NODES.has(node.type)) {
+ '*:exit'(node) {
+ if (!knownNodes.has(node.type)) {
ignore(node)
}
},
-
+ /** @param {Program} node */
// Top-level process.
- Program (node) {
+ Program(node) {
const firstToken = node.tokens[0]
- const isScriptTag = (
+ const isScriptTag =
firstToken != null &&
firstToken.type === 'Punctuator' &&
firstToken.value === '
diff --git a/tests/fixtures/script-indent/class-fields-private-methods-01.vue b/tests/fixtures/script-indent/class-fields-private-methods-01.vue
new file mode 100644
index 000000000..46c6ae67c
--- /dev/null
+++ b/tests/fixtures/script-indent/class-fields-private-methods-01.vue
@@ -0,0 +1,64 @@
+
+
diff --git a/tests/fixtures/script-indent/class-fields-private-properties-01.vue b/tests/fixtures/script-indent/class-fields-private-properties-01.vue
new file mode 100644
index 000000000..c935f1904
--- /dev/null
+++ b/tests/fixtures/script-indent/class-fields-private-properties-01.vue
@@ -0,0 +1,22 @@
+
+
diff --git a/tests/fixtures/script-indent/class-fields-properties-01.vue b/tests/fixtures/script-indent/class-fields-properties-01.vue
new file mode 100644
index 000000000..ef193d1fe
--- /dev/null
+++ b/tests/fixtures/script-indent/class-fields-properties-01.vue
@@ -0,0 +1,16 @@
+
+
diff --git a/tests/fixtures/script-indent/class-fields-properties-02.vue b/tests/fixtures/script-indent/class-fields-properties-02.vue
new file mode 100644
index 000000000..3efe3bd25
--- /dev/null
+++ b/tests/fixtures/script-indent/class-fields-properties-02.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/export-all-declaration-02.vue b/tests/fixtures/script-indent/export-all-declaration-02.vue
new file mode 100644
index 000000000..b85213a6b
--- /dev/null
+++ b/tests/fixtures/script-indent/export-all-declaration-02.vue
@@ -0,0 +1,16 @@
+
+
diff --git a/tests/fixtures/script-indent/export-named-declaration-02.vue b/tests/fixtures/script-indent/export-named-declaration-02.vue
index 32c52653e..00dbf3f35 100644
--- a/tests/fixtures/script-indent/export-named-declaration-02.vue
+++ b/tests/fixtures/script-indent/export-named-declaration-02.vue
@@ -1,5 +1,6 @@
diff --git a/tests/fixtures/script-indent/ignore-01.vue b/tests/fixtures/script-indent/ignore-01.vue
new file mode 100644
index 000000000..e323cdc08
--- /dev/null
+++ b/tests/fixtures/script-indent/ignore-01.vue
@@ -0,0 +1,19 @@
+
+
diff --git a/tests/fixtures/script-indent/ignore-02.vue b/tests/fixtures/script-indent/ignore-02.vue
new file mode 100644
index 000000000..18c557476
--- /dev/null
+++ b/tests/fixtures/script-indent/ignore-02.vue
@@ -0,0 +1,19 @@
+
+
diff --git a/tests/fixtures/script-indent/import-declaration-11.vue b/tests/fixtures/script-indent/import-declaration-11.vue
new file mode 100644
index 000000000..83289b1f4
--- /dev/null
+++ b/tests/fixtures/script-indent/import-declaration-11.vue
@@ -0,0 +1,7 @@
+
+
+
diff --git a/tests/fixtures/script-indent/import-declaration-12.vue b/tests/fixtures/script-indent/import-declaration-12.vue
new file mode 100644
index 000000000..fa622a696
--- /dev/null
+++ b/tests/fixtures/script-indent/import-declaration-12.vue
@@ -0,0 +1,11 @@
+
+
+
diff --git a/tests/fixtures/script-indent/import-expression-01.vue b/tests/fixtures/script-indent/import-expression-01.vue
new file mode 100644
index 000000000..3f7c7cb61
--- /dev/null
+++ b/tests/fixtures/script-indent/import-expression-01.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/import-expression-02.vue b/tests/fixtures/script-indent/import-expression-02.vue
new file mode 100644
index 000000000..8144c3ffa
--- /dev/null
+++ b/tests/fixtures/script-indent/import-expression-02.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/import-expression-03.vue b/tests/fixtures/script-indent/import-expression-03.vue
new file mode 100644
index 000000000..e82a6df42
--- /dev/null
+++ b/tests/fixtures/script-indent/import-expression-03.vue
@@ -0,0 +1,11 @@
+
+
diff --git a/tests/fixtures/script-indent/jsx-01.vue b/tests/fixtures/script-indent/jsx-01.vue
new file mode 100644
index 000000000..d5e73c650
--- /dev/null
+++ b/tests/fixtures/script-indent/jsx-01.vue
@@ -0,0 +1,16 @@
+
+
diff --git a/tests/fixtures/script-indent/jsx-02.vue b/tests/fixtures/script-indent/jsx-02.vue
new file mode 100644
index 000000000..a7656d430
--- /dev/null
+++ b/tests/fixtures/script-indent/jsx-02.vue
@@ -0,0 +1,23 @@
+
+
diff --git a/tests/fixtures/script-indent/logical-expression-01.vue b/tests/fixtures/script-indent/logical-expression-01.vue
new file mode 100644
index 000000000..087e00753
--- /dev/null
+++ b/tests/fixtures/script-indent/logical-expression-01.vue
@@ -0,0 +1,16 @@
+
+
diff --git a/tests/fixtures/script-indent/logical-expression-02.vue b/tests/fixtures/script-indent/logical-expression-02.vue
new file mode 100644
index 000000000..ccba0b7c0
--- /dev/null
+++ b/tests/fixtures/script-indent/logical-expression-02.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/logical-expression-03.vue b/tests/fixtures/script-indent/logical-expression-03.vue
new file mode 100644
index 000000000..9b5ccb8ca
--- /dev/null
+++ b/tests/fixtures/script-indent/logical-expression-03.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/method-definition-02.vue b/tests/fixtures/script-indent/method-definition-02.vue
new file mode 100644
index 000000000..d5c1d3725
--- /dev/null
+++ b/tests/fixtures/script-indent/method-definition-02.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/nullish-coalescing-operator-01.vue b/tests/fixtures/script-indent/nullish-coalescing-operator-01.vue
new file mode 100644
index 000000000..22427c7f6
--- /dev/null
+++ b/tests/fixtures/script-indent/nullish-coalescing-operator-01.vue
@@ -0,0 +1,6 @@
+
+
diff --git a/tests/fixtures/script-indent/object-expression-04.vue b/tests/fixtures/script-indent/object-expression-04.vue
new file mode 100644
index 000000000..25e8c2077
--- /dev/null
+++ b/tests/fixtures/script-indent/object-expression-04.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-01.vue b/tests/fixtures/script-indent/optional-chaining-01.vue
new file mode 100644
index 000000000..f0ea36ee4
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-01.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-02.vue b/tests/fixtures/script-indent/optional-chaining-02.vue
new file mode 100644
index 000000000..11c77d518
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-02.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-03.vue b/tests/fixtures/script-indent/optional-chaining-03.vue
new file mode 100644
index 000000000..01626acf0
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-03.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-04.vue b/tests/fixtures/script-indent/optional-chaining-04.vue
new file mode 100644
index 000000000..65a42a74d
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-04.vue
@@ -0,0 +1,13 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-05.vue b/tests/fixtures/script-indent/optional-chaining-05.vue
new file mode 100644
index 000000000..0e926b497
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-05.vue
@@ -0,0 +1,11 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-06.vue b/tests/fixtures/script-indent/optional-chaining-06.vue
new file mode 100644
index 000000000..47898015b
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-06.vue
@@ -0,0 +1,25 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-07.vue b/tests/fixtures/script-indent/optional-chaining-07.vue
new file mode 100644
index 000000000..1ba9fb0fe
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-07.vue
@@ -0,0 +1,25 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-08.vue b/tests/fixtures/script-indent/optional-chaining-08.vue
new file mode 100644
index 000000000..61d071887
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-08.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/optional-chaining-09.vue b/tests/fixtures/script-indent/optional-chaining-09.vue
new file mode 100644
index 000000000..c17562c0c
--- /dev/null
+++ b/tests/fixtures/script-indent/optional-chaining-09.vue
@@ -0,0 +1,32 @@
+
+
diff --git a/tests/fixtures/script-indent/rest-properties-01.vue b/tests/fixtures/script-indent/rest-properties-01.vue
new file mode 100644
index 000000000..87ab2ab9b
--- /dev/null
+++ b/tests/fixtures/script-indent/rest-properties-01.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/static-block-01.vue b/tests/fixtures/script-indent/static-block-01.vue
new file mode 100644
index 000000000..87bfc6b34
--- /dev/null
+++ b/tests/fixtures/script-indent/static-block-01.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/try-statement-04.vue b/tests/fixtures/script-indent/try-statement-04.vue
new file mode 100644
index 000000000..4b3d9e866
--- /dev/null
+++ b/tests/fixtures/script-indent/try-statement-04.vue
@@ -0,0 +1,14 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-abstract-accessor-property-01.vue b/tests/fixtures/script-indent/ts-abstract-accessor-property-01.vue
new file mode 100644
index 000000000..01068057e
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-abstract-accessor-property-01.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-abstract-class-property-01.vue b/tests/fixtures/script-indent/ts-abstract-class-property-01.vue
new file mode 100644
index 000000000..500b4c493
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-abstract-class-property-01.vue
@@ -0,0 +1,22 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-abstract-class-property-02.vue b/tests/fixtures/script-indent/ts-abstract-class-property-02.vue
new file mode 100644
index 000000000..47e4aba99
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-abstract-class-property-02.vue
@@ -0,0 +1,19 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-abstract-method-definition-01.vue b/tests/fixtures/script-indent/ts-abstract-method-definition-01.vue
new file mode 100644
index 000000000..cd700f1a9
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-abstract-method-definition-01.vue
@@ -0,0 +1,30 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-accessor-property-01.vue b/tests/fixtures/script-indent/ts-accessor-property-01.vue
new file mode 100644
index 000000000..97928b6b6
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-01.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-accessor-property-02.vue b/tests/fixtures/script-indent/ts-accessor-property-02.vue
new file mode 100644
index 000000000..da749a32e
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-02.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-accessor-property-03.vue b/tests/fixtures/script-indent/ts-accessor-property-03.vue
new file mode 100644
index 000000000..993e52527
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-03.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-accessor-property-04.vue b/tests/fixtures/script-indent/ts-accessor-property-04.vue
new file mode 100644
index 000000000..e69e294fc
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-04.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-accessor-property-05.vue b/tests/fixtures/script-indent/ts-accessor-property-05.vue
new file mode 100644
index 000000000..dc3503ca7
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-accessor-property-05.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-as-expression-01.vue b/tests/fixtures/script-indent/ts-as-expression-01.vue
new file mode 100644
index 000000000..377dd3436
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-as-expression-01.vue
@@ -0,0 +1,6 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-call-expression-01.vue b/tests/fixtures/script-indent/ts-call-expression-01.vue
new file mode 100644
index 000000000..a12e28f7d
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-call-expression-01.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-call-signature-declaration-01.vue b/tests/fixtures/script-indent/ts-call-signature-declaration-01.vue
new file mode 100644
index 000000000..b734c69c6
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-call-signature-declaration-01.vue
@@ -0,0 +1,13 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-call-signature-declaration-02.vue b/tests/fixtures/script-indent/ts-call-signature-declaration-02.vue
new file mode 100644
index 000000000..e2b6cd0b7
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-call-signature-declaration-02.vue
@@ -0,0 +1,13 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-declaration-01.vue b/tests/fixtures/script-indent/ts-class-declaration-01.vue
new file mode 100644
index 000000000..776e38aa3
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-declaration-01.vue
@@ -0,0 +1,11 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-declaration-02.vue b/tests/fixtures/script-indent/ts-class-declaration-02.vue
new file mode 100644
index 000000000..4b4eafbf1
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-declaration-02.vue
@@ -0,0 +1,16 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-declaration-03.vue b/tests/fixtures/script-indent/ts-class-declaration-03.vue
new file mode 100644
index 000000000..c1697f273
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-declaration-03.vue
@@ -0,0 +1,26 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-declaration-04.vue b/tests/fixtures/script-indent/ts-class-declaration-04.vue
new file mode 100644
index 000000000..c1697f273
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-declaration-04.vue
@@ -0,0 +1,26 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-declaration-05.vue b/tests/fixtures/script-indent/ts-class-declaration-05.vue
new file mode 100644
index 000000000..893584928
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-declaration-05.vue
@@ -0,0 +1,14 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-declaration-06.vue b/tests/fixtures/script-indent/ts-class-declaration-06.vue
new file mode 100644
index 000000000..06e42f0c6
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-declaration-06.vue
@@ -0,0 +1,28 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-declaration-07.vue b/tests/fixtures/script-indent/ts-class-declaration-07.vue
new file mode 100644
index 000000000..dfca03b8a
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-declaration-07.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-fields-private-methods-01.vue b/tests/fixtures/script-indent/ts-class-fields-private-methods-01.vue
new file mode 100644
index 000000000..ac0eda090
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-fields-private-methods-01.vue
@@ -0,0 +1,64 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-fields-private-properties-01.vue b/tests/fixtures/script-indent/ts-class-fields-private-properties-01.vue
new file mode 100644
index 000000000..26006fb4a
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-fields-private-properties-01.vue
@@ -0,0 +1,22 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-property-01.vue b/tests/fixtures/script-indent/ts-class-property-01.vue
new file mode 100644
index 000000000..a0e8b8583
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-property-01.vue
@@ -0,0 +1,15 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-property-02.vue b/tests/fixtures/script-indent/ts-class-property-02.vue
new file mode 100644
index 000000000..f2ae2e508
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-property-02.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-class-property-03.vue b/tests/fixtures/script-indent/ts-class-property-03.vue
new file mode 100644
index 000000000..dfd437f38
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-class-property-03.vue
@@ -0,0 +1,36 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-conditional-type-01.vue b/tests/fixtures/script-indent/ts-conditional-type-01.vue
new file mode 100644
index 000000000..ca1334b18
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-conditional-type-01.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-conditional-type-02.vue b/tests/fixtures/script-indent/ts-conditional-type-02.vue
new file mode 100644
index 000000000..1e8d68b76
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-conditional-type-02.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-conditional-type-03.vue b/tests/fixtures/script-indent/ts-conditional-type-03.vue
new file mode 100644
index 000000000..e3230e948
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-conditional-type-03.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-constructor-type-01.vue b/tests/fixtures/script-indent/ts-constructor-type-01.vue
new file mode 100644
index 000000000..97cc1a1d8
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-constructor-type-01.vue
@@ -0,0 +1,21 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-declare-function-01.vue b/tests/fixtures/script-indent/ts-declare-function-01.vue
new file mode 100644
index 000000000..2d1fa1f19
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-declare-function-01.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-declare-function-02.vue b/tests/fixtures/script-indent/ts-declare-function-02.vue
new file mode 100644
index 000000000..1450b1b32
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-declare-function-02.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-declare-function-03.vue b/tests/fixtures/script-indent/ts-declare-function-03.vue
new file mode 100644
index 000000000..7dabfe206
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-declare-function-03.vue
@@ -0,0 +1,14 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-declare-function-04.vue b/tests/fixtures/script-indent/ts-declare-function-04.vue
new file mode 100644
index 000000000..7ae12d894
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-declare-function-04.vue
@@ -0,0 +1,15 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-decorator-01.vue b/tests/fixtures/script-indent/ts-decorator-01.vue
new file mode 100644
index 000000000..c6f39dc35
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-decorator-01.vue
@@ -0,0 +1,205 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-decorator-02.vue b/tests/fixtures/script-indent/ts-decorator-02.vue
new file mode 100644
index 000000000..a314771ad
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-decorator-02.vue
@@ -0,0 +1,14 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-enum-01.vue b/tests/fixtures/script-indent/ts-enum-01.vue
new file mode 100644
index 000000000..b6b9ccae0
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-enum-01.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-enum-02.vue b/tests/fixtures/script-indent/ts-enum-02.vue
new file mode 100644
index 000000000..a0e25f12b
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-enum-02.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-enum-03.vue b/tests/fixtures/script-indent/ts-enum-03.vue
new file mode 100644
index 000000000..f46b6b179
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-enum-03.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-enum-04.vue b/tests/fixtures/script-indent/ts-enum-04.vue
new file mode 100644
index 000000000..141e8d7f9
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-enum-04.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-enum-05.vue b/tests/fixtures/script-indent/ts-enum-05.vue
new file mode 100644
index 000000000..d40883ee9
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-enum-05.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-enum-06.vue b/tests/fixtures/script-indent/ts-enum-06.vue
new file mode 100644
index 000000000..b4d02a8f3
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-enum-06.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-enum-member-01.vue b/tests/fixtures/script-indent/ts-enum-member-01.vue
new file mode 100644
index 000000000..a646bda9b
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-enum-member-01.vue
@@ -0,0 +1,15 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-enum-member-02.vue b/tests/fixtures/script-indent/ts-enum-member-02.vue
new file mode 100644
index 000000000..0dfad0857
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-enum-member-02.vue
@@ -0,0 +1,26 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-export-assignment-01.vue b/tests/fixtures/script-indent/ts-export-assignment-01.vue
new file mode 100644
index 000000000..ee028cb48
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-export-assignment-01.vue
@@ -0,0 +1,5 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-export-assignment-02.vue b/tests/fixtures/script-indent/ts-export-assignment-02.vue
new file mode 100644
index 000000000..0d167f0df
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-export-assignment-02.vue
@@ -0,0 +1,13 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-export-namespace-01.vue b/tests/fixtures/script-indent/ts-export-namespace-01.vue
new file mode 100644
index 000000000..098f4b3cb
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-export-namespace-01.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-function-type-01.vue b/tests/fixtures/script-indent/ts-function-type-01.vue
new file mode 100644
index 000000000..1cd005f49
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-function-type-01.vue
@@ -0,0 +1,6 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-function-type-02.vue b/tests/fixtures/script-indent/ts-function-type-02.vue
new file mode 100644
index 000000000..bd5c27cb3
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-function-type-02.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-assertion-01.vue b/tests/fixtures/script-indent/ts-import-assertion-01.vue
new file mode 100644
index 000000000..04cd9c99b
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-assertion-01.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-assertion-02.vue b/tests/fixtures/script-indent/ts-import-assertion-02.vue
new file mode 100644
index 000000000..c6e0cb866
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-assertion-02.vue
@@ -0,0 +1,15 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-assertion-03.vue b/tests/fixtures/script-indent/ts-import-assertion-03.vue
new file mode 100644
index 000000000..7cdf02501
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-assertion-03.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-assertion-04.vue b/tests/fixtures/script-indent/ts-import-assertion-04.vue
new file mode 100644
index 000000000..fc1bee6ee
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-assertion-04.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-equal-01.vue b/tests/fixtures/script-indent/ts-import-equal-01.vue
new file mode 100644
index 000000000..b35c28cd0
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-equal-01.vue
@@ -0,0 +1,6 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-equal-02.vue b/tests/fixtures/script-indent/ts-import-equal-02.vue
new file mode 100644
index 000000000..5d55cab24
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-equal-02.vue
@@ -0,0 +1,19 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-equal-03.vue b/tests/fixtures/script-indent/ts-import-equal-03.vue
new file mode 100644
index 000000000..d532454be
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-equal-03.vue
@@ -0,0 +1,13 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-type-01.vue b/tests/fixtures/script-indent/ts-import-type-01.vue
new file mode 100644
index 000000000..d8790ed57
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-type-01.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-type-02.vue b/tests/fixtures/script-indent/ts-import-type-02.vue
new file mode 100644
index 000000000..f19a97d89
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-type-02.vue
@@ -0,0 +1,18 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-import-type-03.vue b/tests/fixtures/script-indent/ts-import-type-03.vue
new file mode 100644
index 000000000..2724f2911
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-import-type-03.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-indexed-access-type-01.vue b/tests/fixtures/script-indent/ts-indexed-access-type-01.vue
new file mode 100644
index 000000000..f95b266fd
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-indexed-access-type-01.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-indexed-access-type-02.vue b/tests/fixtures/script-indent/ts-indexed-access-type-02.vue
new file mode 100644
index 000000000..6c641d0bf
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-indexed-access-type-02.vue
@@ -0,0 +1,11 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-infer-01.vue b/tests/fixtures/script-indent/ts-infer-01.vue
new file mode 100644
index 000000000..7cd8cb660
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-infer-01.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-instantiation-expression-01.vue b/tests/fixtures/script-indent/ts-instantiation-expression-01.vue
new file mode 100644
index 000000000..64e1d1073
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-instantiation-expression-01.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-01.vue b/tests/fixtures/script-indent/ts-interface-declaration-01.vue
new file mode 100644
index 000000000..6dc683226
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-interface-declaration-01.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-02.vue b/tests/fixtures/script-indent/ts-interface-declaration-02.vue
new file mode 100644
index 000000000..99d53c153
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-interface-declaration-02.vue
@@ -0,0 +1,15 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-03.vue b/tests/fixtures/script-indent/ts-interface-declaration-03.vue
new file mode 100644
index 000000000..6490c79ec
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-interface-declaration-03.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-04.vue b/tests/fixtures/script-indent/ts-interface-declaration-04.vue
new file mode 100644
index 000000000..bb770b382
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-interface-declaration-04.vue
@@ -0,0 +1,19 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-05.vue b/tests/fixtures/script-indent/ts-interface-declaration-05.vue
new file mode 100644
index 000000000..1c00cab83
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-interface-declaration-05.vue
@@ -0,0 +1,13 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-06.vue b/tests/fixtures/script-indent/ts-interface-declaration-06.vue
new file mode 100644
index 000000000..3390cb963
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-interface-declaration-06.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-07.vue b/tests/fixtures/script-indent/ts-interface-declaration-07.vue
new file mode 100644
index 000000000..3dbcc88d3
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-interface-declaration-07.vue
@@ -0,0 +1,25 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-interface-declaration-08.vue b/tests/fixtures/script-indent/ts-interface-declaration-08.vue
new file mode 100644
index 000000000..0048fe129
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-interface-declaration-08.vue
@@ -0,0 +1,27 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-mapped-type-01.vue b/tests/fixtures/script-indent/ts-mapped-type-01.vue
new file mode 100644
index 000000000..6f7016231
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-mapped-type-01.vue
@@ -0,0 +1,12 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-module-declaration-01.vue b/tests/fixtures/script-indent/ts-module-declaration-01.vue
new file mode 100644
index 000000000..ef89078fc
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-module-declaration-01.vue
@@ -0,0 +1,14 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-new-expression-01.vue b/tests/fixtures/script-indent/ts-new-expression-01.vue
new file mode 100644
index 000000000..3dd190fa0
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-new-expression-01.vue
@@ -0,0 +1,13 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-qualified-name-01.vue b/tests/fixtures/script-indent/ts-qualified-name-01.vue
new file mode 100644
index 000000000..aa8fa0a0f
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-qualified-name-01.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-satisfies-operators-01.vue b/tests/fixtures/script-indent/ts-satisfies-operators-01.vue
new file mode 100644
index 000000000..858834115
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-satisfies-operators-01.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-static-block-01.vue b/tests/fixtures/script-indent/ts-static-block-01.vue
new file mode 100644
index 000000000..5d585d6d0
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-static-block-01.vue
@@ -0,0 +1,8 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-template-literal-type-01.vue b/tests/fixtures/script-indent/ts-template-literal-type-01.vue
new file mode 100644
index 000000000..a260ecdae
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-template-literal-type-01.vue
@@ -0,0 +1,40 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-tuple-01.vue b/tests/fixtures/script-indent/ts-tuple-01.vue
new file mode 100644
index 000000000..d5d1bfdb0
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-tuple-01.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-tuple-02.vue b/tests/fixtures/script-indent/ts-tuple-02.vue
new file mode 100644
index 000000000..526755f48
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-tuple-02.vue
@@ -0,0 +1,15 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-alias-seclaration-01.vue b/tests/fixtures/script-indent/ts-type-alias-seclaration-01.vue
new file mode 100644
index 000000000..92037fb4c
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-alias-seclaration-01.vue
@@ -0,0 +1,21 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-annotation-01.vue b/tests/fixtures/script-indent/ts-type-annotation-01.vue
new file mode 100644
index 000000000..8d7ac5958
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-annotation-01.vue
@@ -0,0 +1,9 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-annotation-02.vue b/tests/fixtures/script-indent/ts-type-annotation-02.vue
new file mode 100644
index 000000000..5769cfd40
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-annotation-02.vue
@@ -0,0 +1,33 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-annotation-03.vue b/tests/fixtures/script-indent/ts-type-annotation-03.vue
new file mode 100644
index 000000000..2d18debaf
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-annotation-03.vue
@@ -0,0 +1,29 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-annotation-04.vue b/tests/fixtures/script-indent/ts-type-annotation-04.vue
new file mode 100644
index 000000000..015bfb0bb
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-annotation-04.vue
@@ -0,0 +1,25 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-annotation-05.vue b/tests/fixtures/script-indent/ts-type-annotation-05.vue
new file mode 100644
index 000000000..7bdec085b
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-annotation-05.vue
@@ -0,0 +1,21 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-annotation-06.vue b/tests/fixtures/script-indent/ts-type-annotation-06.vue
new file mode 100644
index 000000000..79cbf15d7
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-annotation-06.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-assertion-01.vue b/tests/fixtures/script-indent/ts-type-assertion-01.vue
new file mode 100644
index 000000000..80f9aa78b
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-assertion-01.vue
@@ -0,0 +1,10 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-literal-01.vue b/tests/fixtures/script-indent/ts-type-literal-01.vue
new file mode 100644
index 000000000..61f481f9c
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-literal-01.vue
@@ -0,0 +1,7 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-only-import-export-01.vue b/tests/fixtures/script-indent/ts-type-only-import-export-01.vue
new file mode 100644
index 000000000..dea1377e9
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-only-import-export-01.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-only-import-export-02.vue b/tests/fixtures/script-indent/ts-type-only-import-export-02.vue
new file mode 100644
index 000000000..b2bad678e
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-only-import-export-02.vue
@@ -0,0 +1,23 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-only-import-export-03.vue b/tests/fixtures/script-indent/ts-type-only-import-export-03.vue
new file mode 100644
index 000000000..4c9238dc9
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-only-import-export-03.vue
@@ -0,0 +1,26 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-paramater-01.vue b/tests/fixtures/script-indent/ts-type-paramater-01.vue
new file mode 100644
index 000000000..cbdd01bcf
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-paramater-01.vue
@@ -0,0 +1,24 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-type-parameter-seclaration-01.vue b/tests/fixtures/script-indent/ts-type-parameter-seclaration-01.vue
new file mode 100644
index 000000000..71ca145ab
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-type-parameter-seclaration-01.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-union-intersection-01.vue b/tests/fixtures/script-indent/ts-union-intersection-01.vue
new file mode 100644
index 000000000..a808493e8
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-union-intersection-01.vue
@@ -0,0 +1,28 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-union-intersection-02.vue b/tests/fixtures/script-indent/ts-union-intersection-02.vue
new file mode 100644
index 000000000..62673b0a9
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-union-intersection-02.vue
@@ -0,0 +1,21 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-union-intersection-03.vue b/tests/fixtures/script-indent/ts-union-intersection-03.vue
new file mode 100644
index 000000000..022d2f1da
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-union-intersection-03.vue
@@ -0,0 +1,19 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-union-intersection-04.vue b/tests/fixtures/script-indent/ts-union-intersection-04.vue
new file mode 100644
index 000000000..378c95cdb
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-union-intersection-04.vue
@@ -0,0 +1,17 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-union-intersection-05.vue b/tests/fixtures/script-indent/ts-union-intersection-05.vue
new file mode 100644
index 000000000..f12da960e
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-union-intersection-05.vue
@@ -0,0 +1,19 @@
+
+
diff --git a/tests/fixtures/script-indent/ts-union-intersection-06.vue b/tests/fixtures/script-indent/ts-union-intersection-06.vue
new file mode 100644
index 000000000..8241ae123
--- /dev/null
+++ b/tests/fixtures/script-indent/ts-union-intersection-06.vue
@@ -0,0 +1,27 @@
+
+
diff --git a/tests/fixtures/typescript/src/test.vue b/tests/fixtures/typescript/src/test.vue
new file mode 100644
index 000000000..5bf03f4a7
--- /dev/null
+++ b/tests/fixtures/typescript/src/test.vue
@@ -0,0 +1 @@
+
diff --git a/tests/fixtures/typescript/src/test01.ts b/tests/fixtures/typescript/src/test01.ts
new file mode 100644
index 000000000..d14550843
--- /dev/null
+++ b/tests/fixtures/typescript/src/test01.ts
@@ -0,0 +1,20 @@
+export type Props1 = {
+ foo: string
+ bar?: number
+ baz?: boolean
+}
+export type Emits1 = {
+ (e: 'foo' | 'bar', payload: string): void
+ (e: 'baz', payload: number): void
+}
+export type Props2 = {
+ a: string
+ b?: number
+ c?: boolean
+ d?: boolean
+ e?: number | string
+ f?: () => number
+ g?: { foo?: string }
+ h?: string[]
+ i?: readonly string[]
+}
diff --git a/tests/fixtures/typescript/tsconfig.json b/tests/fixtures/typescript/tsconfig.json
new file mode 100644
index 000000000..c13ef64e3
--- /dev/null
+++ b/tests/fixtures/typescript/tsconfig.json
@@ -0,0 +1,6 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "skipLibCheck": true
+ }
+}
diff --git a/tests/fixtures/utils/html-comments/abrupt-closing-of-empty-comment/comment-tokens.json b/tests/fixtures/utils/html-comments/abrupt-closing-of-empty-comment/comment-tokens.json
new file mode 100644
index 000000000..adf085577
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/abrupt-closing-of-empty-comment/comment-tokens.json
@@ -0,0 +1,43 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 72,
+ 75
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 6
+ },
+ "end": {
+ "line": 4,
+ "column": 1
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/abrupt-closing-of-empty-comment/source.vue b/tests/fixtures/utils/html-comments/abrupt-closing-of-empty-comment/source.vue
new file mode 100644
index 000000000..9276de6b5
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/abrupt-closing-of-empty-comment/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/blank1/comment-tokens.json b/tests/fixtures/utils/html-comments/blank1/comment-tokens.json
new file mode 100644
index 000000000..016703d3b
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/blank1/comment-tokens.json
@@ -0,0 +1,43 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 50,
+ 53
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 9
+ },
+ "end": {
+ "line": 3,
+ "column": 12
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/blank1/source.vue b/tests/fixtures/utils/html-comments/blank1/source.vue
new file mode 100644
index 000000000..71043a9cb
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/blank1/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/blank2/comment-tokens.json b/tests/fixtures/utils/html-comments/blank2/comment-tokens.json
new file mode 100644
index 000000000..2cffdf190
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/blank2/comment-tokens.json
@@ -0,0 +1,43 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 50,
+ 53
+ ],
+ "loc": {
+ "start": {
+ "line": 4,
+ "column": 2
+ },
+ "end": {
+ "line": 4,
+ "column": 5
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/blank2/source.vue b/tests/fixtures/utils/html-comments/blank2/source.vue
new file mode 100644
index 000000000..887603525
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/blank2/source.vue
@@ -0,0 +1,5 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/decoration-empty-value/comment-tokens.json b/tests/fixtures/utils/html-comments/decoration-empty-value/comment-tokens.json
new file mode 100644
index 000000000..fff156f17
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/decoration-empty-value/comment-tokens.json
@@ -0,0 +1,60 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 68,
+ 71
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 11
+ },
+ "end": {
+ "line": 3,
+ "column": 14
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/decoration-empty-value/source.vue b/tests/fixtures/utils/html-comments/decoration-empty-value/source.vue
new file mode 100644
index 000000000..14bcb9519
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/decoration-empty-value/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/decoration1/comment-tokens.json b/tests/fixtures/utils/html-comments/decoration1/comment-tokens.json
new file mode 100644
index 000000000..37dda22ae
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/decoration1/comment-tokens.json
@@ -0,0 +1,94 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 69,
+ 72
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 23
+ },
+ "end": {
+ "line": 3,
+ "column": 26
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/decoration1/source.vue b/tests/fixtures/utils/html-comments/decoration1/source.vue
new file mode 100644
index 000000000..c5a6c442c
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/decoration1/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/decoration2/comment-tokens.json b/tests/fixtures/utils/html-comments/decoration2/comment-tokens.json
new file mode 100644
index 000000000..0ad4e3634
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/decoration2/comment-tokens.json
@@ -0,0 +1,94 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 71,
+ 74
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 25
+ },
+ "end": {
+ "line": 3,
+ "column": 28
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/decoration2/source.vue b/tests/fixtures/utils/html-comments/decoration2/source.vue
new file mode 100644
index 000000000..f40c67956
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/decoration2/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/decoration3/comment-tokens.json b/tests/fixtures/utils/html-comments/decoration3/comment-tokens.json
new file mode 100644
index 000000000..ab7f1c333
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/decoration3/comment-tokens.json
@@ -0,0 +1,94 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 77,
+ 80
+ ],
+ "loc": {
+ "start": {
+ "line": 5,
+ "column": 7
+ },
+ "end": {
+ "line": 5,
+ "column": 10
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/decoration3/source.vue b/tests/fixtures/utils/html-comments/decoration3/source.vue
new file mode 100644
index 000000000..2fe37af4a
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/decoration3/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/empty/comment-tokens.json b/tests/fixtures/utils/html-comments/empty/comment-tokens.json
new file mode 100644
index 000000000..81d8f4723
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/empty/comment-tokens.json
@@ -0,0 +1,43 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 46,
+ 49
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 6
+ },
+ "end": {
+ "line": 3,
+ "column": 9
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/empty/source.vue b/tests/fixtures/utils/html-comments/empty/source.vue
new file mode 100644
index 000000000..33d7fd240
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/empty/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/ie-conditional-comments1/comment-tokens.json b/tests/fixtures/utils/html-comments/ie-conditional-comments1/comment-tokens.json
new file mode 100644
index 000000000..0637a088a
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/ie-conditional-comments1/comment-tokens.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/ie-conditional-comments1/source.vue b/tests/fixtures/utils/html-comments/ie-conditional-comments1/source.vue
new file mode 100644
index 000000000..f8a6a1559
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/ie-conditional-comments1/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/ie-conditional-comments2/comment-tokens.json b/tests/fixtures/utils/html-comments/ie-conditional-comments2/comment-tokens.json
new file mode 100644
index 000000000..0637a088a
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/ie-conditional-comments2/comment-tokens.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/ie-conditional-comments2/source.vue b/tests/fixtures/utils/html-comments/ie-conditional-comments2/source.vue
new file mode 100644
index 000000000..679eba727
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/ie-conditional-comments2/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
`). Default is `"never"`.
- - `"always"` ... requires one or more spaces.
- - `"never"` ... disallows spaces.
+ - `"always"` ... requires one or more spaces.
+ - `"never"` ... disallows spaces.
- `endTag` (`"always" | "never"`) ... Setting for the `>` of end tags (e.g. `
`). Default is `"never"`.
- - `"always"` ... requires one or more spaces.
- - `"never"` ... disallows spaces.
+ - `"always"` ... requires one or more spaces.
+ - `"never"` ... disallows spaces.
- `selfClosingTag` (`"always" | "never"`) ... Setting for the `/>` of self-closing tags (e.g. ``). Default is `"always"`.
- - `"always"` ... requires one or more spaces.
- - `"never"` ... disallows spaces.
+ - `"always"` ... requires one or more spaces.
+ - `"never"` ... disallows spaces.
### `"startTag": "always", "endTag": "always", "selfClosingTag": "always"`
@@ -75,13 +81,18 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
```
+
-## :couple: Related rules
+## :couple: Related Rules
- [vue/no-multi-spaces](./no-multi-spaces.md)
- [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v4.1.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-closing-bracket-spacing.js)
diff --git a/docs/rules/html-comment-content-newline.md b/docs/rules/html-comment-content-newline.md
new file mode 100644
index 000000000..cffd7cdff
--- /dev/null
+++ b/docs/rules/html-comment-content-newline.md
@@ -0,0 +1,237 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/html-comment-content-newline
+description: enforce unified line break in HTML comments
+since: v7.0.0
+---
+
+# vue/html-comment-content-newline
+
+> enforce unified line break in HTML comments
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule will enforce consistency of line break after the `` of comment. It also provides several exceptions for various documentation styles.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/html-comment-content-newline": ["error",
+ {
+ "singleline": "always" | "never" | "ignore",
+ "multiline": "always" | "never" | "ignore",
+ },
+ {
+ "exceptions": []
+ }
+ ]
+}
+```
+
+- The first option is either an object with `"singleline"` and `"multiline"` keys.
+
+ - `singleline` ... the configuration for single-line comments.
+ - `"never"` (default) ... disallow line breaks after the ``.
+ - `"always"` ... require one line break after the ``.
+ - `multiline` ... the configuration for multiline comments.
+ - `"never"` ... disallow line breaks after the ``.
+ - `"always"` (default) ... require one line break after the ``.
+
+ You can also set the same value for both `singleline` and `multiline` by specifies a string.
+
+- This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
+
+ - The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
+
+ ```json
+ "vue/html-comment-content-newline": ["error", { ... }, { "exceptions": ["*"] }]
+ ```
+
+### `"always"`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `"never"`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `{"singleline": "always", "multiline": "ignore"}`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `{"singleline": "ignore", "multiline": "always"}`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `"always", { "exceptions": ["*"] }`
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/html-comment-indent](./html-comment-indent.md)
+- [vue/html-comment-content-spacing](./html-comment-content-spacing.md)
+- [spaced-comment](https://eslint.org/docs/rules/spaced-comment)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-content-newline.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-content-newline.js)
diff --git a/docs/rules/html-comment-content-spacing.md b/docs/rules/html-comment-content-spacing.md
new file mode 100644
index 000000000..5b3948827
--- /dev/null
+++ b/docs/rules/html-comment-content-spacing.md
@@ -0,0 +1,123 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/html-comment-content-spacing
+description: enforce unified spacing in HTML comments
+since: v7.0.0
+---
+
+# vue/html-comment-content-spacing
+
+> enforce unified spacing in HTML comments
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule will enforce consistency of spacing after the `` of comment. It also provides several exceptions for various documentation styles.
+
+Whitespace after the `` makes it easier to read text in comments.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/html-comment-content-spacing": ["error",
+ "always" | "never",
+ {
+ "exceptions": []
+ }
+ ]
+}
+```
+
+- The first is a string which be either `"always"` or `"never"`. The default is `"always"`.
+
+ - `"always"` (default) ... there must be at least one whitespace at after the ``.
+ - `"never"` ... there should be no whitespace at after the ``.
+
+- This rule can also take a 2nd option, an object with the following key: `"exceptions"`.
+
+ - The `"exceptions"` value is an array of string patterns which are considered exceptions to the rule.
+ Please note that exceptions are ignored if the first argument is `"never"`.
+
+ ```json
+ "vue/html-comment-content-spacing": ["error", "always", { "exceptions": ["*"] }]
+ ```
+
+### `"always"`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+### `"never"`
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+### `"always", { "exceptions": ["*"] }`
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+## :couple: Related Rules
+
+- [spaced-comment](https://eslint.org/docs/rules/spaced-comment)
+- [vue/html-comment-content-newline](./html-comment-content-newline.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-content-spacing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-content-spacing.js)
diff --git a/docs/rules/html-comment-indent.md b/docs/rules/html-comment-indent.md
new file mode 100644
index 000000000..2fa8ed7f1
--- /dev/null
+++ b/docs/rules/html-comment-indent.md
@@ -0,0 +1,140 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/html-comment-indent
+description: enforce consistent indentation in HTML comments
+since: v7.0.0
+---
+
+# vue/html-comment-indent
+
+> enforce consistent indentation in HTML comments
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces a consistent indentation style in HTML comment (``). The default style is 2 spaces.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/html-comment-indent": ["error", type]
+}
+```
+
+- `type` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
+
+### `2`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+### `4`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+### `0`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+### `"tab"`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-comment-indent.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-comment-indent.js)
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index fe8b704bb..fa6333b06 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -3,19 +3,23 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/html-end-tags
description: enforce end tag style
+since: v3.0.0
---
+
# vue/html-end-tags
+
> enforce end tag style
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule aims to disallow lacking end tags.
-```
+
+```vue
@@ -29,12 +33,17 @@ This rule aims to disallow lacking end tags.
## :wrench: Options
Nothing.
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.0.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-end-tags.js)
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index fb5aab263..2cab727aa 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -3,22 +3,26 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/html-indent
description: enforce consistent indentation in ``
+since: v3.14.0
---
+
# vue/html-indent
+
> enforce consistent indentation in ``
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule enforces a consistent indentation style in ``. The default style is 2 spaces.
- This rule checks all tags, also all expressions in directives and mustaches.
-- In the expressions, this rule supports ECMAScript 2017 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
+- In the expressions, this rule supports ECMAScript 2022 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
-```
+
+```vue
## :wrench: Options
@@ -74,14 +79,19 @@ This rule enforces a consistent indentation style in ``. The default s
- `type` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
- `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`.
- `baseIndent` (`integer`) ... The multiplier of indentation for top-level statements. Default is `1`.
-- `closeBracket` (`integer`) ... The multiplier of indentation for right brackets. Default is `0`.
+- `closeBracket` (`integer | object`) ... The multiplier of indentation for right brackets. Default is `0`.
+ You can apply all of the following by setting a number value.
+ - `closeBracket.startTag` (`integer`) ... The multiplier of indentation for right brackets of start tags (`
-```
+
+```vue
### `2, {"attribute": 2, "closeBracket": 1}`
-```
+
+```vue
### `2, {"ignores": ["VAttribute"]}`
-```
+
+```vue
## :wrench: Options
@@ -94,10 +99,14 @@ The error codes which have `x-` prefix are original of this rule because errors
- `x-invalid-end-tag` enables the errors about the end tags of elements which have not opened.
- `x-invalid-namespace` enables the errors about invalid `xmlns` attributes. See also [step 10. of "create an element for a token"](https://html.spec.whatwg.org/multipage/parsing.html#create-an-element-for-the-token).
-## :books: Further reading
+## :books: Further Reading
- [WHATWG HTML spec](https://html.spec.whatwg.org/multipage/parsing.html#parse-errors)
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.0.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-parsing-error.js)
diff --git a/docs/rules/no-potential-component-option-typo.md b/docs/rules/no-potential-component-option-typo.md
new file mode 100644
index 000000000..17e21c818
--- /dev/null
+++ b/docs/rules/no-potential-component-option-typo.md
@@ -0,0 +1,132 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-potential-component-option-typo
+description: disallow a potential typo in your component property
+since: v7.0.0
+---
+
+# vue/no-potential-component-option-typo
+
+> disallow a potential typo in your component property
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule disallow a potential typo in your component options
+
+### Here is the config
+
+```json
+{
+ "vue/no-potential-component-option-typo": ["error", {
+ "presets": ["all"],
+ "custom": ["test"]
+ }]
+}
+```
+
+
+
+```vue
+
+```
+
+
+
+> we use edit distance to compare two string similarity, threshold is an option to control upper bound of edit distance to report
+
+### Here is the another example about config option `threshold`
+
+```json
+{
+ "vue/no-potential-component-option-typo": ["error", {
+ "presets": ["vue", "nuxt"],
+ "threshold": 5
+ }]
+}
+```
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-potential-component-option-typo": ["error", {
+ "presets": ["vue"],
+ "custom": [],
+ "threshold": 1
+ }]
+}
+```
+
+- `presets` ... `enum type`, contains several common vue component option set, `["all"]` is the same as `["vue", "vue-router", "nuxt"]`. **default** `["vue"]`
+- `custom` ... `array type`, a list store your custom component option want to detect. **default** `[]`
+- `threshold` ... `number type`, a number used to control the upper limit of the reported editing distance, we recommend don't change this config option, even if it is required, not bigger than `2`. **default** `1`
+
+## :rocket: Suggestion
+
+- We provide all the possible component option that edit distance between your vue component option and configuration options is greater than 0 and less equal than threshold
+
+## :books: Further Reading
+
+- [Edit distance](https://en.wikipedia.org/wiki/Edit_distance)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-potential-component-option-typo.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-potential-component-option-typo.js)
diff --git a/docs/rules/no-ref-as-operand.md b/docs/rules/no-ref-as-operand.md
new file mode 100644
index 000000000..af10e0b7d
--- /dev/null
+++ b/docs/rules/no-ref-as-operand.md
@@ -0,0 +1,72 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-ref-as-operand
+description: disallow use of value wrapped by `ref()` (Composition API) as an operand
+since: v7.0.0
+---
+
+# vue/no-ref-as-operand
+
+> disallow use of value wrapped by `ref()` (Composition API) as an operand
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports cases where a ref is used incorrectly as an operand.
+You must use `.value` to access the `Ref` value.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Guide - Reactivity - Reactivity Fundamentals / Creating Standalone Reactive Values as `refs`](https://v3.vuejs.org/guide/reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs)
+- [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-ref-as-operand.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-ref-as-operand.js)
diff --git a/docs/rules/no-ref-object-destructure.md b/docs/rules/no-ref-object-destructure.md
new file mode 100644
index 000000000..8ea5247a1
--- /dev/null
+++ b/docs/rules/no-ref-object-destructure.md
@@ -0,0 +1,61 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-ref-object-destructure
+description: disallow usages of ref objects that can lead to loss of reactivity
+since: v9.5.0
+---
+
+# vue/no-ref-object-destructure
+
+> disallow usages of ref objects that can lead to loss of reactivity
+
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0 and replaced by [vue/no-ref-object-reactivity-loss](no-ref-object-reactivity-loss.md) rule.
+
+## :book: Rule Details
+
+This rule reports the destructuring of ref objects causing the value to lose reactivity.
+
+
+
+```js
+import { ref } from 'vue'
+const count = ref(0)
+const v1 = count.value /* ✗ BAD */
+const { value: v2 } = count /* ✗ BAD */
+const v3 = computed(() => count.value /* ✓ GOOD */)
+const v4 = fn(count.value) /* ✗ BAD */
+const v5 = fn(count) /* ✓ GOOD */
+const v6 = computed(() => fn(count.value) /* ✓ GOOD */)
+```
+
+
+
+This rule also supports Reactivity Transform, but Reactivity Transform is an experimental feature and may have false positives due to future Vue changes.
+See the [RFC](https://github.com/vuejs/rfcs/pull/420) for more information on Reactivity Transform.
+
+
+
+```js
+const count = $ref(0)
+const v1 = count /* ✗ BAD */
+const v2 = $computed(() => count /* ✓ GOOD */)
+const v3 = fn(count) /* ✗ BAD */
+const v4 = fn($$(count)) /* ✓ GOOD */
+const v5 = $computed(() => fn(count) /* ✓ GOOD */)
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-ref-object-destructure.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-ref-object-destructure.js)
diff --git a/docs/rules/no-ref-object-reactivity-loss.md b/docs/rules/no-ref-object-reactivity-loss.md
new file mode 100644
index 000000000..5df8ed52b
--- /dev/null
+++ b/docs/rules/no-ref-object-reactivity-loss.md
@@ -0,0 +1,59 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-ref-object-reactivity-loss
+description: disallow usages of ref objects that can lead to loss of reactivity
+since: v9.17.0
+---
+
+# vue/no-ref-object-reactivity-loss
+
+> disallow usages of ref objects that can lead to loss of reactivity
+
+## :book: Rule Details
+
+This rule reports the usages of ref objects causing the value to lose reactivity.
+
+
+
+```js
+import { ref } from 'vue'
+const count = ref(0)
+const v1 = count.value /* ✗ BAD */
+const { value: v2 } = count /* ✗ BAD */
+const v3 = computed(() => count.value /* ✓ GOOD */)
+const v4 = fn(count.value) /* ✗ BAD */
+const v5 = fn(count) /* ✓ GOOD */
+const v6 = computed(() => fn(count.value) /* ✓ GOOD */)
+```
+
+
+
+This rule also supports Reactivity Transform, but Reactivity Transform is an experimental feature and may have false positives due to future Vue changes.
+See the [RFC](https://github.com/vuejs/rfcs/pull/420) for more information on Reactivity Transform.
+
+
+
+```js
+const count = $ref(0)
+const v1 = count /* ✗ BAD */
+const v2 = $computed(() => count /* ✓ GOOD */)
+const v3 = fn(count) /* ✗ BAD */
+const v4 = fn($$(count)) /* ✓ GOOD */
+const v5 = $computed(() => fn(count) /* ✓ GOOD */)
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.17.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-ref-object-reactivity-loss.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-ref-object-reactivity-loss.js)
diff --git a/docs/rules/no-required-prop-with-default.md b/docs/rules/no-required-prop-with-default.md
new file mode 100644
index 000000000..8308e4d8c
--- /dev/null
+++ b/docs/rules/no-required-prop-with-default.md
@@ -0,0 +1,102 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-required-prop-with-default
+description: enforce props with default values to be optional
+since: v9.6.0
+---
+
+# vue/no-required-prop-with-default
+
+> enforce props with default values to be optional
+
+- :gear: This rule is included in all of `"plugin:vue/vue2-recommended"`, `*.configs["flat/vue2-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+If a prop is declared with a default value, whether it is required or not, we can always skip it in actual use. In that situation, the default value would be applied.
+So, a required prop with a default value is essentially the same as an optional prop.
+This rule enforces all props with default values to be optional.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-required-prop-with-default": ["error", {
+ "autofix": false,
+ }]
+}
+```
+
+- `"autofix"` ... If `true`, enable autofix. (Default: `false`)
+
+## :couple: Related Rules
+
+- [vue/require-default-prop](./require-default-prop.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.6.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-required-prop-with-default.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-required-prop-with-default.js)
diff --git a/docs/rules/no-reserved-component-names.md b/docs/rules/no-reserved-component-names.md
new file mode 100644
index 000000000..c99191872
--- /dev/null
+++ b/docs/rules/no-reserved-component-names.md
@@ -0,0 +1,126 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-reserved-component-names
+description: disallow the use of reserved names in component definitions
+since: v6.1.0
+---
+
+# vue/no-reserved-component-names
+
+> disallow the use of reserved names in component definitions
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule prevents name collisions between Vue components and standard HTML elements and built-in components.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-reserved-component-names": ["error", {
+ "disallowVueBuiltInComponents": false,
+ "disallowVue3BuiltInComponents": false,
+ "htmlElementCaseSensitive": false,
+ }]
+}
+```
+
+- `disallowVueBuiltInComponents` (`boolean`) ... If `true`, disallow Vue.js 2.x built-in component names. Default is `false`.
+- `disallowVue3BuiltInComponents` (`boolean`) ... If `true`, disallow Vue.js 3.x built-in component names. Default is `false`.
+- `htmlElementCaseSensitive` (`boolean`) ... If `true`, component names must exactly match the case of an HTML element to be considered conflicting. Default is `false` (i.e. case-insensitve comparison).
+
+### `"disallowVueBuiltInComponents": true`
+
+
+
+```vue
+
+```
+
+
+
+### `"disallowVue3BuiltInComponents": true`
+
+
+
+```vue
+
+```
+
+
+
+### `"htmlElementCaseSensitive": true`
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/multi-word-component-names](./multi-word-component-names.md)
+
+## :books: Further Reading
+
+- [List of html elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element)
+- [List of SVG elements](https://developer.mozilla.org/en-US/docs/Web/SVG/Element)
+- [Kebab case elements](https://stackoverflow.com/questions/22545621/do-custom-elements-require-a-dash-in-their-name/22545622#22545622)
+- [Valid custom element name](https://html.spec.whatwg.org/multipage/custom-elements.html#valid-custom-element-name)
+- [API - Built-In Components](https://vuejs.org/api/built-in-components.html)
+- [API (for v2) - Built-In Components](https://v2.vuejs.org/v2/api/index.html#Built-In-Components)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-reserved-component-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-reserved-component-names.js)
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index ec2d99206..9244ee0b7 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -3,18 +3,22 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/no-reserved-keys
description: disallow overwriting reserved keys
+since: v3.9.0
---
+
# vue/no-reserved-keys
+
> disallow overwriting reserved keys
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
This rule prevents to use [reserved names](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue-reserved.json) to avoid conflicts and unexpected behavior.
-```
+
+```vue
```
+
## :wrench: Options
@@ -54,25 +59,31 @@ export default {
### `"reserved": ["foo", "foo2"], "groups": ["firebase"]`
-```
+
+```vue
```
+
-## :books: Further reading
+## :books: Further Reading
- [List of reserved keys](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue-reserved.json)
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.9.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-reserved-keys.js)
diff --git a/docs/rules/no-reserved-props.md b/docs/rules/no-reserved-props.md
new file mode 100644
index 000000000..982ddb947
--- /dev/null
+++ b/docs/rules/no-reserved-props.md
@@ -0,0 +1,57 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-reserved-props
+description: disallow reserved names in props
+since: v8.0.0
+---
+
+# vue/no-reserved-props
+
+> disallow reserved names in props
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule disallow reserved names to be used in props.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-reserved-props": ["error", {
+ "vueVersion": 3, // or 2
+ }]
+}
+```
+
+- `vueVersion` (`2 | 3`) ... Specify the version of Vue you are using. Default is `3`.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-reserved-props.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-reserved-props.js)
diff --git a/docs/rules/no-restricted-block.md b/docs/rules/no-restricted-block.md
new file mode 100644
index 000000000..0a96a64a4
--- /dev/null
+++ b/docs/rules/no-restricted-block.md
@@ -0,0 +1,92 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-restricted-block
+description: disallow specific block
+since: v7.4.0
+---
+
+# vue/no-restricted-block
+
+> disallow specific block
+
+## :book: Rule Details
+
+This rule allows you to specify block names that you don't want to use in your application.
+
+## :wrench: Options
+
+This rule takes a list of strings, where each string is a block name or pattern to be restricted:
+
+```json
+{
+ "vue/no-restricted-block": ["error", "style", "foo", "bar"]
+}
+```
+
+
+
+```vue
+
+
+ Custom block
+
+
+ Custom block
+
+
+```
+
+
+
+Alternatively, the rule also accepts objects.
+
+```json
+{
+ "vue/no-restricted-block": ["error",
+ {
+ "element": "style",
+ "message": "Do not use
+```
+
+
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/padding-line-between-blocks": ["error", "always" | "never"]
+}
+```
+
+- `"always"` (default) ... Requires one or more blank lines. Note it does not count lines that comments exist as blank lines.
+- `"never"` ... Disallows blank lines.
+
+### `"always"` (default)
+
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+### `"never"`
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+## :books: Further Reading
+
+- [padding-line-between-statements]
+- [lines-between-class-members]
+
+[padding-line-between-statements]: https://eslint.org/docs/rules/padding-line-between-statements
+[lines-between-class-members]: https://eslint.org/docs/rules/lines-between-class-members
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-line-between-blocks.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/padding-line-between-blocks.js)
diff --git a/docs/rules/padding-line-between-tags.md b/docs/rules/padding-line-between-tags.md
new file mode 100644
index 000000000..e5b5c4b41
--- /dev/null
+++ b/docs/rules/padding-line-between-tags.md
@@ -0,0 +1,170 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/padding-line-between-tags
+description: require or disallow newlines between sibling tags in template
+since: v9.5.0
+---
+
+# vue/padding-line-between-tags
+
+> require or disallow newlines between sibling tags in template
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule requires or disallows newlines between sibling HTML tags.
+
+
+
+```vue
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/padding-line-between-tags": ["error", [
+ { "blankLine": "always", "prev": "*", "next": "*" }
+ ]]
+}
+```
+
+This rule requires blank lines between each sibling HTML tag by default.
+
+A configuration is an object which has 3 properties; `blankLine`, `prev` and `next`. For example, `{ blankLine: "always", prev: "br", next: "div" }` means “one or more blank lines are required between a `br` tag and a `div` tag.” You can supply any number of configurations. If a tag pair matches multiple configurations, the last matched configuration will be used.
+
+- `blankLine` is one of the following:
+ - `always` requires one or more blank lines.
+ - `never` disallows blank lines.
+ - `consistent` requires or disallows a blank line based on the first sibling element.
+- `prev` any tag name without brackets.
+- `next` any tag name without brackets.
+
+### Disallow blank lines between all tags
+
+`{ blankLine: 'never', prev: '*', next: '*' }`
+
+
+
+```vue
+
+
+
+### Require newlines after `
` + +`{ blankLine: 'always', prev: 'br', next: '*' }` + +
+
+```vue
+
+
+
+### Require newlines between `
` and `![]()
`
+
+`{ blankLine: 'always', prev: 'br', next: 'img' }`
+
+
+
+```vue
+
+
+
+### Require consistent newlines
+
+`{ blankLine: 'consistent', prev: '*', next: '*' }`
+
+
+
+```vue
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-line-between-tags.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/padding-line-between-tags.js)
diff --git a/docs/rules/padding-lines-in-component-definition.md b/docs/rules/padding-lines-in-component-definition.md
new file mode 100644
index 000000000..eef694e14
--- /dev/null
+++ b/docs/rules/padding-lines-in-component-definition.md
@@ -0,0 +1,168 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/padding-lines-in-component-definition
+description: require or disallow padding lines in component definition
+since: v9.9.0
+---
+
+# vue/padding-lines-in-component-definition
+
+> require or disallow padding lines in component definition
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule requires or disallows blank lines in the component definition. Properly blank lines help developers improve code readability and code style flexibility.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/padding-lines-in-component-definition": ["error", {
+ "betweenOptions": "always" | "never",
+
+ "withinOption": {
+ "props": {
+ "betweenItems": "always" | "never" | "ignore",
+ "withinEach": "always" | "never" | "ignore",
+ } | "always" | "never" | "ignore", // shortcut to set both
+
+ "data": {
+ "betweenItems": "always" | "never" | "ignore",
+ "withinEach": "always" | "never" | "ignore",
+ } | "always" | "never" | "ignore" // shortcut to set both
+
+ // ... all options
+ } | "always" | "never" | "ignore",
+
+ "groupSingleLineProperties": true | false
+ }]
+}
+```
+
+- `betweenOptions` ... Setting padding lines between options. default `always`
+- `withinOption` ... Setting padding lines within option
+ - `emits` ... Setting padding between lines between `emits` and `defineEmits`. default `always`
+ - `props` ... Setting padding between lines between `props` and `defineProps`. default `always`
+ - ...
+- `groupSingleLineProperties` ... Setting groupings of multiple consecutive single-line properties (e.g. `name`, `inheritAttrs`), default `true`
+
+### Group single-line properties
+
+
+
+```vue
+
+```
+
+
+
+### With custom options
+
+
+
+```vue
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.9.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/padding-lines-in-component-definition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/padding-lines-in-component-definition.js)
diff --git a/docs/rules/prefer-define-options.md b/docs/rules/prefer-define-options.md
new file mode 100644
index 000000000..110c1426a
--- /dev/null
+++ b/docs/rules/prefer-define-options.md
@@ -0,0 +1,61 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-define-options
+description: enforce use of `defineOptions` instead of default export
+since: v9.13.0
+---
+
+# vue/prefer-define-options
+
+> enforce use of `defineOptions` instead of default export
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to enforce use of `defineOptions` instead of default export in `
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [API - defineOptions()](https://vuejs.org/api/sfc-script-setup.html#defineoptions)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.13.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-define-options.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-define-options.js)
diff --git a/docs/rules/prefer-import-from-vue.md b/docs/rules/prefer-import-from-vue.md
new file mode 100644
index 000000000..2da6700f9
--- /dev/null
+++ b/docs/rules/prefer-import-from-vue.md
@@ -0,0 +1,58 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-import-from-vue
+description: enforce import from 'vue' instead of import from '@vue/*'
+since: v8.5.0
+---
+
+# vue/prefer-import-from-vue
+
+> enforce import from 'vue' instead of import from '@vue/\*'
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to use imports from `'vue'` instead of imports from `'@vue/*'`.
+
+Imports from the following modules are almost always wrong. You should import from `vue` instead.
+
+- `@vue/runtime-dom`
+- `@vue/runtime-core`
+- `@vue/reactivity`
+- `@vue/shared`
+
+
+
+```js
+/* ✓ GOOD */
+import { createApp, ref, Component } from 'vue'
+```
+
+
+
+
+
+```js
+/* ✗ BAD */
+import { createApp } from '@vue/runtime-dom'
+import { Component } from '@vue/runtime-core'
+import { ref } from '@vue/reactivity'
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-import-from-vue.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-import-from-vue.js)
diff --git a/docs/rules/prefer-prop-type-boolean-first.md b/docs/rules/prefer-prop-type-boolean-first.md
new file mode 100644
index 000000000..8282e32ba
--- /dev/null
+++ b/docs/rules/prefer-prop-type-boolean-first.md
@@ -0,0 +1,65 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-prop-type-boolean-first
+description: enforce `Boolean` comes first in component prop types
+since: v8.6.0
+---
+
+# vue/prefer-prop-type-boolean-first
+
+> enforce `Boolean` comes first in component prop types
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+When declaring types of a property in component, we can use array style to accept multiple types.
+
+When using components in template,
+we can use shorthand-style property if its value is `true`.
+
+However, if a property allows `Boolean` or `String` and we use it with shorthand form in somewhere else,
+different types order can introduce different behaviors:
+If `Boolean` comes first, it will be `true`; if `String` comes first, it will be `""` (empty string).
+
+See [this demo](https://sfc.vuejs.org/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cD5cbmltcG9ydCBNeUNvbXBvbmVudCBmcm9tICcuL015Q29tcG9uZW50LnZ1ZSdcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIFNob3J0aGFuZCBmb3JtOlxuICA8TXlDb21wb25lbnQgYm9vbCBib29sLW9yLXN0cmluZyBzdHJpbmctb3ItYm9vbCAvPlxuICBcbiAgTG9uZ2hhbmQgZm9ybTpcbiAgPE15Q29tcG9uZW50IDpib29sPVwidHJ1ZVwiIDpib29sLW9yLXN0cmluZz1cInRydWVcIiA6c3RyaW5nLW9yLWJvb2w9XCJ0cnVlXCIgLz5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cHM6Ly9zZmMudnVlanMub3JnL3Z1ZS5ydW50aW1lLmVzbS1icm93c2VyLmpzXCJcbiAgfVxufSIsIk15Q29tcG9uZW50LnZ1ZSI6IjxzY3JpcHQ+XG5leHBvcnQgZGVmYXVsdCB7XG4gIHByb3BzOiB7XG4gICAgYm9vbDogQm9vbGVhbixcbiAgICBib29sT3JTdHJpbmc6IFtCb29sZWFuLCBTdHJpbmddLFxuICAgIHN0cmluZ09yQm9vbDogW1N0cmluZywgQm9vbGVhbl0sXG4gIH1cbn1cbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxwcmU+XG5ib29sOiB7e2Jvb2x9fSAoe3sgdHlwZW9mIGJvb2wgfX0pXG5ib29sT3JTdHJpbmc6IHt7Ym9vbE9yU3RyaW5nfX0gKHt7IHR5cGVvZiBib29sT3JTdHJpbmcgfX0pXG5zdHJpbmdPckJvb2w6IHt7c3RyaW5nT3JCb29sfX0gKHt7IHR5cGVvZiBzdHJpbmdPckJvb2wgfX0pXG4gIDwvcHJlPlxuPC90ZW1wbGF0ZT4ifQ==).
+
+
+
+```vue
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.6.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-prop-type-boolean-first.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-prop-type-boolean-first.js)
diff --git a/docs/rules/prefer-separate-static-class.md b/docs/rules/prefer-separate-static-class.md
new file mode 100644
index 000000000..610e3f2b8
--- /dev/null
+++ b/docs/rules/prefer-separate-static-class.md
@@ -0,0 +1,48 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-separate-static-class
+description: require static class names in template to be in a separate `class` attribute
+since: v8.2.0
+---
+
+# vue/prefer-separate-static-class
+
+> require static class names in template to be in a separate `class` attribute
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports static class names in dynamic class attributes.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-separate-static-class.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-separate-static-class.js)
diff --git a/docs/rules/prefer-template.md b/docs/rules/prefer-template.md
new file mode 100644
index 000000000..ae4d3fc29
--- /dev/null
+++ b/docs/rules/prefer-template.md
@@ -0,0 +1,32 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-template
+description: Require template literals instead of string concatenation in ``
+since: v7.0.0
+---
+
+# vue/prefer-template
+
+> Require template literals instead of string concatenation in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as core [prefer-template] rule but it applies to the expressions in ``.
+
+## :books: Further Reading
+
+- [prefer-template]
+
+[prefer-template]: https://eslint.org/docs/rules/prefer-template
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-template.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-template.js)
+
+Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/prefer-template)
diff --git a/docs/rules/prefer-true-attribute-shorthand.md b/docs/rules/prefer-true-attribute-shorthand.md
new file mode 100644
index 000000000..700921ce1
--- /dev/null
+++ b/docs/rules/prefer-true-attribute-shorthand.md
@@ -0,0 +1,146 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-true-attribute-shorthand
+description: require shorthand form attribute when `v-bind` value is `true`
+since: v8.5.0
+---
+
+# vue/prefer-true-attribute-shorthand
+
+> require shorthand form attribute when `v-bind` value is `true`
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+`v-bind` attribute with `true` value usually can be written in shorthand form. This can reduce verbosity.
+
+
+
+```vue
+
+
+
+
+::: warning Warning
+The shorthand form is not always equivalent! If a prop accepts multiple types, but Boolean is not the first one, a shorthand prop won't pass `true`.
+:::
+
+```vue
+
+```
+
+**Shorthand form:**
+
+```vue
+
+
+```vue
+
+
+
+
+### `"never", { 'except': ['value', '/^foo-/'] }`
+
+
+
+```vue
+
+
+
+
+## :couple: Related Rules
+
+- [vue/no-boolean-default](./no-boolean-default.md)
+- [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-true-attribute-shorthand.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-true-attribute-shorthand.js)
diff --git a/docs/rules/prefer-use-template-ref.md b/docs/rules/prefer-use-template-ref.md
new file mode 100644
index 000000000..1b1b40385
--- /dev/null
+++ b/docs/rules/prefer-use-template-ref.md
@@ -0,0 +1,78 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/prefer-use-template-ref
+description: require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
+since: v9.31.0
+---
+
+# vue/prefer-use-template-ref
+
+> require using `useTemplateRef` instead of `ref`/`shallowRef` for template refs
+
+## :book: Rule Details
+
+Vue 3.5 introduced a new way of obtaining template refs via
+the [`useTemplateRef()`](https://vuejs.org/guide/essentials/template-refs.html#accessing-the-refs) API.
+
+This rule enforces using the new `useTemplateRef` function instead of `ref`/`shallowRef` for template refs.
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+This rule skips `ref` template function refs as these should be used to allow custom implementation of storing `ref`. If you prefer
+`useTemplateRef`, you have to change the value of the template `ref` to a string.
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.31.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prefer-use-template-ref.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prefer-use-template-ref.js)
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index ea26d9b96..32681643c 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -3,19 +3,22 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/prop-name-casing
description: enforce specific casing for the Prop name in Vue components
+since: v4.3.0
---
+
# vue/prop-name-casing
+
> enforce specific casing for the Prop name in Vue components
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
This rule enforce proper casing of props in vue components(camelCase).
-
-```
+
+
+```vue
```
+
## :wrench: Options
```json
{
- "vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
+ "vue/prop-name-casing": ["error",
+ "camelCase" | "snake_case",
+ {
+ "ignoreProps": []
+ }
+ ]
}
```
- `"camelCase"` (default) ... Enforce property names in `props` to camel case.
- `"snake_case"` ... Enforce property names in `props` to snake case.
+- `ignoreProps` (`string[]`) ... An array of prop names (or patterns) that don't need to follow the specified casing.
### `"snake_case"`
-
-```
+
+
+```vue
```
+
+
+
+### `"ignoreProps": ["foo-bar", "/^_[a-z]+/u"]`
+
+
+
+```vue
+
+```
+
-## :books: Further reading
+## :couple: Related Rules
+
+- [vue/attribute-hyphenation](./attribute-hyphenation.md)
+- [vue/custom-event-name-casing](./custom-event-name-casing.md)
+
+## :books: Further Reading
+
+- [Style guide - Prop name casing](https://vuejs.org/style-guide/rules-strongly-recommended.html#prop-name-casing)
+
+## :rocket: Version
-- [Style guide - Prop name casing](https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended)
+This rule was introduced in eslint-plugin-vue v4.3.0
## :mag: Implementation
diff --git a/docs/rules/quote-props.md b/docs/rules/quote-props.md
new file mode 100644
index 000000000..f5fe59248
--- /dev/null
+++ b/docs/rules/quote-props.md
@@ -0,0 +1,39 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/quote-props
+description: Require quotes around object literal, type literal, interfaces and enums property names in ``
+since: v8.4.0
+---
+
+# vue/quote-props
+
+> Require quotes around object literal, type literal, interfaces and enums property names in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/quote-props] rule but it applies to the expressions in ``.
+
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
+
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
+
+## :books: Further Reading
+
+- [@stylistic/quote-props]
+- [quote-props]
+
+[@stylistic/quote-props]: https://eslint.style/rules/default/quote-props
+[quote-props]: https://eslint.org/docs/rules/quote-props
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.4.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/quote-props.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/quote-props.js)
+
+Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/ts/quote-props)
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 9e1e03882..40280a975 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -3,43 +3,50 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/require-component-is
description: require `v-bind:is` of `` elements
+since: v3.0.0
---
+
# vue/require-component-is
+
> require `v-bind:is` of `` elements
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
This rule reports the `` elements which do not have `v-bind:is` attributes.
-
+
```vue
-
::: warning Note
You can use the same mount point and dynamically switch between multiple components using the reserved `` element and dynamically bind to its `is` attribute.
:::
-
## :wrench: Options
Nothing.
-## :books: Further reading
+## :books: Further Reading
+
+- [Guide - Components Basics / Dynamic Components](https://vuejs.org/guide/essentials/component-basics.html#dynamic-components)
+
+## :rocket: Version
-- [Guide - Dynamic Components](https://vuejs.org/v2/guide/components.html#Dynamic-Components)
+This rule was introduced in eslint-plugin-vue v3.0.0
## :mag: Implementation
diff --git a/docs/rules/require-default-export.md b/docs/rules/require-default-export.md
new file mode 100644
index 000000000..9266eee89
--- /dev/null
+++ b/docs/rules/require-default-export.md
@@ -0,0 +1,60 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-default-export
+description: require components to be the default export
+since: v9.28.0
+---
+
+# vue/require-default-export
+
+> require components to be the default export
+
+## :book: Rule Details
+
+This rule reports when a Vue component does not have a default export, if the component is not defined as `
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/one-component-per-file](./one-component-per-file.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.28.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-default-export.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-default-export.js)
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 71bfacb10..c96edc24e 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -3,18 +3,22 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/require-default-prop
description: require default value for props
+since: v3.13.0
---
+
# vue/require-default-prop
+
> require default value for props
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
This rule requires default value to be set for each props that are not marked as `required` (except `Boolean` props).
-```
+
+```vue
```
+
## :wrench: Options
Nothing.
-## :books: Further reading
+## :couple: Related Rules
+
+- [vue/no-boolean-default](./no-boolean-default.md)
+
+## :books: Further Reading
+
+- [Style guide - Prop definitions](https://vuejs.org/style-guide/rules-essential.html#use-detailed-prop-definitions)
+
+## :rocket: Version
-- [Style guide - Prop definitions](https://vuejs.org/v2/style-guide/#Prop-definitions-essential)
+This rule was introduced in eslint-plugin-vue v3.13.0
## :mag: Implementation
diff --git a/docs/rules/require-direct-export.md b/docs/rules/require-direct-export.md
new file mode 100644
index 000000000..4f2e37650
--- /dev/null
+++ b/docs/rules/require-direct-export.md
@@ -0,0 +1,100 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-direct-export
+description: require the component to be directly exported
+since: v5.2.0
+---
+
+# vue/require-direct-export
+
+> require the component to be directly exported
+
+## :book: Rule Details
+
+This rule aims to require that the component object be directly exported.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/require-direct-export": ["error", {
+ "disallowFunctionalComponentFunction": false
+ }]
+}
+```
+
+- `"disallowFunctionalComponentFunction"` ... If `true`, disallow functional component functions, available in Vue 3.x. default `false`
+
+### `"disallowFunctionalComponentFunction": false`
+
+
+
+```vue
+
+```
+
+
+
+### `"disallowFunctionalComponentFunction": true`
+
+
+
+```vue
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v5.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-direct-export.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-direct-export.js)
diff --git a/docs/rules/require-emit-validator.md b/docs/rules/require-emit-validator.md
new file mode 100644
index 000000000..34b674bf5
--- /dev/null
+++ b/docs/rules/require-emit-validator.md
@@ -0,0 +1,66 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-emit-validator
+description: require type definitions in emits
+since: v7.10.0
+---
+
+# vue/require-emit-validator
+
+> require type definitions in emits
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule enforces that a `emits` statement contains type definition.
+
+Declaring `emits` with types can bring better maintenance.
+Even if using with TypeScript, this can provide better type inference when annotating parameters with types.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [API Reference](https://vuejs.org/api/options-state.html#emits)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.10.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-emit-validator.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-emit-validator.js)
diff --git a/docs/rules/require-explicit-emits.md b/docs/rules/require-explicit-emits.md
new file mode 100644
index 000000000..5c5d3f8a9
--- /dev/null
+++ b/docs/rules/require-explicit-emits.md
@@ -0,0 +1,130 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-explicit-emits
+description: require `emits` option with name triggered by `$emit()`
+since: v7.0.0
+---
+
+# vue/require-explicit-emits
+
+> require `emits` option with name triggered by `$emit()`
+
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule reports event triggers not declared with the `emits` option. (The `emits` option is a new in Vue.js 3.0.0+)
+
+Explicit `emits` declaration serves as self-documenting code. This can be useful for other developers to instantly understand what events the component is supposed to emit.
+Also, with attribute fallthrough changes in Vue.js 3.0.0+, `v-on` listeners on components will fallthrough as native listeners by default. Declare it as a component-only event in `emits` to avoid unnecessary registration of native listeners.
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/require-explicit-emits": ["error", {
+ "allowProps": false
+ }]
+}
+```
+
+- `"allowProps"` ... If `true`, allow event names defined in `props`. default `false`
+
+### `"allowProps": true`
+
+
+
+```vue
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/no-unused-emit-declarations](./no-unused-emit-declarations.md)
+- [vue/require-explicit-slots](./require-explicit-slots.md)
+
+## :books: Further Reading
+
+- [Guide - Custom Events / Defining Custom Events](https://v3.vuejs.org/guide/component-custom-events.html#defining-custom-events)
+- [Vue RFCs - 0030-emits-option](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-explicit-emits.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-explicit-emits.js)
diff --git a/docs/rules/require-explicit-slots.md b/docs/rules/require-explicit-slots.md
new file mode 100644
index 000000000..4d40be209
--- /dev/null
+++ b/docs/rules/require-explicit-slots.md
@@ -0,0 +1,76 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-explicit-slots
+description: require slots to be explicitly defined
+since: v9.21.0
+---
+
+# vue/require-explicit-slots
+
+> require slots to be explicitly defined
+
+## :book: Rule Details
+
+This rule enforces all slots used in the template to be defined once either in the `script setup` block with the [`defineSlots`](https://vuejs.org/api/sfc-script-setup.html#defineslots) macro, or with the [`slots property`](https://vuejs.org/api/options-rendering.html#slots) in the Options API.
+
+
+
+```vue
+
+
+
+
+
+```vue
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.21.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-explicit-slots.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-explicit-slots.js)
diff --git a/docs/rules/require-expose.md b/docs/rules/require-expose.md
new file mode 100644
index 000000000..98762a8c9
--- /dev/null
+++ b/docs/rules/require-expose.md
@@ -0,0 +1,126 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-expose
+description: require declare public properties using `expose`
+since: v7.14.0
+---
+
+# vue/require-expose
+
+> require declare public properties using `expose`
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule enforces the component to explicitly declare the exposed properties to the component using `expose`. You can use `expose` to control the internal properties of a component so that they cannot be referenced externally.
+
+The `expose` API was officially introduced in Vue 3.2.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Vue RFCs - 0042-expose-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0042-expose-api.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.14.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-expose.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-expose.js)
diff --git a/docs/rules/require-macro-variable-name.md b/docs/rules/require-macro-variable-name.md
new file mode 100644
index 000000000..af6db1733
--- /dev/null
+++ b/docs/rules/require-macro-variable-name.md
@@ -0,0 +1,89 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-macro-variable-name
+description: require a certain macro variable name
+since: v9.15.0
+---
+
+# vue/require-macro-variable-name
+
+> require a certain macro variable name
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule reports macro variables not corresponding to the specified name.
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/require-macro-variable-name": ["error", {
+ "defineProps": "props",
+ "defineEmits": "emit",
+ "defineSlots": "slots",
+ "useSlots": "slots",
+ "useAttrs": "attrs"
+ }]
+}
+```
+
+- `defineProps` - The name of the macro variable for `defineProps`. default: `props`
+- `defineEmits` - The name of the macro variable for `defineEmits`. default: `emit`
+- `defineSlots` - The name of the macro variable for `defineSlots`. default: `slots`
+- `useSlots` - The name of the macro variable for `useSlots`. default: `slots`
+- `useAttrs` - The name of the macro variable for `useAttrs`. default: `attrs`
+
+### With custom macro variable names
+
+
+
+```vue
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-macro-variable-name.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-macro-variable-name.js)
diff --git a/docs/rules/require-name-property.md b/docs/rules/require-name-property.md
new file mode 100644
index 000000000..6d9974fc4
--- /dev/null
+++ b/docs/rules/require-name-property.md
@@ -0,0 +1,67 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-name-property
+description: require a name property in Vue components
+since: v6.1.0
+---
+
+# vue/require-name-property
+
+> require a name property in Vue components
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule requires a `name` property to be set on components.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-name-property.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-name-property.js)
diff --git a/docs/rules/require-prop-comment.md b/docs/rules/require-prop-comment.md
new file mode 100644
index 000000000..25b78c346
--- /dev/null
+++ b/docs/rules/require-prop-comment.md
@@ -0,0 +1,148 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-prop-comment
+description: require props to have a comment
+since: v9.8.0
+---
+
+# vue/require-prop-comment
+
+> require props to have a comment
+
+## :book: Rule Details
+
+This rule enforces that every prop has a comment that documents it.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/require-prop-comment": ["error", {
+ "type": "JSDoc"
+ }]
+}
+```
+
+- `type` ... Type of comment. Default is `"JSDoc"`
+ - `"JSDoc"` ... Only JSDoc comment are allowed.
+ - `"line"` ... Only line comment are allowed.
+ - `"block"` ... Only block comment are allowed.
+ - `"any"` ... All comment types are allowed.
+
+### `"type": "block"`
+
+
+
+```vue
+
+```
+
+
+
+### `"type": "line"`
+
+
+
+```vue
+
+```
+
+
+
+### `"type": "any"`
+
+
+
+```vue
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.8.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-prop-comment.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-prop-comment.js)
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index d08ff1ff4..e872fc5d4 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -3,18 +3,21 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/require-prop-type-constructor
description: require prop type to be a constructor
+since: v5.0.0
---
+
# vue/require-prop-type-constructor
+
> require prop type to be a constructor
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule reports prop types that can't be presumed as constructors.
-It's impossible to catch every possible case and know whether the prop type is a constructor or not, hence this rule black list few types of nodes, instead of white-listing correct ones.
+It's impossible to catch every possible case and know whether the prop type is a constructor or not, hence this rule restricts few types of nodes, instead of allowing correct ones.
The following types are forbidden and will be reported:
@@ -26,6 +29,7 @@ The following types are forbidden and will be reported:
It will catch most commonly made mistakes which are using strings instead of constructors.
+
```vue
```
+
## :wrench: Options
Nothing.
-## :books: Further reading
+## :books: Further Reading
+
+- [Guide - Prop Validation](https://vuejs.org/guide/components/props.html#prop-validation)
+
+## :rocket: Version
-- [Guide - Prop Validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)
+This rule was introduced in eslint-plugin-vue v5.0.0
## :mag: Implementation
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 18e5e8c7e..20e46453f 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/require-prop-types
description: require type definitions in props
+since: v3.9.0
---
+
# vue/require-prop-types
+
> require type definitions in props
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
@@ -16,6 +19,7 @@ This rule enforces that a `props` statement contains type definition.
In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
+
```vue
```
+
## :wrench: Options
Nothing.
-## :books: Further reading
+## :books: Further Reading
+
+- [Style guide - Prop definitions](https://vuejs.org/style-guide/rules-essential.html#use-detailed-prop-definitions)
+
+## :rocket: Version
-- [Style guide - Prop definitions](https://vuejs.org/v2/style-guide/#Prop-definitions-essential)
+This rule was introduced in eslint-plugin-vue v3.9.0
## :mag: Implementation
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index c8d5f20ec..88cbf1efb 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -3,35 +3,41 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/require-render-return
description: enforce render function to always return value
+since: v3.10.0
---
+
# vue/require-render-return
+
> enforce render function to always return value
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
This rule aims to enforce render function to always return value
+
```vue
```
+
+
```vue
```
+
## :wrench: Options
Nothing.
-## :books: Further reading
+## :books: Further Reading
+
+- [Guide - Render Functions](https://vuejs.org/guide/extras/render-function.html)
+
+## :rocket: Version
-- [Guide - Render Functions & JSX](https://vuejs.org/v2/guide/render-function.html)
+This rule was introduced in eslint-plugin-vue v3.10.0
## :mag: Implementation
diff --git a/docs/rules/require-slots-as-functions.md b/docs/rules/require-slots-as-functions.md
new file mode 100644
index 000000000..56df0f88c
--- /dev/null
+++ b/docs/rules/require-slots-as-functions.md
@@ -0,0 +1,56 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-slots-as-functions
+description: enforce properties of `$slots` to be used as a function
+since: v7.0.0
+---
+
+# vue/require-slots-as-functions
+
+> enforce properties of `$slots` to be used as a function
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule enforces the properties of `$slots` to be used as a function.
+`this.$slots.default` was an array of VNode in Vue.js 2.x, but changed to a function that returns an array of VNode in Vue.js 3.x.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [API - $slots](https://vuejs.org/api/component-instance.html#slots)
+- [Vue RFCs - 0006-slots-unification](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0006-slots-unification.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-slots-as-functions.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-slots-as-functions.js)
diff --git a/docs/rules/require-toggle-inside-transition.md b/docs/rules/require-toggle-inside-transition.md
new file mode 100644
index 000000000..6dd663fd1
--- /dev/null
+++ b/docs/rules/require-toggle-inside-transition.md
@@ -0,0 +1,76 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-toggle-inside-transition
+description: require control the display of the content inside ``
+since: v7.0.0
+---
+
+# vue/require-toggle-inside-transition
+
+> require control the display of the content inside ``
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports elements inside `` that do not control the display.
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/require-toggle-inside-transition": ["error", {
+ "additionalDirectives": []
+ }]
+}
+```
+
+- `additionalDirectives` (`string[]`) ... Custom directives which will satisfy this rule in addition to `v-show` and `v-if`. Should be added without the `v-` prefix.
+
+### `additionalDirectives: ["dialog"]`
+
+
+
+```vue
+
+
+
+
+## :books: Further Reading
+
+- [Vue RFCs - 0017-transition-as-root](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0017-transition-as-root.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-toggle-inside-transition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-toggle-inside-transition.js)
diff --git a/docs/rules/require-typed-object-prop.md b/docs/rules/require-typed-object-prop.md
new file mode 100644
index 000000000..c867e26c5
--- /dev/null
+++ b/docs/rules/require-typed-object-prop.md
@@ -0,0 +1,55 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-typed-object-prop
+description: enforce adding type declarations to object props
+since: v9.16.0
+---
+
+# vue/require-typed-object-prop
+
+> enforce adding type declarations to object props
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+Prevent missing type declarations for non-primitive object props in TypeScript projects.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :mute: When Not To Use It
+
+When you're not using TypeScript in the project.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.16.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-typed-object-prop.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-typed-object-prop.js)
diff --git a/docs/rules/require-typed-ref.md b/docs/rules/require-typed-ref.md
new file mode 100644
index 000000000..85b58b213
--- /dev/null
+++ b/docs/rules/require-typed-ref.md
@@ -0,0 +1,51 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/require-typed-ref
+description: require `ref` and `shallowRef` functions to be strongly typed
+since: v9.15.0
+---
+
+# vue/require-typed-ref
+
+> require `ref` and `shallowRef` functions to be strongly typed
+
+## :book: Rule Details
+
+This rule disallows calling `ref()` or `shallowRef()` functions without generic type parameter or an argument when using TypeScript.
+
+With TypeScript it is easy to prevent usage of `any` by using [`noImplicitAny`](https://www.typescriptlang.org/tsconfig#noImplicitAny). Unfortunately this rule is easily bypassed with Vue `ref()` function. Calling `ref()` function without a generic parameter or an initial value leads to ref having `Ref` type.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-typed-ref.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-typed-ref.js)
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index a88bf94b3..6811b9419 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -3,47 +3,57 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/require-v-for-key
description: require `v-bind:key` with `v-for` directives
+since: v3.0.0
---
+
# vue/require-v-for-key
+
> require `v-bind:key` with `v-for` directives
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
This rule reports the elements which have `v-for` and do not have `v-bind:key` with exception to custom components.
+
```vue
-
+
-
+
```
+
::: warning Note
This rule does not report missing `v-bind:key` on custom components.
-It will be reported by [valid-v-for](./valid-v-for.md) rule.
+It will be reported by [vue/valid-v-for] rule.
:::
## :wrench: Options
Nothing.
-## :couple: Related rules
+## :couple: Related Rules
+
+- [vue/valid-v-for]
+- [vue/v-if-else-key]
+
+[vue/valid-v-for]: ./valid-v-for.md
+[vue/v-if-else-key]: ./v-if-else-key.md
+
+## :books: Further Reading
-- [valid-v-for](./valid-v-for.md)
+- [Style guide - Keyed v-for](https://vuejs.org/style-guide/rules-essential.html#use-keyed-v-for)
+- [Guide (for v2) - v-for with a Component](https://v2.vuejs.org/v2/guide/list.html#v-for-with-a-Component)
-## :books: Further reading
+## :rocket: Version
-- [Style guide - Keyed v-for](https://vuejs.org/v2/style-guide/#Keyed-v-for-essential)
-- [Guide - v-for with a Component](https://vuejs.org/v2/guide/list.html#v-for-with-a-Component)
+This rule was introduced in eslint-plugin-vue v3.0.0
## :mag: Implementation
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index 21ca812fc..bea185798 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -3,17 +3,21 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/require-valid-default-prop
description: enforce props default values to be valid
+since: v3.13.0
---
+
# vue/require-valid-default-prop
+
> enforce props default values to be valid
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
This rule checks whether the default value of each prop is valid for the given type. It should report an error when default value for type `Array` or `Object` is not returned using function.
+
```vue
```
+
## :wrench: Options
Nothing.
-## :books: Further reading
+## :books: Further Reading
+
+- [Guide - Prop Validation](https://vuejs.org/guide/components/props.html#prop-validation)
+
+## :rocket: Version
-- [Guide - Prop Validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)
+This rule was introduced in eslint-plugin-vue v3.13.0
## :mag: Implementation
diff --git a/docs/rules/restricted-component-names.md b/docs/rules/restricted-component-names.md
new file mode 100644
index 000000000..1d707baf3
--- /dev/null
+++ b/docs/rules/restricted-component-names.md
@@ -0,0 +1,69 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/restricted-component-names
+description: enforce using only specific component names
+since: v9.32.0
+---
+
+# vue/restricted-component-names
+
+> enforce using only specific component names
+
+## :book: Rule Details
+
+This rule enforces consistency in component names.
+
+
+
+```vue
+
+
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/restricted-component-names": ["error", {
+ "allow": []
+ }]
+}
+```
+
+### `"allow: ['/^custom-/']"`
+
+
+
+```vue
+
+
+
+
+## :couple: Related Rules
+
+- [vue/no-restricted-component-names](./no-restricted-component-names.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.32.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/restricted-component-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/restricted-component-names.js)
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index e05eb57e7..5a1906060 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -3,23 +3,27 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/return-in-computed-property
description: enforce that a return statement is present in computed property
+since: v3.7.0
---
+
# vue/return-in-computed-property
+
> enforce that a return statement is present in computed property
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
-This rule enforces that a `return` statement is present in `computed` properties.
+This rule enforces that a `return` statement is present in `computed` properties and functions.
+
```vue
```
+
+
+
+
+
+```vue
+
+```
+
## :wrench: Options
@@ -53,17 +91,19 @@ export default {
```
This rule has an object option:
+
- `"treatUndefinedAsUnspecified"`: `true` (default) disallows implicitly returning undefined with a `return` statement.
### `treatUndefinedAsUnspecified: false`
+
```vue
```
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.7.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/return-in-computed-property.js)
diff --git a/docs/rules/return-in-emits-validator.md b/docs/rules/return-in-emits-validator.md
new file mode 100644
index 000000000..ec1558241
--- /dev/null
+++ b/docs/rules/return-in-emits-validator.md
@@ -0,0 +1,71 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/return-in-emits-validator
+description: enforce that a return statement is present in emits validator
+since: v7.0.0
+---
+
+# vue/return-in-emits-validator
+
+> enforce that a return statement is present in emits validator
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule enforces that a `return` statement is present in `emits` validators.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Guide - Custom Events / Validate Emitted Events](https://vuejs.org/guide/components/events.html#events-validation)
+- [Vue RFCs - 0030-emits-option](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0030-emits-option.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/return-in-emits-validator.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/return-in-emits-validator.js)
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 450f4d725..9922b8c48 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -3,17 +3,21 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/script-indent
description: enforce consistent indentation in `
```
+
## :wrench: Options
@@ -57,7 +62,7 @@ This rule has some options.
- `TYPE` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
- `baseIndent` (`integer`) ... The multiplier of indentation for top-level statements. Default is `0`.
- `switchCase` (`integer`) ... The multiplier of indentation for `case`/`default` clauses. Default is `0`.
-- `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.
+- `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.
::: warning Note
This rule only checks `.vue` files and does not interfere with other `.js` files. Unfortunately the default `indent` rule when turned on will try to lint both, so in order to make them complementary you can use `overrides` setting and disable `indent` rule on `.vue` files:
@@ -80,7 +85,9 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
```
### `2, "baseIndent": 1`
+
+
```vue
```
+
-## :couple: Related rules
+## :couple: Related Rules
- [indent](https://eslint.org/docs/rules/indent)
- [vue/html-indent](./html-indent.md)
+- [@typescript-eslint/indent](https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/indent.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v4.2.0
## :mag: Implementation
diff --git a/docs/rules/script-setup-uses-vars.md b/docs/rules/script-setup-uses-vars.md
new file mode 100644
index 000000000..7f0eb15f7
--- /dev/null
+++ b/docs/rules/script-setup-uses-vars.md
@@ -0,0 +1,79 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/script-setup-uses-vars
+description: prevent `
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/sort-keys": ["error", "asc", {
+ "caseSensitive": true,
+ "ignoreChildrenOf": ["model"],
+ "ignoreGrandchildrenOf": ["computed", "directives", "inject", "props", "watch"],
+ "minKeys": 2,
+ "natural": false
+ }]
+}
+```
+
+The 1st option is `"asc"` or `"desc"`.
+
+- `"asc"` (default) - enforce properties to be in ascending order.
+- `"desc"` - enforce properties to be in descending order.
+
+The 2nd option is an object which has 5 properties.
+
+- `caseSensitive` - if `true`, enforce properties to be in case-sensitive order. Default is `true`.
+- `ignoreChildrenOf` - an array of properties to ignore the children of. Default is `["model"]`
+- `ignoreGrandchildrenOf` - an array of properties to ignore the grandchildren sort order. Default is `["computed", "directives", "inject", "props", "watch"]`
+- `minKeys` - Specifies the minimum number of keys that an object should have in order for the object's unsorted keys to produce an error. Default is `2`, which means by default all objects with unsorted keys will result in lint errors.
+- `natural` - if `true`, enforce properties to be in natural order. Default is `false`. Natural Order compares strings containing combination of letters and numbers in the way a human being would sort. It basically sorts numerically, instead of sorting alphabetically. So the number 10 comes after the number 3 in Natural Sorting.
+
+While using this rule, you may disable the normal `sort-keys` rule. This rule will apply to plain js files as well as Vue component scripts.
+
+## :books: Further Reading
+
+- [sort-keys]
+
+[sort-keys]: https://eslint.org/docs/rules/sort-keys
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/sort-keys.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/sort-keys.js)
diff --git a/docs/rules/space-in-parens.md b/docs/rules/space-in-parens.md
new file mode 100644
index 000000000..3d2d5dbd7
--- /dev/null
+++ b/docs/rules/space-in-parens.md
@@ -0,0 +1,39 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/space-in-parens
+description: Enforce consistent spacing inside parentheses in ``
+since: v7.0.0
+---
+
+# vue/space-in-parens
+
+> Enforce consistent spacing inside parentheses in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/space-in-parens] rule but it applies to the expressions in ``.
+
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
+
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
+
+## :books: Further Reading
+
+- [@stylistic/space-in-parens]
+- [space-in-parens]
+
+[@stylistic/space-in-parens]: https://eslint.style/rules/default/space-in-parens
+[space-in-parens]: https://eslint.org/docs/rules/space-in-parens
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/space-in-parens.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/space-in-parens.js)
+
+Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/js/space-in-parens)
diff --git a/docs/rules/space-infix-ops.md b/docs/rules/space-infix-ops.md
new file mode 100644
index 000000000..2b4e9d0a3
--- /dev/null
+++ b/docs/rules/space-infix-ops.md
@@ -0,0 +1,39 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/space-infix-ops
+description: Require spacing around infix operators in ``
+since: v5.2.0
+---
+
+# vue/space-infix-ops
+
+> Require spacing around infix operators in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/space-infix-ops] rule but it applies to the expressions in ``.
+
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
+
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
+
+## :books: Further Reading
+
+- [@stylistic/space-infix-ops]
+- [space-infix-ops]
+
+[@stylistic/space-infix-ops]: https://eslint.style/rules/default/space-infix-ops
+[space-infix-ops]: https://eslint.org/docs/rules/space-infix-ops
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v5.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/space-infix-ops.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/space-infix-ops.js)
+
+Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/ts/space-infix-ops)
diff --git a/docs/rules/space-unary-ops.md b/docs/rules/space-unary-ops.md
new file mode 100644
index 000000000..54fe5e192
--- /dev/null
+++ b/docs/rules/space-unary-ops.md
@@ -0,0 +1,39 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/space-unary-ops
+description: Enforce consistent spacing before or after unary operators in ``
+since: v5.2.0
+---
+
+# vue/space-unary-ops
+
+> Enforce consistent spacing before or after unary operators in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/space-unary-ops] rule but it applies to the expressions in ``.
+
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
+
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
+
+## :books: Further Reading
+
+- [@stylistic/space-unary-ops]
+- [space-unary-ops]
+
+[@stylistic/space-unary-ops]: https://eslint.style/rules/default/space-unary-ops
+[space-unary-ops]: https://eslint.org/docs/rules/space-unary-ops
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v5.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/space-unary-ops.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/space-unary-ops.js)
+
+Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/js/space-unary-ops)
diff --git a/docs/rules/static-class-names-order.md b/docs/rules/static-class-names-order.md
new file mode 100644
index 000000000..c13f28fdd
--- /dev/null
+++ b/docs/rules/static-class-names-order.md
@@ -0,0 +1,44 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/static-class-names-order
+description: enforce static class names order
+since: v6.1.0
+---
+
+# vue/static-class-names-order
+
+> enforce static class names order
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to enforce the order of static class names.
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/static-class-names-order.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/static-class-names-order.js)
diff --git a/docs/rules/template-curly-spacing.md b/docs/rules/template-curly-spacing.md
new file mode 100644
index 000000000..dfca50a64
--- /dev/null
+++ b/docs/rules/template-curly-spacing.md
@@ -0,0 +1,39 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/template-curly-spacing
+description: Require or disallow spacing around embedded expressions of template strings in ``
+since: v7.0.0
+---
+
+# vue/template-curly-spacing
+
+> Require or disallow spacing around embedded expressions of template strings in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/template-curly-spacing] rule but it applies to the expressions in ``.
+
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
+
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
+
+## :books: Further Reading
+
+- [@stylistic/template-curly-spacing]
+- [template-curly-spacing]
+
+[@stylistic/template-curly-spacing]: https://eslint.style/rules/default/template-curly-spacing
+[template-curly-spacing]: https://eslint.org/docs/rules/template-curly-spacing
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/template-curly-spacing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/template-curly-spacing.js)
+
+Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/js/template-curly-spacing)
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index f3fb07328..7cd3e1251 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -3,30 +3,36 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/this-in-template
description: disallow usage of `this` in template
+since: v3.13.0
---
+
# vue/this-in-template
+
> disallow usage of `this` in template
-- :gear: This rule is included in `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule aims at preventing usage of `this` in Vue templates.
-
+
+
```vue
{{ text }}
-
+
{{ this.text }}
```
+
## :wrench: Options
@@ -36,27 +42,34 @@ This rule aims at preventing usage of `this` in Vue templates.
"vue/this-in-template": ["error", "always" | "never"]
}
```
+
- `"always"` ... Always use `this` while accessing properties from Vue.
- `"never"` (default) ... Never use `this` keyword in expressions.
### `"always"`
-
+
+
```vue
{{ this.text }}
-
+
{{ text }}
```
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.13.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/this-in-template.js)
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index fc0c3303b..a13b8df30 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -3,17 +3,21 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/use-v-on-exact
description: enforce usage of `exact` modifier on `v-on`
+since: v5.0.0
---
+
# vue/use-v-on-exact
+
> enforce usage of `exact` modifier on `v-on`
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
## :book: Rule Details
This rule enforce usage of `exact` modifier on `v-on` when there is another `v-on` with modifier.
+
```vue
@@ -24,24 +28,25 @@ This rule enforce usage of `exact` modifier on `v-on` when there is another `v-o
```
+
## :wrench: Options
-```json
-{
- "vue/use-v-on-exact": ["error"]
-}
-```
+Nothing.
-## :couple: Related rules
+## :couple: Related Rules
- [vue/v-on-style](./v-on-style.md)
- [vue/valid-v-on](./valid-v-on.md)
-## :books: Further reading
+## :books: Further Reading
+
+- [Guide - .exact Modifier](https://vuejs.org/guide/essentials/event-handling.html#exact-modifier)
+
+## :rocket: Version
-- [Guide - .exact Modifier](https://vuejs.org/v2/guide/events.html#exact-Modifier)
+This rule was introduced in eslint-plugin-vue v5.0.0
## :mag: Implementation
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 788dc5677..cdcd6f7d5 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -3,58 +3,106 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/v-bind-style
description: enforce `v-bind` directive style
+since: v3.0.0
---
+
# vue/v-bind-style
+
> enforce `v-bind` directive style
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule enforces `v-bind` directive style which you should use shorthand or long form.
+
```vue
-
+
-
+
```
+
## :wrench: Options
-Default is set to `shorthand`.
```json
{
- "vue/v-bind-style": ["error", "shorthand" | "longform"]
+ "vue/v-bind-style": ["error", "shorthand" | "longform", {
+ "sameNameShorthand": "ignore" | "always" | "never"
+ }]
}
```
- `"shorthand"` (default) ... requires using shorthand.
- `"longform"` ... requires using long form.
+- `sameNameShorthand` ... enforce the `v-bind` same-name shorthand style (Vue 3.4+).
+ - `"ignore"` (default) ... ignores the same-name shorthand style.
+ - `"always"` ... always enforces same-name shorthand where possible.
+ - `"never"` ... always disallow same-name shorthand where possible.
### `"longform"`
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+### `{ "sameNameShorthand": "always" }`
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+### `{ "sameNameShorthand": "never" }`
+
+
+
```vue
-
+
-
+
```
+
-## :books: Further reading
+## :books: Further Reading
+
+- [Style guide - Directive shorthands](https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands)
+
+## :rocket: Version
-- [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
+This rule was introduced in eslint-plugin-vue v3.0.0
## :mag: Implementation
diff --git a/docs/rules/v-for-delimiter-style.md b/docs/rules/v-for-delimiter-style.md
new file mode 100644
index 000000000..191dc921a
--- /dev/null
+++ b/docs/rules/v-for-delimiter-style.md
@@ -0,0 +1,73 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-for-delimiter-style
+description: enforce `v-for` directive's delimiter style
+since: v7.0.0
+---
+
+# vue/v-for-delimiter-style
+
+> enforce `v-for` directive's delimiter style
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces which delimiter (`in` or `of`) should be used in `v-for` directives.
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Default is set to `in`.
+
+```json
+{
+ "vue/v-for-delimiter-style": ["error", "in" | "of"]
+}
+```
+
+- `"in"` (default) ... requires using `in`.
+- `"of"` ... requires using `of`.
+
+### `"of"`
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+## :books: Further Reading
+
+- [Guide - List Rendering](https://vuejs.org/guide/essentials/list.html)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-for-delimiter-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-for-delimiter-style.js)
diff --git a/docs/rules/v-if-else-key.md b/docs/rules/v-if-else-key.md
new file mode 100644
index 000000000..757e04321
--- /dev/null
+++ b/docs/rules/v-if-else-key.md
@@ -0,0 +1,60 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-if-else-key
+description: require key attribute for conditionally rendered repeated components
+since: v9.19.0
+---
+
+# vue/v-if-else-key
+
+> require key attribute for conditionally rendered repeated components
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule checks for components that are both repeated and conditionally rendered within the same scope. If such a component is found, the rule then checks for the presence of a 'key' directive. If the 'key' directive is missing, the rule issues a warning and offers a fix.
+
+This rule is not required in Vue 3, as the key is automatically assigned to the elements.
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/require-v-for-key]
+
+[vue/require-v-for-key]: ./require-v-for-key.md
+
+## :books: Further Reading
+
+- [Guide (for v2) - v-if without key](https://v2.vuejs.org/v2/style-guide/#v-if-v-else-if-v-else-without-key-use-with-caution)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.19.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-if-else-key.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-if-else-key.js)
diff --git a/docs/rules/v-on-event-hyphenation.md b/docs/rules/v-on-event-hyphenation.md
new file mode 100644
index 000000000..8c378ef42
--- /dev/null
+++ b/docs/rules/v-on-event-hyphenation.md
@@ -0,0 +1,144 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-on-event-hyphenation
+description: enforce v-on event naming style on custom components in template
+since: v7.4.0
+---
+
+# vue/v-on-event-hyphenation
+
+> enforce v-on event naming style on custom components in template
+
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces using hyphenated v-on event names on custom components in Vue templates.
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/v-on-event-hyphenation": ["error", "always" | "never", {
+ "autofix": false,
+ "ignore": [],
+ "ignoreTags": []
+ }]
+}
+```
+
+- `"always"` (default) ... Use hyphenated event name.
+- `"never"` ... Don't use hyphenated event name.
+- `"ignore"` ... Array of event names that don't need to follow the specified casing.
+- `"ignoreTags"` ... Array of tag names whose events don't need to follow the specified casing.
+- `"autofix"` ... If `true`, enable autofix. If you are using Vue 2, we recommend that you do not use it due to its side effects.
+
+### `"always"`
+
+It errors on upper case letters.
+
+
+
+```vue
+
+
+
+
+### `"never"`
+
+It errors on hyphens.
+
+
+
+```vue
+
+
+
+
+### `"never", { "ignore": ["custom-event"] }`
+
+Don't use hyphenated name but allow custom event names
+
+
+
+```vue
+
+
+
+
+### `"never", { "ignoreTags": ["/^custom-/"] }`
+
+
+
+```vue
+
+
+
+
+## :couple: Related Rules
+
+- [vue/custom-event-name-casing](./custom-event-name-casing.md)
+- [vue/attribute-hyphenation](./attribute-hyphenation.md)
+- [vue/v-on-handler-style](./v-on-handler-style.md)
+
+## :books: Further Reading
+
+- [Guide - Custom Events]
+
+[Guide - Custom Events]: https://vuejs.org/guide/components/events.html
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.4.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-event-hyphenation.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-event-hyphenation.js)
diff --git a/docs/rules/v-on-function-call.md b/docs/rules/v-on-function-call.md
new file mode 100644
index 000000000..51fe8714a
--- /dev/null
+++ b/docs/rules/v-on-function-call.md
@@ -0,0 +1,109 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-on-function-call
+description: enforce or forbid parentheses after method calls without arguments in `v-on` directives
+since: v5.2.0
+---
+
+# vue/v-on-function-call
+
+> enforce or forbid parentheses after method calls without arguments in `v-on` directives
+
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0 and replaced by [vue/v-on-handler-style](v-on-handler-style.md) rule.
+
+## :book: Rule Details
+
+This rule aims to enforce to bind methods to `v-on` or call methods on `v-on` when without arguments.
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Default is set to `never`.
+
+```json
+{
+ "vue/v-on-function-call": ["error",
+ "always"|"never",
+ {
+ "ignoreIncludesComment": false
+ }
+ ]
+}
+```
+
+- `"always"` ... Always use parentheses in `v-on` directives.
+- `"never"` ... Never use parentheses in `v-on` directives for method calls without arguments. this is default.
+- `ignoreIncludesComment` ... If `true`, do not report expressions containing comments. default `false`.
+
+### `"always"` - Always use parentheses in `v-on` directives
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+### `"never"` - Never use parentheses in `v-on` directives for method calls without arguments
+
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+### `"never", { "ignoreIncludesComment": true }`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v5.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-function-call.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-function-call.js)
diff --git a/docs/rules/v-on-handler-style.md b/docs/rules/v-on-handler-style.md
new file mode 100644
index 000000000..065ebd827
--- /dev/null
+++ b/docs/rules/v-on-handler-style.md
@@ -0,0 +1,224 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-on-handler-style
+description: enforce writing style for handlers in `v-on` directives
+since: v9.7.0
+---
+
+# vue/v-on-handler-style
+
+> enforce writing style for handlers in `v-on` directives
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to enforce a consistent style in `v-on` event handlers:
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/v-on-handler-style": ["error",
+ ["method", "inline-function"], // ["method", "inline-function"] | ["method", "inline"] | "inline-function" | "inline"
+ {
+ "ignoreIncludesComment": false
+ }
+ ]
+}
+```
+
+- First option ... Specifies the name of an allowed style. Default is `["method", "inline-function"]`.
+ - `["method", "inline-function"]` ... Allow handlers by method binding. e.g. `v-on:click="handler"`. Allow inline functions where method handlers cannot be used. e.g. `v-on:click="() => handler(listItem)"`.
+ - `["method", "inline"]` ... Allow handlers by method binding. e.g. `v-on:click="handler"`. Allow inline handlers where method handlers cannot be used. e.g. `v-on:click="handler(listItem)"`.
+ - `"inline-function"` ... Allow inline functions. e.g. `v-on:click="() => handler()"`
+ - `"inline"` ... Allow inline handlers. e.g. `v-on:click="handler()"`
+- Second option
+ - `ignoreIncludesComment` ... If `true`, do not report inline handlers or inline functions containing comments, even if the preferred style is `"method"`. Default is `false`.
+
+### `["method", "inline-function"]` (Default)
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `["method", "inline"]`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `"inline-function"`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `"inline"`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `["method", "inline-function"], { "ignoreIncludesComment": true }`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `["method", "inline"], { "ignoreIncludesComment": true }`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/v-on-style](./v-on-style.md)
+- [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md)
+
+## :books: Further Reading
+
+- [Guide - Inline Handlers]
+- [Guide - Method Handlers]
+
+[Guide - Inline Handlers]: https://vuejs.org/guide/essentials/event-handling.html#inline-handlers
+[Guide - Method Handlers]: https://vuejs.org/guide/essentials/event-handling.html#method-handlers
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.7.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-handler-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-handler-style.js)
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 6c7caf96e..019251009 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -3,30 +3,36 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/v-on-style
description: enforce `v-on` directive style
+since: v3.0.0
---
+
# vue/v-on-style
+
> enforce `v-on` directive style
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule enforces `v-on` directive style which you should use shorthand or long form.
+
```vue
-
+
-
+
```
+
## :wrench: Options
+
Default is set to `shorthand`.
```json
@@ -41,20 +47,30 @@ Default is set to `shorthand`.
### `"longform"`
+
```vue
-
+
-
+
```
+
-## :books: Further reading
+## :couple: Related Rules
+
+- [vue/v-on-handler-style](./v-on-handler-style.md)
+
+## :books: Further Reading
+
+- [Style guide - Directive shorthands](https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands)
+
+## :rocket: Version
-- [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
+This rule was introduced in eslint-plugin-vue v3.0.0
## :mag: Implementation
diff --git a/docs/rules/v-slot-style.md b/docs/rules/v-slot-style.md
new file mode 100644
index 000000000..5c650eb7c
--- /dev/null
+++ b/docs/rules/v-slot-style.md
@@ -0,0 +1,118 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/v-slot-style
+description: enforce `v-slot` directive style
+since: v6.0.0
+---
+
+# vue/v-slot-style
+
+> enforce `v-slot` directive style
+
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces `v-slot` directive style which you should use shorthand or long form.
+
+
+
+```vue
+
+
+
+ {{ data }}
+
+
+ content
+ content
+ content
+
+
+
+
+ {{ data }}
+
+
+ content
+ content
+ content
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/v-slot-style": ["error", {
+ "atComponent": "shorthand" | "longform" | "v-slot",
+ "default": "shorthand" | "longform" | "v-slot",
+ "named": "shorthand" | "longform",
+ }]
+}
+```
+
+| Name | Type | Default Value | Description
+|:-----|:-----|:--------------|:------------
+| `atComponent` | `"shorthand"` \| `"longform"` \| `"v-slot"` | `"v-slot"` | The style for the default slot at custom components directly (E.g. ``).
+| `default` | `"shorthand"` \| `"longform"` \| `"v-slot"` | `"shorthand"` | The style for the default slot at template wrappers (E.g. ``).
+| `named` | `"shorthand"` \| `"longform"` | `"shorthand"` | The style for named slots (E.g. ``).
+
+Each value means:
+
+- `"shorthand"` ... use `#` shorthand. E.g. `#default`, `#named`, ...
+- `"longform"` ... use `v-slot:` directive notation. E.g. `v-slot:default`, `v-slot:named`, ...
+- `"v-slot"` ... use `v-slot` without that argument. This is shorter than `#default` shorthand.
+
+And a string option is supported to be consistent to similar `vue/v-bind-style` and `vue/v-on-style`.
+
+- `["error", "longform"]` is same as `["error", { atComponent: "longform", default: "longform", named: "longform" }]`.
+- `["error", "shorthand"]` is same as `["error", { atComponent: "shorthand", default: "shorthand", named: "shorthand" }]`.
+
+### `"longform"`
+
+
+
+```vue
+
+
+
+ {{ data }}
+
+
+ content
+ content
+ content
+
+
+
+
+ {{ data }}
+
+
+ content
+ content
+ content
+
+
+```
+
+
+
+## :books: Further Reading
+
+- [Style guide - Directive shorthands](https://vuejs.org/style-guide/rules-strongly-recommended.html#directive-shorthands)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-slot-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-slot-style.js)
diff --git a/docs/rules/valid-attribute-name.md b/docs/rules/valid-attribute-name.md
new file mode 100644
index 000000000..599e84d4e
--- /dev/null
+++ b/docs/rules/valid-attribute-name.md
@@ -0,0 +1,49 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-attribute-name
+description: require valid attribute names
+since: v9.0.0
+---
+
+# vue/valid-attribute-name
+
+> require valid attribute names
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule detects invalid HTML attributes.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-attribute-name.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-attribute-name.js)
diff --git a/docs/rules/valid-define-emits.md b/docs/rules/valid-define-emits.md
new file mode 100644
index 000000000..062403a63
--- /dev/null
+++ b/docs/rules/valid-define-emits.md
@@ -0,0 +1,153 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-define-emits
+description: enforce valid `defineEmits` compiler macro
+since: v7.13.0
+---
+
+# vue/valid-define-emits
+
+> enforce valid `defineEmits` compiler macro
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+This rule checks whether `defineEmits` compiler macro is valid.
+
+## :book: Rule Details
+
+This rule reports `defineEmits` compiler macros in the following cases:
+
+- `defineEmits` is referencing locally declared variables.
+- `defineEmits` has both a literal type and an argument. e.g. `defineEmits<(e: 'foo')=>void>(['bar'])`
+- `defineEmits` has been called multiple times.
+- Custom events are defined in both `defineEmits` and `export default {}`.
+- Custom events are not defined in either `defineEmits` or `export default {}`.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/define-emits-declaration](./define-emits-declaration.md)
+- [vue/valid-define-options](./valid-define-options.md)
+- [vue/valid-define-props](./valid-define-props.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.13.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-define-emits.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-define-emits.js)
diff --git a/docs/rules/valid-define-options.md b/docs/rules/valid-define-options.md
new file mode 100644
index 000000000..a81d5ad96
--- /dev/null
+++ b/docs/rules/valid-define-options.md
@@ -0,0 +1,125 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-define-options
+description: enforce valid `defineOptions` compiler macro
+since: v9.13.0
+---
+
+# vue/valid-define-options
+
+> enforce valid `defineOptions` compiler macro
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+This rule checks whether `defineOptions` compiler macro is valid.
+
+## :book: Rule Details
+
+This rule reports `defineOptions` compiler macros in the following cases:
+
+- `defineOptions` is referencing locally declared variables.
+- `defineOptions` has been called multiple times.
+- Options are not defined in `defineOptions`.
+- `defineOptions` has type arguments.
+- `defineOptions` has `props`, `emits`, `expose` or `slots` options.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/valid-define-emits](./valid-define-emits.md)
+- [vue/valid-define-props](./valid-define-props.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.13.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-define-options.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-define-options.js)
diff --git a/docs/rules/valid-define-props.md b/docs/rules/valid-define-props.md
new file mode 100644
index 000000000..1af111c9a
--- /dev/null
+++ b/docs/rules/valid-define-props.md
@@ -0,0 +1,153 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-define-props
+description: enforce valid `defineProps` compiler macro
+since: v7.13.0
+---
+
+# vue/valid-define-props
+
+> enforce valid `defineProps` compiler macro
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+This rule checks whether `defineProps` compiler macro is valid.
+
+## :book: Rule Details
+
+This rule reports `defineProps` compiler macros in the following cases:
+
+- `defineProps` is referencing locally declared variables.
+- `defineProps` has both a literal type and an argument. e.g. `defineProps<{/*props*/}>({/*props*/})`
+- `defineProps` has been called multiple times.
+- Props are defined in both `defineProps` and `export default {}`.
+- Props are not defined in either `defineProps` or `export default {}`.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/define-props-declaration](./define-props-declaration.md)
+- [vue/valid-define-emits](./valid-define-emits.md)
+- [vue/valid-define-options](./valid-define-options.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.13.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-define-props.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-define-props.js)
diff --git a/docs/rules/valid-model-definition.md b/docs/rules/valid-model-definition.md
new file mode 100644
index 000000000..201fc1201
--- /dev/null
+++ b/docs/rules/valid-model-definition.md
@@ -0,0 +1,122 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-model-definition
+description: require valid keys in model option
+since: v9.0.0
+---
+
+# vue/valid-model-definition
+
+> require valid keys in model option
+
+- :no_entry_sign: This rule was **deprecated**.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule is aimed at preventing invalid keys in model option.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-model-definition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-model-definition.js)
diff --git a/docs/rules/valid-next-tick.md b/docs/rules/valid-next-tick.md
new file mode 100644
index 000000000..b2c95980b
--- /dev/null
+++ b/docs/rules/valid-next-tick.md
@@ -0,0 +1,95 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-next-tick
+description: enforce valid `nextTick` function calls
+since: v7.5.0
+---
+
+# vue/valid-next-tick
+
+> enforce valid `nextTick` function calls
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+Calling `Vue.nextTick` or `vm.$nextTick` without passing a callback and without awaiting the returned Promise is likely a mistake (probably a missing `await`).
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [`Vue.nextTick` API in Vue 2](https://v2.vuejs.org/v2/api/#Vue-nextTick)
+- [`vm.$nextTick` API in Vue 2](https://v2.vuejs.org/v2/api/#vm-nextTick)
+- [Global API Treeshaking](https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html)
+- [Global `nextTick` API in Vue 3](https://vuejs.org/api/general.html#nexttick)
+- [Instance `$nextTick` API in Vue 3](https://vuejs.org/api/component-instance.html#nexttick)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-next-tick.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-next-tick.js)
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 4878c8ea2..9dd89a287 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/valid-template-root
description: enforce valid template root
+since: v3.11.0
---
+
# vue/valid-template-root
+
> enforce valid template root
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule checks whether every template root is valid.
@@ -16,51 +19,31 @@ This rule checks whether every template root is valid.
This rule reports the template root in the following cases:
+
```vue
```
-
-
-```vue
-
-Lorem ipsum
-```
-```vue
-
-
-
-
```vue
-
-
-
-
+
+
```
-
-
-```vue
-
-
-
## :wrench: Options
Nothing.
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.11.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-template-root.js)
diff --git a/docs/rules/valid-v-bind-sync.md b/docs/rules/valid-v-bind-sync.md
new file mode 100644
index 000000000..19129fb3d
--- /dev/null
+++ b/docs/rules/valid-v-bind-sync.md
@@ -0,0 +1,84 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/valid-v-bind-sync
+description: enforce valid `.sync` modifier on `v-bind` directives
+since: v7.0.0
+---
+
+# vue/valid-v-bind-sync
+
+> enforce valid `.sync` modifier on `v-bind` directives
+
+- :no_entry_sign: This rule was **deprecated**.
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+This rule checks whether every `.sync` modifier on `v-bind` directives is valid.
+
+## :book: Rule Details
+
+This rule reports `.sync` modifier on `v-bind` directives in the following cases:
+
+- The `.sync` modifier does not have the attribute value which is valid as LHS. E.g. `
`
+- The `.sync` modifier's reference is iteration variables. E.g. ```` +
@@ -55,6 +59,7 @@ This rule enforces a consistent indentation style in ``. The default s
```
+
`). Default is `0`.
+ - `closeBracket.endTag` (`integer`) ... The multiplier of indentation for right brackets of end tags (`
`). Default is `0`.
+ - `closeBracket.selfClosingTag` (`integer`) ... The multiplier of indentation for right brackets of start tags (``). Default is `0`.
- `alignAttributesVertically` (`boolean`) ... Condition for whether attributes should be vertically aligned to the first attribute in multiline case or not. Default is `true`
-- `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.
+- `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/vuejs/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.
### `2, {"attribute": 1, "closeBracket": 1}`
`. The default s
```
+
`. The default s
```
+
`. The default s
/>
```
+
### `2, {"alignAttributesVertically": false}`
-```
+
+```vue
## :wrench: Options
-```json
+```js
{
"vue/multiline-html-element-content-newline": ["error", {
"ignoreWhenEmpty": true,
- "ignores": ["pre", "textarea"]
+ "ignores": ["pre", "textarea", ...INLINE_ELEMENTS],
+ "allowEmptyLines": false
}]
}
```
- `ignoreWhenEmpty` ... disables reporting when element has no content.
default `true`
-- `ignores` ... the configuration for element names to ignore line breaks style.
- default `["pre", "textarea"]`
+- `ignores` ... the configuration for element names to ignore line breaks style.
+ default `["pre", "textarea", ...INLINE_ELEMENTS]`.
+- `allowEmptyLines` ... if `true`, it allows empty lines around content. If you want to disallow multiple empty lines, use [no-multiple-empty-lines] in combination.
+ default `false`
+
+::: info
+ All inline non void elements can be found [here](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/inline-non-void-elements.json).
+:::
### `"ignores": ["VueComponent", "pre", "textarea"]`
+
```vue
@@ -103,8 +116,43 @@ This rule enforces a line break before and after the contents of a multiline ele
Defines the Vue component that accepts preformatted text.
```
+
+### `"allowEmptyLines": true`
+
+
+
+```vue
+
+
+
+
+## :books: Further Reading
+
+- [no-multiple-empty-lines]
+
+[no-multiple-empty-lines]: https://eslint.org/docs/rules/no-multiple-empty-lines
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v5.0.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/multiline-html-element-content-newline.js)
diff --git a/docs/rules/multiline-ternary.md b/docs/rules/multiline-ternary.md
new file mode 100644
index 000000000..1fe4d84fb
--- /dev/null
+++ b/docs/rules/multiline-ternary.md
@@ -0,0 +1,71 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/multiline-ternary
+description: Enforce newlines between operands of ternary expressions in ``
+since: v9.7.0
+---
+
+# vue/multiline-ternary
+
+> Enforce newlines between operands of ternary expressions in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/multiline-ternary] rule but it applies to the expressions in `` and `
+```
+
+
+
+## :books: Further Reading
+
+- [@stylistic/multiline-ternary]
+- [multiline-ternary]
+
+[@stylistic/multiline-ternary]: https://eslint.style/rules/default/multiline-ternary
+[multiline-ternary]: https://eslint.org/docs/rules/multiline-ternary
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.7.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/multiline-ternary.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/multiline-ternary.js)
+
+Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/js/multiline-ternary)
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index f9bea9956..1e66fc942 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -3,19 +3,23 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/mustache-interpolation-spacing
description: enforce unified spacing in mustache interpolations
+since: v3.13.0
---
+
# vue/mustache-interpolation-spacing
+
> enforce unified spacing in mustache interpolations
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule aims at enforcing unified spacing in mustache interpolations.
-```
+
+```vue
## :wrench: Options
@@ -41,7 +46,8 @@ This rule aims at enforcing unified spacing in mustache interpolations.
### `"never"`
-```
+
+```vue
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.13.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/mustache-interpolation-spacing.js)
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index b5d307b5b..e1840987b 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -3,37 +3,43 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/name-property-casing
description: enforce specific casing for the name property in Vue components
+since: v3.8.0
---
+
# vue/name-property-casing
+
> enforce specific casing for the name property in Vue components
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v9.0.0 and replaced by [vue/component-definition-name-casing](component-definition-name-casing.md) rule.
## :book: Rule Details
This rule aims at enforcing the style for the `name` property casing for consistency purposes.
-```
+
+```vue
```
+
-```
+
+```vue
```
+
## :wrench: Options
@@ -50,30 +56,38 @@ This rule aims at enforcing the style for the `name` property casing for consist
### `"kebab-case"`
-```
+
+```vue
```
+
-```
+
+```vue
```
+
-## :books: Further reading
+## :books: Further Reading
+
+- [Style guide - Component name casing in JS/JSX](https://vuejs.org/style-guide/rules-strongly-recommended.html#component-name-casing-in-js-jsx)
+
+## :rocket: Version
-- [Style guide - Component name casing in JS/JSX](https://vuejs.org/v2/style-guide/#Component-name-casing-in-JS-JSX-strongly-recommended)
+This rule was introduced in eslint-plugin-vue v3.8.0
## :mag: Implementation
diff --git a/docs/rules/new-line-between-multi-line-property.md b/docs/rules/new-line-between-multi-line-property.md
new file mode 100644
index 000000000..1191a1567
--- /dev/null
+++ b/docs/rules/new-line-between-multi-line-property.md
@@ -0,0 +1,102 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/new-line-between-multi-line-property
+description: enforce new lines between multi-line properties in Vue components
+since: v7.3.0
+---
+
+# vue/new-line-between-multi-line-property
+
+> enforce new lines between multi-line properties in Vue components
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims at enforcing new lines between multi-line properties in Vue components to help readability
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/new-line-between-multi-line-property": ["error", {
+ "minLineOfMultilineProperty": 2
+ }]
+}
+```
+
+- `minLineOfMultilineProperty` ... Define the minimum number of rows for a multi-line property. default `2`
+
+## :books: Further Reading
+
+- [Style guide - Empty lines in component/instance options](https://vuejs.org/style-guide/rules-recommended.html#empty-lines-in-component-instance-options)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.3.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/new-line-between-multi-line-property.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/new-line-between-multi-line-property.js)
diff --git a/docs/rules/next-tick-style.md b/docs/rules/next-tick-style.md
new file mode 100644
index 000000000..0e9d7812f
--- /dev/null
+++ b/docs/rules/next-tick-style.md
@@ -0,0 +1,109 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/next-tick-style
+description: enforce Promise or callback style in `nextTick`
+since: v7.5.0
+---
+
+# vue/next-tick-style
+
+> enforce Promise or callback style in `nextTick`
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule enforces whether the callback version or Promise version (which was introduced in Vue v2.1.0) should be used in `Vue.nextTick` and `this.$nextTick`.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Default is set to `promise`.
+
+```json
+{
+ "vue/next-tick-style": ["error", "promise" | "callback"]
+}
+```
+
+- `"promise"` (default) ... requires using the promise version.
+- `"callback"` ... requires using the callback version. Use this if you use a Vue version below v2.1.0.
+
+### `"callback"`
+
+
+
+```vue
+
+```
+
+
+
+## :books: Further Reading
+
+- [`Vue.nextTick` API in Vue 2](https://v2.vuejs.org/v2/api/#Vue-nextTick)
+- [`vm.$nextTick` API in Vue 2](https://v2.vuejs.org/v2/api/#vm-nextTick)
+- [Global API Treeshaking](https://v3-migration.vuejs.org/breaking-changes/global-api-treeshaking.html)
+- [Global `nextTick` API in Vue 3](https://vuejs.org/api/general.html#nexttick)
+- [Instance `$nextTick` API in Vue 3](https://vuejs.org/api/component-instance.html#nexttick)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/next-tick-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/next-tick-style.js)
diff --git a/docs/rules/no-arrow-functions-in-watch.md b/docs/rules/no-arrow-functions-in-watch.md
new file mode 100644
index 000000000..fb1f55215
--- /dev/null
+++ b/docs/rules/no-arrow-functions-in-watch.md
@@ -0,0 +1,70 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-arrow-functions-in-watch
+description: disallow using arrow functions to define watcher
+since: v7.0.0
+---
+
+# vue/no-arrow-functions-in-watch
+
+> disallow using arrow functions to define watcher
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule disallows using arrow functions when defining a watcher. Arrow functions bind to their parent context, which means they will not have access to the Vue component instance via `this`. [See here for more details](https://vuejs.org/api/options-state.html#watch).
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-arrow-functions-in-watch.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-arrow-functions-in-watch.js)
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index 92205af86..814a53238 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -3,26 +3,30 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/no-async-in-computed-properties
description: disallow asynchronous actions in computed properties
+since: v3.8.0
---
+
# vue/no-async-in-computed-properties
+
> disallow asynchronous actions in computed properties
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
-Computed properties should be synchronous. Asynchronous actions inside them may not work as expected and can lead to an unexpected behaviour, that's why you should avoid them.
+Computed properties and functions should be synchronous. Asynchronous actions inside them may not work as expected and can lead to an unexpected behaviour, that's why you should avoid them.
If you need async computed properties you might want to consider using additional plugin [vue-async-computed]
## :book: Rule Details
-This rule is aimed at preventing asynchronous methods from being called in computed properties.
+This rule is aimed at preventing asynchronous methods from being called in computed properties and functions.
-```
+
+```vue
```
+
+
+
+
+
+```vue
+
+```
+
## :wrench: Options
Nothing.
-## :books: Further reading
+## :books: Further Reading
- [vue-async-computed](https://github.com/foxbenjaminfox/vue-async-computed)
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.8.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-async-in-computed-properties.js)
diff --git a/docs/rules/no-bare-strings-in-template.md b/docs/rules/no-bare-strings-in-template.md
new file mode 100644
index 000000000..23a23c116
--- /dev/null
+++ b/docs/rules/no-bare-strings-in-template.md
@@ -0,0 +1,94 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-bare-strings-in-template
+description: disallow the use of bare strings in ``
+since: v7.0.0
+---
+
+# vue/no-bare-strings-in-template
+
+> disallow the use of bare strings in ``
+
+## :book: Rule Details
+
+This rule disallows the use of bare strings in ``.
+In order to be able to internationalize your application, you will need to avoid using plain strings in your templates. Instead, you would need to use a template helper specializing in translation.
+
+This rule was inspired by [no-bare-strings rule in ember-template-lint](https://github.com/ember-template-lint/ember-template-lint/blob/master/docs/rule/no-bare-strings.md).
+
+
+
+```vue
+
+
+ ![Lorem ipsum]()
+
+
+
+
+
+
+:::tip
+This rule does not check for string literals, in bindings and mustaches interpolation. This is because it looks like a conscious decision.
+If you want to report these string literals, enable the [vue/no-useless-v-bind] and [vue/no-useless-mustaches] rules and fix the useless string literals.
+:::
+
+## :wrench: Options
+
+```js
+{
+ "vue/no-bare-strings-in-template": ["error", {
+ "allowlist": [
+ "(", ")", ",", ".", "&", "+", "-", "=", "*", "/", "#", "%", "!", "?", ":", "[", "]", "{", "}", "<", ">", "\u00b7", "\u2022", "\u2010", "\u2013", "\u2014", "\u2212", "|"
+ ],
+ "attributes": {
+ "/.+/": ["title", "aria-label", "aria-placeholder", "aria-roledescription", "aria-valuetext"],
+ "input": ["placeholder"],
+ "img": ["alt"]
+ },
+ "directives": ["v-text"]
+ }]
+}
+```
+
+- `allowlist` ... An array of allowed strings or regular expression patterns (e.g. `/\d+/` to allow numbers).
+- `attributes` ... An object whose keys are tag name or patterns and value is an array of attributes to check for that tag name.
+- `directives` ... An array of directive names to check literal value.
+
+## :couple: Related Rules
+
+- [vue/no-useless-v-bind]
+- [vue/no-useless-mustaches]
+
+[vue/no-useless-v-bind]: ./no-useless-v-bind.md
+[vue/no-useless-mustaches]: ./no-useless-mustaches.md
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-bare-strings-in-template.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-bare-strings-in-template.js)
diff --git a/docs/rules/no-boolean-default.md b/docs/rules/no-boolean-default.md
new file mode 100644
index 000000000..78fdbc270
--- /dev/null
+++ b/docs/rules/no-boolean-default.md
@@ -0,0 +1,60 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-boolean-default
+description: disallow boolean defaults
+since: v7.0.0
+---
+
+# vue/no-boolean-default
+
+> disallow boolean defaults
+
+The rule prevents Boolean props from having a default value.
+
+## :book: Rule Details
+
+The rule is to enforce the HTML standard of always defaulting boolean attributes to false.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+- `'no-default'` (default) allows a prop definition object, but enforces that the `default` property not be defined.
+- `'default-false'` enforces that the default can be set but must be set to `false`.
+
+```json
+ "vue/no-boolean-default": ["error", "no-default|default-false"]
+```
+
+## :couple: Related Rules
+
+- [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md)
+- [vue/require-default-prop](./require-default-prop.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-boolean-default.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-boolean-default.js)
diff --git a/docs/rules/no-child-content.md b/docs/rules/no-child-content.md
new file mode 100644
index 000000000..a0a69a9bb
--- /dev/null
+++ b/docs/rules/no-child-content.md
@@ -0,0 +1,59 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-child-content
+description: disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
+since: v8.1.0
+---
+
+# vue/no-child-content
+
+> disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text`
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule reports child content of elements that have a directive which overwrites that child content. By default, those are `v-html` and `v-text`, additional ones (e.g. [Vue I18n's `v-t` directive](https://vue-i18n.intlify.dev/api/directive.html)) can be configured manually.
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-child-content": ["error", {
+ "additionalDirectives": ["foo"] // checks v-foo directive
+ }]
+}
+```
+
+- `additionalDirectives` ... An array of additional directives to check, without the `v-` prefix. Empty by default; `v-html` and `v-text` are always checked.
+
+## :books: Further Reading
+
+- [`v-html` directive](https://vuejs.org/api/built-in-directives.html#v-html)
+- [`v-text` directive](https://vuejs.org/api/built-in-directives.html#v-text)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-child-content.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-child-content.js)
diff --git a/docs/rules/no-computed-properties-in-data.md b/docs/rules/no-computed-properties-in-data.md
new file mode 100644
index 000000000..960a28c86
--- /dev/null
+++ b/docs/rules/no-computed-properties-in-data.md
@@ -0,0 +1,51 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-computed-properties-in-data
+description: disallow accessing computed properties in `data`
+since: v7.20.0
+---
+
+# vue/no-computed-properties-in-data
+
+> disallow accessing computed properties in `data`
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule disallow accessing computed properties in `data()`.
+The computed property cannot be accessed in `data()` because is before initialization.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.20.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-computed-properties-in-data.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-computed-properties-in-data.js)
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 9e76e8cd1..f463c883e 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -3,11 +3,14 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/no-confusing-v-for-v-if
description: disallow confusing `v-for` and `v-if` on the same element
+since: v3.0.0
---
+
# vue/no-confusing-v-for-v-if
+
> disallow confusing `v-for` and `v-if` on the same element
-- :warning: This rule was **deprecated** and replaced by [vue/no-use-v-if-with-v-for](no-use-v-if-with-v-for.md) rule.
+- :no_entry: This rule was **removed** in eslint-plugin-vue v9.0.0 and replaced by [vue/no-use-v-if-with-v-for](no-use-v-if-with-v-for.md) rule.
## :book: Rule Details
@@ -18,7 +21,8 @@ This rule reports the elements which have both `v-for` and `v-if` directives in
In that case, the `v-if` should be written on the wrapper element.
-```
+
+```vue
::: warning Note
When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately.
-[https://vuejs.org/v2/guide/list.html#v-for-with-v-if](https://vuejs.org/v2/guide/list.html#v-for-with-v-if)
+[https://vuejs.org/guide/essentials/list.html#v-for-with-v-if](https://vuejs.org/guide/essentials/list.html#v-for-with-v-if)
:::
## :wrench: Options
Nothing.
-## :books: Further reading
+## :books: Further Reading
+
+- [Style guide - Avoid v-if with v-for](https://vuejs.org/style-guide/rules-essential.html#avoid-v-if-with-v-for)
+- [Guide - Conditional Rendering / v-if with v-for](https://vuejs.org/guide/essentials/conditional.html#v-if-with-v-for)
+- [Guide - List Rendering / v-for with v-if](https://vuejs.org/guide/essentials/list.html#v-for-with-v-if)
+
+## :rocket: Version
-- [Style guide - Avoid v-if with v-for](https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)
-- [Guide - Conditional / v-if with v-for](https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for)
-- [Guide - List / v-for with v-if](https://vuejs.org/v2/guide/list.html#v-for-with-v-if)
+This rule was introduced in eslint-plugin-vue v3.0.0
## :mag: Implementation
diff --git a/docs/rules/no-console.md b/docs/rules/no-console.md
new file mode 100644
index 000000000..64ef0278e
--- /dev/null
+++ b/docs/rules/no-console.md
@@ -0,0 +1,34 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-console
+description: Disallow the use of `console` in ``
+since: v9.15.0
+---
+
+# vue/no-console
+
+> Disallow the use of `console` in ``
+
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule is the same rule as core [no-console] rule but it applies to the expressions in ``.
+
+## :books: Further Reading
+
+- [no-console]
+
+[no-console]: https://eslint.org/docs/latest/rules/no-console
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-console.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-console.js)
+
+Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-console)
diff --git a/docs/rules/no-constant-condition.md b/docs/rules/no-constant-condition.md
new file mode 100644
index 000000000..36520e25b
--- /dev/null
+++ b/docs/rules/no-constant-condition.md
@@ -0,0 +1,30 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-constant-condition
+description: Disallow constant expressions in conditions in ``
+since: v7.5.0
+---
+
+# vue/no-constant-condition
+
+> Disallow constant expressions in conditions in ``
+
+This rule is the same rule as core [no-constant-condition] rule but it applies to the expressions in ``.
+
+## :books: Further Reading
+
+- [no-constant-condition]
+
+[no-constant-condition]: https://eslint.org/docs/rules/no-constant-condition
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.5.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-constant-condition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-constant-condition.js)
+
+Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-constant-condition)
diff --git a/docs/rules/no-custom-modifiers-on-v-model.md b/docs/rules/no-custom-modifiers-on-v-model.md
new file mode 100644
index 000000000..f657f9cf7
--- /dev/null
+++ b/docs/rules/no-custom-modifiers-on-v-model.md
@@ -0,0 +1,58 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-custom-modifiers-on-v-model
+description: disallow custom modifiers on v-model used on the component
+since: v7.0.0
+---
+
+# vue/no-custom-modifiers-on-v-model
+
+> disallow custom modifiers on v-model used on the component
+
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+This rule checks whether `v-model` used on the component do not have custom modifiers.
+
+## :book: Rule Details
+
+This rule reports `v-model` directives in the following cases:
+
+- The directive used on the component has custom modifiers. E.g. `
+
+```vue
+
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/valid-v-model]
+
+[vue/valid-v-model]: ./valid-v-model.md
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-custom-modifiers-on-v-model.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-custom-modifiers-on-v-model.js)
diff --git a/docs/rules/no-deprecated-data-object-declaration.md b/docs/rules/no-deprecated-data-object-declaration.md
new file mode 100644
index 000000000..214aacc30
--- /dev/null
+++ b/docs/rules/no-deprecated-data-object-declaration.md
@@ -0,0 +1,93 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-data-object-declaration
+description: disallow using deprecated object declaration on data (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-data-object-declaration
+
+> disallow using deprecated object declaration on data (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports use of deprecated object declaration on `data` property (in Vue.js 3.0.0+).
+The different from `vue/no-shared-component-data` is the root instance being also disallowed.
+
+See [Migration Guide - Data Option](https://v3-migration.vuejs.org/breaking-changes/data-option.html) for more details.
+
+
+
+```js
+createApp({
+ /* ✗ BAD */
+ data: {
+ foo: null
+ }
+}).mount('#app')
+
+createApp({
+ /* ✓ GOOD */
+ data() {
+ return {
+ foo: null
+ }
+ }
+}).mount('#app')
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Data Option](https://v3-migration.vuejs.org/breaking-changes/data-option.html)
+- [Vue RFCs - 0019-remove-data-object-declaration](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0019-remove-data-object-declaration.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-data-object-declaration.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-data-object-declaration.js)
diff --git a/docs/rules/no-deprecated-delete-set.md b/docs/rules/no-deprecated-delete-set.md
new file mode 100644
index 000000000..c96f7a730
--- /dev/null
+++ b/docs/rules/no-deprecated-delete-set.md
@@ -0,0 +1,57 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-delete-set
+description: disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)
+since: v9.29.0
+---
+
+# vue/no-deprecated-delete-set
+
+> disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `$delete` and `$set`. (in Vue.js 3.0.0+).
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Removed APIs](https://v3-migration.vuejs.org/breaking-changes/#removed-apis)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.29.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-delete-set.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-delete-set.js)
diff --git a/docs/rules/no-deprecated-destroyed-lifecycle.md b/docs/rules/no-deprecated-destroyed-lifecycle.md
new file mode 100644
index 000000000..9c681e0ea
--- /dev/null
+++ b/docs/rules/no-deprecated-destroyed-lifecycle.md
@@ -0,0 +1,55 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-destroyed-lifecycle
+description: disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-destroyed-lifecycle
+
+> disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `destroyed` and `beforeDestroy` lifecycle hooks. (in Vue.js 3.0.0+).
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - VNode Lifecycle Events](https://v3-migration.vuejs.org/breaking-changes/vnode-lifecycle-events.html#migration-strategy)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-destroyed-lifecycle.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-destroyed-lifecycle.js)
diff --git a/docs/rules/no-deprecated-dollar-listeners-api.md b/docs/rules/no-deprecated-dollar-listeners-api.md
new file mode 100644
index 000000000..91854806b
--- /dev/null
+++ b/docs/rules/no-deprecated-dollar-listeners-api.md
@@ -0,0 +1,59 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-dollar-listeners-api
+description: disallow using deprecated `$listeners` (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-dollar-listeners-api
+
+> disallow using deprecated `$listeners` (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `$listeners`. (in Vue.js 3.0.0+).
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Vue RFCs - 0031-attr-fallthrough](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration Guide - `$listeners` removed](https://v3-migration.vuejs.org/breaking-changes/listeners-removed.html)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-dollar-listeners-api.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-dollar-listeners-api.js)
diff --git a/docs/rules/no-deprecated-dollar-scopedslots-api.md b/docs/rules/no-deprecated-dollar-scopedslots-api.md
new file mode 100644
index 000000000..45e67d480
--- /dev/null
+++ b/docs/rules/no-deprecated-dollar-scopedslots-api.md
@@ -0,0 +1,57 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-dollar-scopedslots-api
+description: disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-dollar-scopedslots-api
+
+> disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `$scopedSlots`. (in Vue.js 3.0.0+).
+
+See [Migration Guide - Slots Unification](https://v3-migration.vuejs.org/breaking-changes/slots-unification.html) for more details.
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Slots Unification](https://v3-migration.vuejs.org/breaking-changes/slots-unification.html)
+- [Vue RFCs - 0006-slots-unification](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0006-slots-unification.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-dollar-scopedslots-api.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-dollar-scopedslots-api.js)
diff --git a/docs/rules/no-deprecated-events-api.md b/docs/rules/no-deprecated-events-api.md
new file mode 100644
index 000000000..a3539d7cf
--- /dev/null
+++ b/docs/rules/no-deprecated-events-api.md
@@ -0,0 +1,75 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-events-api
+description: disallow using deprecated events api (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-events-api
+
+> disallow using deprecated events api (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `$on`, `$off` `$once` api. (in Vue.js 3.0.0+).
+
+See [Migration Guide - Events API](https://v3-migration.vuejs.org/breaking-changes/events-api.html) for more details.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Events API](https://v3-migration.vuejs.org/breaking-changes/events-api.html)
+- [Vue RFCs - 0020-events-api-change](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0020-events-api-change.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-events-api.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-events-api.js)
diff --git a/docs/rules/no-deprecated-filter.md b/docs/rules/no-deprecated-filter.md
new file mode 100644
index 000000000..452d9d03c
--- /dev/null
+++ b/docs/rules/no-deprecated-filter.md
@@ -0,0 +1,77 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-filter
+description: disallow using deprecated filters syntax (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-filter
+
+> disallow using deprecated filters syntax (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports deprecated `filters` syntax (removed in Vue.js v3.0.0+).
+
+See [Migration Guide - Filters](https://v3-migration.vuejs.org/breaking-changes/filters.html) for more details.
+
+
+
+```vue
+
+
+ {{ filter(msg) }}
+ {{ filter(msg, '€') }}
+ {{ filterB(filterA(msg)) }}
+
+
+
+
+
+ {{ msg | filter }}
+ {{ msg | filter('€') }}
+ {{ msg | filterA | filterB }}
+
+
+
+
+```
+
+
+
+:::warning
+Do not disable [`"parserOptions.vueFeatures.filter"`](https://github.com/vuejs/vue-eslint-parser#parseroptionsvuefeaturesfilter) to use this rule.
+
+```json5
+{
+ "parser": "vue-eslint-parser",
+ "parserOptions": {
+ "vueFeatures": {
+ "filter": false // Don't!!
+ }
+ }
+}
+```
+
+:::
+
+### :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Filters](https://v3-migration.vuejs.org/breaking-changes/filters.html)
+- [Vue RFCs - 0015-remove-filters](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0015-remove-filters.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-filter.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-filter.js)
diff --git a/docs/rules/no-deprecated-functional-template.md b/docs/rules/no-deprecated-functional-template.md
new file mode 100644
index 000000000..32656eb79
--- /dev/null
+++ b/docs/rules/no-deprecated-functional-template.md
@@ -0,0 +1,49 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-functional-template
+description: disallow using deprecated the `functional` template (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-functional-template
+
+> disallow using deprecated the `functional` template (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports deprecated the `functional` template (in Vue.js 3.0.0+).
+
+See [Migration Guide - Functional Components](https://v3-migration.vuejs.org/breaking-changes/functional-components.html) for more details.
+
+
+
+```vue
+
+
+
+
+```
+
+
+
+### :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Functional Components](https://v3-migration.vuejs.org/breaking-changes/functional-components.html)
+- [Vue RFCs - 0007-functional-async-api-change](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0007-functional-async-api-change.md)
+- [Guide - Functional Components](https://v2.vuejs.org/v2/guide/render-function.html#Functional-Components)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-functional-template.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-functional-template.js)
diff --git a/docs/rules/no-deprecated-html-element-is.md b/docs/rules/no-deprecated-html-element-is.md
new file mode 100644
index 000000000..844c424ed
--- /dev/null
+++ b/docs/rules/no-deprecated-html-element-is.md
@@ -0,0 +1,53 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-html-element-is
+description: disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-html-element-is
+
+> disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports deprecated the `is` attribute on HTML elements (removed in Vue.js v3.0.0+).
+
+See [Migration Guide - Custom Elements Interop](https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html#customized-built-in-elements) for more details.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Custom Elements Interop](https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html#customized-built-in-elements)
+- [Vue RFCs - 0027-custom-elements-interop](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0027-custom-elements-interop.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-html-element-is.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-html-element-is.js)
diff --git a/docs/rules/no-deprecated-inline-template.md b/docs/rules/no-deprecated-inline-template.md
new file mode 100644
index 000000000..5dcbc22b3
--- /dev/null
+++ b/docs/rules/no-deprecated-inline-template.md
@@ -0,0 +1,56 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-inline-template
+description: disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-inline-template
+
+> disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports deprecated `inline-template` attributes (removed in Vue.js v3.0.0+).
+
+See [Migration Guide - Inline Template Attribute](https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html) for more details.
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+### :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Inline Template Attribute](https://v3-migration.vuejs.org/breaking-changes/inline-template-attribute.html)
+- [Vue RFCs - 0016-remove-inline-templates](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0016-remove-inline-templates.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-inline-template.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-inline-template.js)
diff --git a/docs/rules/no-deprecated-model-definition.md b/docs/rules/no-deprecated-model-definition.md
new file mode 100644
index 000000000..084652b91
--- /dev/null
+++ b/docs/rules/no-deprecated-model-definition.md
@@ -0,0 +1,82 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-model-definition
+description: disallow deprecated `model` definition (in Vue.js 3.0.0+)
+since: v9.16.0
+---
+
+# vue/no-deprecated-model-definition
+
+> disallow deprecated `model` definition (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
+## :book: Rule Details
+
+This rule reports use of the component `model` option, which has been deprecated in Vue.js 3.0.0+.
+
+See [Migration Guide – `v-model`](https://v3-migration.vuejs.org/breaking-changes/v-model.html) for more details.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-deprecated-model-definition": ["error", {
+ "allowVue3Compat": true
+ }]
+}
+```
+
+### `"allowVue3Compat": true`
+
+Allow `model` definitions with prop/event names that match the Vue.js 3.0.0+ `v-model` syntax, i.e. `modelValue`/`update:modelValue` or `model-value`/`update:model-value`.
+
+
+
+```vue
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/valid-model-definition](./valid-model-definition.md) (for Vue.js 2.x)
+- [vue/no-v-model-argument](./no-v-model-argument.md) (for Vue.js 2.x)
+
+## :books: Further Reading
+
+- [Migration Guide – `v-model`](https://v3-migration.vuejs.org/breaking-changes/v-model.html)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.16.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-model-definition.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-model-definition.js)
diff --git a/docs/rules/no-deprecated-props-default-this.md b/docs/rules/no-deprecated-props-default-this.md
new file mode 100644
index 000000000..af8136fa2
--- /dev/null
+++ b/docs/rules/no-deprecated-props-default-this.md
@@ -0,0 +1,77 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-props-default-this
+description: disallow deprecated `this` access in props default function (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-props-default-this
+
+> disallow deprecated `this` access in props default function (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports the use of `this` within the props default value factory functions.
+In Vue.js 3.0.0+, props default value factory functions no longer have access to `this`.
+
+See [Migration Guide - Props Default Function `this` Access](https://v3-migration.vuejs.org/breaking-changes/props-default-this.html) for more details.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Migration Guide - Props Default Function `this` Access](https://v3-migration.vuejs.org/breaking-changes/props-default-this.html)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-props-default-this.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-props-default-this.js)
diff --git a/docs/rules/no-deprecated-router-link-tag-prop.md b/docs/rules/no-deprecated-router-link-tag-prop.md
new file mode 100644
index 000000000..1ec049fd0
--- /dev/null
+++ b/docs/rules/no-deprecated-router-link-tag-prop.md
@@ -0,0 +1,97 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-router-link-tag-prop
+description: disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+)
+since: v7.20.0
+---
+
+# vue/no-deprecated-router-link-tag-prop
+
+> disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports deprecated the `tag` attribute on `RouterLink` elements (removed in Vue.js v3.0.0+).
+
+
+
+```vue
+
+
+ Home
+ Home
+
+
+
+
+
+
+
+ Home
+ Home
+
+
+ Home
+ Home
+ Home
+ Home
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-deprecated-router-link-tag-prop": ["error", {
+ "components": ['RouterLink']
+ }]
+}
+```
+
+- `components` (`string[]`) ... Component names which will be checked with the `tag` attribute. default `['RouterLink']`.
+
+Note: this rule will check both `kebab-case` and `PascalCase` versions of the
+given component names.
+
+### `{ "components": ['RouterLink', 'NuxtLink'] }`
+
+
+
+```vue
+
+
+ Home
+ Home
+
+ Home
+ Home
+
+ Home
+ Home
+
+ Home
+ Home
+
+```
+
+
+
+## :books: Further Reading
+
+- [Vue RFCs - 0021-router-link-scoped-slot](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0021-router-link-scoped-slot.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.20.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-router-link-tag-prop.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-router-link-tag-prop.js)
diff --git a/docs/rules/no-deprecated-scope-attribute.md b/docs/rules/no-deprecated-scope-attribute.md
new file mode 100644
index 000000000..d19b172a8
--- /dev/null
+++ b/docs/rules/no-deprecated-scope-attribute.md
@@ -0,0 +1,55 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-scope-attribute
+description: disallow deprecated `scope` attribute (in Vue.js 2.5.0+)
+since: v6.0.0
+---
+
+# vue/no-deprecated-scope-attribute
+
+> disallow deprecated `scope` attribute (in Vue.js 2.5.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports deprecated `scope` attribute in Vue.js v2.5.0+.
+
+
+
+```vue
+
+
+
+
+ {{ props.title }}
+
+
+ {{ props.title }}
+
+
+
+
+
+ {{ props.title }}
+
+
+
+```
+
+
+
+## :books: Further Reading
+
+- [API - scope](https://v2.vuejs.org/v2/api/#scope-removed)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-scope-attribute.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-scope-attribute.js)
diff --git a/docs/rules/no-deprecated-slot-attribute.md b/docs/rules/no-deprecated-slot-attribute.md
new file mode 100644
index 000000000..64f2c5e00
--- /dev/null
+++ b/docs/rules/no-deprecated-slot-attribute.md
@@ -0,0 +1,95 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-slot-attribute
+description: disallow deprecated `slot` attribute (in Vue.js 2.6.0+)
+since: v6.1.0
+---
+
+# vue/no-deprecated-slot-attribute
+
+> disallow deprecated `slot` attribute (in Vue.js 2.6.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports deprecated `slot` attribute in Vue.js v2.6.0+.
+
+
+
+```vue
+
+
+
+
+ {{ props.title }}
+
+
+
+
+
+ {{ props.title }}
+
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-deprecated-slot-attribute": ["error", {
+ "ignore": ["my-component"]
+ }]
+}
+```
+
+- `"ignore"` (`string[]`) An array of tags that ignore this rules. This option will check both kebab-case and PascalCase versions of the given tag names. Default is empty.
+
+### `"ignore": ["my-component"]`
+
+
+
+```vue
+
+
+
+
+ {{ props.title }}
+
+
+
+
+
+
+ {{ props.title }}
+
+
+
+
+
+
+ {{ props.title }}
+
+
+
+```
+
+
+
+## :books: Further Reading
+
+- [API - slot](https://v2.vuejs.org/v2/api/#slot-deprecated)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-slot-attribute.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-slot-attribute.js)
diff --git a/docs/rules/no-deprecated-slot-scope-attribute.md b/docs/rules/no-deprecated-slot-scope-attribute.md
new file mode 100644
index 000000000..86212de0f
--- /dev/null
+++ b/docs/rules/no-deprecated-slot-scope-attribute.md
@@ -0,0 +1,52 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-slot-scope-attribute
+description: disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)
+since: v6.1.0
+---
+
+# vue/no-deprecated-slot-scope-attribute
+
+> disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports deprecated `slot-scope` attribute in Vue.js v2.6.0+.
+
+
+
+```vue
+
+
+
+
+ {{ props.title }}
+
+
+
+
+
+ {{ props.title }}
+
+
+
+```
+
+
+
+## :books: Further Reading
+
+- [API - slot-scope](https://v2.vuejs.org/v2/api/#slot-scope-deprecated)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-slot-scope-attribute.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-slot-scope-attribute.js)
diff --git a/docs/rules/no-deprecated-v-bind-sync.md b/docs/rules/no-deprecated-v-bind-sync.md
new file mode 100644
index 000000000..77a79f16f
--- /dev/null
+++ b/docs/rules/no-deprecated-v-bind-sync.md
@@ -0,0 +1,62 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-v-bind-sync
+description: disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-v-bind-sync
+
+> disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+).
+
+See [Migration Guide - `v-model`](https://v3-migration.vuejs.org/breaking-changes/v-model.html) for more details.
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/valid-v-bind]
+
+[vue/valid-v-bind]: ./valid-v-bind.md
+
+## :books: Further Reading
+
+- [Migration Guide - `v-model`](https://v3-migration.vuejs.org/breaking-changes/v-model.html)
+- [Vue RFCs - 0005-replace-v-bind-sync-with-v-model-argument](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0005-replace-v-bind-sync-with-v-model-argument.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-v-bind-sync.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-v-bind-sync.js)
diff --git a/docs/rules/no-deprecated-v-is.md b/docs/rules/no-deprecated-v-is.md
new file mode 100644
index 000000000..9fd1590e4
--- /dev/null
+++ b/docs/rules/no-deprecated-v-is.md
@@ -0,0 +1,55 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-v-is
+description: disallow deprecated `v-is` directive (in Vue.js 3.1.0+)
+since: v7.11.0
+---
+
+# vue/no-deprecated-v-is
+
+> disallow deprecated `v-is` directive (in Vue.js 3.1.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports deprecated `v-is` directive in Vue.js v3.1.0+.
+
+Use [`is` attribute with `vue:` prefix](https://vuejs.org/api/built-in-special-attributes.html#is) instead.
+
+
+
+```vue
+
+
+
+
+
+## :couple: Related Rules
+
+- [vue/valid-v-is]
+
+[vue/valid-v-is]: ./valid-v-is.md
+
+## :books: Further Reading
+
+- [Migration Guide - Custom Elements Interop](https://v3-migration.vuejs.org/breaking-changes/custom-elements-interop.html#vue-prefix-for-in-dom-template-parsing-workarounds)
+- [API - v-is](https://vuejs.org/api/built-in-special-attributes.html#is)
+- [API - v-is (Old)](https://github.com/vuejs/docs-next/blob/008613756c3d781128d96b64a2d27f7598f8f548/src/api/directives.md#v-is)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.11.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-v-is.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-v-is.js)
diff --git a/docs/rules/no-deprecated-v-on-native-modifier.md b/docs/rules/no-deprecated-v-on-native-modifier.md
new file mode 100644
index 000000000..8b8312235
--- /dev/null
+++ b/docs/rules/no-deprecated-v-on-native-modifier.md
@@ -0,0 +1,57 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-v-on-native-modifier
+description: disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-v-on-native-modifier
+
+> disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `.native` modifier on `v-on` directive (in Vue.js 3.0.0+)
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/valid-v-on]
+
+[vue/valid-v-on]: ./valid-v-on.md
+
+## :books: Further Reading
+
+- [Vue RFCs - 0031-attr-fallthrough](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0031-attr-fallthrough.md)
+- [Migration Guide - `v-on.native` modifier removed](https://v3-migration.vuejs.org/breaking-changes/v-on-native-modifier-removed.html)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-v-on-native-modifier.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-v-on-native-modifier.js)
diff --git a/docs/rules/no-deprecated-v-on-number-modifiers.md b/docs/rules/no-deprecated-v-on-number-modifiers.md
new file mode 100644
index 000000000..54ea7d431
--- /dev/null
+++ b/docs/rules/no-deprecated-v-on-number-modifiers.md
@@ -0,0 +1,62 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-v-on-number-modifiers
+description: disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-v-on-number-modifiers
+
+> disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `KeyboardEvent.keyCode` modifier on `v-on` directive (in Vue.js 3.0.0+).
+
+See [Migration Guide - KeyCode Modifiers](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html) for more details.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/valid-v-on]
+
+[vue/valid-v-on]: ./valid-v-on.md
+
+## :books: Further Reading
+
+- [Migration Guide - KeyCode Modifiers](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html)
+- [Vue RFCs - 0014-drop-keycode-support](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0014-drop-keycode-support.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-v-on-number-modifiers.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-v-on-number-modifiers.js)
diff --git a/docs/rules/no-deprecated-vue-config-keycodes.md b/docs/rules/no-deprecated-vue-config-keycodes.md
new file mode 100644
index 000000000..697604b8c
--- /dev/null
+++ b/docs/rules/no-deprecated-vue-config-keycodes.md
@@ -0,0 +1,59 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-deprecated-vue-config-keycodes
+description: disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)
+since: v7.0.0
+---
+
+# vue/no-deprecated-vue-config-keycodes
+
+> disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+)
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports use of deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+).
+
+See [Migration Guide - KeyCode Modifiers](https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html) for more details.
+
+
+
+```js
+/* ✗ BAD */
+Vue.config.keyCodes = {
+ // ...
+}
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [vue/no-deprecated-v-on-number-modifiers]
+
+[vue/no-deprecated-v-on-number-modifiers]: ./no-deprecated-v-on-number-modifiers.md
+
+## :books: Further Reading
+
+- [Migration Guide - KeyCode Modifiers]
+- [Vue RFCs - 0014-drop-keycode-support]
+- [API - Global Config - keyCodes]
+
+[Migration Guide - KeyCode Modifiers]: https://v3-migration.vuejs.org/breaking-changes/keycode-modifiers.html
+[Vue RFCs - 0014-drop-keycode-support]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0014-drop-keycode-support.md
+[API - Global Config - keyCodes]: https://v2.vuejs.org/v2/api/#keyCodes
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-deprecated-vue-config-keycodes.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-deprecated-vue-config-keycodes.js)
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 70bbf88b2..3372a8e26 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -3,20 +3,25 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/no-dupe-keys
description: disallow duplication of field names
+since: v3.9.0
---
+
# vue/no-dupe-keys
+
> disallow duplication of field names
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
-This rule prevents to use duplicated names.
+This rule prevents using duplicate key names.
## :book: Rule Details
-This rule is aimed at preventing duplicated property names.
+This rule prevents duplicate `props`/`data`/`methods`/etc. key names defined on a component.
+Even if a key name does not conflict in the `
```
+
## :wrench: Options
@@ -49,26 +55,32 @@ export default {
}
```
-- `"groups"` (`string[]`) Array of additional groups to search for duplicates. Defailt is empty.
+- `"groups"` (`string[]`) Array of additional groups to search for duplicates. Default is empty.
### `"groups": ["firebase"]`
-```
+
+```vue
```
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.9.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-dupe-keys.js)
diff --git a/docs/rules/no-dupe-v-else-if.md b/docs/rules/no-dupe-v-else-if.md
new file mode 100644
index 000000000..d5bf83797
--- /dev/null
+++ b/docs/rules/no-dupe-v-else-if.md
@@ -0,0 +1,105 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-dupe-v-else-if
+description: disallow duplicate conditions in `v-if` / `v-else-if` chains
+since: v7.0.0
+---
+
+# vue/no-dupe-v-else-if
+
+> disallow duplicate conditions in `v-if` / `v-else-if` chains
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule disallows duplicate conditions in the same `v-if` / `v-else-if` chain.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+This rule can also detect some cases where the conditions are not identical, but the branch can never execute due to the logic of `||` and `&&` operators.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related Rules
+
+- [no-dupe-else-if]
+
+[no-dupe-else-if]: https://eslint.org/docs/rules/no-dupe-else-if
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-dupe-v-else-if.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-dupe-v-else-if.js)
diff --git a/docs/rules/no-duplicate-attr-inheritance.md b/docs/rules/no-duplicate-attr-inheritance.md
new file mode 100644
index 000000000..fe3cd37bf
--- /dev/null
+++ b/docs/rules/no-duplicate-attr-inheritance.md
@@ -0,0 +1,93 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-duplicate-attr-inheritance
+description: enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`
+since: v7.0.0
+---
+
+# vue/no-duplicate-attr-inheritance
+
+> enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"`
+
+## :book: Rule Details
+
+This rule aims to prevent duplicate attribute inheritance.
+This rule suggests applying `inheritAttrs: false` when it detects `v-bind="$attrs"` being used.
+
+
+
+```vue
+
+
+
+
+
+```vue
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-duplicate-attr-inheritance": ["error", {
+ "checkMultiRootNodes": false,
+ }]
+}
+```
+
+- `"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.
+
+### `"checkMultiRootNodes": true`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+## :books: Further Reading
+
+- [API - inheritAttrs](https://vuejs.org/api/options-misc.html#inheritattrs)
+- [Fallthrough Attributes](https://vuejs.org/guide/components/attrs.html#attribute-inheritance-on-multiple-root-nodes)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-duplicate-attr-inheritance.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-duplicate-attr-inheritance.js)
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 5658370fa..9ee2d2be6 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -3,22 +3,25 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/no-duplicate-attributes
description: disallow duplication of attributes
+since: v3.0.0
---
+
# vue/no-duplicate-attributes
+
> disallow duplication of attributes
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
-When duplicate arguments exist, only the last one is valid.
-It's possibly mistakes.
+When there are multiple attributes with the same name on a component, only the last one is used and the rest are ignored, so this is usually a mistake.
## :book: Rule Details
This rule reports duplicate attributes.
-`v-bind:foo` directives are handled as the attributes `foo`.
+`v-bind:foo` directives are handled as the attribute `foo`.
-```
+
+```vue
## :wrench: Options
@@ -49,21 +53,27 @@ This rule reports duplicate attributes.
- `allowCoexistClass` (`boolean`) ... Enables [`v-bind:class`] directive can coexist with the plain `class` attribute. Default is `true`.
- `allowCoexistStyle` (`boolean`) ... Enables [`v-bind:style`] directive can coexist with the plain `style` attribute. Default is `true`.
-[`v-bind:class`]: https://vuejs.org/v2/guide/class-and-style.html
-[`v-bind:style`]: https://vuejs.org/v2/guide/class-and-style.html
+[`v-bind:class`]: https://vuejs.org/guide/essentials/class-and-style.html
+[`v-bind:style`]: https://vuejs.org/guide/essentials/class-and-style.html
### `"allowCoexistClass": false, "allowCoexistStyle": false`
-```
+
+```vue
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.0.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-duplicate-attributes.js)
diff --git a/docs/rules/no-empty-component-block.md b/docs/rules/no-empty-component-block.md
new file mode 100644
index 000000000..344bd0cba
--- /dev/null
+++ b/docs/rules/no-empty-component-block.md
@@ -0,0 +1,76 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-empty-component-block
+description: disallow the `` `
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-empty-component-block.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-empty-component-block.js)
diff --git a/docs/rules/no-empty-pattern.md b/docs/rules/no-empty-pattern.md
new file mode 100644
index 000000000..6434a7bff
--- /dev/null
+++ b/docs/rules/no-empty-pattern.md
@@ -0,0 +1,30 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-empty-pattern
+description: Disallow empty destructuring patterns in ``
+since: v6.0.0
+---
+
+# vue/no-empty-pattern
+
+> Disallow empty destructuring patterns in ``
+
+This rule is the same rule as core [no-empty-pattern] rule but it applies to the expressions in ``.
+
+## :books: Further Reading
+
+- [no-empty-pattern]
+
+[no-empty-pattern]: https://eslint.org/docs/rules/no-empty-pattern
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-empty-pattern.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-empty-pattern.js)
+
+Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-empty-pattern)
diff --git a/docs/rules/no-export-in-script-setup.md b/docs/rules/no-export-in-script-setup.md
new file mode 100644
index 000000000..08166596b
--- /dev/null
+++ b/docs/rules/no-export-in-script-setup.md
@@ -0,0 +1,61 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-export-in-script-setup
+description: disallow `export` in `
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Vue RFCs - 0040-script-setup]
+
+[Vue RFCs - 0040-script-setup]: https://github.com/vuejs/rfcs/blob/master/active-rfcs/0040-script-setup.md
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.13.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-export-in-script-setup.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-export-in-script-setup.js)
diff --git a/docs/rules/no-expose-after-await.md b/docs/rules/no-expose-after-await.md
new file mode 100644
index 000000000..7f8fe9137
--- /dev/null
+++ b/docs/rules/no-expose-after-await.md
@@ -0,0 +1,73 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-expose-after-await
+description: disallow asynchronously registered `expose`
+since: v8.1.0
+---
+
+# vue/no-expose-after-await
+
+> disallow asynchronously registered `expose`
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports usages of `expose()` and `defineExpose()` after an `await` expression.
+In the `setup()` function, `expose()` should be registered synchronously.
+In the `
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Vue RFCs - 0042-expose-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0042-expose-api.md)
+- [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-expose-after-await.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-expose-after-await.js)
diff --git a/docs/rules/no-extra-parens.md b/docs/rules/no-extra-parens.md
new file mode 100644
index 000000000..442a965ba
--- /dev/null
+++ b/docs/rules/no-extra-parens.md
@@ -0,0 +1,61 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-extra-parens
+description: Disallow unnecessary parentheses in ``
+since: v7.0.0
+---
+
+# vue/no-extra-parens
+
+> Disallow unnecessary parentheses in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as [@stylistic/no-extra-parens] rule but it applies to the expressions in ``.
+
+This rule extends the rule that [@stylistic/eslint-plugin] has, but if [@stylistic/eslint-plugin] is not installed, this rule extracts and extends the same rule from ESLint core.
+However, if neither is found, the rule cannot be used.
+
+[@stylistic/eslint-plugin]: https://eslint.style/packages/default
+
+## :book: Rule Details
+
+This rule restricts the use of parentheses to only where they are necessary.
+This rule extends the [@stylistic/no-extra-parens] rule and applies it to the ``. This rule also checks some Vue.js syntax.
+
+
+
+```vue
+
+
+
+ {{ foo + bar }}
+ {{ foo + bar | filter }}
+
+
+ {{ (foo + bar) }}
+ {{ (foo + bar) | filter }}
+
+```
+
+
+
+## :books: Further Reading
+
+- [@stylistic/no-extra-parens]
+- [no-extra-parens]
+
+[@stylistic/no-extra-parens]: https://eslint.style/rules/default/no-extra-parens
+[no-extra-parens]: https://eslint.org/docs/rules/no-extra-parens
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-extra-parens.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-extra-parens.js)
+
+Taken with ❤️ [from ESLint Stylistic](https://eslint.style/rules/ts/no-extra-parens)
diff --git a/docs/rules/no-implicit-coercion.md b/docs/rules/no-implicit-coercion.md
new file mode 100644
index 000000000..22698320c
--- /dev/null
+++ b/docs/rules/no-implicit-coercion.md
@@ -0,0 +1,32 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-implicit-coercion
+description: Disallow shorthand type conversions in ``
+since: v9.33.0
+---
+
+# vue/no-implicit-coercion
+
+> Disallow shorthand type conversions in ``
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+This rule is the same rule as core [no-implicit-coercion] rule but it applies to the expressions in ``.
+
+## :books: Further Reading
+
+- [no-implicit-coercion]
+
+[no-implicit-coercion]: https://eslint.org/docs/rules/no-implicit-coercion
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.33.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-implicit-coercion.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-implicit-coercion.js)
+
+Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-implicit-coercion)
diff --git a/docs/rules/no-import-compiler-macros.md b/docs/rules/no-import-compiler-macros.md
new file mode 100644
index 000000000..7ceadb336
--- /dev/null
+++ b/docs/rules/no-import-compiler-macros.md
@@ -0,0 +1,58 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-import-compiler-macros
+description: disallow importing Vue compiler macros
+since: v10.0.0
+---
+
+# vue/no-import-compiler-macros
+
+> disallow importing Vue compiler macros
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule disallow importing vue compiler macros.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [defineProps() & defineEmits()]
+
+[defineProps() & defineEmits()]: https://vuejs.org/api/sfc-script-setup.html#defineprops-defineemits
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v10.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-import-compiler-macros.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-import-compiler-macros.js)
diff --git a/docs/rules/no-invalid-model-keys.md b/docs/rules/no-invalid-model-keys.md
new file mode 100644
index 000000000..e93c79db4
--- /dev/null
+++ b/docs/rules/no-invalid-model-keys.md
@@ -0,0 +1,121 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-invalid-model-keys
+description: require valid keys in model option
+since: v7.9.0
+---
+
+# vue/no-invalid-model-keys
+
+> require valid keys in model option
+
+- :no_entry: This rule was **removed** in eslint-plugin-vue v10.0.0 and replaced by [vue/valid-model-definition](valid-model-definition.md) rule.
+
+## :book: Rule Details
+
+This rule is aimed at preventing invalid keys in model option.
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.9.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-invalid-model-keys.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-invalid-model-keys.js)
diff --git a/docs/rules/no-irregular-whitespace.md b/docs/rules/no-irregular-whitespace.md
new file mode 100644
index 000000000..615f2294a
--- /dev/null
+++ b/docs/rules/no-irregular-whitespace.md
@@ -0,0 +1,178 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-irregular-whitespace
+description: disallow irregular whitespace in `.vue` files
+since: v6.1.0
+---
+
+# vue/no-irregular-whitespace
+
+> disallow irregular whitespace in `.vue` files
+
+## :book: Rule Details
+
+`vue/no-irregular-whitespace` rule is aimed at catching invalid whitespace that is not a normal tab and space. Some of these characters may cause issues in modern browsers and others will be a debugging issue to spot.
+`vue/no-irregular-whitespace` rule is the similar rule as core [no-irregular-whitespace] rule but it applies to the source code in .vue.
+
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+```js
+{
+ "vue/no-irregular-whitespace": ["error", {
+ "skipStrings": true,
+ "skipComments": false,
+ "skipRegExps": false,
+ "skipTemplates": false,
+ "skipHTMLAttributeValues": false,
+ "skipHTMLTextContents": false
+ }]
+}
+```
+
+- `skipStrings`: if `true`, allows any whitespace characters in string literals. default `true`
+- `skipComments`: if `true`, allows any whitespace characters in comments. default `false`
+- `skipRegExps`: if `true`, allows any whitespace characters in regular expression literals. default `false`
+- `skipTemplates`: if `true`, allows any whitespace characters in template literals. default `false`
+- `skipHTMLAttributeValues`: if `true`, allows any whitespace characters in HTML attribute values. default `false`
+- `skipHTMLTextContents`: if `true`, allows any whitespace characters in HTML text contents. default `false`
+
+### `"skipStrings": true` (default)
+
+
+
+```vue
+
+```
+
+
+
+### `"skipStrings": false`
+
+
+
+```vue
+
+```
+
+
+
+### `"skipComments": true`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+### `"skipRegExps": true`
+
+
+
+```vue
+
+```
+
+
+
+### `"skipTemplates": true`
+
+
+
+```vue
+
+```
+
+
+
+### `"skipHTMLAttributeValues": true`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+### `"skipHTMLTextContents": true`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+## :books: Further Reading
+
+- [no-irregular-whitespace]
+
+[no-irregular-whitespace]: https://eslint.org/docs/rules/no-irregular-whitespace
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-irregular-whitespace.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-irregular-whitespace.js)
+
+Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/no-irregular-whitespace)
diff --git a/docs/rules/no-lifecycle-after-await.md b/docs/rules/no-lifecycle-after-await.md
new file mode 100644
index 000000000..78d54c526
--- /dev/null
+++ b/docs/rules/no-lifecycle-after-await.md
@@ -0,0 +1,57 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-lifecycle-after-await
+description: disallow asynchronously registered lifecycle hooks
+since: v7.0.0
+---
+
+# vue/no-lifecycle-after-await
+
+> disallow asynchronously registered lifecycle hooks
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]`.
+
+## :book: Rule Details
+
+This rule reports the lifecycle hooks after `await` expression.
+In `setup()` function, `onXXX` lifecycle hooks should be registered synchronously.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [Guide - Composition API - Lifecycle Hooks](https://vuejs.org/api/composition-api-lifecycle.html)
+- [Vue RFCs - 0013-composition-api](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0013-composition-api.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-lifecycle-after-await.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-lifecycle-after-await.js)
diff --git a/docs/rules/no-lone-template.md b/docs/rules/no-lone-template.md
new file mode 100644
index 000000000..170b63ce3
--- /dev/null
+++ b/docs/rules/no-lone-template.md
@@ -0,0 +1,89 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-lone-template
+description: disallow unnecessary ``
+since: v7.0.0
+---
+
+# vue/no-lone-template
+
+> disallow unnecessary ``
+
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule aims to eliminate unnecessary and potentially confusing ``.
+In Vue.js 2.x, the `` elements that have no specific directives have no effect.
+In Vue.js 3.x, the `` elements that have no specific directives render the `` elements as is, but in most cases this may not be what you intended.
+
+
+
+```vue
+
+
+ ...
+ ...
+ ...
+ ...
+ ...
+
+
+ ...
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-lone-template": ["error", {
+ "ignoreAccessible": false
+ }]
+}
+```
+
+- `ignoreAccessible` ... If `true`, ignore accessible `` elements. default `false`.
+ Note: this option is useless if you are using Vue.js 2.x.
+
+### `"ignoreAccessible": true`
+
+
+
+```vue
+
+
+ ...
+ ...
+
+
+ ...
+
+```
+
+
+
+## :mute: When Not To Use It
+
+If you are using Vue.js 3.x and want to define the `` element intentionally, you will have to turn this rule off or use `"ignoreAccessible"` option.
+
+## :couple: Related Rules
+
+- [vue/no-template-key]
+- [no-lone-blocks]
+
+[no-lone-blocks]: https://eslint.org/docs/rules/no-lone-blocks
+[vue/no-template-key]: ./no-template-key.md
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-lone-template.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-lone-template.js)
diff --git a/docs/rules/no-loss-of-precision.md b/docs/rules/no-loss-of-precision.md
new file mode 100644
index 000000000..c9b88ce63
--- /dev/null
+++ b/docs/rules/no-loss-of-precision.md
@@ -0,0 +1,34 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-loss-of-precision
+description: Disallow literal numbers that lose precision in ``
+since: v8.0.0
+---
+
+# vue/no-loss-of-precision
+
+> Disallow literal numbers that lose precision in ``
+
+This rule is the same rule as core [no-loss-of-precision] rule but it applies to the expressions in ``.
+
+:::warning
+You must be using ESLint v7.1.0 or later to use this rule.
+:::
+
+## :books: Further Reading
+
+- [no-loss-of-precision]
+
+[no-loss-of-precision]: https://eslint.org/docs/rules/no-loss-of-precision
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-loss-of-precision.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-loss-of-precision.js)
+
+Taken with ❤️ [from ESLint core](https://eslint.org/docs/latest/rules/no-loss-of-precision)
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index bc21e0a63..66c6a81d7 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -3,19 +3,23 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/no-multi-spaces
description: disallow multiple spaces
+since: v3.12.0
---
+
# vue/no-multi-spaces
+
> disallow multiple spaces
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule aims at removing multiple spaces in tags, which are not used for indentation.
-```
+
+```vue
```
+
## :wrench: Options
@@ -56,6 +61,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
### `"ignoreProperties": true`
+
```vue
@@ -67,8 +73,13 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
/>
```
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.12.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-multi-spaces.js)
diff --git a/docs/rules/no-multiple-objects-in-class.md b/docs/rules/no-multiple-objects-in-class.md
new file mode 100644
index 000000000..13f1f591b
--- /dev/null
+++ b/docs/rules/no-multiple-objects-in-class.md
@@ -0,0 +1,44 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-multiple-objects-in-class
+description: disallow passing multiple objects in an array to class
+since: v7.0.0
+---
+
+# vue/no-multiple-objects-in-class
+
+> disallow passing multiple objects in an array to class
+
+## :book: Rule Details
+
+This rule disallows to pass multiple objects into array to class.
+
+
+
+```vue
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-multiple-objects-in-class.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-multiple-objects-in-class.js)
diff --git a/docs/rules/no-multiple-slot-args.md b/docs/rules/no-multiple-slot-args.md
new file mode 100644
index 000000000..74d6c2931
--- /dev/null
+++ b/docs/rules/no-multiple-slot-args.md
@@ -0,0 +1,56 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-multiple-slot-args
+description: disallow passing multiple arguments to scoped slots
+since: v7.0.0
+---
+
+# vue/no-multiple-slot-args
+
+> disallow passing multiple arguments to scoped slots
+
+- :gear: This rule is included in all of `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule disallows to pass multiple arguments to scoped slots.
+In details, it reports call expressions if a call of `this.$scopedSlots` members has 2 or more arguments.
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+Nothing.
+
+## :books: Further Reading
+
+- [vuejs/vue#9468](https://github.com/vuejs/vue/issues/9468#issuecomment-462210146)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-multiple-slot-args.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-multiple-slot-args.js)
diff --git a/docs/rules/no-multiple-template-root.md b/docs/rules/no-multiple-template-root.md
new file mode 100644
index 000000000..8a85c9201
--- /dev/null
+++ b/docs/rules/no-multiple-template-root.md
@@ -0,0 +1,98 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-multiple-template-root
+description: disallow adding multiple root nodes to the template
+since: v7.0.0
+---
+
+# vue/no-multiple-template-root
+
+> disallow adding multiple root nodes to the template
+
+- :gear: This rule is included in all of `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule checks whether template contains single root element valid for Vue 2.
+
+
+
+```vue
+
+Lorem ipsum
+```
+
+
+
+
+
+```vue
+
+
+
+
+
+
+```vue
+
+
+
+
+```
+
+
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-multiple-template-root": ["error", {
+ "disallowComments": false
+ }]
+}
+```
+
+- "disallowComments" (`boolean`) Enables there should not be any comments in the template root. Default is `false`.
+
+### "disallowComments": true
+
+
+
+```vue
+/* ✗ BAD */
+
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-multiple-template-root.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-multiple-template-root.js)
diff --git a/docs/rules/no-mutating-props.md b/docs/rules/no-mutating-props.md
new file mode 100644
index 000000000..3ddee4cc2
--- /dev/null
+++ b/docs/rules/no-mutating-props.md
@@ -0,0 +1,176 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/no-mutating-props
+description: disallow mutation of component props
+since: v7.0.0
+---
+
+# vue/no-mutating-props
+
+> disallow mutation of component props
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule reports mutation of component props.
+
+
+
+```vue
+
+
+
+
+
+
+```vue
+
+
+
+
+
+
+```vue
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/no-mutating-props": ["error", {
+ "shallowOnly": false
+ }]
+}
+```
+
+- "shallowOnly" (`boolean`) Enables mutating the value of a prop but leaving the reference the same. Default is `false`.
+
+### "shallowOnly": true
+
+
+
+```vue
+
+
+
+
+## :books: Further Reading
+
+- [Style guide - Implicit parent-child communication](https://vuejs.org/style-guide/rules-use-with-caution.html#implicit-parent-child-communication)
+- [Vue - Prop Mutation - deprecated](https://v2.vuejs.org/v2/guide/migration.html#Prop-Mutation-deprecated)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.0.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-mutating-props.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-mutating-props.js)
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index b9dd2ee4a..a6fcf2908 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -3,21 +3,24 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/no-parsing-error
description: disallow parsing errors in ``
+since: v3.0.0
---
+
# vue/no-parsing-error
+
> disallow parsing errors in ``
-- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
This rule reports syntax errors in ``. For example:
- Syntax errors of scripts in directives.
- Syntax errors of scripts in mustaches.
- Syntax errors of HTML.
- - Invalid end tags.
- - Attributes in end tags.
- - ...
- - See also: [WHATWG HTML spec](https://html.spec.whatwg.org/multipage/parsing.html#parse-errors)
+ - Invalid end tags.
+ - Attributes in end tags.
+ - ...
+ - See also: [WHATWG HTML spec](https://html.spec.whatwg.org/multipage/parsing.html#parse-errors)
## :book: Rule Details
@@ -25,7 +28,8 @@ This rule tries to parse directives/mustaches in `` by the parser whic
Then reports syntax errors if exist.
-```
+
+```vue
{{ . }}
@@ -35,6 +39,7 @@ Then reports syntax errors if exist.
```
+
`. The default s
/>
```
+
### `2, {"baseIndent": 0}`
-```
+
+```vue
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v3.14.0
+
## :mag: Implementation
- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-indent.js)
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index 5aca1d22d..2bbf38c3d 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -3,12 +3,15 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/html-quotes
description: enforce quotes style of HTML attributes
+since: v3.0.0
---
+
# vue/html-quotes
+
> enforce quotes style of HTML attributes
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
You can choose quotes of HTML attributes from:
@@ -23,7 +26,8 @@ This rule enforces the quotes style of HTML attributes.
This rule reports the quotes of attributes if it is different to configured quotes.
-```
+
+```vue
@@ -33,6 +37,7 @@ This rule reports the quotes of attributes if it is different to configured quot
```
+
## :wrench: Options
@@ -41,17 +46,24 @@ Default is set to `double`.
```json
{
- "vue/html-quotes": ["error", "double" | "single"]
+ "vue/html-quotes": [ "error", "double" | "single", { "avoidEscape": false } ]
}
```
+String option:
+
- `"double"` (default) ... requires double quotes.
- `"single"` ... requires single quotes.
+Object option:
+
+- `avoidEscape` ... If `true`, allows strings to use single-quotes or double-quotes so long as the string contains a quote that would have to be escaped otherwise.
+
### `"single"`
-```
+
+```vue
@@ -61,11 +73,33 @@ Default is set to `double`.
```
+
+
+
+### `"double", { "avoidEscape": true }`
+
+
+
+```vue
+
+
+ ![]( "a string containing \"double\" quotes")
+
+
+ ![]( "foo")
+ ![]( "bar")
+
+```
+
-## Related links
+## :books: Further Reading
+
+- [Style guide - Quoted attribute values](https://vuejs.org/style-guide/rules-strongly-recommended.html#quoted-attribute-values)
+
+## :rocket: Version
-- [Style guide - Quoted attribute values](https://vuejs.org/v2/style-guide/#Quoted-attribute-values-strongly-recommended)
+This rule was introduced in eslint-plugin-vue v3.0.0
## :mag: Implementation
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index bf818a016..316f462c8 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -3,12 +3,15 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/html-self-closing
description: enforce self-closing style
+since: v3.11.0
---
+
# vue/html-self-closing
+
> enforce self-closing style
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
@@ -22,7 +25,8 @@ In Vue.js template, we can use either two styles for elements which don't have t
Self-closing is simple and shorter, but it's not supported in the HTML spec.
-```
+
+```vue
@@ -37,6 +41,7 @@ Self-closing is simple and shorter, but it's not supported in the HTML spec.
```
+
## :wrench: Options
@@ -70,7 +75,8 @@ Every option can be set to one of the following values:
### `html: {normal: "never", void: "always"}`
-```
+
+```vue
@@ -85,11 +91,16 @@ Every option can be set to one of the following values:
```
+
-## :books: Further reading
+## :books: Further Reading
+
+- [Style guide - Self closing components](https://vuejs.org/style-guide/rules-strongly-recommended.html#self-closing-components)
+
+## :rocket: Version
-- [Style guide - Self closing components](https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended)
+This rule was introduced in eslint-plugin-vue v3.11.0
## :mag: Implementation
diff --git a/docs/rules/index.md b/docs/rules/index.md
new file mode 100644
index 000000000..149f877ad
--- /dev/null
+++ b/docs/rules/index.md
@@ -0,0 +1,647 @@
+---
+sidebarDepth: 0
+pageClass: rule-list
+---
+
+# Available rules
+
+
+
+::: tip Legend
+ :wrench: Indicates that the rule is fixable, and using `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the reported problems.
+
+ :bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+:::
+
+Mark indicating rule type:
+
+- :warning: Possible Problems: These rules relate to possible logic errors in code.
+- :hammer: Suggestions: These rules suggest alternate ways of doing things.
+- :lipstick: Layout & Formatting: These rules care about how the code looks rather than how it executes.
+
+## Base Rules (Enabling Correct ESLint Parsing)
+
+Rules in this category are enabled for all presets provided by eslint-plugin-vue.
+
+
+
+| Rule ID | Description | | |
+|:--------|:------------|:--:|:--:|
+| [vue/comment-directive] | support comment-directives in `` | | :warning: |
+| [vue/jsx-uses-vars] | prevent variables used in JSX to be marked as unused | | :warning: |
+
+
+
+## Priority A: Essential (Error Prevention)
+
+- :three: Indicates that the rule is for Vue 3 and is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/recommended"` and `*.configs["flat/recommended"]` presets.
+- :two: Indicates that the rule is for Vue 2 and is included in all of `"plugin:vue/vue2-essential"`,`*.configs["flat/vue2-essential"]`, `"plugin:vue/vue2-strongly-recommended"`,`*.configs["flat/vue2-strongly-recommended"]` and `"plugin:vue/vue2-recommended"`,`*.configs["flat/vue2-recommended"]` presets.
+
+
+
+| Rule ID | Description | | |
+|:--------|:------------|:--:|:--:|
+| [vue/multi-word-component-names] | require component names to be always multi-word | | :three::two::hammer: |
+| [vue/no-arrow-functions-in-watch] | disallow using arrow functions to define watcher | | :three::two::warning: |
+| [vue/no-async-in-computed-properties] | disallow asynchronous actions in computed properties | | :three::two::warning: |
+| [vue/no-child-content] | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: | :three::two::warning: |
+| [vue/no-computed-properties-in-data] | disallow accessing computed properties in `data` | | :three::two::warning: |
+| [vue/no-custom-modifiers-on-v-model] | disallow custom modifiers on v-model used on the component | | :two::warning: |
+| [vue/no-deprecated-data-object-declaration] | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-delete-set] | disallow using deprecated `$delete` and `$set` (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-destroyed-lifecycle] | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-dollar-listeners-api] | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-dollar-scopedslots-api] | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-events-api] | disallow using deprecated events api (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-filter] | disallow using deprecated filters syntax (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-functional-template] | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-html-element-is] | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-inline-template] | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-model-definition] | disallow deprecated `model` definition (in Vue.js 3.0.0+) | :bulb: | :three::warning: |
+| [vue/no-deprecated-props-default-this] | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-router-link-tag-prop] | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-scope-attribute] | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-slot-attribute] | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-slot-scope-attribute] | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-v-bind-sync] | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-v-is] | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) | | :three::hammer: |
+| [vue/no-deprecated-v-on-native-modifier] | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-deprecated-v-on-number-modifiers] | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-vue-config-keycodes] | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) | | :three::warning: |
+| [vue/no-dupe-keys] | disallow duplication of field names | | :three::two::warning: |
+| [vue/no-dupe-v-else-if] | disallow duplicate conditions in `v-if` / `v-else-if` chains | | :three::two::warning: |
+| [vue/no-duplicate-attributes] | disallow duplication of attributes | | :three::two::warning: |
+| [vue/no-export-in-script-setup] | disallow `export` in `
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/match-component-file-name": ["error", {
+ "extensions": ["jsx"],
+ "shouldMatchCase": false
+ }]
+}
+```
+
+- `"extensions": []` ... array of file extensions to be verified. Default is set to `["jsx"]`.
+- `"shouldMatchCase": false` ... boolean indicating if component's name
+ should also match its file name case. Default is set to `false`.
+
+### `{extensions: ["vue"]}`
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+### `{extensions: ["js"]}`
+
+
+
+```js
+// file name: src/MyComponent.js
+new Vue({
+ /* ✓ GOOD */
+ name: 'MyComponent',
+ template: ''
+})
+```
+
+
+
+
+
+```js
+// file name: src/MyComponent.js
+/* ✓ GOOD */
+Vue.component('MyComponent', {
+ template: ''
+})
+```
+
+
+
+
+
+```js
+// file name: src/MyComponent.js
+new Vue({
+ /* ✗ BAD */
+ name: 'MComponent',
+ template: ''
+})
+```
+
+
+
+
+
+```js
+// file name: src/MyComponent.js
+/* ✗ BAD */
+Vue.component('MComponent', {
+ template: ''
+})
+```
+
+
+
+
+
+```js
+// file name: src/components.js
+/* defines multiple components, so this rule is ignored */
+Vue.component('MyComponent', {
+ template: ''
+})
+
+Vue.component('OtherComponent', {
+ template: ''
+})
+
+new Vue({
+ name: 'ThirdComponent',
+ template: ''
+})
+```
+
+
+
+
+
+```js
+// file name: src/MyComponent.js
+/* no name property defined */
+new Vue({
+ template: ''
+})
+```
+
+
+
+### `{shouldMatchCase: true}`
+
+
+
+```jsx
+// file name: src/MyComponent.jsx
+export default {
+ /* ✓ GOOD */
+ name: 'MyComponent',
+ render() { return }
+}
+```
+
+
+
+
+
+```jsx
+// file name: src/my-component.jsx
+export default {
+ /* ✓ GOOD */
+ name: 'my-component',
+ render() { return }
+}
+```
+
+
+
+
+
+```jsx
+// file name: src/MyComponent.jsx
+export default {
+ /* ✗ BAD */
+ name: 'my-component',
+ render() { return }
+}
+```
+
+
+
+
+
+```jsx
+// file name: src/my-component.jsx
+export default {
+ /* ✗ BAD */
+ name: 'MyComponent',
+ render() { return }
+}
+```
+
+
+
+## :books: Further Reading
+
+- [Style guide - Single-file component filename casing](https://vuejs.org/style-guide/rules-strongly-recommended.html#single-file-component-filename-casing)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v5.2.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/match-component-file-name.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/match-component-file-name.js)
diff --git a/docs/rules/match-component-import-name.md b/docs/rules/match-component-import-name.md
new file mode 100644
index 000000000..522b90a02
--- /dev/null
+++ b/docs/rules/match-component-import-name.md
@@ -0,0 +1,49 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/match-component-import-name
+description: require the registered component name to match the imported component name
+since: v8.7.0
+---
+
+# vue/match-component-import-name
+
+> require the registered component name to match the imported component name
+
+## :book: Rule Details
+
+By default, this rule will validate that the imported name matches the name of the components object property identifer. Note that "matches" means that the imported name matches either the PascalCase or kebab-case version of the components object property identifer. If you would like to enforce that it must match only one of PascalCase or kebab-case, use this rule in conjunction with the rule [vue/component-definition-name-casing](./component-definition-name-casing.md).
+
+
+
+```vue
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/component-definition-name-casing](./component-definition-name-casing.md)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v8.7.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/match-component-import-name.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/match-component-import-name.js)
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index d7c3e2d55..141b136e0 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -3,12 +3,15 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/max-attributes-per-line
description: enforce the maximum number of attributes per line
+since: v3.12.0
---
+
# vue/max-attributes-per-line
+
> enforce the maximum number of attributes per line
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
Limits the maximum number of attributes/properties per line to improve readability.
@@ -21,7 +24,8 @@ An attribute is considered to be in a new line when there is a line break betwee
There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 1).
-```
+
+```vue
## :wrench: Options
@@ -53,23 +58,24 @@ There is a configurable number of attributes that are acceptable in one-line cas
```json
{
"vue/max-attributes-per-line": ["error", {
- "singleline": 1,
+ "singleline": {
+ "max": 1
+ },
"multiline": {
- "max": 1,
- "allowFirstLine": false
+ "max": 1
}
}]
}
```
-- `singleline` (`number`) ... The number of maximum attributes per line when the opening tag is in a single line. Default is `1`.
-- `multiline.max` (`number`) ... The max number of attributes per line when the opening tag is in multiple lines. Default is `1`. This can be `{ multiline: 1 }` instead of `{ multiline: { max: 1 }}` if you don't configure `allowFirstLine` property.
-- `multiline.allowFirstLine` (`boolean`) ... If `true`, it allows attributes on the same line as that tag name. Default is `false`.
+- `singleline.max` (`number`) ... The number of maximum attributes per line when the opening tag is in a single line. Default is `1`. This can be `{ singleline: 1 }` instead of `{ singleline: { max: 1 }}`.
+- `multiline.max` (`number`) ... The max number of attributes per line when the opening tag is in multiple lines. Default is `1`. This can be `{ multiline: 1 }` instead of `{ multiline: { max: 1 }}`.
### `"singleline": 3`
-```
+
+```vue
### `"multiline": 2`
-```
+
+```vue
-### `"multiline": 1, "allowFirstLine": true`
+## :couple: Related Rules
-
-```
-
-
-
+- [vue/first-attribute-linebreak](./first-attribute-linebreak.md)
+
+## :books: Further Reading
+
+- [Style guide - Multi attribute elements](https://vuejs.org/style-guide/rules-strongly-recommended.html#multi-attribute-elements)
-## :books: Further reading
+## :rocket: Version
-- [Style guide - Multi attribute elements](https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended)
+This rule was introduced in eslint-plugin-vue v3.12.0
## :mag: Implementation
diff --git a/docs/rules/max-len.md b/docs/rules/max-len.md
new file mode 100644
index 000000000..0816000ee
--- /dev/null
+++ b/docs/rules/max-len.md
@@ -0,0 +1,337 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/max-len
+description: enforce a maximum line length in `.vue` files
+since: v6.1.0
+---
+
+# vue/max-len
+
+> enforce a maximum line length in `.vue` files
+
+## :book: Rule Details
+
+This rule enforces a maximum line length to increase code readability and maintainability.
+This rule is the similar rule as core [max-len] rule but it applies to the source code in `.vue`.
+
+
+
+```vue
+
+
+
+
+## :wrench: Options
+
+```js
+{
+ "vue/max-len": ["error", {
+ "code": 80,
+ "template": 80,
+ "tabWidth": 2,
+ "comments": 80,
+ "ignorePattern": "",
+ "ignoreComments": false,
+ "ignoreTrailingComments": false,
+ "ignoreUrls": false,
+ "ignoreStrings": false,
+ "ignoreTemplateLiterals": false,
+ "ignoreRegExpLiterals": false,
+ "ignoreHTMLAttributeValues": false,
+ "ignoreHTMLTextContents": false,
+ }]
+}
+```
+
+- `code` ... enforces a maximum line length. default `80`
+- `template` ... enforces a maximum line length for ``. defaults to value of `code`
+- `tabWidth` ... specifies the character width for tab characters. default `2`
+- `comments` ... enforces a maximum line length for comments. defaults to value of `code`
+- `ignorePattern` ... ignores lines matching a regular expression. can only match a single line and need to be double escaped when written in YAML or JSON
+- `ignoreComments` ... if `true`, ignores all trailing comments and comments on their own line. default `false`
+- `ignoreTrailingComments` ... if `true`, ignores only trailing comments. default `false`
+- `ignoreUrls` ... if `true`, ignores lines that contain a URL. default `false`
+- `ignoreStrings` ... if `true`, ignores lines that contain a double-quoted or single-quoted string. default `false`
+- `ignoreTemplateLiterals` ... if `true`, ignores lines that contain a template literal. default `false`
+- `ignoreRegExpLiterals` ... if `true`, ignores lines that contain a RegExp literal. default `false`
+- `ignoreHTMLAttributeValues` ... if `true`, ignores lines that contain a HTML attribute value. default `false`
+- `ignoreHTMLTextContents` ... if `true`, ignores lines that contain a HTML text content. default `false`
+
+### `"code": 40`
+
+
+
+```vue
+
+
+
+
+### `"template": 120`
+
+
+
+```vue
+
+
+
+
+### `"comments": 65`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `"ignoreComments": true`
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+### `"ignoreTrailingComments": true`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+```
+
+
+
+### `"ignoreUrls": true`
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+### `"ignoreStrings": true`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+### `"ignoreTemplateLiterals": true`
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+### `"ignoreRegExpLiterals": true`
+
+
+
+```vue
+
+
+
+
+
+
+```
+
+
+
+### `"ignoreHTMLAttributeValues": true`
+
+
+
+```vue
+
+
+
+
+
+
+
+```
+
+
+
+### `"ignoreHTMLTextContents": true`
+
+
+
+```vue
+
+
+
+
+## :books: Further Reading
+
+- [max-len]
+
+[max-len]: https://eslint.org/docs/rules/max-len
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v6.1.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-len.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-len.js)
+
+Taken with ❤️ [from ESLint core](https://eslint.org/docs/rules/max-len)
diff --git a/docs/rules/max-lines-per-block.md b/docs/rules/max-lines-per-block.md
new file mode 100644
index 000000000..a65be3bb9
--- /dev/null
+++ b/docs/rules/max-lines-per-block.md
@@ -0,0 +1,63 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/max-lines-per-block
+description: enforce maximum number of lines in Vue SFC blocks
+since: v9.15.0
+---
+
+# vue/max-lines-per-block
+
+> enforce maximum number of lines in Vue SFC blocks
+
+## :book: Rule Details
+
+This rule enforces a maximum number of lines per block, in order to aid in maintainability and reduce complexity.
+
+## :wrench: Options
+
+This rule takes an object, where you can specify the maximum number of lines in each type of SFC block and customize the line counting behavior.
+The following properties can be specified for the object.
+
+- `script` ... Specify the maximum number of lines in `
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.15.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-lines-per-block.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-lines-per-block.js)
diff --git a/docs/rules/max-props.md b/docs/rules/max-props.md
new file mode 100644
index 000000000..918c67294
--- /dev/null
+++ b/docs/rules/max-props.md
@@ -0,0 +1,65 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/max-props
+description: enforce maximum number of props in Vue component
+since: v9.28.0
+---
+
+# vue/max-props
+
+> enforce maximum number of props in Vue component
+
+## :book: Rule Details
+
+This rule enforces a maximum number of props in a Vue SFC, in order to aid in maintainability and reduce complexity.
+
+## :wrench: Options
+
+This rule takes an object, where you can specify the maximum number of props allowed in a Vue SFC.
+There is one property that can be specified for the object.
+
+- `maxProps` ... Specify the maximum number of props in the `script` block.
+
+### `{ maxProps: 1 }`
+
+
+
+```vue
+
+
+
+
+
+```
+
+
+
+### `{ maxProps: 5 }`
+
+
+
+```vue
+
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.28.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-props.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-props.js)
diff --git a/docs/rules/max-template-depth.md b/docs/rules/max-template-depth.md
new file mode 100644
index 000000000..42ee4da88
--- /dev/null
+++ b/docs/rules/max-template-depth.md
@@ -0,0 +1,70 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/max-template-depth
+description: enforce maximum depth of template
+since: v9.28.0
+---
+
+# vue/max-template-depth
+
+> enforce maximum depth of template
+
+## :book: Rule Details
+
+This rule enforces a maximum depth of the template in a Vue SFC, in order to aid in maintainability and reduce complexity.
+
+## :wrench: Options
+
+This rule takes an object, where you can specify the maximum depth allowed in a Vue SFC template block.
+There is one property that can be specified for the object.
+
+- `maxDepth` ... Specify the maximum template depth `template` block.
+
+### `{ maxDepth: 3 }`
+
+
+
+```vue
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+```vue
+
+
+
+
+
+
+
+
+```
+
+
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v9.28.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-template-depth.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-template-depth.js)
diff --git a/docs/rules/multi-word-component-names.md b/docs/rules/multi-word-component-names.md
new file mode 100644
index 000000000..08539dddb
--- /dev/null
+++ b/docs/rules/multi-word-component-names.md
@@ -0,0 +1,188 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/multi-word-component-names
+description: require component names to be always multi-word
+since: v7.20.0
+---
+
+# vue/multi-word-component-names
+
+> require component names to be always multi-word
+
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `*.configs["flat/essential"]`, `"plugin:vue/vue2-essential"`, `*.configs["flat/vue2-essential"]`, `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+
+## :book: Rule Details
+
+This rule require component names to be always multi-word, except for root `App`
+components, and built-in components provided by Vue, such as `` or
+``. This prevents conflicts with existing and future HTML elements,
+since all HTML elements are single words.
+
+
+
+```js
+/* ✓ GOOD */
+Vue.component('todo-item', {
+ // ...
+})
+
+/* ✗ BAD */
+Vue.component('Todo', {
+ // ...
+})
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+
+```
+
+
+
+
+
+```vue
+
+
+
+```
+
+
+
+
+
+```vue
+
+
+
+```
+
+
+
+
+
+```vue
+
+
+
+
+```
+
+
+
+## :wrench: Options
+
+```json
+{
+ "vue/multi-word-component-names": ["error", {
+ "ignores": []
+ }]
+}
+```
+
+- `ignores` (`string[]`) ... The component names to ignore. Sets the component name to allow.
+
+### `ignores: ["Todo"]`
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+```
+
+
+
+
+
+```vue
+
+
+
+```
+
+
+
+## :couple: Related Rules
+
+- [vue/no-reserved-component-names](./no-reserved-component-names.md)
+
+## :books: Further Reading
+
+- [Style guide - Multi-word component names](https://vuejs.org/style-guide/rules-essential.html#use-multi-word-component-names)
+
+## :rocket: Version
+
+This rule was introduced in eslint-plugin-vue v7.20.0
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/multi-word-component-names.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/multi-word-component-names.js)
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 1e9357a78..bf654aafe 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -3,18 +3,22 @@ pageClass: rule-details
sidebarDepth: 0
title: vue/multiline-html-element-content-newline
description: require a line break before and after the contents of a multiline element
+since: v5.0.0
---
+
# vue/multiline-html-element-content-newline
+
> require a line break before and after the contents of a multiline element
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
-- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+- :gear: This rule is included in all of `"plugin:vue/strongly-recommended"`, `*.configs["flat/strongly-recommended"]`, `"plugin:vue/vue2-strongly-recommended"`, `*.configs["flat/vue2-strongly-recommended"]`, `"plugin:vue/recommended"`, `*.configs["flat/recommended"]`, `"plugin:vue/vue2-recommended"` and `*.configs["flat/vue2-recommended"]`.
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fix-problems) can automatically fix some of the problems reported by this rule.
## :book: Rule Details
This rule enforces a line break before and after the contents of a multiline element.
+
```vue
@@ -68,27 +72,36 @@ This rule enforces a line break before and after the contents of a multiline ele
>
```
+
@@ -172,8 +190,13 @@ This rule enforces a consistent indentation style in ``. The default s
```
+
@@ -33,6 +37,7 @@ This rule reports the quotes of attributes if it is different to configured quot
```
+
@@ -61,11 +73,33 @@ Default is set to `double`.
```
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit,
+ sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+
+
+
+
+```
+
+line length is 40 ........
+
+
+ line length is 50 ..................
+
+
+
+```
+
+line length is 120 .......................................................................................
+
+
+ line length is 121 ........................................................................................
+
+
+
+```
+
+this is a really really really really really really really long text content!
+
+
+
+```
+
+this is a really really really really really really really long text content!
+
+```
+
+
+
+
+
+ content
+
+
+
+ content
+
+
+
+
+ content
+ content
+
+```
+
+{{ text }}
@@ -25,6 +29,7 @@ This rule aims at enforcing unified spacing in mustache interpolations.
{{text}}
```
+
{{text}}
@@ -51,8 +57,13 @@ This rule aims at enforcing unified spacing in mustache interpolations.
{{ text }}
```
+
{{ $t('foo.bar') }}
+{{ foo }}
+ + + +Lorem ipsum
+ +{{ 'Lorem ipsum' }}
+ + +``` + +child content
+
+
+
+ child content
+
+```
+
+
+
+ These are compiled as the component's own template.
+Not parent's transclusion content.
+Home
+ Home
+
+
+
+
+
+
+
+
+```
+
+hello
+ hello
+
+```
+
+
+ vue eslint plugin
+
+
+
+```
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+
+```
+
+
+
+
+
+
+
+```
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+```
+
+
+
+
+ ` + +`{ blankLine: 'always', prev: 'br', next: '*' }` + +
+
+
+```
+
+-
+
- + +
- + +
+ +
` and `
+
+
+```
+
+-
+
- + +
- + +
+ +
+
+
+```
+
+-
+
+
+
+
+
+
+
+
+```
+
+
+
+
+
+
+```
+
+hello
- hello
-
-```
-
+
+
+
+
+
+
+```
+
+`
+
+
+
+
+
+```
+
+
-
+
-
-
-
-
-
+
+
+
+
+
+
+
-
+
```
+
+ {{ data }}
+
+
+
+ one
+
+
+
+
-
-
-```
-
-If you want to disallow `eslint-disable` functionality in ``, disable [vue/comment-directive](../rules/comment-directive.md) rule.
-
-## :computer: Editor integrations
-
-#### Visual Studio Code
-
-Use [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially.
-
-You have to configure the `eslint.validate` option of the extension to check `.vue` files because the extension targets only `*.js` or `*.jsx` files by default.
-
-Example **.vscode/settings.json**:
-
-```json
-{
- "eslint.validate": [
- "javascript",
- "javascriptreact",
- { "language": "vue", "autoFix": true }
- ]
-}
-```
-
-If you use `Vetur` plugin, set `"vetur.validation.template": false` to avoid default Vetur template validation. Check out [vetur documentation](https://vuejs.github.io/vetur/linting-error.html) for more info.
-
-#### Sublime Text
-
-Use [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint) extension that SublimeLinter provides for eslint.
-
-You have to open command-palette via `cmd/ctrl+shift+p` and type `Preferences: SublimeLinter Settings`, paste to the config on the right side:
-
-```json
-{
- "linters": {
- "eslint": {
- "selector": "text.html.vue, source.js - meta.attribute-with-value"
- }
- }
-}
-```
-
-#### Atom editor
-
-You need to go into `Settings -> Packages -> linter-eslint`, under the option "List of scopes to run eslint on", add `text.html.vue`. You may need to restart Atom.
-
-#### IntelliJ IDEA / JetBrains WebStorm
-
-In the **Settings/Preferences** dialog (`Ctrl+Alt+S`), choose JavaScript under **Languages and Frameworks** and then choose **ESLint** under **Code Quality Tools**.
-On the **ESLint page** that opens, select the *Enable* checkbox.
-
-If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose **Apply ESLint Code Style Rules** on the context menu.
-
-read more: [JetBrains - ESLint](https://www.jetbrains.com/help/idea/eslint.html)
-
-## :question: FAQ
-
-### What is the "Use the latest vue-eslint-parser" error?
-
-The most rules of `eslint-plugin-vue` require `vue-eslint-parser` to check `` ASTs.
-
-Make sure you have one of the following settings in your **.eslintrc**:
-
-- `"extends": ["plugin:vue/recommended"]`
-- `"extends": ["plugin:vue/base"]`
-
-If you already use other parser (e.g. `"parser": "babel-eslint"`), please move it into `parserOptions`, so it doesn't collide with the `vue-eslint-parser` used by this plugin's configuration:
-
-```diff
-- "parser": "babel-eslint",
- "parserOptions": {
-+ "parser": "babel-eslint",
- "ecmaVersion": 2017,
- "sourceType": "module"
- }
-```
-
-See also: "[Use together with custom parsers](#use-together-with-custom-parsers)" section.
-
-### Why doesn't it work on .vue file?
-
-1. Make sure you don't have `eslint-plugin-html` in your config. The `eslint-plugin-html` extracts the content from `
+ *
+ * @type {Recordnot IE only
+
+
diff --git a/tests/fixtures/utils/html-comments/incorrectly-closed-comment/comment-tokens.json b/tests/fixtures/utils/html-comments/incorrectly-closed-comment/comment-tokens.json
new file mode 100644
index 000000000..0637a088a
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/incorrectly-closed-comment/comment-tokens.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/incorrectly-closed-comment/source.vue b/tests/fixtures/utils/html-comments/incorrectly-closed-comment/source.vue
new file mode 100644
index 000000000..edfecdca6
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/incorrectly-closed-comment/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/non-decoration/comment-tokens.json b/tests/fixtures/utils/html-comments/non-decoration/comment-tokens.json
new file mode 100644
index 000000000..4a42c85cc
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/non-decoration/comment-tokens.json
@@ -0,0 +1,60 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 70,
+ 73
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 21
+ },
+ "end": {
+ "line": 3,
+ "column": 24
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/non-decoration/source.vue b/tests/fixtures/utils/html-comments/non-decoration/source.vue
new file mode 100644
index 000000000..464b27799
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/non-decoration/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/script-comment/comment-tokens.json b/tests/fixtures/utils/html-comments/script-comment/comment-tokens.json
new file mode 100644
index 000000000..0637a088a
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/script-comment/comment-tokens.json
@@ -0,0 +1 @@
+[]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/script-comment/source.vue b/tests/fixtures/utils/html-comments/script-comment/source.vue
new file mode 100644
index 000000000..41aedcefe
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/script-comment/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/test1/comment-tokens.json b/tests/fixtures/utils/html-comments/test1/comment-tokens.json
new file mode 100644
index 000000000..5c53e9ca4
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/test1/comment-tokens.json
@@ -0,0 +1,60 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 53,
+ 56
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 13
+ },
+ "end": {
+ "line": 3,
+ "column": 16
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/test1/source.vue b/tests/fixtures/utils/html-comments/test1/source.vue
new file mode 100644
index 000000000..a270969a3
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/test1/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/test2/comment-tokens.json b/tests/fixtures/utils/html-comments/test2/comment-tokens.json
new file mode 100644
index 000000000..c414ab176
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/test2/comment-tokens.json
@@ -0,0 +1,60 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 55,
+ 58
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 15
+ },
+ "end": {
+ "line": 3,
+ "column": 18
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/test2/source.vue b/tests/fixtures/utils/html-comments/test2/source.vue
new file mode 100644
index 000000000..aed10db97
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/test2/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/test3/comment-tokens.json b/tests/fixtures/utils/html-comments/test3/comment-tokens.json
new file mode 100644
index 000000000..40db0b89d
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/test3/comment-tokens.json
@@ -0,0 +1,60 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 61,
+ 64
+ ],
+ "loc": {
+ "start": {
+ "line": 3,
+ "column": 21
+ },
+ "end": {
+ "line": 3,
+ "column": 24
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/test3/source.vue b/tests/fixtures/utils/html-comments/test3/source.vue
new file mode 100644
index 000000000..bdb9c48cd
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/test3/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/html-comments/test4/comment-tokens.json b/tests/fixtures/utils/html-comments/test4/comment-tokens.json
new file mode 100644
index 000000000..3513260bd
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/test4/comment-tokens.json
@@ -0,0 +1,60 @@
+[
+ {
+ "open": {
+ "type": "HTMLCommentOpen",
+ "value": "",
+ "range": [
+ 73,
+ 76
+ ],
+ "loc": {
+ "start": {
+ "line": 6,
+ "column": 2
+ },
+ "end": {
+ "line": 6,
+ "column": 5
+ }
+ }
+ }
+ }
+]
\ No newline at end of file
diff --git a/tests/fixtures/utils/html-comments/test4/source.vue b/tests/fixtures/utils/html-comments/test4/source.vue
new file mode 100644
index 000000000..bca201562
--- /dev/null
+++ b/tests/fixtures/utils/html-comments/test4/source.vue
@@ -0,0 +1,7 @@
+
+
+
+
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js
new file mode 100644
index 000000000..805890a33
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/result.js
@@ -0,0 +1,16 @@
+let { a, b: c, d: [,f], g: [...h], ...i } = $(foo)
+let [ x, y = 42 ] = $(bar)
+
+console.log(
+ /*>*/a/*<{"escape":false,"method":"$"}*/,
+ b,
+ /*>*/c/*<{"escape":false,"method":"$"}*/,
+ d,
+ e,
+ /*>*/f/*<{"escape":false,"method":"$"}*/,
+ g,
+ /*>*/h/*<{"escape":false,"method":"$"}*/,
+ /*>*/i/*<{"escape":false,"method":"$"}*/,
+ /*>*/x/*<{"escape":false,"method":"$"}*/,
+ /*>*/y/*<{"escape":false,"method":"$"}*/
+)
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js
new file mode 100644
index 000000000..bfb92574f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$-with-destructuring/source.js
@@ -0,0 +1,16 @@
+let { a, b: c, d: [,f], g: [...h], ...i } = $(foo)
+let [ x, y = 42 ] = $(bar)
+
+console.log(
+ a,
+ b,
+ c,
+ d,
+ e,
+ f,
+ g,
+ h,
+ i,
+ x,
+ y
+)
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js
new file mode 100644
index 000000000..80d709dee
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$/result.js
@@ -0,0 +1,6 @@
+let v = $(foo)
+let { x, y } = $(bar)
+console.log(/*>*/v/*<{"escape":false,"method":"$"}*/, /*>*/x/*<{"escape":false,"method":"$"}*/, /*>*/y/*<{"escape":false,"method":"$"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$"}*/
+console.log(a)
+console.log($$({ /*>*/v/*<{"escape":true,"method":"$"}*/, /*>*/x/*<{"escape":true,"method":"$"}*/ }))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js
new file mode 100644
index 000000000..28c98cbc9
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$/source.js
@@ -0,0 +1,6 @@
+let v = $(foo)
+let { x, y } = $(bar)
+console.log(v, x, y)
+let a = v
+console.log(a)
+console.log($$({ v, x }))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js
new file mode 100644
index 000000000..a45a0ae6f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/result.js
@@ -0,0 +1,5 @@
+let v = $computed(() => 42)
+console.log(/*>*/v/*<{"escape":false,"method":"$computed"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$computed"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$computed"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js
new file mode 100644
index 000000000..ff0f34766
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$computed/source.js
@@ -0,0 +1,5 @@
+let v = $computed(() => 42)
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js
new file mode 100644
index 000000000..a8a3ae90a
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/result.js
@@ -0,0 +1,10 @@
+let v = $customRef((track, trigger) => {
+ return {
+ get() { return count },
+ set(newValue) { count = newValue }
+ }
+})
+console.log(/*>*/v/*<{"escape":false,"method":"$customRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$customRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$customRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js
new file mode 100644
index 000000000..dd62754bc
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$customRef/source.js
@@ -0,0 +1,10 @@
+let v = $customRef((track, trigger) => {
+ return {
+ get() { return count },
+ set(newValue) { count = newValue }
+ }
+})
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js
new file mode 100644
index 000000000..518f0c56b
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/result.js
@@ -0,0 +1,5 @@
+let v = $ref(0)
+console.log(/*>*/v/*<{"escape":false,"method":"$ref"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$ref"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$ref"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js
new file mode 100644
index 000000000..5c8d7248e
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$ref/source.js
@@ -0,0 +1,5 @@
+let v = $ref(0)
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js
new file mode 100644
index 000000000..dbe345a19
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/result.js
@@ -0,0 +1,5 @@
+let v = $shallowRef({ count: 0 })
+console.log(/*>*/v/*<{"escape":false,"method":"$shallowRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$shallowRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$shallowRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js
new file mode 100644
index 000000000..da4c19320
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$shallowRef/source.js
@@ -0,0 +1,5 @@
+let v = $shallowRef({ count: 0 })
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js
new file mode 100644
index 000000000..a7bff1219
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/result.js
@@ -0,0 +1,5 @@
+let v = $toRef(foo, 'bar')
+console.log(/*>*/v/*<{"escape":false,"method":"$toRef"}*/)
+let a = /*>*/v/*<{"escape":false,"method":"$toRef"}*/
+console.log(a)
+console.log($$(/*>*/v/*<{"escape":true,"method":"$toRef"}*/))
diff --git a/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js
new file mode 100644
index 000000000..b94ddea93
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/reactive-vars/$toRef/source.js
@@ -0,0 +1,5 @@
+let v = $toRef(foo, 'bar')
+console.log(v)
+let a = v
+console.log(a)
+console.log($$(v))
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js
new file mode 100644
index 000000000..2217a8182
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/computed/result.js
@@ -0,0 +1,5 @@
+import { computed } from 'vue'
+let v = computed(() => 42)
+console.log(/*>*/v/*<{"type":"expression","method":"computed"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"computed"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js
new file mode 100644
index 000000000..2b4a6412d
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/computed/source.js
@@ -0,0 +1,5 @@
+import { computed } from 'vue'
+let v = computed(() => 42)
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js
new file mode 100644
index 000000000..e7af0774e
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/result.js
@@ -0,0 +1,10 @@
+import { customRef } from 'vue'
+let v = customRef((track, trigger) => {
+ return {
+ get() { return count },
+ set(newValue) { count = newValue }
+ }
+})
+console.log(/*>*/v/*<{"type":"expression","method":"customRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"customRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js
new file mode 100644
index 000000000..c94db730f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/customRef/source.js
@@ -0,0 +1,10 @@
+import { customRef } from 'vue'
+let v = customRef((track, trigger) => {
+ return {
+ get() { return count },
+ set(newValue) { count = newValue }
+ }
+})
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/result.vue b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/result.vue
new file mode 100644
index 000000000..a5d4293d8
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/result.vue
@@ -0,0 +1,24 @@
+
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/source.vue b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/source.vue
new file mode 100644
index 000000000..7cca9156c
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel01/source.vue
@@ -0,0 +1,24 @@
+
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/result.vue b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/result.vue
new file mode 100644
index 000000000..c2903d01f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/result.vue
@@ -0,0 +1,16 @@
+
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/source.vue b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/source.vue
new file mode 100644
index 000000000..012cb9349
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/defineModel02/source.vue
@@ -0,0 +1,16 @@
+
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js
new file mode 100644
index 000000000..a0681af4a
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/result.js
@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+let v = ref(0)
+const /*>*/{ value: a }/*<{"type":"pattern","method":"ref"}*/ = v
+const /*>*/{ value = 42 }/*<{"type":"pattern","method":"ref"}*/ = v
+console.log(a)
+console.log(value)
+
+const [x] = v
+console.log(x)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js
new file mode 100644
index 000000000..3a2c5c330
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref-to-pattern/source.js
@@ -0,0 +1,9 @@
+import { ref } from 'vue'
+let v = ref(0)
+const { value: a } = v
+const { value = 42 } = v
+console.log(a)
+console.log(value)
+
+const [x] = v
+console.log(x)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js
new file mode 100644
index 000000000..c356f2c2b
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref/result.js
@@ -0,0 +1,5 @@
+import { ref } from 'vue'
+let v = ref(0)
+console.log(/*>*/v/*<{"type":"expression","method":"ref"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"ref"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js
new file mode 100644
index 000000000..836b45777
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/ref/source.js
@@ -0,0 +1,5 @@
+import { ref } from 'vue'
+let v = ref(0)
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js
new file mode 100644
index 000000000..206f3e88d
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/result.js
@@ -0,0 +1,5 @@
+import { shallowRef } from 'vue'
+let v = shallowRef({ count: 0 })
+console.log(/*>*/v/*<{"type":"expression","method":"shallowRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"shallowRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js
new file mode 100644
index 000000000..98496ae7f
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/shallowRef/source.js
@@ -0,0 +1,5 @@
+import { shallowRef } from 'vue'
+let v = shallowRef({ count: 0 })
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js
new file mode 100644
index 000000000..28bea16dc
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/result.js
@@ -0,0 +1,5 @@
+import { toRef } from 'vue'
+let v = toRef(foo, 'bar')
+console.log(/*>*/v/*<{"type":"expression","method":"toRef"}*/.value)
+let a = v
+console.log(/*>*/a/*<{"type":"expression","method":"toRef"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js
new file mode 100644
index 000000000..df884f003
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRef/source.js
@@ -0,0 +1,5 @@
+import { toRef } from 'vue'
+let v = toRef(foo, 'bar')
+console.log(v.value)
+let a = v
+console.log(a.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js
new file mode 100644
index 000000000..527acdc78
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/result.js
@@ -0,0 +1,5 @@
+import { toRefs } from 'vue'
+let bar = toRefs(foo)
+const { x, y = 42 } = bar
+console.log(/*>*/x/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/y/*<{"type":"expression","method":"toRefs"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js
new file mode 100644
index 000000000..b2c39b4a9
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs-to-pattern/source.js
@@ -0,0 +1,5 @@
+import { toRefs } from 'vue'
+let bar = toRefs(foo)
+const { x, y = 42 } = bar
+console.log(x.value)
+console.log(y.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js
new file mode 100644
index 000000000..809dfc902
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/result.js
@@ -0,0 +1,18 @@
+import { toRefs } from 'vue'
+let { x, y } = toRefs(foo)
+console.log(/*>*/x/*<{"type":"expression","method":"toRefs"}*/.value)
+let a = y
+console.log(/*>*/a/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/y/*<{"type":"expression","method":"toRefs"}*/.value)
+
+let bar = toRefs(foo)
+console.log(bar)
+console.log(/*>*/bar.x/*<{"type":"expression","method":"toRefs"}*/.value)
+console.log(/*>*/bar.y/*<{"type":"expression","method":"toRefs"}*/.value)
+
+const z = bar.z
+console.log(/*>*/z/*<{"type":"expression","method":"toRefs"}*/.value)
+
+let b;
+/*>*/b/*<{"type":"pattern","method":"toRefs"}*/ = bar.b
+console.log(/*>*/b/*<{"type":"expression","method":"toRefs"}*/.value)
diff --git a/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js
new file mode 100644
index 000000000..638e69296
--- /dev/null
+++ b/tests/fixtures/utils/ref-object-references/ref-objects/toRefs/source.js
@@ -0,0 +1,18 @@
+import { toRefs } from 'vue'
+let { x, y } = toRefs(foo)
+console.log(x.value)
+let a = y
+console.log(a.value)
+console.log(y.value)
+
+let bar = toRefs(foo)
+console.log(bar)
+console.log(bar.x.value)
+console.log(bar.y.value)
+
+const z = bar.z
+console.log(z.value)
+
+let b;
+b = bar.b
+console.log(b.value)
diff --git a/tests/fixtures/utils/selector/attr-contains/result.json b/tests/fixtures/utils/selector/attr-contains/result.json
new file mode 100644
index 000000000..a2627437e
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-contains/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": "a[href*=\"example\"]",
+ "matches": [
+ "",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-contains/source.vue b/tests/fixtures/utils/selector/attr-contains/source.vue
new file mode 100644
index 000000000..6c9a89dde
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-contains/source.vue
@@ -0,0 +1,10 @@
+
+
+ -
+
- Internal link +
- Example link +
- Insensitive internal link +
- Example org link +
- Example https org link +
", + "
"
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-empty-value/source.vue b/tests/fixtures/utils/selector/attr-empty-value/source.vue
new file mode 100644
index 000000000..4a73c1519
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-empty-value/source.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/attr-eq/result.json b/tests/fixtures/utils/selector/attr-eq/result.json
new file mode 100644
index 000000000..89694b04d
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-eq/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "[foo=foo]",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-eq/source.vue b/tests/fixtures/utils/selector/attr-eq/source.vue
new file mode 100644
index 000000000..fdfe34e2e
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-eq/source.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/attr-has/result.json b/tests/fixtures/utils/selector/attr-has/result.json
new file mode 100644
index 000000000..6af6140be
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-has/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "[foo]",
+ "matches": [
+ "",
+ "
"
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-has/source.vue b/tests/fixtures/utils/selector/attr-has/source.vue
new file mode 100644
index 000000000..aaf7b1ddf
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-has/source.vue
@@ -0,0 +1,8 @@
+
+
+ "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-first-child01/source.vue b/tests/fixtures/utils/selector/pseudo-first-child01/source.vue
new file mode 100644
index 000000000..52ab2eb93
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-first-child01/source.vue
@@ -0,0 +1,14 @@
+
+
+ This text is selected! This text isn't selected. This text isn't selected. "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-first-of-type01/source.vue b/tests/fixtures/utils/selector/pseudo-first-of-type01/source.vue
new file mode 100644
index 000000000..c9a012a1f
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-first-of-type01/source.vue
@@ -0,0 +1,8 @@
+
+
+ Paragraph 1 Paragraph 2 "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-first-of-type02/source.vue b/tests/fixtures/utils/selector/pseudo-first-of-type02/source.vue
new file mode 100644
index 000000000..515de7e99
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-first-of-type02/source.vue
@@ -0,0 +1,8 @@
+
+
+ Paragraph 1 Paragraph 2
+
+
+
+
+
+
+
+
+
+ ",
+ " ",
+ " ",
+ " ",
+ " ",
+ " "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-is/source.vue b/tests/fixtures/utils/selector/pseudo-is/source.vue
new file mode 100644
index 000000000..944038e62
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-is/source.vue
@@ -0,0 +1,17 @@
+
+
+ This is my header paragraph "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-last-of-type01/source.vue b/tests/fixtures/utils/selector/pseudo-last-of-type01/source.vue
new file mode 100644
index 000000000..eab097875
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-last-of-type01/source.vue
@@ -0,0 +1,8 @@
+
+
+ Paragraph 1 Paragraph 2 "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-last-of-type02/source.vue b/tests/fixtures/utils/selector/pseudo-last-of-type02/source.vue
new file mode 100644
index 000000000..06e2e0f5e
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-last-of-type02/source.vue
@@ -0,0 +1,8 @@
+
+
+ Paragraph 1 Paragraph 2 "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-not/source.vue b/tests/fixtures/utils/selector/pseudo-not/source.vue
new file mode 100644
index 000000000..3c282fda3
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-not/source.vue
@@ -0,0 +1,8 @@
+
+
+ ",
+ " "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-of-type01/source.vue b/tests/fixtures/utils/selector/pseudo-nth-of-type01/source.vue
new file mode 100644
index 000000000..292700ec9
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-of-type01/source.vue
@@ -0,0 +1,11 @@
+
+
+ 1st paragraph. 2nd paragraph. 3rd paragraph. 4th paragraph. ",
+ " "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-of-type02/source.vue b/tests/fixtures/utils/selector/pseudo-nth-of-type02/source.vue
new file mode 100644
index 000000000..27a68245f
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-of-type02/source.vue
@@ -0,0 +1,11 @@
+
+
+ 1st paragraph. 2nd paragraph. 3rd paragraph. 4th paragraph. "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-of-type03/source.vue b/tests/fixtures/utils/selector/pseudo-nth-of-type03/source.vue
new file mode 100644
index 000000000..d2c88382e
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-of-type03/source.vue
@@ -0,0 +1,11 @@
+
+
+ 1st paragraph. 2nd paragraph. 3rd paragraph. 4th paragraph. ",
+ " "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-of-type04/source.vue b/tests/fixtures/utils/selector/pseudo-nth-of-type04/source.vue
new file mode 100644
index 000000000..e88371585
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-of-type04/source.vue
@@ -0,0 +1,11 @@
+
+
+ 1st paragraph. 2nd paragraph. 3rd paragraph. 4th paragraph. ",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-only-of-type/source.vue b/tests/fixtures/utils/selector/pseudo-only-of-type/source.vue
new file mode 100644
index 000000000..6a3569412
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-only-of-type/source.vue
@@ -0,0 +1,13 @@
+
+
+ I am the only `p` among my siblings. ",
+ " ",
+ " ",
+ " ",
+ " ",
+ " "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-where/source.vue b/tests/fixtures/utils/selector/pseudo-where/source.vue
new file mode 100644
index 000000000..f2147e21c
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-where/source.vue
@@ -0,0 +1,17 @@
+
+
+ This is my header paragraph This is my first list item This is my second list item "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/tag02/source.vue b/tests/fixtures/utils/selector/tag02/source.vue
new file mode 100644
index 000000000..43985e61f
--- /dev/null
+++ b/tests/fixtures/utils/selector/tag02/source.vue
@@ -0,0 +1,9 @@
+
+
+ ",
+ "",
+ "
+ {{ greeting }} World! {{ greeting }} World! {{ greeting }} World!
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/attr-insensitive/result.json b/tests/fixtures/utils/selector/attr-insensitive/result.json
new file mode 100644
index 000000000..5d630529f
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-insensitive/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "a[href*=\"insensitive\" i]",
+ "matches": [
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-insensitive/source.vue b/tests/fixtures/utils/selector/attr-insensitive/source.vue
new file mode 100644
index 000000000..129fcab0d
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-insensitive/source.vue
@@ -0,0 +1,10 @@
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/attr-lang/result.json b/tests/fixtures/utils/selector/attr-lang/result.json
new file mode 100644
index 000000000..f8c9d266a
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-lang/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": "div[lang|=\"zh\"]",
+ "matches": [
+ "",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-lang/source.vue b/tests/fixtures/utils/selector/attr-lang/source.vue
new file mode 100644
index 000000000..fa88b8750
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-lang/source.vue
@@ -0,0 +1,9 @@
+
+
+ Hello World!
+ Olá Mundo!
+ 世界您好！
+ 世界您好！
+ 世界您好！
+ 世界您好！
+
diff --git a/tests/fixtures/utils/selector/attr-not-insensitive/result.json b/tests/fixtures/utils/selector/attr-not-insensitive/result.json
new file mode 100644
index 000000000..41f6b6ddf
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-not-insensitive/result.json
@@ -0,0 +1,5 @@
+{
+ "selector": "a[href*=\"insensitive\"]",
+ "matches": [],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-not-insensitive/source.vue b/tests/fixtures/utils/selector/attr-not-insensitive/source.vue
new file mode 100644
index 000000000..2fb3e9037
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-not-insensitive/source.vue
@@ -0,0 +1,11 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/attr-prefixed/result.json b/tests/fixtures/utils/selector/attr-prefixed/result.json
new file mode 100644
index 000000000..9f11bd4ee
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-prefixed/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "a[href^=\"#\"]",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-prefixed/source.vue b/tests/fixtures/utils/selector/attr-prefixed/source.vue
new file mode 100644
index 000000000..2c1dc2eb0
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-prefixed/source.vue
@@ -0,0 +1,10 @@
+
+
+
+
diff --git a/tests/fixtures/utils/selector/attr-suffixed/result.json b/tests/fixtures/utils/selector/attr-suffixed/result.json
new file mode 100644
index 000000000..d1a9e622a
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-suffixed/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "a[href$=\".org\"]",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-suffixed/source.vue b/tests/fixtures/utils/selector/attr-suffixed/source.vue
new file mode 100644
index 000000000..7b27ad2e4
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-suffixed/source.vue
@@ -0,0 +1,10 @@
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/attr-words/result.json b/tests/fixtures/utils/selector/attr-words/result.json
new file mode 100644
index 000000000..3fdea22cf
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-words/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "div[lang~=\"en-us\"]",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/attr-words/source.vue b/tests/fixtures/utils/selector/attr-words/source.vue
new file mode 100644
index 000000000..c9558519b
--- /dev/null
+++ b/tests/fixtures/utils/selector/attr-words/source.vue
@@ -0,0 +1,11 @@
+
+
+ Hello World!
+ Hello World!
+ Unknown
+ Olá Mundo!
+ 世界您好！
+ 世界您好！
+ 世界您好！
+ 世界您好！
+
diff --git a/tests/fixtures/utils/selector/class/result.json b/tests/fixtures/utils/selector/class/result.json
new file mode 100644
index 000000000..6fd93bcd6
--- /dev/null
+++ b/tests/fixtures/utils/selector/class/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": ".foo",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/class/source.vue b/tests/fixtures/utils/selector/class/source.vue
new file mode 100644
index 000000000..b9616a44b
--- /dev/null
+++ b/tests/fixtures/utils/selector/class/source.vue
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/combinator-adjacent/result.json b/tests/fixtures/utils/selector/combinator-adjacent/result.json
new file mode 100644
index 000000000..ef2e84138
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-adjacent/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": ".foo+.bar",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/combinator-adjacent/source.vue b/tests/fixtures/utils/selector/combinator-adjacent/source.vue
new file mode 100644
index 000000000..489c0d7ee
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-adjacent/source.vue
@@ -0,0 +1,14 @@
+
+
+
+
diff --git a/tests/fixtures/utils/selector/combinator-child01/result.json b/tests/fixtures/utils/selector/combinator-child01/result.json
new file mode 100644
index 000000000..841f69656
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-child01/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": ".foo > .bar",
+ "matches": [
+ "",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/combinator-child01/source.vue b/tests/fixtures/utils/selector/combinator-child01/source.vue
new file mode 100644
index 000000000..5eaa8df61
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-child01/source.vue
@@ -0,0 +1,14 @@
+
+
+
+
diff --git a/tests/fixtures/utils/selector/combinator-child02/result.json b/tests/fixtures/utils/selector/combinator-child02/result.json
new file mode 100644
index 000000000..ca0084bb8
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-child02/result.json
@@ -0,0 +1,10 @@
+{
+ "selector": ".a > .b > .c",
+ "matches": [
+ "",
+ "",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/combinator-child02/source.vue b/tests/fixtures/utils/selector/combinator-child02/source.vue
new file mode 100644
index 000000000..cf2ede6ec
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-child02/source.vue
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/combinator-descendant01/result.json b/tests/fixtures/utils/selector/combinator-descendant01/result.json
new file mode 100644
index 000000000..fb3463b3c
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-descendant01/result.json
@@ -0,0 +1,10 @@
+{
+ "selector": ".foo .bar",
+ "matches": [
+ "
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ",
+ "",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/combinator-descendant01/source.vue b/tests/fixtures/utils/selector/combinator-descendant01/source.vue
new file mode 100644
index 000000000..b122dae66
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-descendant01/source.vue
@@ -0,0 +1,14 @@
+
+
+
+
diff --git a/tests/fixtures/utils/selector/combinator-descendant02/result.json b/tests/fixtures/utils/selector/combinator-descendant02/result.json
new file mode 100644
index 000000000..3d308db86
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-descendant02/result.json
@@ -0,0 +1,14 @@
+{
+ "selector": ".a .b .c",
+ "matches": [
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/combinator-descendant02/source.vue b/tests/fixtures/utils/selector/combinator-descendant02/source.vue
new file mode 100644
index 000000000..d89b86220
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-descendant02/source.vue
@@ -0,0 +1,162 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/combinator-sibling/result.json b/tests/fixtures/utils/selector/combinator-sibling/result.json
new file mode 100644
index 000000000..efc9bed43
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-sibling/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": ".foo~.bar",
+ "matches": [
+ "
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ ",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/combinator-sibling/source.vue b/tests/fixtures/utils/selector/combinator-sibling/source.vue
new file mode 100644
index 000000000..381e6750d
--- /dev/null
+++ b/tests/fixtures/utils/selector/combinator-sibling/source.vue
@@ -0,0 +1,14 @@
+
+
+
+
diff --git a/tests/fixtures/utils/selector/comment01/result.json b/tests/fixtures/utils/selector/comment01/result.json
new file mode 100644
index 000000000..7592577fe
--- /dev/null
+++ b/tests/fixtures/utils/selector/comment01/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo /* comment */ :is(.bar /* comment */)",
+ "matches": [
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/comment01/source.vue b/tests/fixtures/utils/selector/comment01/source.vue
new file mode 100644
index 000000000..d388a1b9a
--- /dev/null
+++ b/tests/fixtures/utils/selector/comment01/source.vue
@@ -0,0 +1,7 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/comment02/result.json b/tests/fixtures/utils/selector/comment02/result.json
new file mode 100644
index 000000000..3d70892a6
--- /dev/null
+++ b/tests/fixtures/utils/selector/comment02/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo /* comment */ > /* comment */ /* comment */ .bar /* comment */",
+ "matches": [
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/comment02/source.vue b/tests/fixtures/utils/selector/comment02/source.vue
new file mode 100644
index 000000000..dc71c6bab
--- /dev/null
+++ b/tests/fixtures/utils/selector/comment02/source.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/comment03/result.json b/tests/fixtures/utils/selector/comment03/result.json
new file mode 100644
index 000000000..1358c04e7
--- /dev/null
+++ b/tests/fixtures/utils/selector/comment03/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo /* comment */ /* comment */ > /* comment */ .bar /* comment */",
+ "matches": [
+ "
+
+
+ "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/comment03/source.vue b/tests/fixtures/utils/selector/comment03/source.vue
new file mode 100644
index 000000000..a8381a888
--- /dev/null
+++ b/tests/fixtures/utils/selector/comment03/source.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/id/result.json b/tests/fixtures/utils/selector/id/result.json
new file mode 100644
index 000000000..616a429c1
--- /dev/null
+++ b/tests/fixtures/utils/selector/id/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "#foo",
+ "matches": [
+ "
+
+
+ "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/id/source.vue b/tests/fixtures/utils/selector/id/source.vue
new file mode 100644
index 000000000..88bdd7cb2
--- /dev/null
+++ b/tests/fixtures/utils/selector/id/source.vue
@@ -0,0 +1,8 @@
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-attr-op/result.json b/tests/fixtures/utils/selector/invalid-attr-op/result.json
new file mode 100644
index 000000000..edc492df9
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-attr-op/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "a[href==\"example\"]",
+ "matches": [],
+ "errors": [
+ "Unsupported operator: ==."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-attr-op/source.vue b/tests/fixtures/utils/selector/invalid-attr-op/source.vue
new file mode 100644
index 000000000..dc39fc6b5
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-attr-op/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-combinators/result.json b/tests/fixtures/utils/selector/invalid-combinators/result.json
new file mode 100644
index 000000000..7f1e135e2
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-combinators/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo > > .bar",
+ "matches": [],
+ "errors": [
+ "Unexpected combinator '>'."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-combinators/source.vue b/tests/fixtures/utils/selector/invalid-combinators/source.vue
new file mode 100644
index 000000000..2c768628d
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-combinators/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-empty/result.json b/tests/fixtures/utils/selector/invalid-empty/result.json
new file mode 100644
index 000000000..0352970ab
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-empty/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo /* comment */ :is(.bar, /* comment */)",
+ "matches": [],
+ "errors": [
+ "Unexpected empty selector."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-empty/source.vue b/tests/fixtures/utils/selector/invalid-empty/source.vue
new file mode 100644
index 000000000..c6444bdad
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-empty/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-last-combinator/result.json b/tests/fixtures/utils/selector/invalid-last-combinator/result.json
new file mode 100644
index 000000000..25d9ded5b
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-last-combinator/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo >",
+ "matches": [],
+ "errors": [
+ "Expected selector after '>'."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-last-combinator/source.vue b/tests/fixtures/utils/selector/invalid-last-combinator/source.vue
new file mode 100644
index 000000000..193c8fd1b
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-last-combinator/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-nesting/result.json b/tests/fixtures/utils/selector/invalid-nesting/result.json
new file mode 100644
index 000000000..3e8d09dba
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-nesting/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "& .foo > .bar",
+ "matches": [],
+ "errors": [
+ "Unsupported nesting selector."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-nesting/source.vue b/tests/fixtures/utils/selector/invalid-nesting/source.vue
new file mode 100644
index 000000000..69338be4f
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-nesting/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-nth/result.json b/tests/fixtures/utils/selector/invalid-nth/result.json
new file mode 100644
index 000000000..248758f15
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-nth/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ":nth-child()",
+ "matches": [],
+ "errors": [
+ "Cannot parse An+B micro syntax (:nth-xxx() argument): ''."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-nth/source.vue b/tests/fixtures/utils/selector/invalid-nth/source.vue
new file mode 100644
index 000000000..4e2e356cd
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-nth/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-selector/result.json b/tests/fixtures/utils/selector/invalid-selector/result.json
new file mode 100644
index 000000000..b8b057b02
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-selector/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ":not(",
+ "matches": [],
+ "errors": [
+ "Cannot parse selector: :not(."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-selector/source.vue b/tests/fixtures/utils/selector/invalid-selector/source.vue
new file mode 100644
index 000000000..cc6ae2d42
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-selector/source.vue
@@ -0,0 +1,4 @@
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-string/result.json b/tests/fixtures/utils/selector/invalid-string/result.json
new file mode 100644
index 000000000..542d12c18
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-string/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo > \".bar\"",
+ "matches": [],
+ "errors": [
+ "Unknown selector: \".bar\"."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-string/source.vue b/tests/fixtures/utils/selector/invalid-string/source.vue
new file mode 100644
index 000000000..3a51d6405
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-string/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-unknown-combinator/result.json b/tests/fixtures/utils/selector/invalid-unknown-combinator/result.json
new file mode 100644
index 000000000..486eae4f0
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-unknown-combinator/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo /unknown/ .bar",
+ "matches": [],
+ "errors": [
+ "Unknown combinator: /unknown/."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-unknown-combinator/source.vue b/tests/fixtures/utils/selector/invalid-unknown-combinator/source.vue
new file mode 100644
index 000000000..08d148f7c
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-unknown-combinator/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/invalid-unknown-pseudo/result.json b/tests/fixtures/utils/selector/invalid-unknown-pseudo/result.json
new file mode 100644
index 000000000..6171ea02b
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-unknown-pseudo/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo :unknown(.bar)",
+ "matches": [],
+ "errors": [
+ "Unsupported pseudo selector: :unknown."
+ ]
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/invalid-unknown-pseudo/source.vue b/tests/fixtures/utils/selector/invalid-unknown-pseudo/source.vue
new file mode 100644
index 000000000..5d1449abe
--- /dev/null
+++ b/tests/fixtures/utils/selector/invalid-unknown-pseudo/source.vue
@@ -0,0 +1,6 @@
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-empty/result.json b/tests/fixtures/utils/selector/pseudo-empty/result.json
new file mode 100644
index 000000000..feefab5ef
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-empty/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": ".box:empty",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-empty/source.vue b/tests/fixtures/utils/selector/pseudo-empty/source.vue
new file mode 100644
index 000000000..9a47c2a52
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-empty/source.vue
@@ -0,0 +1,11 @@
+
+
+
+ Content
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-first-child01/result.json b/tests/fixtures/utils/selector/pseudo-first-child01/result.json
new file mode 100644
index 000000000..df66f7558
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-first-child01/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "p:first-child",
+ "matches": [
+ "
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-first-child02/result.json b/tests/fixtures/utils/selector/pseudo-first-child02/result.json
new file mode 100644
index 000000000..e991fe995
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-first-child02/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "ul li:first-child",
+ "matches": [
+ "
+
+
+
+
+ This text isn't selected: it's not a `p`.
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-first-of-type01/result.json b/tests/fixtures/utils/selector/pseudo-first-of-type01/result.json
new file mode 100644
index 000000000..408762a9e
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-first-of-type01/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "p:first-of-type",
+ "matches": [
+ "
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-first-of-type02/result.json b/tests/fixtures/utils/selector/pseudo-first-of-type02/result.json
new file mode 100644
index 000000000..aabc2d160
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-first-of-type02/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": ".root > :first-of-type",
+ "matches": [
+ "Heading
+ ",
+ "
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-has-complex01/result.json b/tests/fixtures/utils/selector/pseudo-has-complex01/result.json
new file mode 100644
index 000000000..21d9decfc
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has-complex01/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "div:has(>.foo > .foo)",
+ "matches": [
+ "Heading
+ ",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-has-complex01/source.vue b/tests/fixtures/utils/selector/pseudo-has-complex01/source.vue
new file mode 100644
index 000000000..abc928b81
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has-complex01/source.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-has-complex02/result.json b/tests/fixtures/utils/selector/pseudo-has-complex02/result.json
new file mode 100644
index 000000000..b8c779ec0
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has-complex02/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": "div:has(>.foo .foo)",
+ "matches": [
+ "
+
+ ",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-has-complex02/source.vue b/tests/fixtures/utils/selector/pseudo-has-complex02/source.vue
new file mode 100644
index 000000000..f0e1b8da4
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has-complex02/source.vue
@@ -0,0 +1,31 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-has01/result.json b/tests/fixtures/utils/selector/pseudo-has01/result.json
new file mode 100644
index 000000000..af3f7bc3b
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has01/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": "div:has(.foo)",
+ "matches": [
+ "
+
+ ",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-has01/source.vue b/tests/fixtures/utils/selector/pseudo-has01/source.vue
new file mode 100644
index 000000000..11defe7d2
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has01/source.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-has02/result.json b/tests/fixtures/utils/selector/pseudo-has02/result.json
new file mode 100644
index 000000000..413267468
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has02/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "div:has(>.foo)",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-has02/source.vue b/tests/fixtures/utils/selector/pseudo-has02/source.vue
new file mode 100644
index 000000000..7fcde7d5b
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has02/source.vue
@@ -0,0 +1,25 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-has03/result.json b/tests/fixtures/utils/selector/pseudo-has03/result.json
new file mode 100644
index 000000000..d818eb807
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has03/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "div:has(+.foo)",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-has03/source.vue b/tests/fixtures/utils/selector/pseudo-has03/source.vue
new file mode 100644
index 000000000..2157d5353
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has03/source.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-has04/result.json b/tests/fixtures/utils/selector/pseudo-has04/result.json
new file mode 100644
index 000000000..ca52f2862
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has04/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": "div:has(~.foo)",
+ "matches": [
+ "",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-has04/source.vue b/tests/fixtures/utils/selector/pseudo-has04/source.vue
new file mode 100644
index 000000000..9eeebaa2f
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-has04/source.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-is/result.json b/tests/fixtures/utils/selector/pseudo-is/result.json
new file mode 100644
index 000000000..a0893ac97
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-is/result.json
@@ -0,0 +1,12 @@
+{
+ "selector": ":where(header, main, footer) p",
+ "matches": [
+ "
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-last-of-type01/result.json b/tests/fixtures/utils/selector/pseudo-last-of-type01/result.json
new file mode 100644
index 000000000..e566e5992
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-last-of-type01/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "p:last-of-type",
+ "matches": [
+ "
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-last-of-type02/result.json b/tests/fixtures/utils/selector/pseudo-last-of-type02/result.json
new file mode 100644
index 000000000..b23c5b685
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-last-of-type02/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": ".root > :last-of-type",
+ "matches": [
+ "Heading
+ ",
+ "
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-not/result.json b/tests/fixtures/utils/selector/pseudo-not/result.json
new file mode 100644
index 000000000..42e685b4a
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-not/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": ":not(.foo)",
+ "matches": [
+ "",
+ "Heading
+ ",
+ "
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-child01/result.json b/tests/fixtures/utils/selector/pseudo-nth-child01/result.json
new file mode 100644
index 000000000..be67bd4ac
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-child01/result.json
@@ -0,0 +1,11 @@
+{
+ "selector": "span:nth-child(2n+1)",
+ "matches": [
+ "",
+ "",
+ "",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-child01/source.vue b/tests/fixtures/utils/selector/pseudo-nth-child01/source.vue
new file mode 100644
index 000000000..18ed75b7e
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-child01/source.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-child02/result.json b/tests/fixtures/utils/selector/pseudo-nth-child02/result.json
new file mode 100644
index 000000000..8bddde0fa
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-child02/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": ".foo:nth-child(odd)",
+ "matches": [
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-child02/source.vue b/tests/fixtures/utils/selector/pseudo-nth-child02/source.vue
new file mode 100644
index 000000000..9533e330c
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-child02/source.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-child03/result.json b/tests/fixtures/utils/selector/pseudo-nth-child03/result.json
new file mode 100644
index 000000000..d17057d80
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-child03/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ".foo:nth-child(even)",
+ "matches": [
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-child03/source.vue b/tests/fixtures/utils/selector/pseudo-nth-child03/source.vue
new file mode 100644
index 000000000..a1814b8d4
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-child03/source.vue
@@ -0,0 +1,14 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-child01/result.json b/tests/fixtures/utils/selector/pseudo-nth-last-child01/result.json
new file mode 100644
index 000000000..fecc3d71e
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-child01/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": "tr:nth-last-child(-n+3)",
+ "matches": [
+ "",
+ " ",
+ " "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-child01/source.vue b/tests/fixtures/utils/selector/pseudo-nth-last-child01/source.vue
new file mode 100644
index 000000000..d812f4cdd
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-child01/source.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-child02/result.json b/tests/fixtures/utils/selector/pseudo-nth-last-child02/result.json
new file mode 100644
index 000000000..056a0cef6
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-child02/result.json
@@ -0,0 +1,10 @@
+{
+ "selector": "tr:nth-last-child(n+2)",
+ "matches": [
+ "
+
+ First line
+
+
+ Second line
+
+
+ Third line
+
+
+ Fourth line
+
+
+
+Fifth line
+ ",
+ " ",
+ " ",
+ " "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-child02/source.vue b/tests/fixtures/utils/selector/pseudo-nth-last-child02/source.vue
new file mode 100644
index 000000000..d1dd955ad
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-child02/source.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-child03/result.json b/tests/fixtures/utils/selector/pseudo-nth-last-child03/result.json
new file mode 100644
index 000000000..2689bca7e
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-child03/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "tr:nth-last-child(2)",
+ "matches": [
+ "
+
+ First line
+
+
+ Second line
+
+
+ Third line
+
+
+ Fourth line
+
+
+
+Fifth line
+ "
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-child03/source.vue b/tests/fixtures/utils/selector/pseudo-nth-last-child03/source.vue
new file mode 100644
index 000000000..2ed0c08e0
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-child03/source.vue
@@ -0,0 +1,21 @@
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-of-type01/result.json b/tests/fixtures/utils/selector/pseudo-nth-last-of-type01/result.json
new file mode 100644
index 000000000..5551832f8
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-of-type01/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "span:nth-last-of-type(2)",
+ "matches": [
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-of-type01/source.vue b/tests/fixtures/utils/selector/pseudo-nth-last-of-type01/source.vue
new file mode 100644
index 000000000..f70494bec
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-of-type01/source.vue
@@ -0,0 +1,11 @@
+
+
+
+
+ First line
+
+
+ Second line
+
+
+ Third line
+
+
+ Fourth line
+
+
+
+Fifth line
+
+ This is a span.
+ This is another span.
+ This is emphasized.
+ Wow, this span gets limed!!!
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-of-type02/result.json b/tests/fixtures/utils/selector/pseudo-nth-last-of-type02/result.json
new file mode 100644
index 000000000..9562919e5
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-of-type02/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": ":nth-last-of-type(2)",
+ "matches": [
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/pseudo-nth-last-of-type02/source.vue b/tests/fixtures/utils/selector/pseudo-nth-last-of-type02/source.vue
new file mode 100644
index 000000000..7f97ff7d4
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-last-of-type02/source.vue
@@ -0,0 +1,11 @@
+
+
+ This is struck through.
+ Here is one last span.
+
+ This is a span.
+ This is another span.
+ This is emphasized.
+ Wow, this span gets limed!!!
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-of-type01/result.json b/tests/fixtures/utils/selector/pseudo-nth-of-type01/result.json
new file mode 100644
index 000000000..95f6d8603
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-of-type01/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "p:nth-of-type(2n+1)",
+ "matches": [
+ "This is struck through.
+ Here is one last span.
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-of-type02/result.json b/tests/fixtures/utils/selector/pseudo-nth-of-type02/result.json
new file mode 100644
index 000000000..3a6016733
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-of-type02/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "p:nth-of-type(2n)",
+ "matches": [
+ "This element isn't counted.
+ This element isn't counted.
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-of-type03/result.json b/tests/fixtures/utils/selector/pseudo-nth-of-type03/result.json
new file mode 100644
index 000000000..3ff49b5af
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-of-type03/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "p.fancy:nth-of-type(2n+1)",
+ "matches": [
+ "This element isn't counted.
+ This element isn't counted.
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-nth-of-type04/result.json b/tests/fixtures/utils/selector/pseudo-nth-of-type04/result.json
new file mode 100644
index 000000000..8570c4ccd
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-nth-of-type04/result.json
@@ -0,0 +1,9 @@
+{
+ "selector": ":nth-of-type(2n)",
+ "matches": [
+ "This element isn't counted.
+ This element isn't counted.
+ ",
+ "
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-only-child/result.json b/tests/fixtures/utils/selector/pseudo-only-child/result.json
new file mode 100644
index 000000000..b70fc9b19
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-only-child/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "li:only-child",
+ "matches": [
+ "This element isn't counted.
+ This element isn't counted.
+
+
+
diff --git a/tests/fixtures/utils/selector/pseudo-only-of-type/result.json b/tests/fixtures/utils/selector/pseudo-only-of-type/result.json
new file mode 100644
index 000000000..330fcd4b3
--- /dev/null
+++ b/tests/fixtures/utils/selector/pseudo-only-of-type/result.json
@@ -0,0 +1,8 @@
+{
+ "selector": "main :only-of-type",
+ "matches": [
+ "
+
+
+
+ I am `div` #1.
+ I am `div` #2.
+ I am `div` #3.
+ I am the only `i` child.
+ I am `em` #1.
+ I am `em` #2.
+
+
+
+ ",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/tag01/source.vue b/tests/fixtures/utils/selector/tag01/source.vue
new file mode 100644
index 000000000..695f8978f
--- /dev/null
+++ b/tests/fixtures/utils/selector/tag01/source.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/selector/tag02/result.json b/tests/fixtures/utils/selector/tag02/result.json
new file mode 100644
index 000000000..be68df38f
--- /dev/null
+++ b/tests/fixtures/utils/selector/tag02/result.json
@@ -0,0 +1,7 @@
+{
+ "selector": "p",
+ "matches": [
+ "
+
+
+
+
+
+",
+ "",
+ ""
+ ],
+ "errors": []
+}
\ No newline at end of file
diff --git a/tests/fixtures/utils/selector/universal/source.vue b/tests/fixtures/utils/selector/universal/source.vue
new file mode 100644
index 000000000..edc4361d8
--- /dev/null
+++ b/tests/fixtures/utils/selector/universal/source.vue
@@ -0,0 +1,9 @@
+
+
+
+
+
+
+
+
+
diff --git a/tests/fixtures/utils/ts-utils/src/test.ts b/tests/fixtures/utils/ts-utils/src/test.ts
new file mode 100644
index 000000000..e69de29bb
diff --git a/tests/fixtures/utils/ts-utils/src/test.vue b/tests/fixtures/utils/ts-utils/src/test.vue
new file mode 100644
index 000000000..5bf03f4a7
--- /dev/null
+++ b/tests/fixtures/utils/ts-utils/src/test.vue
@@ -0,0 +1 @@
+
diff --git a/tests/fixtures/utils/ts-utils/tsconfig.json b/tests/fixtures/utils/ts-utils/tsconfig.json
new file mode 100644
index 000000000..f35717b90
--- /dev/null
+++ b/tests/fixtures/utils/ts-utils/tsconfig.json
@@ -0,0 +1,9 @@
+{
+ "compilerOptions": {
+ "strict": true,
+ "skipLibCheck": true,
+ "module": "Node16",
+ "moduleResolution": "Node16",
+ },
+ "include": ["./src/*.ts","./src/*.vue"],
+}
diff --git a/tests/integrations/eslint-plugin-import.js b/tests/integrations/eslint-plugin-import.js
index e1908a636..4e26508ce 100644
--- a/tests/integrations/eslint-plugin-import.js
+++ b/tests/integrations/eslint-plugin-import.js
@@ -5,16 +5,9 @@
*/
'use strict'
-// -----------------------------------------------------------------------------
-// Requirements
-// -----------------------------------------------------------------------------
-
const cp = require('child_process')
const path = require('path')
-
-// -----------------------------------------------------------------------------
-// Tests
-// -----------------------------------------------------------------------------
+const semver = require('semver')
const ESLINT = `.${path.sep}node_modules${path.sep}.bin${path.sep}eslint`
@@ -24,7 +17,7 @@ describe('Integration with eslint-plugin-import', () => {
before(() => {
originalCwd = process.cwd()
process.chdir(path.join(__dirname, 'eslint-plugin-import'))
- cp.execSync('npm i', { stdio: 'inherit', env: { npm_config_package_lock: 'false' }})
+ cp.execSync('npm i', { stdio: 'inherit' })
})
after(() => {
process.chdir(originalCwd)
@@ -34,6 +27,20 @@ describe('Integration with eslint-plugin-import', () => {
// eslint-plugin-vue had been breaking eslint-plugin-import if people use both at the same time.
// This test is in order to prevent the regression.
it('should lint without errors', () => {
+ if (
+ !semver.satisfies(
+ process.version,
+ require(
+ path.join(
+ __dirname,
+ 'eslint-plugin-import/node_modules/eslint/package.json'
+ )
+ ).engines.node
+ )
+ ) {
+ return
+ }
+
cp.execSync(`${ESLINT} a.vue`, { stdio: 'inherit' })
})
})
diff --git a/tests/integrations/eslint-plugin-import/.eslintrc.json b/tests/integrations/eslint-plugin-import/.eslintrc.json
index bd240b24b..20585a5fd 100644
--- a/tests/integrations/eslint-plugin-import/.eslintrc.json
+++ b/tests/integrations/eslint-plugin-import/.eslintrc.json
@@ -1,22 +1,16 @@
{
- "root": true,
- "parserOptions": {
- "sourceType": "module",
- "ecmaVersion": 2015
- },
- "parser": "vue-eslint-parser",
- "plugins": [
- "import",
- "vue"
- ],
- "rules": {
- "import/default": "warn",
- "import/namespace": "warn"
- },
- "settings": {
- "import/extensions": [
- ".js",
- ".vue"
- ]
- }
+ "root": true,
+ "parserOptions": {
+ "sourceType": "module",
+ "ecmaVersion": 2015
+ },
+ "parser": "vue-eslint-parser",
+ "plugins": ["import", "vue"],
+ "rules": {
+ "import/default": "warn",
+ "import/namespace": "warn"
+ },
+ "settings": {
+ "import/extensions": [".js", ".vue"]
+ }
}
diff --git a/tests/integrations/eslint-plugin-import/.npmrc b/tests/integrations/eslint-plugin-import/.npmrc
new file mode 100644
index 000000000..43c97e719
--- /dev/null
+++ b/tests/integrations/eslint-plugin-import/.npmrc
@@ -0,0 +1 @@
+package-lock=false
diff --git a/tests/integrations/eslint-plugin-import/a.vue b/tests/integrations/eslint-plugin-import/a.vue
index ce4b66e14..58a29d388 100644
--- a/tests/integrations/eslint-plugin-import/a.vue
+++ b/tests/integrations/eslint-plugin-import/a.vue
@@ -1,10 +1,10 @@
-
+
diff --git a/tests/integrations/eslint-plugin-import/b.vue b/tests/integrations/eslint-plugin-import/b.vue
index 488aa4466..9cd9ffff4 100644
--- a/tests/integrations/eslint-plugin-import/b.vue
+++ b/tests/integrations/eslint-plugin-import/b.vue
@@ -1,5 +1,5 @@
- Hello
+ Hello
diff --git a/tests/integrations/flat-config/eslint.config.js b/tests/integrations/flat-config/eslint.config.js
new file mode 100644
index 000000000..9fed1e61d
--- /dev/null
+++ b/tests/integrations/flat-config/eslint.config.js
@@ -0,0 +1,9 @@
+const plugin = require('eslint-plugin-vue')
+module.exports = [
+ ...plugin.configs['flat/base'],
+ {
+ rules: {
+ 'vue/no-duplicate-attributes': 'error'
+ }
+ }
+]
diff --git a/tests/integrations/flat-config/package.json b/tests/integrations/flat-config/package.json
new file mode 100644
index 000000000..e46b5e1b6
--- /dev/null
+++ b/tests/integrations/flat-config/package.json
@@ -0,0 +1,13 @@
+{
+ "private": true,
+ "name": "integration-test-for-flat-config",
+ "version": "1.0.0",
+ "description": "Integration test for flat config",
+ "scripts": {},
+ "keywords": [],
+ "license": "MIT",
+ "dependencies": {
+ "eslint": "^9.0.0-0",
+ "eslint-plugin-vue": "file:../../.."
+ }
+}
diff --git a/tests/lib/autofix.js b/tests/lib/autofix.js
index 5a38dd0e4..0711b931c 100644
--- a/tests/lib/autofix.js
+++ b/tests/lib/autofix.js
@@ -4,37 +4,38 @@
*/
'use strict'
-const Linter = require('eslint').Linter
-const chai = require('chai')
+const Linter = require('../eslint-compat').Linter
+const parser = require('vue-eslint-parser')
+const assert = require('assert')
const rules = require('../..').rules
-const assert = chai.assert
-
const baseConfig = {
- parser: 'vue-eslint-parser',
- parserOptions: {
+ files: ['*.vue'],
+ plugins: { vue: { rules } },
+ languageOptions: {
+ parser,
ecmaVersion: 2018,
sourceType: 'module',
- ecmaFeatures: {
- jsx: true
+ parserOptions: {
+ ecmaFeatures: {
+ jsx: true
+ }
}
}
}
describe('Complex autofix test cases', () => {
const linter = new Linter()
- for (const key of Object.keys(rules)) {
- const ruleId = `vue/${key}`
- linter.defineRule(ruleId, rules[key])
- }
// https://github.com/vuejs/eslint-plugin-vue/issues/566
describe('Autofix of `vue/order-in-components` and `comma-dangle` should not conflict.', () => {
- const config = Object.assign({}, baseConfig, { 'rules': {
- 'vue/order-in-components': ['error'],
- 'comma-dangle': ['error', 'always']
- }})
+ const config = Object.assign({}, baseConfig, {
+ rules: {
+ 'vue/order-in-components': ['error'],
+ 'comma-dangle': ['error', 'always']
+ }
+ })
it('Even if set comma-dangle:always, the output should be as expected.', () => {
const code = `
@@ -53,10 +54,7 @@ describe('Complex autofix test cases', () => {
},
};
`
- assert.equal(
- linter.verifyAndFix(code, config, 'test.vue').output,
- output
- )
+ assert.equal(linter.verifyAndFix(code, config, 'test.vue').output, output)
})
it('Even if include comments, the output should be as expected.', () => {
@@ -80,32 +78,47 @@ describe('Complex autofix test cases', () => {
},/*after data*//*after name*/
};
`
- assert.equal(
- linter.verifyAndFix(code, config, 'test.vue').output,
- output
- )
+ assert.equal(linter.verifyAndFix(code, config, 'test.vue').output, output)
})
})
// https://github.com/vuejs/eslint-plugin-vue/issues/554
describe('Autofix of `html-self-closing` and `component-name-in-template-casing` should not conflict.', () => {
- const kebabConfig = Object.assign({}, baseConfig, { 'rules': {
- 'vue/html-self-closing': ['error', {
- 'html': {
- 'component': 'never'
- }
- }],
- 'vue/component-name-in-template-casing': ['error', 'kebab-case']
- }})
+ const kebabConfig = Object.assign({}, baseConfig, {
+ rules: {
+ 'vue/html-self-closing': [
+ 'error',
+ {
+ html: {
+ component: 'never'
+ }
+ }
+ ],
+ 'vue/component-name-in-template-casing': [
+ 'error',
+ 'kebab-case',
+ { registeredComponentsOnly: false }
+ ]
+ }
+ })
- const pascalConfig = Object.assign({}, baseConfig, { 'rules': {
- 'vue/html-self-closing': ['error', {
- 'html': {
- 'component': 'never'
- }
- }],
- 'vue/component-name-in-template-casing': ['error']
- }})
+ const pascalConfig = Object.assign({}, baseConfig, {
+ rules: {
+ 'vue/html-self-closing': [
+ 'error',
+ {
+ html: {
+ component: 'never'
+ }
+ }
+ ],
+ 'vue/component-name-in-template-casing': [
+ 'error',
+ 'PascalCase',
+ { registeredComponentsOnly: false }
+ ]
+ }
+ })
it('Even if set kebab-case, the output should be as expected.', () => {
const code = `
diff --git a/tests/lib/configs/eslintrc.js b/tests/lib/configs/eslintrc.js
new file mode 100644
index 000000000..a9febaeeb
--- /dev/null
+++ b/tests/lib/configs/eslintrc.js
@@ -0,0 +1,29 @@
+'use strict'
+
+const { ESLint } = require('../../eslint-compat')
+const plugin = require('../../../lib/index')
+
+describe('eslintrc configs', () => {
+ for (const name of Object.keys(plugin.configs)) {
+ if (name.startsWith('flat/')) {
+ continue
+ }
+
+ const configName = `plugin:vue/${name}`
+ const eslint = new ESLint({
+ overrideConfigFile: true,
+ overrideConfig: {
+ extends: [configName]
+ },
+ plugins: { vue: plugin },
+ fix: true
+ })
+ describe(`test for ${configName}`, () => {
+ it('without error', async () => {
+ await eslint.lintText('', {
+ filePath: 'test.vue'
+ })
+ })
+ })
+ }
+})
diff --git a/tests/lib/configs/flat.js b/tests/lib/configs/flat.js
new file mode 100644
index 000000000..51449953a
--- /dev/null
+++ b/tests/lib/configs/flat.js
@@ -0,0 +1,294 @@
+/**
+ * @fileoverview flat configs test
+ * @author 唯然Hello
+
+ `
+ const result = await eslint.lintText(code, { filePath: 'test.vue' })
+
+ assert.deepStrictEqual(result[0].messages, [])
+ })
+
+ it('should work the suppress comments with recommended config', async () => {
+ if (!FlatESLint) return
+ const recommended = plugin.configs['flat/recommended']
+ const eslint = new FlatESLint({
+ overrideConfigFile: true,
+ overrideConfig: recommended
+ })
+ const code = `
+
+
+ Hello
+
+`
+ const result = await eslint.lintText(code, { filePath: 'MyComponent.vue' })
+
+ assert.deepStrictEqual(result[0].messages, [])
+ })
+
+ it('should error with recommended config', async () => {
+ if (!FlatESLint) return
+ const recommended = plugin.configs['flat/recommended']
+ const eslint = new FlatESLint({
+ overrideConfigFile: true,
+ overrideConfig: recommended
+ })
+ const code = `
+
+ Hello
+
+`
+ const result = await eslint.lintText(code, { filePath: 'MyComponent.vue' })
+
+ assert.deepStrictEqual(
+ result[0].messages.map((message) => message.ruleId),
+ [
+ 'vue/no-parsing-error',
+ 'vue/max-attributes-per-line',
+ 'vue/no-duplicate-attributes',
+ 'vue/singleline-html-element-content-newline',
+ 'vue/singleline-html-element-content-newline'
+ ]
+ )
+ })
+})
diff --git a/tests/lib/meta.js b/tests/lib/meta.js
new file mode 100644
index 000000000..f9012ce03
--- /dev/null
+++ b/tests/lib/meta.js
@@ -0,0 +1,20 @@
+'use strict'
+
+const assert = require('assert')
+const plugin = require('../..')
+const expectedMeta = {
+ name: 'eslint-plugin-vue',
+ version: require('../../package.json').version
+}
+
+describe('Test for meta object', () => {
+ it('A plugin should have a meta object.', () => {
+ assert.deepStrictEqual(plugin.meta, expectedMeta)
+ })
+
+ for (const [name, processor] of Object.entries(plugin.processors)) {
+ it(`"${name}" processor should have a meta object.`, () => {
+ assert.deepStrictEqual(processor.meta, expectedMeta)
+ })
+ }
+})
diff --git a/tests/lib/rules-without-vue-eslint-parser.js b/tests/lib/rules-without-vue-eslint-parser.js
index 129a57b93..e5977f1e2 100644
--- a/tests/lib/rules-without-vue-eslint-parser.js
+++ b/tests/lib/rules-without-vue-eslint-parser.js
@@ -4,8 +4,9 @@
*/
'use strict'
-const Linter = require('eslint').Linter
+const Linter = require('../eslint-compat').Linter
const rules = require('../..').rules
+const assert = require('assert')
describe("Don't crash even if without vue-eslint-parser.", () => {
const code = 'TEST'
@@ -16,14 +17,32 @@ describe("Don't crash even if without vue-eslint-parser.", () => {
it(ruleId, () => {
const linter = new Linter()
const config = {
- parser: 'babel-eslint',
- parserOptions: { ecmaVersion: 2015 },
+ files: ['*.vue', '*.js'],
+ languageOptions: {
+ ecmaVersion: 2015,
+ parserOptions: { ecmaFeatures: { jsx: true } }
+ },
+ plugins: {
+ vue: {
+ rules: {
+ [key]: rules[key]
+ }
+ }
+ },
rules: {
[ruleId]: 'error'
}
}
- linter.defineRule(ruleId, rules[key])
- linter.verifyAndFix(code, config, 'test.vue')
+ const resultVue = linter.verifyAndFix(code, config, 'test.vue')
+ for (const { message } of resultVue.messages) {
+ assert.strictEqual(
+ message,
+ 'Use the latest vue-eslint-parser. See also https://eslint.vuejs.org/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error.'
+ )
+ }
+
+ const resultJs = linter.verifyAndFix(code, config, 'test.js')
+ assert.strictEqual(resultJs.messages.length, 0)
})
}
})
diff --git a/tests/lib/rules-without-vue-sfc.js b/tests/lib/rules-without-vue-sfc.js
new file mode 100644
index 000000000..7a8b668a9
--- /dev/null
+++ b/tests/lib/rules-without-vue-sfc.js
@@ -0,0 +1,38 @@
+/**
+ * @author Yosuke Ota ',
options: ['always']
},
+ {
+ filename: 'test.vue',
+ code: '',
+ options: ['always']
+ },
{
filename: 'test.vue',
code: '',
@@ -46,7 +44,67 @@ ruleTester.run('attribute-hyphenation', rule, {
{
filename: 'test.vue',
code: '',
+ options: ['always']
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ options: ['never']
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ options: ['always']
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ options: ['never']
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ options: ['always']
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ options: ['never']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ ',
output: '',
options: ['never'],
- errors: [{
- message: "Attribute 'my-prop' can't be hyphenated.",
- type: 'VIdentifier',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute 'my-prop' can't be hyphenated.",
+ type: 'VIdentifier',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
+ output: null,
options: ['always'],
- errors: [{
- message: "Attribute 'MyProp' must be hyphenated.",
- type: 'VIdentifier',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute 'MyProp' must be hyphenated.",
+ type: 'VIdentifier',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
+ output:
+ '',
options: ['never'],
- errors: [{
- message: "Attribute ':my-prop' can't be hyphenated.",
- type: 'VDirectiveKey',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute ':my-prop' can't be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
+ output: null,
options: ['always'],
- errors: [{
- message: "Attribute ':MyProp' must be hyphenated.",
- type: 'VDirectiveKey',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute ':MyProp' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
+ output:
+ '',
options: ['never'],
- errors: [{
- message: "Attribute 'v-bind:my-prop' can't be hyphenated.",
- type: 'VDirectiveKey',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute 'v-bind:my-prop' can't be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
+ output: null,
options: ['always'],
- errors: [{
- message: "Attribute 'v-bind:MyProp' must be hyphenated.",
- type: 'VDirectiveKey',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute 'v-bind:MyProp' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
- options: ['always', { 'ignore': [] }],
- errors: [{
- message: "Attribute 'v-bind:MyProp' must be hyphenated.",
- type: 'VDirectiveKey',
- line: 1
- }]
+ output: null,
+ options: ['always', { ignore: [] }],
+ errors: [
+ {
+ message: "Attribute 'v-bind:MyProp' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
+ output:
+ '',
options: ['never', { ignore: ['my-prop'] }],
- errors: [{
- message: "Attribute ':second-prop' can't be hyphenated.",
- type: 'VDirectiveKey',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute ':second-prop' can't be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
+ output:
+ '',
options: ['always', { ignore: ['secondProp'] }],
- errors: [{
- message: "Attribute 'v-bind:myProp' must be hyphenated.",
- type: 'VDirectiveKey',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute 'v-bind:myProp' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- output: '',
+ output:
+ '',
options: ['always', { ignore: ['secondPropID'] }],
- errors: [{
- message: "Attribute 'v-bind:propID' must be hyphenated.",
- type: 'VDirectiveKey',
- line: 1
- }]
+ errors: [
+ {
+ message: "Attribute 'v-bind:propID' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ // https://github.com/vuejs/eslint-plugin-vue/issues/2510
+ filename: 'test.vue',
+ code: '',
+ output:
+ '',
+ options: ['never'],
+ errors: [
+ {
+ message: "Attribute 'v-model:my-prop' can't be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output:
+ '',
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute 'v-model:myProp' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute 'v-model:MyProp' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
@@ -177,12 +302,14 @@ ruleTester.run('attribute-hyphenation', rule, {
`,
- options: ['never', { 'ignore': ['custom-hyphen', 'second-custom'] }],
- errors: [{
- message: "Attribute 'third-custom' can't be hyphenated.",
- type: 'VIdentifier',
- line: 3
- }]
+ options: ['never', { ignore: ['custom-hyphen', 'second-custom'] }],
+ errors: [
+ {
+ message: "Attribute 'third-custom' can't be hyphenated.",
+ type: 'VIdentifier',
+ line: 3
+ }
+ ]
},
{
filename: 'test.vue',
@@ -201,15 +328,194 @@ ruleTester.run('attribute-hyphenation', rule, {
`,
options: ['never'],
- errors: [{
- message: "Attribute 'custom-hyphen' can't be hyphenated.",
- type: 'VIdentifier',
- line: 3
- }, {
- message: "Attribute 'second-custom' can't be hyphenated.",
- type: 'VIdentifier',
- line: 3
- }]
+ errors: [
+ {
+ message: "Attribute 'custom-hyphen' can't be hyphenated.",
+ type: 'VIdentifier',
+ line: 3
+ },
+ {
+ message: "Attribute 'second-custom' can't be hyphenated.",
+ type: 'VIdentifier',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: '',
+ options: ['never'],
+ errors: [
+ {
+ message: "Attribute 'my-prop' can't be hyphenated.",
+ type: 'VIdentifier',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute 'MyProp' must be hyphenated.",
+ type: 'VIdentifier',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute ':attr_Gg' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute ':Attr_Hh' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute ':_attr_Jj' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute ':_attrKk' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute ':_AttrLl' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['never'],
+ errors: [
+ {
+ message: "Attribute ':my-custom_prop' can't be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['always'],
+ errors: [
+ {
+ message: "Attribute ':myAge.sync' must be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output: null,
+ options: ['never'],
+ errors: [
+ {
+ message: "Attribute ':my-age.sync' can't be hyphenated.",
+ type: 'VDirectiveKey',
+ line: 1
+ }
+ ]
+ },
+ {
+ code: `
+
+
+ code: `
+ code: `
+ code: `
`,
- options: [{
- singleline: 'never',
- multiline: 'always'
- }],
+ options: [
+ {
+ singleline: 'never',
+ multiline: 'always'
+ }
+ ],
errors: [
'Expected no line breaks before closing bracket, but 1 line break found.',
'Expected no line breaks before closing bracket, but 1 line break found.'
@@ -277,10 +322,12 @@ tester.run('html-closing-bracket-newline', rule, {
`,
- options: [{
- singleline: 'always',
- multiline: 'never'
- }],
+ options: [
+ {
+ singleline: 'always',
+ multiline: 'never'
+ }
+ ],
errors: [
'Expected no line breaks before closing bracket, but 1 line break found.',
'Expected 1 line break before closing bracket, but no line breaks found.'
@@ -305,14 +352,266 @@ tester.run('html-closing-bracket-newline', rule, {
`,
- options: [{
- singleline: 'always',
- multiline: 'never'
- }],
+ options: [
+ {
+ singleline: 'always',
+ multiline: 'never'
+ }
+ ],
errors: [
'Expected 1 line break before closing bracket, but no line breaks found.',
'Expected 1 line break before closing bracket, but no line breaks found.'
]
+ },
+ {
+ code: `
+
+
+
+
+ `,
+ output: `
+
+
+
+
+ `,
+ options: [
+ {
+ singleline: 'never',
+ multiline: 'never'
+ }
+ ],
+ errors: [
+ {
+ message:
+ 'Expected no line breaks before closing bracket, but 1 line break found.',
+ line: 2,
+ column: 18,
+ endLine: 3,
+ endColumn: 9
+ },
+ {
+ message:
+ 'Expected no line breaks before closing bracket, but 1 line break found.',
+ line: 4,
+ column: 19,
+ endLine: 5,
+ endColumn: 9
+ },
+ {
+ message:
+ 'Expected no line breaks before closing bracket, but 1 line break found.',
+ line: 6,
+ column: 16,
+ endLine: 7,
+ endColumn: 9
+ },
+ {
+ message:
+ 'Expected no line breaks before closing bracket, but 1 line break found.',
+ line: 8,
+ column: 17,
+ endLine: 9,
+ endColumn: 9
+ },
+ {
+ message:
+ 'Expected no line breaks before closing bracket, but 1 line break found.',
+ line: 10,
+ column: 15,
+ endLine: 11,
+ endColumn: 9
+ },
+ {
+ message:
+ 'Expected no line breaks before closing bracket, but 1 line break found.',
+ line: 11,
+ column: 17,
+ endLine: 12,
+ endColumn: 9
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+ `,
+ output: `
+
+
+
+
+ `,
+ options: [
+ {
+ singleline: 'always',
+ multiline: 'always'
+ }
+ ],
+ errors: [
+ {
+ message:
+ 'Expected 1 line break before closing bracket, but no line breaks found.',
+ line: 2,
+ column: 18,
+ endColumn: 18
+ },
+ {
+ message:
+ 'Expected 1 line break before closing bracket, but no line breaks found.',
+ line: 3,
+ column: 19,
+ endColumn: 19
+ },
+ {
+ message:
+ 'Expected 1 line break before closing bracket, but no line breaks found.',
+ line: 4,
+ column: 16,
+ endColumn: 16
+ },
+ {
+ message:
+ 'Expected 1 line break before closing bracket, but no line breaks found.',
+ line: 5,
+ column: 17,
+ endColumn: 17
+ },
+ {
+ message:
+ 'Expected 1 line break before closing bracket, but no line breaks found.',
+ line: 6,
+ column: 15,
+ endColumn: 15
+ },
+ {
+ message:
+ 'Expected 1 line break before closing bracket, but no line breaks found.',
+ line: 6,
+ column: 23,
+ endColumn: 23
+ }
+ ]
+ },
+ {
+ code: `
+
+
+ code: `
`,
- options: [{
- singleline: 'never',
- multiline: 'always'
- }],
+ options: [
+ {
+ singleline: 'never',
+ multiline: 'always'
+ }
+ ],
errors: [
'Expected 1 line break before closing bracket, but no line breaks found.'
]
@@ -247,10 +290,12 @@ tester.run('html-closing-bracket-newline', rule, {
',
options: [
- { order:
- ['LIST_RENDERING',
+ {
+ order: [
+ 'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'GLOBAL',
@@ -194,15 +206,18 @@ tester.run('attributes-order', rule, {
'OTHER_ATTR',
'EVENTS',
'CONTENT',
- 'DEFINITION']
- }]
+ 'DEFINITION'
+ ]
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
options: [
- { order:
- ['LIST_RENDERING',
+ {
+ order: [
+ 'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'GLOBAL',
@@ -212,13 +227,14 @@ tester.run('attributes-order', rule, {
'OTHER_DIRECTIVES',
'OTHER_ATTR',
'EVENTS',
- 'CONTENT']
- }]
+ 'CONTENT'
+ ]
+ }
+ ]
},
{
filename: 'test.vue',
- code:
- `
+ code: `
`,
- options: [{
- singleline: 'never',
- multiline: 'never'
- }],
+ options: [
+ {
+ singleline: 'never',
+ multiline: 'never'
+ }
+ ],
errors: [
'Expected no line breaks before closing bracket, but 1 line break found.'
]
@@ -224,10 +265,12 @@ tester.run('html-closing-bracket-newline', rule, {
`,
options: [
- { order:
- [
+ {
+ order: [
'CONDITIONALS',
'LIST_RENDERING',
'RENDER_MODIFIERS',
@@ -248,249 +264,599 @@ tester.run('attributes-order', rule, {
'OTHER_ATTR',
'OTHER_DIRECTIVES'
]
- }]
+ }
+ ]
},
{
filename: 'test.vue',
- code:
- `
+ code: `
`,
- options: [{
- singleline: 'never',
- multiline: 'always'
- }]
+ options: [
+ {
+ singleline: 'never',
+ multiline: 'always'
+ }
+ ]
},
{
code: `
@@ -91,10 +88,12 @@ tester.run('html-closing-bracket-newline', rule, {
`,
- options: [{
- singleline: 'always',
- multiline: 'never'
- }]
+ options: [
+ {
+ singleline: 'always',
+ multiline: 'never'
+ }
+ ]
},
{
code: `
@@ -107,10 +106,48 @@ tester.run('html-closing-bracket-newline', rule, {
`,
- options: [{
- singleline: 'always',
- multiline: 'never'
- }]
+ options: [
+ {
+ singleline: 'always',
+ multiline: 'never'
+ }
+ ]
+ },
+ {
+ code: `
+
+
`,
options: [
- { order:
- [
+ {
+ order: [
'CONDITIONALS',
'LIST_RENDERING',
'RENDER_MODIFIERS',
'DEFINITION',
'EVENTS',
'UNIQUE',
- ['BINDING', 'OTHER_ATTR'],
+ ['TWO_WAY_BINDING', 'OTHER_ATTR'],
'CONTENT',
'GLOBAL'
]
- }]
- }
- ],
-
- invalid: [
+ }
+ ]
+ },
{
filename: 'test.vue',
- code: '',
- output: '',
- errors: [{
- message: 'Attribute "is" should go before "v-cloak".',
- type: 'VIdentifier'
- }]
+ code: `
+
+
+ `
},
{
filename: 'test.vue',
- code: '',
- output: '',
- errors: [{
- message: 'Attribute "v-cloak" should go before "id".',
- type: 'VDirectiveKey'
- }]
+ code: `
+
+
+ `,
+ options: [{ alphabetical: true }]
},
{
filename: 'test.vue',
- code:
- `
+ code: `
+ class="foo"
+ :class="bar">
`,
- output:
- `
+ options: [{ alphabetical: true }]
+ },
+ {
+ filename: 'duplicate.vue',
+ code: `
+ class="foo"
+ class="bar">
`,
- errors: [{
- message: 'Attribute "v-model" should go before "model".',
- type: 'VDirectiveKey'
- },
- {
- message: 'Attribute ":id" should go before "propOne".',
- type: 'VDirectiveKey'
- }]
+ options: [{ alphabetical: true }]
+ },
+ {
+ filename: 'duplicate.vue',
+ code: `
+
+
+ `,
+ options: [{ alphabetical: true }]
},
{
filename: 'test.vue',
- code:
- `
+ code: `
+ v-if="foo"
+ v-show="bar">
`,
- output:
- `
+ options: [{ alphabetical: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ v-bar="bar"
+ v-foo="foo">
`,
- errors: [{
- message: 'Attribute "v-model" should go before "v-on".',
- type: 'VDirectiveKey'
- },
- {
- message: 'Attribute "propOne" should go before "v-on".',
- type: 'VIdentifier'
- }]
+ options: [{ alphabetical: true }]
},
{
filename: 'test.vue',
- code: '',
- output: '',
- errors: [{
- message: 'Attribute "is" should go before "aria-test".',
- type: 'VIdentifier'
- }]
+ code: `
+
+
+ `,
+ options: [{ alphabetical: true }]
+ },
+
+ // v-bind="..."
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ options: [{ alphabetical: true }]
},
{
filename: 'test.vue',
- code: '',
+ code: `
+
+
+
+ `,
+ options: [{ alphabetical: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ options: [{ alphabetical: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ options: [{ alphabetical: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `
+ },
+
+ // omit order
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }]
+ },
+
+ // https://github.com/vuejs/eslint-plugin-vue/issues/1728
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ options: [
+ {
+ order: ['ATTR_DYNAMIC', 'ATTR_STATIC'],
+ alphabetical: false
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ options: [
+ {
+ order: ['TWO_WAY_BINDING', 'ATTR_DYNAMIC', 'ATTR_STATIC'],
+ alphabetical: false
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
options: [
- { order:
- ['LIST_RENDERING',
+ {
+ order: [
+ 'DEFINITION',
+ 'LIST_RENDERING',
'CONDITIONALS',
'RENDER_MODIFIERS',
'GLOBAL',
- 'UNIQUE',
+ ['UNIQUE', 'SLOT'],
'TWO_WAY_BINDING',
+ 'OTHER_DIRECTIVES',
+ 'ATTR_STATIC',
+ 'ATTR_DYNAMIC',
+ 'EVENTS',
+ 'CONTENT'
+ ],
+ alphabetical: false
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ options: [
+ {
+ order: [
'DEFINITION',
+ 'LIST_RENDERING',
+ 'CONDITIONALS',
+ 'RENDER_MODIFIERS',
+ 'GLOBAL',
+ ['UNIQUE', 'SLOT'],
+ 'TWO_WAY_BINDING',
'OTHER_DIRECTIVES',
- 'OTHER_ATTR',
+ ['ATTR_STATIC', 'ATTR_DYNAMIC'],
'EVENTS',
- 'CONTENT']
- }],
- output: '',
- errors: [{
- message: 'Attribute "is" should go before "propone".',
- type: 'VIdentifier'
- }]
+ 'CONTENT'
+ ],
+ alphabetical: false
+ }
+ ]
},
+
+ // https://github.com/vuejs/eslint-plugin-vue/issues/1870
{
filename: 'test.vue',
- code:
- `
-
-
- `,
- output:
- `
-
-
- `,
- errors: [{
- message: 'Attribute "is" should go before "v-cloak".',
- type: 'VIdentifier'
- }]
+ code: `
+
+
+
+ `,
+ options: [
+ {
+ order: [
+ 'DEFINITION',
+ 'LIST_RENDERING',
+ 'CONDITIONALS',
+ 'RENDER_MODIFIERS',
+ 'GLOBAL',
+ ['UNIQUE', 'SLOT'],
+ 'TWO_WAY_BINDING',
+ 'OTHER_DIRECTIVES',
+ 'ATTR_SHORTHAND_BOOL',
+ 'ATTR_STATIC',
+ 'ATTR_DYNAMIC',
+ 'EVENTS',
+ 'CONTENT'
+ ],
+ alphabetical: false
+ }
+ ]
+ }
+ ],
+
+ invalid: [
+ {
+ filename: 'test.vue',
+ code: '',
+ output: '',
+ errors: [
+ {
+ message: 'Attribute "is" should go before "v-cloak".',
+ type: 'VAttribute'
+ }
+ ]
},
{
filename: 'test.vue',
- code:
- `
-
-
- `,
- output:
- `
-
-
- `,
+ code: '',
+ output: '',
errors: [
{
- message: 'Attribute "v-for" should go before "v-if".',
- type: 'VDirectiveKey'
- },
+ message: 'Attribute "v-cloak" should go before "id".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ errors: [
{
- message: 'Attribute "is" should go before "v-once".',
- type: 'VIdentifier'
+ message: 'Attribute "v-model" should go before "model".',
+ type: 'VAttribute'
},
{
- message: 'Attribute "ref" should go before "v-on:click".',
- type: 'VIdentifier'
- },
+ message: 'Attribute ":id" should go before "propOne".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ errors: [
{
- message: 'Attribute ":prop" should go before "v-on:click".',
- type: 'VDirectiveKey'
+ message: 'Attribute "v-model" should go before "v-on".',
+ type: 'VAttribute'
},
{
- message: 'Attribute "id" should go before "v-text".',
- type: 'VIdentifier'
- },
+ message: 'Attribute "propOne" should go before "v-on".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ output:
+ '',
+ errors: [
{
- message: 'Attribute "myProp" should go before "v-text".',
- type: 'VIdentifier'
+ message: 'Attribute "is" should go before "aria-test".',
+ type: 'VAttribute'
}
]
},
{
filename: 'test.vue',
- code:
- `
-
-
- `,
+ code: '',
+ output:
+ '',
options: [
- { order:
- [
+ {
+ order: [
+ 'LIST_RENDERING',
+ 'CONDITIONALS',
+ 'RENDER_MODIFIERS',
+ 'GLOBAL',
+ 'UNIQUE',
+ 'TWO_WAY_BINDING',
+ 'DEFINITION',
+ 'OTHER_DIRECTIVES',
+ 'OTHER_ATTR',
+ 'EVENTS',
+ 'CONTENT'
+ ]
+ }
+ ],
+ errors: [
+ {
+ message: 'Attribute "is" should go before "propone".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ errors: [
+ {
+ message: 'Attribute "is" should go before "v-cloak".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ errors: [
+ {
+ message: 'Attribute "v-for" should go before "v-if".',
+ type: 'VAttribute'
+ },
+ {
+ message: 'Attribute "is" should go before "v-once".',
+ type: 'VAttribute'
+ },
+ {
+ message: 'Attribute "ref" should go before "v-on:click".',
+ type: 'VAttribute'
+ },
+ {
+ message: 'Attribute ":prop" should go before "v-on:click".',
+ type: 'VAttribute'
+ },
+ {
+ message: 'Attribute "id" should go before "v-text".',
+ type: 'VAttribute'
+ },
+ {
+ message: 'Attribute "myProp" should go before "v-text".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [
+ {
+ order: [
'EVENTS',
'TWO_WAY_BINDING',
'UNIQUE',
@@ -503,87 +869,903 @@ tester.run('attributes-order', rule, {
'OTHER_DIRECTIVES',
'CONTENT'
]
- }],
- output:
- `
-
-
- `,
+ }
+ ],
errors: [
{
message: 'Attribute "is" should go before "v-once".',
- nodeType: 'VIdentifier'
+ type: 'VAttribute'
},
{
message: 'Attribute "v-on:click" should go before "v-once".',
- nodeType: 'VDirectiveKey'
+ type: 'VAttribute'
},
{
message: 'Attribute "ref" should go before "v-once".',
- nodeType: 'VIdentifier'
+ type: 'VAttribute'
},
{
message: 'Attribute "id" should go before "v-text".',
- nodeType: 'VIdentifier'
+ type: 'VAttribute'
},
{
message: 'Attribute "myProp" should go before "v-text".',
- nodeType: 'VIdentifier'
+ type: 'VAttribute'
}
]
},
{
- code:
- `
-
-
- `,
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
options: [
- { order:
- [
+ {
+ order: [
'CONDITIONALS',
'LIST_RENDERING',
'RENDER_MODIFIERS',
'DEFINITION',
'EVENTS',
'UNIQUE',
- ['BINDING', 'OTHER_ATTR'],
+ ['TWO_WAY_BINDING', 'OTHER_ATTR'],
'CONTENT',
'GLOBAL'
]
- }],
- output:
- `
+ }
+ ],
+ errors: [
+ {
+ message: 'Attribute "v-if" should go before "class".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute "a-prop" should go before "z-prop".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute ":a-prop" should go before ":z-prop".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute "@change" should go before "@input".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute "boolean-prop" should go before "z-prop".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute "v-on:[c]" should go before "v-on:click".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ v-on:click="functionCall">
`,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
errors: [
{
- message: 'Attribute "v-if" should go before "class".',
- nodeType: 'VIdentifier'
+ message: 'Attribute "v-on:click" should go before "v-text".',
+ type: 'VAttribute'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ output: `
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute "class" should go before ":class".'
}
]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute "v-if" should go before "v-show".'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute "v-bar" should go before "v-foo".'
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ {
+ message: 'Attribute "v-foo.a" should go before "v-foo.b".'
+ }
+ ]
+ },
+
+ {
+ filename: 'test.vue',
+ code: '',
+ output: '',
+ errors: [
+ {
+ message: 'Attribute "v-is" should go before "v-cloak".'
+ }
+ ]
+ },
+
+ // v-bind="..."
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ errors: ['Attribute "v-if" should go before "v-bind:id".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ errors: ['Attribute "v-if" should go before "v-bind:id".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ errors: ['Attribute "v-if" should go before "v-bind:id".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: ['Attribute "v-bind:id" should go before "v-on:click".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: ['Attribute "v-bind" should go before "v-on:click".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: ['Attribute "v-bind:id" should go before "v-on:click".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ 'Attribute "v-bind:a" should go before "v-on:click".',
+ 'Attribute "v-if" should go before "v-on:click".'
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ 'Attribute "v-bind" should go before "v-on:click".',
+ 'Attribute "v-if" should go before "v-on:click".'
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: ['Attribute "v-if" should go before "a".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ alphabetical: true }],
+ errors: [
+ 'Attribute "v-bind" should go before "v-on:click".',
+ 'Attribute "v-if" should go before "v-on:click".'
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ errors: ['Attribute "v-model" should go before "v-custom-directive".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ errors: ['Attribute "v-bind:id" should go before "v-model".']
+ },
+
+ // omit order
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }],
+ errors: ['Attribute "v-for" should go before "v-if".']
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [{ order: ['LIST_RENDERING', 'CONDITIONALS'] }],
+ errors: ['Attribute "v-for" should go before "v-if".']
+ },
+
+ // slot
+ {
+ filename: 'test.vue',
+ code: '',
+ output:
+ '',
+ options: [
+ {
+ order: [
+ 'UNIQUE',
+ 'LIST_RENDERING',
+ 'CONDITIONALS',
+ 'RENDER_MODIFIERS',
+ 'GLOBAL',
+ 'TWO_WAY_BINDING',
+ 'OTHER_DIRECTIVES',
+ 'OTHER_ATTR',
+ 'EVENTS',
+ 'CONTENT',
+ 'DEFINITION',
+ 'SLOT'
+ ]
+ }
+ ],
+ errors: [
+ {
+ message: 'Attribute "bar" should go before "v-slot".'
+ }
+ ]
+ },
+
+ {
+ filename: 'test.vue',
+ code: '',
+ output:
+ '',
+ options: [
+ {
+ order: [
+ 'UNIQUE',
+ 'LIST_RENDERING',
+ 'CONDITIONALS',
+ 'RENDER_MODIFIERS',
+ 'GLOBAL',
+ 'TWO_WAY_BINDING',
+ 'OTHER_DIRECTIVES',
+ 'OTHER_ATTR',
+ 'EVENTS',
+ 'CONTENT',
+ 'DEFINITION',
+ 'SLOT'
+ ]
+ }
+ ],
+ errors: [
+ {
+ message: 'Attribute "ref" should go before "bar".'
+ }
+ ]
+ },
+
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ errors: [
+ 'Attribute "v-if" should go before "v-bind".',
+ 'Attribute "ref" should go before "v-model".'
+ ]
+ },
+
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ errors: ['Attribute "v-bind" should go before "@click".']
+ },
+
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ errors: ['Attribute "v-bind" should go before "@click".']
+ },
+
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ order: ['UNIQUE', 'EVENTS', 'OTHER_ATTR'] }],
+ errors: ['Attribute "@input" should go before "v-bind".']
+ },
+
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ order: ['UNIQUE', 'EVENTS', 'OTHER_ATTR'] }],
+ errors: ['Attribute "@click" should go before "v-bind".']
+ },
+
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [{ order: ['ATTR_STATIC', 'ATTR_DYNAMIC'] }],
+ errors: ['Attribute "prop-two" should go before "v-bind:prop-one".']
+ },
+
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [
+ {
+ order: [
+ 'LIST_RENDERING',
+ 'CONDITIONALS',
+ 'RENDER_MODIFIERS',
+ 'TWO_WAY_BINDING',
+ 'OTHER_DIRECTIVES',
+ 'ATTR_DYNAMIC',
+ 'ATTR_STATIC',
+ 'ATTR_SHORTHAND_BOOL',
+ 'EVENTS'
+ ]
+ }
+ ],
+ errors: [
+ 'Attribute "v-model" should go before ":prop-one".',
+ 'Attribute ":prop-three" should go before "prop-two".'
+ ]
+ },
+
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: [
+ {
+ order: [
+ 'UNIQUE',
+ 'LIST_RENDERING',
+ 'CONDITIONALS',
+ 'RENDER_MODIFIERS',
+ 'GLOBAL',
+ 'TWO_WAY_BINDING',
+ 'OTHER_DIRECTIVES',
+ ['ATTR_STATIC', 'ATTR_DYNAMIC', 'ATTR_SHORTHAND_BOOL'],
+ 'EVENTS',
+ 'CONTENT',
+ 'DEFINITION',
+ 'SLOT'
+ ]
+ }
+ ],
+ errors: ['Attribute "v-model" should go before ":prop-one".']
}
]
})
diff --git a/tests/lib/rules/block-lang.js b/tests/lib/rules/block-lang.js
new file mode 100644
index 000000000..5f7851b54
--- /dev/null
+++ b/tests/lib/rules/block-lang.js
@@ -0,0 +1,183 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/block-lang')
+
+const tester = new RuleTester({
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2015
+ }
+})
+
+tester.run('block-lang', rule, {
+ valid: [
+ {
+ code: `
+ `,
+ options: [{ script: { lang: 'ts' } }]
+ },
+ {
+ code: `
+ `,
+ options: [{ script: { lang: 'js' } }]
+ },
+ {
+ code: 'text
',
+ 'text ' should be above '',
+ output: '',
+ options: [{ order: ['script', 'template', 'style'] }],
+ errors: [
+ {
+ message: "'`,
+ output:
+ '\n' +
+ ' \n' +
+ '\n' +
+ ' \n' +
+ '\n' +
+ ' ',
+ errors: [
+ {
+ message: "'
+
+ `,
+ output:
+ '\n' +
+ ' \n' +
+ ' \n' +
+ ' \n' +
+ ' ',
+ options: [{ order: ['script', 'template', 'style'] }],
+ errors: [
+ {
+ message: "'
+
+
+ `,
+ output:
+ '\n' +
+ ' \n' +
+ ' \n' +
+ ' \n' +
+ ' ',
+ options: [{ order: ['template', 'script', 'style'] }],
+ errors: [
+ {
+ message: "'' should be above '
+
+ `,
+ output:
+ '\n' +
+ '
`,
- options: [{
- singleline: 'never',
- multiline: 'always'
- }]
+ options: [
+ {
+ singleline: 'never',
+ multiline: 'always'
+ }
+ ]
},
{
code: `
@@ -75,10 +70,12 @@ tester.run('html-closing-bracket-newline', rule, {
\n\n\n',
+ '\n',
+ '\n\n\n',
+ '\n',
+ {
+ code: '\n\n',
+ options: [{ singleline: 'never', multiline: 'never' }]
+ },
+ {
+ code: '\n\n\n',
+ options: [{ singleline: 'always', multiline: 'always' }]
+ },
+ {
+ code: '\n\n\n\n\n',
+ options: [{ singleline: 'always', multiline: 'always', maxEmptyLines: 1 }]
+ },
+ {
+ code: '\n\n',
+ options: [{ singleline: 'ignore', multiline: 'ignore' }]
+ },
+ {
+ code: '\n',
+ options: [{ multiline: 'never' }]
+ },
+ {
+ code: '\n\n\n\n',
+ options: [{ singleline: 'never' }]
+ },
+ // invalid
+ ''.",
+ line: 1,
+ column: 11
+ },
+ {
+ message: "A line break is required after '',
+ output: '\n\n\n',
+ errors: [
+ {
+ message: "A line break is required before ''.",
+ line: 2,
+ column: 8
+ },
+ {
+ message: "A line break is required before ''.",
+ line: 4,
+ column: 6
+ }
+ ]
+ },
+ {
+ code: '
`,
- options: [{
- singleline: 'never',
- multiline: 'never'
- }]
+ options: [
+ {
+ singleline: 'never',
+ multiline: 'never'
+ }
+ ]
},
{
code: `
@@ -63,10 +56,12 @@ tester.run('html-closing-bracket-newline', rule, {
\n\n',
+ output:
+ '\n\n\n\n',
+ errors: [
+ {
+ message: "A line break is required after ''.",
+ line: 1,
+ column: 11
+ },
+ {
+ message: "A line break is required before ''.",
+ line: 2,
+ column: 7
+ },
+ {
+ message: "A line break is required after ''.",
+ line: 4,
+ column: 6
+ }
+ ]
+ },
+ {
+ code: '\n\n\n\n',
+ output: '\n\n',
+ options: [{ singleline: 'never', multiline: 'never' }],
+ errors: [
+ {
+ message: "There should be no line break after ''.",
+ line: 1,
+ column: 11
+ },
+ {
+ message: "There should be no line break after ''.",
+ line: 3,
+ column: 7
+ },
+ {
+ message: "There should be no line break after '',
+ output:
+ '\n\n\n\n',
+ options: [{ singleline: 'always', multiline: 'always' }],
+ errors: [
+ {
+ message: "A line break is required after ''.",
+ line: 1,
+ column: 11
+ },
+ {
+ message: "A line break is required before ''.",
+ line: 2,
+ column: 7
+ },
+ {
+ message: "A line break is required after ''.",
+ line: 3,
+ column: 14
+ }
+ ]
+ },
+ {
+ code: '\n\n\n\n\n',
+ output:
+ '\n\n\n',
+ options: [{ singleline: 'always', multiline: 'always' }],
+ errors: [
+ {
+ message:
+ "Expected 1 line break after '', but 2 line breaks found.",
+ line: 1,
+ column: 11
+ },
+ {
+ message:
+ "Expected 1 line break before '', but 2 line breaks found.",
+ line: 3,
+ column: 8
+ },
+ {
+ message:
+ "Expected 1 line break after '', but 2 line breaks found.",
+ line: 9,
+ column: 6
+ }
+ ]
+ },
+ {
+ code: '\n\n\n\n\n\n',
+ output:
+ '\n\n\n\n\n',
+ options: [
+ { singleline: 'always', multiline: 'always', maxEmptyLines: 1 }
+ ],
+ errors: [
+ {
+ message:
+ "Expected 2 line breaks after '', but 3 line breaks found.",
+ line: 1,
+ column: 11
+ },
+ {
+ message:
+ "Expected 2 line breaks before '', but 3 line breaks found.",
+ line: 10,
+ column: 6
+ }
+ ]
+ },
+ {
+ code: '\n\n\nHello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
- assert.deepEqual(messages.length, 0)
+ assert.deepStrictEqual(messages, [])
})
- it('disable specific rules if ', () => {
+ it('disable specific rules if ', async () => {
const code = `
Hello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 1)
assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
})
- it('enable all rules if ', () => {
+ it('enable all rules if ', async () => {
const code = `
@@ -85,7 +69,7 @@ describe('comment-directive', () => {
Hello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 2)
assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
@@ -94,7 +78,7 @@ describe('comment-directive', () => {
assert.deepEqual(messages[1].line, 6)
})
- it('enable specific rules if ', () => {
+ it('enable specific rules if ', async () => {
const code = `
@@ -103,14 +87,14 @@ describe('comment-directive', () => {
Hello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 1)
assert.deepEqual(messages[0].ruleId, 'vue/no-duplicate-attributes')
assert.deepEqual(messages[0].line, 6)
})
- it('should not affect to the code in
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.strictEqual(messages.length, 1)
assert.strictEqual(messages[0].ruleId, 'no-unused-vars')
})
+
+ it('disable specific rules if ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 0)
+ })
})
describe('eslint-disable-line', () => {
- it('disable all rules if ', () => {
+ it('disable all rules if ', async () => {
const code = `
Hello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 0)
})
- it('disable specific rules if ', () => {
+ it('disable specific rules if ', async () => {
const code = `
Hello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 1)
assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
})
- it('don\'t disable rules if is on another line', () => {
+ it("don't disable rules if is on another line", async () => {
const code = `
@@ -159,7 +155,7 @@ describe('comment-directive', () => {
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 2)
assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
@@ -168,32 +164,32 @@ describe('comment-directive', () => {
})
describe('eslint-disable-next-line', () => {
- it('disable all rules if ', () => {
+ it('disable all rules if ', async () => {
const code = `
Hello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 0)
})
- it('disable specific rules if ', () => {
+ it('disable specific rules if ', async () => {
const code = `
Hello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 1)
assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
})
- it('don\'t disable rules if is on another line', () => {
+ it("don't disable rules if is on another line", async () => {
const code = `
@@ -202,14 +198,14 @@ describe('comment-directive', () => {
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 2)
assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
assert.deepEqual(messages[1].ruleId, 'vue/no-duplicate-attributes')
})
- it('should affect only the next line', () => {
+ it('should affect only the next line', async () => {
const code = `
@@ -217,7 +213,8 @@ describe('comment-directive', () => {
Hello
`
- const messages = linter.executeOnText(code, 'test.vue').results[0].messages
+
+ const messages = await lintMessages(code)
assert.deepEqual(messages.length, 2)
assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
@@ -226,4 +223,306 @@ describe('comment-directive', () => {
assert.deepEqual(messages[1].line, 5)
})
})
+
+ describe('allow description', () => {
+ it('disable all rules if ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 0)
+ })
+
+ it('enable all rules if ', async () => {
+ const code = `
+
+
+ Hello
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 2)
+ assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+ assert.deepEqual(messages[0].line, 6)
+ assert.deepEqual(messages[1].ruleId, 'vue/no-duplicate-attributes')
+ assert.deepEqual(messages[1].line, 6)
+ })
+
+ it('enable specific rules if ', async () => {
+ const code = `
+
+
+ Hello
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 1)
+ assert.deepEqual(messages[0].ruleId, 'vue/no-duplicate-attributes')
+ assert.deepEqual(messages[0].line, 6)
+ })
+
+ it('disable all rules if ', async () => {
+ const code = `
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 0)
+ })
+
+ it('disable specific rules if ', async () => {
+ const code = `
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 1)
+ assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+ })
+
+ it('disable all rules if ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 0)
+ })
+
+ it('disable specific rules if ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 1)
+ assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+ })
+ })
+
+ describe('block level directive', () => {
+ it('disable all rules if ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 0)
+ })
+
+ it("don't disable rules if is on after block", async () => {
+ const code = `
+
+ Hello
+
+ `
+
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 2)
+ assert.deepEqual(messages[0].ruleId, 'vue/no-parsing-error')
+ assert.deepEqual(messages[1].ruleId, 'vue/no-duplicate-attributes')
+ })
+ })
+
+ describe('reportUnusedDisableDirectives', () => {
+ const eslint = new ESLint({
+ overrideConfigFile: true,
+ overrideConfig: {
+ files: ['**/*.vue'],
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2015
+ },
+ plugins: { vue: require('../../../lib/index') },
+ rules: {
+ 'no-unused-vars': 'error',
+ 'vue/comment-directive': [
+ 'error',
+ { reportUnusedDisableDirectives: true }
+ ],
+ 'vue/no-parsing-error': 'error',
+ 'vue/no-duplicate-attributes': 'error'
+ },
+ processor: require('../../../lib/processor')
+ }
+ })
+
+ async function lintMessages(code) {
+ const result = await eslint.lintText(code, { filePath: 'test.vue' })
+ return result[0].messages
+ }
+
+ it('report unused ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 1)
+ assert.deepEqual(messages[0].ruleId, 'vue/comment-directive')
+ assert.deepEqual(
+ messages[0].message,
+ 'Unused eslint-disable directive (no problems were reported).'
+ )
+ assert.deepEqual(messages[0].line, 3)
+ assert.deepEqual(messages[0].column, 11)
+ })
+
+ it('dont report unused ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+
+ const messages = await lintMessages(code)
+
+ assert.deepStrictEqual(messages, [])
+ })
+ it('disable and report unused ', async () => {
+ const code = `
+
+
+ Hello
+
+
+ Hello
+
+ `
+
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 1)
+ assert.deepEqual(messages[0].ruleId, 'vue/comment-directive')
+ assert.deepEqual(
+ messages[0].message,
+ 'Unused eslint-disable directive (no problems were reported).'
+ )
+ assert.deepEqual(messages[0].line, 6)
+ assert.deepEqual(messages[0].column, 11)
+ })
+
+ it('report unused ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 2)
+
+ assert.deepEqual(messages[0].ruleId, 'vue/comment-directive')
+ assert.deepEqual(
+ messages[0].message,
+ "Unused eslint-disable directive (no problems were reported from 'vue/no-duplicate-attributes')."
+ )
+ assert.deepEqual(messages[0].line, 3)
+ assert.deepEqual(messages[0].column, 31)
+
+ assert.deepEqual(messages[1].ruleId, 'vue/comment-directive')
+ assert.deepEqual(
+ messages[1].message,
+ "Unused eslint-disable directive (no problems were reported from 'vue/no-parsing-error')."
+ )
+ assert.deepEqual(messages[1].line, 3)
+ assert.deepEqual(messages[1].column, 60)
+ })
+
+ it('report unused ', async () => {
+ const code = `
+
+
+ Hello
+ Hello
+
+ `
+
+ const messages = await lintMessages(code)
+
+ assert.deepEqual(messages.length, 4)
+
+ assert.deepEqual(messages[0].ruleId, 'vue/comment-directive')
+ assert.deepEqual(
+ messages[0].message,
+ "Unused eslint-disable-next-line directive (no problems were reported from 'vue/no-duplicate-attributes')."
+ )
+ assert.deepEqual(messages[0].line, 3)
+ assert.deepEqual(messages[0].column, 41)
+
+ assert.deepEqual(messages[1].ruleId, 'vue/comment-directive')
+ assert.deepEqual(
+ messages[1].message,
+ "Unused eslint-disable-next-line directive (no problems were reported from 'vue/no-parsing-error')."
+ )
+ assert.deepEqual(messages[1].line, 3)
+ assert.deepEqual(messages[1].column, 70)
+
+ assert.deepEqual(messages[2].ruleId, 'vue/no-parsing-error')
+ assert.deepEqual(messages[2].line, 5)
+ assert.deepEqual(messages[3].ruleId, 'vue/no-duplicate-attributes')
+ assert.deepEqual(messages[3].line, 5)
+ })
+
+ it('dont report used ', async () => {
+ const code = `
+
+
+ Hello
+
+ `
+
+ const messages = await lintMessages(code)
+
+ assert.deepStrictEqual(messages, [])
+ })
+
+ it('dont report used, with duplicate eslint-disable', async () => {
+ const code = `
+
+
+
+ Hello
+
+ `
+
+ const messages = await lintMessages(code)
+
+ assert.deepStrictEqual(messages, [])
+ })
+ })
})
diff --git a/tests/lib/rules/component-api-style.js b/tests/lib/rules/component-api-style.js
new file mode 100644
index 000000000..12291ac30
--- /dev/null
+++ b/tests/lib/rules/component-api-style.js
@@ -0,0 +1,850 @@
+/**
+ * @author Yosuke Ota
+
+
+
+ `,
+ options: [['composition']]
+ }
+ ],
+ invalid: [
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message:
+ 'Options API is not allowed in your project. `data` option is part of the Options API. Use `
+ `,
+ options: [['options']],
+ errors: [
+ {
+ message:
+ '`
+ `,
+ options: [['options']],
+ errors: [
+ {
+ message:
+ 'Composition API is not allowed in your project. `setup` function is part of the Composition API. Use Options API instead.',
+ line: 5,
+ column: 9
+ }
+ ]
+ },
+ {
+ filename: 'test.js',
+ code: `
+ import { defineComponent } from 'vue'
+ defineComponent({
+ data () {
+ return {
+ msg: 'Hello World!',
+ // ...
+ }
+ },
+ // ...
+ })
+ `,
+ errors: [
+ {
+ message:
+ 'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
+ line: 4,
+ column: 9
+ }
+ ]
+ },
+ {
+ filename: 'test.js',
+ code: `
+ import { ref, defineComponent } from 'vue'
+ defineComponent({
+ setup() {
+ const msg = ref('Hello World!')
+ // ...
+ return {
+ msg,
+ // ...
+ }
+ }
+ })
+ `,
+ options: [['options']],
+ errors: [
+ {
+ message:
+ 'Composition API is not allowed in your project. `setup` function is part of the Composition API. Use Options API instead.',
+ line: 4,
+ column: 9
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [['script-setup']],
+ errors: [
+ {
+ message:
+ 'Composition API is not allowed in your project. Use `
+ `,
+ options: [['script-setup']],
+ errors: [
+ {
+ message:
+ 'Options API is not allowed in your project. Use `
+ `,
+ options: [['composition']],
+ errors: [
+ {
+ message:
+ '`
+ `,
+ options: [['composition']],
+ errors: [
+ {
+ message:
+ 'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
+ line: 4,
+ column: 9
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [['composition']],
+ errors: [
+ {
+ message:
+ 'Options API is not allowed in your project. `mixins` option is part of the Options API. Use Composition API instead.',
+ line: 4,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `extends` option is part of the Options API. Use Composition API instead.',
+ line: 5,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API instead.',
+ line: 7,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `computed` option is part of the Options API. Use Composition API instead.',
+ line: 8,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `methods` option is part of the Options API. Use Composition API instead.',
+ line: 9,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `watch` option is part of the Options API. Use Composition API instead.',
+ line: 10,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `provide` option is part of the Options API. Use Composition API instead.',
+ line: 11,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `inject` option is part of the Options API. Use Composition API instead.',
+ line: 12,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeCreate` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 14,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `created` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 15,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeMount` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 16,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `mounted` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 17,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 18,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `updated` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 19,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `activated` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 20,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `deactivated` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 21,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 22,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 23,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `destroyed` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 24,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `unmounted` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 25,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `render` function is part of the Options API. Use Composition API instead.',
+ line: 26,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `renderTracked` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 27,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `renderTriggered` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 28,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `errorCaptured` lifecycle hook is part of the Options API. Use Composition API instead.',
+ line: 29,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `expose` option is part of the Options API. Use Composition API instead.',
+ line: 31,
+ column: 9
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [['composition-vue2']],
+ errors: [
+ {
+ message:
+ '`
+ `,
+ options: [['composition-vue2']],
+ errors: [
+ {
+ message:
+ 'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 4,
+ column: 9
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [['composition-vue2']],
+ errors: [
+ {
+ message:
+ 'Options API is not allowed in your project. `mixins` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 4,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `extends` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 5,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `data` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 7,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `computed` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 8,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `methods` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 9,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `watch` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 10,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `provide` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 11,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `inject` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 12,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeCreate` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 14,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `created` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 15,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeMount` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 16,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `mounted` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 17,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeUpdate` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 18,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `updated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 19,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `activated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 20,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `deactivated` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 21,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeDestroy` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 22,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `beforeUnmount` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 23,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `destroyed` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 24,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `unmounted` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 25,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `errorCaptured` lifecycle hook is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 29,
+ column: 9
+ },
+ {
+ message:
+ 'Options API is not allowed in your project. `expose` option is part of the Options API. Use Composition API (Vue 2) instead.',
+ line: 31,
+ column: 9
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [['script-setup', 'composition', 'composition-vue2']],
+ errors: [
+ {
+ message:
+ 'Options API is not allowed in your project. `data` option is part of the Options API. Use ``,
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ...languageOptions
+ }
+ },
+ {
+ filename: 'test.vue',
+ code: ``,
+ options: ['PascalCase'],
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ...languageOptions
+ }
+ },
+ {
+ filename: 'test.vue',
+ code: ``,
+ options: ['kebab-case'],
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ...languageOptions
+ }
+ }
+ ],
+
+ invalid: [
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ name: 'foo-bar'
+ }
+ `,
+ output: `
+ export default {
+ name: 'FooBar'
+ }
+ `,
+ languageOptions,
+ errors: [
+ {
+ message: 'Property name "foo-bar" is not PascalCase.',
+ type: 'Literal',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ name: 'foo bar'
+ }
+ `,
+ output: null,
+ languageOptions,
+ errors: [
+ {
+ message: 'Property name "foo bar" is not PascalCase.',
+ type: 'Literal',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ name: 'foo!bar'
+ }
+ `,
+ output: null,
+ languageOptions,
+ errors: [
+ {
+ message: 'Property name "foo!bar" is not PascalCase.',
+ type: 'Literal',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.js',
+ code: `
+ new Vue({
+ name: 'foo!bar'
+ })
+ `,
+ output: null,
+ languageOptions: { ecmaVersion: 6 },
+ errors: [
+ {
+ message: 'Property name "foo!bar" is not PascalCase.',
+ type: 'Literal',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ name: 'foo_bar'
+ }
+ `,
+ output: `
+ export default {
+ name: 'FooBar'
+ }
+ `,
+ languageOptions,
+ errors: [
+ {
+ message: 'Property name "foo_bar" is not PascalCase.',
+ type: 'Literal',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ name: 'foo_bar'
+ }
+ `,
+ output: `
+ export default {
+ name: 'FooBar'
+ }
+ `,
+ options: ['PascalCase'],
+ languageOptions,
+ errors: [
+ {
+ message: 'Property name "foo_bar" is not PascalCase.',
+ type: 'Literal',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ name: 'foo_bar'
+ }
+ `,
+ output: `
+ export default {
+ name: 'foo-bar'
+ }
+ `,
+ options: ['kebab-case'],
+ languageOptions,
+ errors: [
+ {
+ message: 'Property name "foo_bar" is not kebab-case.',
+ type: 'Literal',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `Vue.component('foo-bar', component)`,
+ output: `Vue.component('FooBar', component)`,
+ languageOptions,
+ errors: [
+ {
+ message: 'Property name "foo-bar" is not PascalCase.',
+ type: 'Literal',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `app.component('foo-bar', component)`,
+ output: `app.component('FooBar', component)`,
+ languageOptions,
+ errors: [
+ {
+ message: 'Property name "foo-bar" is not PascalCase.',
+ type: 'Literal',
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `(Vue as VueConstructor',
- '
',
- 'Title
',
- 'Title
',
- '',
- '',
+ options: ['PascalCase', { registeredComponentsOnly: false }]
+ },
+ {
+ code: '
',
+ options: ['PascalCase', { registeredComponentsOnly: false }]
+ },
+ {
+ code: 'bar',
+ options: ['PascalCase', { registeredComponentsOnly: false }]
+ },
+ {
+ code: 'Title
',
+ options: ['PascalCase', { registeredComponentsOnly: false }]
+ },
+ {
+ code: 'Title
',
+ options: ['PascalCase', { registeredComponentsOnly: false }]
+ },
+ {
+ code: '',
+ options: ['PascalCase', { registeredComponentsOnly: false }]
+ },
+ {
+ code: '',
- options: ['kebab-case']
+ options: ['kebab-case', { registeredComponentsOnly: false }]
},
{
code: '',
- options: ['kebab-case']
+ options: ['kebab-case', { registeredComponentsOnly: false }]
},
{
code: '',
- options: ['kebab-case']
+ options: ['kebab-case', { registeredComponentsOnly: false }]
+ },
+ {
+ code: '
\n \n \n',
output: '\n \n \n \n',
errors: [
- { message: "Expected no space before '>', but found.", line: 2, column: 7, endColumn: 9 },
- { message: "Expected no space before '>', but found.", line: 3, column: 8, endColumn: 10 },
- { message: "Expected a space before '/>', but not found.", line: 4, column: 7, endColumn: 9 }
+ {
+ message: "Expected no space before '>', but found.",
+ line: 2,
+ column: 7,
+ endColumn: 9
+ },
+ {
+ message: "Expected no space before '>', but found.",
+ line: 3,
+ column: 8,
+ endColumn: 10
+ },
+ {
+ message: "Expected a space before '/>', but not found.",
+ line: 4,
+ column: 7,
+ endColumn: 9
+ }
]
},
{
code: '\n \n \n',
output: '\n \n \n',
errors: [
- { message: "Expected no space before '>', but found.", line: 2, column: 11, endColumn: 13 },
- { message: "Expected a space before '/>', but not found.", line: 3, column: 11, endColumn: 13 }
+ {
+ message: "Expected no space before '>', but found.",
+ line: 2,
+ column: 11,
+ endColumn: 13
+ },
+ {
+ message: "Expected a space before '/>', but not found.",
+ line: 3,
+ column: 11,
+ endColumn: 13
+ }
]
},
{
code: '\n \n \n',
- output: '\n \n \n',
+ output:
+ '\n \n \n',
+ errors: [
+ {
+ message: "Expected no space before '>', but found.",
+ line: 2,
+ column: 15,
+ endColumn: 17
+ },
+ {
+ message: "Expected a space before '/>', but not found.",
+ line: 3,
+ column: 15,
+ endColumn: 17
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
errors: [
- { message: "Expected no space before '>', but found.", line: 2, column: 15, endColumn: 17 },
- { message: "Expected a space before '/>', but not found.", line: 3, column: 15, endColumn: 17 }
+ {
+ message: "Expected no space before '>', but found.",
+ line: 2,
+ column: 18,
+ endColumn: 20
+ },
+ {
+ message: "Expected no space before '>', but found.",
+ line: 2,
+ column: 30,
+ endColumn: 32
+ },
+ {
+ message: "Expected no space before '>', but found.",
+ line: 3,
+ column: 16,
+ endColumn: 18
+ },
+ {
+ message: "Expected no space before '>', but found.",
+ line: 3,
+ column: 26,
+ endColumn: 28
+ },
+ {
+ message: "Expected no space before '>', but found.",
+ line: 4,
+ column: 15,
+ endColumn: 17
+ },
+ {
+ message: "Expected no space before '>', but found.",
+ line: 4,
+ column: 24,
+ endColumn: 26
+ }
]
},
{
code: '\n \n \n \n',
output: '\n \n \n \n',
- options: [{
- startTag: 'always',
- endTag: 'always',
- selfClosingTag: 'never'
- }],
+ options: [
+ {
+ startTag: 'always',
+ endTag: 'always',
+ selfClosingTag: 'never'
+ }
+ ],
+ errors: [
+ {
+ message: "Expected a space before '>', but not found.",
+ line: 2,
+ column: 7,
+ endColumn: 8
+ },
+ {
+ message: "Expected a space before '>', but not found.",
+ line: 3,
+ column: 8,
+ endColumn: 9
+ },
+ {
+ message: "Expected no space before '/>', but found.",
+ line: 4,
+ column: 7,
+ endColumn: 10
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: [
+ {
+ startTag: 'always',
+ endTag: 'always',
+ selfClosingTag: 'never'
+ }
+ ],
errors: [
- { message: "Expected a space before '>', but not found.", line: 2, column: 7, endColumn: 8 },
- { message: "Expected a space before '>', but not found.", line: 3, column: 8, endColumn: 9 },
- { message: "Expected no space before '/>', but found.", line: 4, column: 7, endColumn: 10 }
+ {
+ message: "Expected a space before '>', but not found.",
+ line: 2,
+ column: 18,
+ endColumn: 19
+ },
+ {
+ message: "Expected a space before '>', but not found.",
+ line: 2,
+ column: 29,
+ endColumn: 30
+ },
+ {
+ message: "Expected a space before '>', but not found.",
+ line: 3,
+ column: 16,
+ endColumn: 17
+ },
+ {
+ message: "Expected a space before '>', but not found.",
+ line: 3,
+ column: 25,
+ endColumn: 26
+ },
+ {
+ message: "Expected a space before '>', but not found.",
+ line: 4,
+ column: 15,
+ endColumn: 16
+ },
+ {
+ message: "Expected a space before '>', but not found.",
+ line: 4,
+ column: 23,
+ endColumn: 24
+ }
]
}
]
diff --git a/tests/lib/rules/html-comment-content-newline.js b/tests/lib/rules/html-comment-content-newline.js
new file mode 100644
index 000000000..362e27adf
--- /dev/null
+++ b/tests/lib/rules/html-comment-content-newline.js
@@ -0,0 +1,455 @@
+/**
+ * @author Yosuke ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const rule = require('../../../lib/rules/html-comment-content-newline')
+
+const RuleTester = require('../../eslint-compat').RuleTester
+
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
+})
+tester.run('html-comment-content-newline', rule, {
+ valid: [
+ `
+
+
+
+
+ `,
+ {
+ code: `
+
+
+
+
+
+ `,
+ options: ['always']
+ },
+ {
+ code: `
+
+
+
+
+ `,
+ options: ['never']
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ options: ['always']
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ options: ['never']
+ },
+ {
+ code: `
+
+
+
+
+ `,
+ options: [{ singleline: 'always', multiline: 'never' }]
+ },
+ {
+ code: `
+
+
+
+
+
+
+ `,
+ options: ['never']
+ },
+ // ignore
+ {
+ code: `
+
+
+
+
+
+
+ `,
+ options: [{ singleline: 'ignore', multiline: 'ignore' }]
+ },
+
+ // exceptions
+ {
+ code: `
+
+
+
+ `,
+ options: ['always', { exceptions: ['+'] }]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['always', { exceptions: ['+-+'] }]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['always', { exceptions: ['+'] }]
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ options: ['always', { exceptions: ['+', '*', '++xx'] }]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['never', { exceptions: ['+'] }]
+ },
+
+ // directive
+ {
+ code: `
+
+
+
+
+
+
+
+
+
+
+ `,
+ options: ['always']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['never']
+ },
+ // invalid html
+ {
+ code: `
+
+
+
+ `,
+ `
+
+
+ not IE only
+
+
+ `
+ ],
+
+ invalid: [
+ {
+ code: `
+
+
+
+
+ `,
+ output: `
+
+
+
+
+ `,
+ errors: [
+ {
+ message: "Unexpected line breaks after ''.",
+ line: 4,
+ column: 20,
+ endLine: 5,
+ endColumn: 11
+ },
+ {
+ message: "Expected line break after ''.",
+ line: 7,
+ column: 20,
+ endColumn: 21
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+ `,
+ output: `
+
+
+
+
+ `,
+ options: ['always'],
+ errors: [
+ {
+ message: "Expected line break after ''.",
+ line: 3,
+ column: 22,
+ endColumn: 22
+ },
+ {
+ message: "Expected line break after ''.",
+ line: 4,
+ column: 24,
+ endColumn: 26
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: ['never'],
+ errors: [
+ {
+ message: "Unexpected line breaks after ''.",
+ line: 4,
+ column: 8,
+ endLine: 5,
+ endColumn: 1
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: ['always'],
+ errors: [
+ {
+ message: "Expected line break after ''.",
+ line: 3,
+ column: 30,
+ endColumn: 38
+ }
+ ]
+ },
+ // exceptions
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ options: ['always', { exceptions: ['+'] }],
+ errors: [
+ 'Expected line break after exception block.',
+ 'Expected line break before exception block.'
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ options: ['always', { exceptions: ['*'] }],
+ errors: [
+ 'Expected line break after exception block.',
+ 'Expected line break before exception block.'
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: ['always', { exceptions: ['#+#-'] }],
+ errors: [
+ 'Expected line break after exception block.',
+ "Expected line break before '-->'."
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ options: ['always', { exceptions: ['*', '++'] }],
+ errors: [
+ 'Expected line break after exception block.',
+ {
+ message: 'Expected line break before exception block.',
+ line: 3,
+ column: 27
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ options: ['always', { exceptions: ['*', '++'] }],
+ errors: [
+ 'Expected line break after exception block.',
+ {
+ message: 'Expected line break before exception block.',
+ line: 3,
+ column: 28
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/html-comment-content-spacing.js b/tests/lib/rules/html-comment-content-spacing.js
new file mode 100644
index 000000000..1036555e8
--- /dev/null
+++ b/tests/lib/rules/html-comment-content-spacing.js
@@ -0,0 +1,353 @@
+/**
+ * @author Yosuke ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const rule = require('../../../lib/rules/html-comment-content-spacing')
+
+const RuleTester = require('../../eslint-compat').RuleTester
+
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
+})
+tester.run('html-comment-content-spacing', rule, {
+ valid: [
+ `
+
+
+
+ `,
+ {
+ code: `
+
+
+
+ `,
+ options: ['always']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['always']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['always']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['never']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['never']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['never']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['always']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['never']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['always']
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['never']
+ },
+
+ // exceptions
+ {
+ code: `
+
+
+
+ `,
+ options: ['always', { exceptions: ['+'] }]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['always', { exceptions: ['+-+'] }]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['always', { exceptions: ['+'] }]
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ options: ['always', { exceptions: ['+', '*', '++xx'] }]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: ['never', { exceptions: ['+'] }]
+ },
+
+ // invalid html
+ {
+ code: `
+
+
+
+ `,
+ `
+
+
+ not IE only
+
+
+ `
+ ],
+
+ invalid: [
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: ['always'],
+ errors: [
+ {
+ message: "Expected space after ''.",
+ line: 3,
+ column: 22,
+ endColumn: 22
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: ['never'],
+ errors: [
+ {
+ message: "Unexpected space after ''.",
+ line: 3,
+ column: 23,
+ endColumn: 24
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: ['never'],
+ errors: [
+ {
+ message: "Unexpected space after ''.",
+ line: 3,
+ column: 30,
+ endColumn: 38
+ }
+ ]
+ },
+ // exceptions
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ options: ['always', { exceptions: ['+'] }],
+ errors: [
+ 'Expected space after exception block.',
+ 'Expected space before exception block.'
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ options: ['always', { exceptions: ['*'] }],
+ errors: [
+ 'Expected space after exception block.',
+ 'Expected space before exception block.'
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ options: ['always', { exceptions: ['#+#-'] }],
+ errors: [
+ 'Expected space after exception block.',
+ "Expected space before '-->'."
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ options: ['always', { exceptions: ['*', '++'] }],
+ errors: [
+ 'Expected space after exception block.',
+ {
+ message: 'Expected space before exception block.',
+ line: 3,
+ column: 27
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ options: ['always', { exceptions: ['*', '++'] }],
+ errors: [
+ 'Expected space after exception block.',
+ {
+ message: 'Expected space before exception block.',
+ line: 3,
+ column: 28
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/html-comment-indent.js b/tests/lib/rules/html-comment-indent.js
new file mode 100644
index 000000000..27c93af8e
--- /dev/null
+++ b/tests/lib/rules/html-comment-indent.js
@@ -0,0 +1,682 @@
+/**
+ * @author Yosuke ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const rule = require('../../../lib/rules/html-comment-indent')
+
+const RuleTester = require('../../eslint-compat').RuleTester
+
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
+})
+tester.run('html-comment-indent', rule, {
+ valid: [
+ `
+
+
+
+
+
+ `,
+ {
+ code: `
+
+
+
+
+
+ `,
+ options: ['tab']
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ options: [4]
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ options: [0]
+ },
+ `
+
+
+
+
+
+ `,
+
+ // IE conditional comments
+ `
+
+
+
+ `,
+ `
+
+
+ not IE only
+
+
+ `
+ ],
+
+ invalid: [
+ {
+ code: `
+
+
+
+
+
+ `,
+ output: `
+
+
+
+
+
+ `,
+ errors: [
+ {
+ message:
+ 'Expected relative indentation of 2 spaces but found 0 spaces.',
+ line: 4,
+ column: 11,
+ endLine: 4,
+ endColumn: 11
+ },
+ {
+ message:
+ 'Expected base point indentation of 10 spaces, but found 7 spaces.',
+ line: 7,
+ column: 1,
+ endLine: 7,
+ endColumn: 8
+ },
+ {
+ message:
+ 'Expected relative indentation of 2 spaces but found 5 spaces.',
+ line: 8,
+ column: 11,
+ endLine: 8,
+ endColumn: 16
+ },
+ {
+ message:
+ 'Expected relative indentation of 0 spaces but found 1 space.',
+ line: 9,
+ column: 11,
+ endLine: 9,
+ endColumn: 12
+ },
+ {
+ message: 'Expected space character, but found tab character.',
+ line: 11,
+ column: 14,
+ endLine: 11,
+ endColumn: 15
+ },
+ {
+ message: 'Expected space character, but found tab character.',
+ line: 12,
+ column: 13,
+ endLine: 12,
+ endColumn: 14
+ },
+ {
+ message:
+ 'Expected base point indentation of 12 spaces, but found 11 spaces.',
+ line: 13,
+ column: 1,
+ endLine: 13,
+ endColumn: 12
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ output: `
+
+
+
+
+
+ `,
+ options: ['tab'],
+ errors: [
+ {
+ message: 'Expected relative indentation of 1 tab but found 0 tabs.',
+ line: 4,
+ column: 11,
+ endLine: 4,
+ endColumn: 11
+ },
+ {
+ message: String.raw`Expected base point indentation of 10 spaces, but found " \t".`,
+ line: 7,
+ column: 1,
+ endLine: 7,
+ endColumn: 10
+ },
+ {
+ message: 'Expected relative indentation of 1 tab but found 2 tabs.',
+ line: 8,
+ column: 11,
+ endLine: 8,
+ endColumn: 13
+ },
+ {
+ message: 'Expected relative indentation of 0 tabs but found 1 tab.',
+ line: 9,
+ column: 11,
+ endLine: 9,
+ endColumn: 12
+ },
+ {
+ message: 'Expected tab character, but found space character.',
+ line: 11,
+ column: 14,
+ endLine: 11,
+ endColumn: 15
+ },
+ {
+ message: 'Expected tab character, but found space character.',
+ line: 12,
+ column: 13,
+ endLine: 12,
+ endColumn: 14
+ },
+ {
+ message:
+ 'Expected base point indentation of 12 spaces, but found 11 spaces.',
+ line: 13,
+ column: 1,
+ endLine: 13,
+ endColumn: 12
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ output: `
+
+
+
+
+
+ `,
+ options: [4],
+ errors: [
+ {
+ message:
+ 'Expected relative indentation of 4 spaces but found 0 spaces.',
+ line: 4,
+ column: 11,
+ endLine: 4,
+ endColumn: 11
+ },
+ {
+ message:
+ 'Expected base point indentation of 10 spaces, but found 5 spaces.',
+ line: 7,
+ column: 1,
+ endLine: 7,
+ endColumn: 6
+ },
+ {
+ message:
+ 'Expected relative indentation of 4 spaces but found 8 spaces.',
+ line: 8,
+ column: 11,
+ endLine: 8,
+ endColumn: 19
+ },
+ {
+ message:
+ 'Expected relative indentation of 0 spaces but found 2 spaces.',
+ line: 9,
+ column: 11,
+ endLine: 9,
+ endColumn: 13
+ },
+ {
+ message: 'Expected space character, but found tab character.',
+ line: 11,
+ column: 15,
+ endLine: 11,
+ endColumn: 16
+ },
+ {
+ message: 'Expected space character, but found tab character.',
+ line: 12,
+ column: 13,
+ endLine: 12,
+ endColumn: 14
+ },
+ {
+ message:
+ 'Expected base point indentation of 12 spaces, but found 10 spaces.',
+ line: 13,
+ column: 1,
+ endLine: 13,
+ endColumn: 11
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ output: `
+
+
+
+
+
+ `,
+ options: [0],
+ errors: [
+ {
+ message:
+ 'Expected relative indentation of 0 spaces but found 2 spaces.',
+ line: 4,
+ column: 11,
+ endLine: 4,
+ endColumn: 13
+ },
+ {
+ message:
+ 'Expected base point indentation of 10 spaces, but found 8 spaces.',
+ line: 7,
+ column: 1,
+ endLine: 7,
+ endColumn: 9
+ },
+ {
+ message: 'Expected space character, but found tab character.',
+ line: 8,
+ column: 11,
+ endLine: 8,
+ endColumn: 12
+ },
+ {
+ message:
+ 'Expected relative indentation of 0 spaces but found 2 spaces.',
+ line: 9,
+ column: 11,
+ endLine: 9,
+ endColumn: 13
+ },
+ {
+ message: 'Expected space character, but found tab character.',
+ line: 11,
+ column: 13,
+ endLine: 11,
+ endColumn: 14
+ },
+ {
+ message: String.raw`Expected base point indentation of 12 spaces, but found " \t".`,
+ line: 12,
+ column: 1,
+ endLine: 12,
+ endColumn: 12
+ },
+ {
+ message:
+ 'Expected base point indentation of 12 spaces, but found 10 spaces.',
+ line: 13,
+ column: 1,
+ endLine: 13,
+ endColumn: 11
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+
+ `,
+ output: `
+
+
+
+
+
+ `,
+ errors: [
+ {
+ message:
+ 'Expected relative indentation of 2 spaces but found 0 spaces.',
+ line: 5
+ },
+ {
+ message:
+ 'Expected relative indentation of 2 spaces but found 4 spaces.',
+ line: 7
+ },
+ {
+ message:
+ 'Expected relative indentation of 0 spaces but found 2 spaces.',
+ line: 12
+ },
+ {
+ message:
+ 'Expected base point indentation of 10 spaces, but found 8 spaces.',
+ line: 14
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+ `,
+ output: `
+
+
+
+
+ `,
+ errors: [
+ {
+ message:
+ 'Expected relative indentation of 2 spaces but found 0 spaces.',
+ line: 4
+ },
+ {
+ message:
+ 'Expected relative indentation of 2 spaces but found 4 spaces.',
+ line: 6
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+`,
+ output: `
+
+
+
+
+`,
+ errors: [
+ {
+ message: 'Expected indentation of 2 spaces but found 0 spaces.',
+ line: 4
+ },
+ {
+ message: 'Expected indentation of 2 spaces but found 0 spaces.',
+ line: 5
+ },
+ {
+ message: 'Expected indentation of 0 spaces but found 2 spaces.',
+ line: 7
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+`,
+ output: `
+
+
+
+
+`,
+ errors: [
+ {
+ message:
+ 'Expected base point indentation of 2 spaces, but not found.',
+ line: 4
+ },
+ {
+ message:
+ 'Expected base point indentation of 2 spaces, but not found.',
+ line: 5
+ },
+ {
+ message:
+ 'Expected base point indentation of 2 spaces, but not found.',
+ line: 7
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ errors: [
+ {
+ message:
+ 'Expected relative indentation of 2 spaces but found 1 space.',
+ line: 4
+ },
+ {
+ message:
+ 'Expected relative indentation of 0 spaces but found 1 space.',
+ line: 5
+ }
+ ]
+ },
+ {
+ code: `
+
+ \t \t \t
+
+ `,
+ output: `
+
+ \t \t \t
+
+ `,
+ errors: [
+ {
+ message: String.raw`Expected base point indentation of " \t \t \t ", but found 7 spaces.`,
+ line: 4
+ },
+ {
+ message: String.raw`Expected base point indentation of " \t \t \t ", but found 7 spaces.`,
+ line: 5
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/html-end-tags.js b/tests/lib/rules/html-end-tags.js
index 66aad36d0..ce5979632 100644
--- a/tests/lib/rules/html-end-tags.js
+++ b/tests/lib/rules/html-end-tags.js
@@ -5,20 +5,11 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
const rule = require('../../../lib/rules/html-end-tags')
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
const tester = new RuleTester({
- parser: 'vue-eslint-parser',
- parserOptions: { ecmaVersion: 2015 }
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
})
tester.run('html-end-tags', rule, {
@@ -66,6 +57,22 @@ tester.run('html-end-tags', rule, {
{
filename: 'test.vue',
code: ''
+ },
+
+ // https://github.com/vuejs/eslint-plugin-vue/issues/1403
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
}
],
invalid: [
diff --git a/tests/lib/rules/html-indent.js b/tests/lib/rules/html-indent.js
index 724ee961f..3a4c610cd 100644
--- a/tests/lib/rules/html-indent.js
+++ b/tests/lib/rules/html-indent.js
@@ -5,19 +5,11 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
const fs = require('fs')
const path = require('path')
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
const rule = require('../../../lib/rules/html-indent')
-// ------------------------------------------------------------------------------
-// Helpers
-// ------------------------------------------------------------------------------
-
const FIXTURE_ROOT = path.resolve(__dirname, '../../fixtures/html-indent/')
/**
@@ -35,44 +27,55 @@ const FIXTURE_ROOT = path.resolve(__dirname, '../../fixtures/html-indent/')
* @param {object[]} additionalInvalid The array of additional invalid patterns.
* @returns {object} The loaded patterns.
*/
-function loadPatterns (additionalValid, additionalInvalid) {
- const valid = fs
- .readdirSync(FIXTURE_ROOT)
- .map(filename => {
- const code0 = fs.readFileSync(path.join(FIXTURE_ROOT, filename), 'utf8')
- const code = code0.replace(/^/, ``)
- const baseObj = JSON.parse(/^/.exec(code0)[1])
- return Object.assign(baseObj, { code, filename })
- })
+function loadPatterns(additionalValid, additionalInvalid) {
+ const valid = fs.readdirSync(FIXTURE_ROOT).map((filename) => {
+ const code0 = fs.readFileSync(path.join(FIXTURE_ROOT, filename), 'utf8')
+ const code = code0.replace(/^/, ``)
+ const baseObj = JSON.parse(/^/.exec(code0)[1])
+ if ('parser' in baseObj) {
+ baseObj.parser = require.resolve(baseObj.parser)
+ }
+ if ('parserOptions' in baseObj && 'parser' in baseObj.parserOptions) {
+ baseObj.parserOptions.parser = require.resolve(
+ baseObj.parserOptions.parser
+ )
+ }
+ return Object.assign(baseObj, { code, filename })
+ })
const invalid = valid
- .map(pattern => {
- const kind = ((pattern.options && pattern.options[0]) === 'tab') ? 'tab' : 'space'
+ .map((pattern) => {
+ const kind =
+ (pattern.options && pattern.options[0]) === 'tab' ? 'tab' : 'space'
const output = pattern.code
- const lines = output
- .split('\n')
- .map((text, number) => ({
- number,
- text,
- indentSize: (/^[ \t]+/.exec(text) || [''])[0].length
- }))
+ const lines = output.split('\n').map((text, number) => ({
+ number,
+ text,
+ indentSize: (/^[\t ]+/.exec(text) || [''])[0].length
+ }))
const code = lines
- .map(line => line.text.replace(/^[ \t]+/, ''))
+ .map((line) => line.text.replace(/^[\t ]+/, ''))
.join('\n')
const errors = lines
- .map(line =>
+ .map((line) =>
line.indentSize === 0
? null
- : { message: `Expected indentation of ${line.indentSize} ${kind}${line.indentSize === 1 ? '' : 's'} but found 0 ${kind}s.`, line: line.number + 1 }
+ : {
+ message: `Expected indentation of ${line.indentSize} ${kind}${
+ line.indentSize === 1 ? '' : 's'
+ } but found 0 ${kind}s.`,
+ line: line.number + 1
+ }
)
.filter(Boolean)
return Object.assign({}, pattern, { code, output, errors })
})
+ .filter((invalid) => invalid.errors.length > 0) // Empty errors cannot be verified with eslint 7.3.
.filter(Boolean)
return {
- valid: valid.concat(additionalValid),
- invalid: invalid.concat(additionalInvalid)
+ valid: [...valid, ...additionalValid],
+ invalid: [...invalid, ...additionalInvalid]
}
}
@@ -81,36 +84,42 @@ function loadPatterns (additionalValid, additionalInvalid) {
* @param {string[]} strings The strings in the template literal
* @returns {string} The template literal, with spaces removed from all lines
*/
-function unIndent (strings) {
+function unIndent(strings) {
const templateValue = strings[0]
- const lines = templateValue.replace(/^\n/, '').replace(/\n\s*$/, '').split('\n')
- const lineIndents = lines.filter(line => line.trim()).map(line => line.match(/ */)[0].length)
+ const lines = templateValue
+ .replace(/^\n/, '')
+ .replace(/\n\s*$/, '')
+ .split('\n')
+ const lineIndents = lines
+ .filter((line) => line.trim())
+ .map((line) => line.match(/ */)[0].length)
const minLineIndent = Math.min.apply(null, lineIndents)
- return lines.map(line => line.slice(minLineIndent)).join('\n')
+ return lines.map((line) => line.slice(minLineIndent)).join('\n')
}
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
const tester = new RuleTester({
- parser: 'vue-eslint-parser',
- parserOptions: {
- ecmaVersion: 2017,
- ecmaFeatures: {
- globalReturn: true
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2020,
+ parserOptions: {
+ ecmaFeatures: {
+ globalReturn: true
+ }
}
}
})
-tester.run('html-indent', rule, loadPatterns(
- // Valid
- [
- // TemplateLiteral
- {
- filename: 'test.vue',
- code: unIndent`
+tester.run(
+ 'html-indent',
+ rule,
+ loadPatterns(
+ // Valid
+ [
+ // TemplateLiteral
+ {
+ filename: 'test.vue',
+ code: unIndent`
`
- },
+ },
- // Comments
- {
- filename: 'test.vue',
- code: unIndent`
+ // Comments
+ {
+ filename: 'test.vue',
+ code: unIndent`
{{
@@ -149,10 +158,10 @@ tester.run('html-indent', rule, loadPatterns(
}}
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
{{
/*
@@ -162,10 +171,10 @@ tester.run('html-indent', rule, loadPatterns(
}}
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
{{
message
@@ -175,10 +184,10 @@ tester.run('html-indent', rule, loadPatterns(
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
{{
message
@@ -188,10 +197,10 @@ tester.run('html-indent', rule, loadPatterns(
}}
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
{{
message
@@ -201,10 +210,10 @@ tester.run('html-indent', rule, loadPatterns(
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
{{
message
@@ -214,46 +223,46 @@ tester.run('html-indent', rule, loadPatterns(
}}
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
`
- },
+ },
- // Ignores
- {
- filename: 'test.vue',
- code: unIndent`
+ // Ignores
+ {
+ filename: 'test.vue',
+ code: unIndent`
`,
- options: [4, {
- // Ignore all :D
- ignores: ['*']
- }]
- },
+ options: [
+ 4,
+ {
+ // Ignore all :D
+ ignores: ['*']
+ }
+ ]
+ },
- // Pre, Textarea
- {
- filename: 'test.vue',
- code: unIndent`
+ // Pre, Textarea
+ {
+ filename: 'test.vue',
+ code: unIndent`
'
+ },
+ {
+ filename: 'test.vue',
+ code: ''
}
],
invalid: [
@@ -38,6 +33,11 @@ tester.run('no-textarea-mustache', rule, {
code: '',
errors: ["Unexpected mustache. Use 'v-model' instead."]
},
+ {
+ filename: 'test.vue',
+ code: '',
+ errors: ["Unexpected mustache. Use 'v-model' instead."]
+ },
{
filename: 'test.vue',
code: '',
diff --git a/tests/lib/rules/no-this-in-before-route-enter.js b/tests/lib/rules/no-this-in-before-route-enter.js
new file mode 100644
index 000000000..490385345
--- /dev/null
+++ b/tests/lib/rules/no-this-in-before-route-enter.js
@@ -0,0 +1,193 @@
+/**
+ * @fileoverview Don't use "this" i a beforeRouteEnter method
+ * @author Przemyslaw Jan Beigert
+ */
+'use strict'
+
+//------------------------------------------------------------------------------
+// Requirements
+//------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/no-this-in-before-route-enter')
+const RuleTester = require('../../eslint-compat').RuleTester
+
+//------------------------------------------------------------------------------
+// Tests
+//------------------------------------------------------------------------------
+
+const template = (beforeRouteEnter) => `
+
+
aaa
@@ -281,10 +293,10 @@ tester.run('html-indent', rule, loadPatterns(
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
aaa
@@ -305,10 +317,10 @@ tester.run('html-indent', rule, loadPatterns(
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
aaa
bbb ccc
@@ -316,10 +328,10 @@ tester.run('html-indent', rule, loadPatterns(
fff
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
aaa
bbb ccc
@@ -327,10 +339,10 @@ tester.run('html-indent', rule, loadPatterns(
fff
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
aaa
bbb ccc
@@ -338,10 +350,10 @@ tester.run('html-indent', rule, loadPatterns(
fff
@@ -360,10 +372,10 @@ tester.run('html-indent', rule, loadPatterns(
`
- },
- {
- filename: 'test.vue',
- code: unIndent`
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
text
@@ -381,15 +393,31 @@ tester.run('html-indent', rule, loadPatterns(
text
`
- }
- ],
+ },
+ {
+ filename: 'test.vue',
+ code: unIndent`
+
+
`,
- output: unIndent`
+ output: unIndent`
Lorem ipsum
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ Text
+ Text
+ Text
+ Text
+ Text
+
+ Text
+
+ {{ bar }}
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ bar }}
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ foo }}
+
+
+ `
+ },
+ //default ignores
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ $t('foo') }}
+
+
+ `
+ },
+ {
+ // global in template
+ filename: 'test.vue',
+ code: `
+
+ {{ undefined }}
+
+
+ `
+ },
+
+ //watch
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+
+ // props
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+
+ // arg vm
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+
+ // deep
+ {
+ filename: 'test.vue',
+ code: `
+ {{ foo.bar }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ {{ foo.bar.baz }}
+
+ `
+ },
+
+ // track
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+
+ // Vue2 functional component
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{props.a}} {{props.b}}
+
+
+ `
+ },
+
+ {
+ // unknown type
+ filename: 'test.vue',
+ code: `
+
+
+
+ {{ foo }}
+ {{ unknown }}
+ `,
+ languageOptions: {
+ parserOptions: {
+ parser: require.resolve('@typescript-eslint/parser')
+ }
+ }
+ },
+ {
+ // Vuex
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ // Pinia
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a() }} {{ b() }}
+
+ `
+ },
+ `
+
+
+ Woof: {{ woof }}
+ `
+ ],
+
+ invalid: [
+ // undef property
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ bar2 }}
+
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 3
+ },
+ {
+ message: "'bar2' is not defined.",
+ line: 3
+ },
+ {
+ message: "'baz2' is not defined.",
+ line: 14
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ bar2 }}
+
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 3
+ },
+ {
+ message: "'bar2' is not defined.",
+ line: 3
+ },
+ {
+ message: "'baz2' is not defined.",
+ line: 19
+ }
+ ]
+ },
+
+ // same names
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ foo2 }}
+
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 9
+ }
+ ]
+ },
+
+ //watch
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 6
+ },
+ {
+ message: "'bar2' is not defined.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 12
+ },
+ {
+ message: "'foo.bar2' is not defined.",
+ line: 13
+ }
+ ]
+ },
+
+ // props
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'foo' is not defined in props."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'foo' is not defined in props."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'foo' is not defined in props."]
+ },
+
+ // arg vm
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'bar' is not defined."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'bar' is not defined."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'bar' is not defined."]
+ },
+
+ // deep
+ {
+ filename: 'test.vue',
+ code: `
+ {{ foo.baz }}
+
+ `,
+ errors: ["'foo.baz' is not defined."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ {{ foo.bar.baz2 }}
+
+ `,
+ errors: ["'foo.bar.baz2' is not defined."]
+ },
+
+ // track
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 15
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 10
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo.bar2' is not defined.",
+ line: 12
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo.bar2' is not defined.",
+ line: 12
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo2' is not defined.",
+ line: 11
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'foo.bar2' is not defined.",
+ line: 13
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ name }}: {{ count }}
+
+ {{ label }}: {{ cnt }}
+
+
+ `,
+ errors: [
+ {
+ message: "'label' is not defined.",
+ line: 6
+ },
+ {
+ message: "'cnt' is not defined.",
+ line: 6
+ },
+ {
+ message: "'undef' is not defined.",
+ line: 16
+ }
+ ]
+ },
+
+ // Vue2 functional component
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{props.a}} {{props.b}} {{props.c}}
+
+
+ `,
+ errors: [
+ {
+ message: "'c' is not defined.",
+ line: 3,
+ column: 46
+ }
+ ]
+ },
+
+ {
+ // known type
+ filename: 'test.vue',
+ code: `
+
+
+
+ {{ foo }}
+ {{ unknown }}
+ `,
+ errors: [
+ {
+ message: "'unknown' is not defined.",
+ line: 11
+ }
+ ],
+ ...getTypeScriptFixtureTestOptions()
+ },
+
+ {
+ // defineModel
+ filename: 'test.vue',
+ code: `
+
+
+
+ {{ m }} {{ modelValue }}
+ {{ a }} {{ A }}
+ {{withModifiers}} {{modifiers}}
+
+
+ {{ undef }}
+
+ `,
+ errors: [
+ {
+ message: "'undef' is not defined.",
+ line: 14
+ }
+ ]
+ },
+ {
+ // Vuex
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }} {{ c }}
+
+ `,
+ errors: [
+ {
+ message: "'g' is not defined.",
+ line: 13
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `,
+ errors: [
+ {
+ message: "'f' is not defined.",
+ line: 12
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `,
+ errors: [
+ {
+ message: "'x' is not defined.",
+ line: 13
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `,
+ errors: [
+ {
+ message: "'f' is not defined.",
+ line: 10
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }} {{ q }}
+
+ `,
+ errors: [
+ {
+ message: "'q' is not defined.",
+ line: 14
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `,
+ errors: [
+ {
+ message: "'z' is not defined.",
+ line: 12
+ }
+ ]
+ },
+ {
+ // Pinia
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `,
+ errors: [
+ {
+ message: "'z' is not defined.",
+ line: 13
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }} {{ q }}
+
+ `,
+ errors: [
+ {
+ message: "'q' is not defined.",
+ line: 20
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `,
+ errors: [
+ {
+ message: "'z' is not defined.",
+ line: 16
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }} {{ b }}
+
+ `,
+ errors: [
+ {
+ message: "'z' is not defined.",
+ line: 13
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a() }} {{ b() }}
+
+ `,
+ errors: [
+ {
+ message: "'x' is not defined.",
+ line: 11
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unsupported-features.js b/tests/lib/rules/no-unsupported-features.js
new file mode 100644
index 000000000..c99f5f973
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features.js
@@ -0,0 +1,68 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+/**
+ * See to testcases in `./no-unsupported-features` directory for testcases of each features.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-unsupported-features')
+
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features', rule, {
+ valid: [
+ {
+ code: `
+
+ hello
+
+
+
+
+ `,
+ options: buildOptions({ version: '^2.7.0' })
+ },
+ {
+ code: `
+
+ hello
+
+
+
+
+ `,
+ options: buildOptions({ version: '^2.6.0' })
+ }
+ ],
+ invalid: [
+ {
+ code: `
+
+ hello
+
+
+
+
+ `,
+ options: buildOptions({ version: '^3.0.0' }),
+ errors: [
+ {
+ message:
+ 'SFC CSS variable injection is not supported until Vue.js ">=3.0.3 || >=2.7.0 <3.0.0".',
+ line: 21,
+ column: 18,
+ endLine: 21,
+ endColumn: 31
+ },
+ {
+ message:
+ 'SFC CSS variable injection is not supported until Vue.js ">=3.0.3 || >=2.7.0 <3.0.0".',
+ line: 24,
+ column: 22,
+ endLine: 24,
+ endColumn: 41
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/utils.js b/tests/lib/rules/no-unsupported-features/utils.js
new file mode 100644
index 000000000..0273961bd
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/utils.js
@@ -0,0 +1,38 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const rule = require('../../../../lib/rules/no-unsupported-features')
+
+const SYNTAXES = rule.meta.schema[0].properties.ignores.items.enum
+
+module.exports = {
+ SYNTAXES,
+ /**
+ * Define the options builder to exclude anything other than the given syntax.
+ * @param {string} targetSyntax syntax for given
+ * @param {string} defaultVersion default Vue.js version
+ * @returns {function} the options builder
+ */
+ optionsBuilder(targetSyntax, defaultVersion) {
+ const baseIgnores = SYNTAXES.filter((s) => s !== targetSyntax)
+ return (option) => {
+ const ignores = [...baseIgnores]
+ let version = defaultVersion
+ if (!option) {
+ option = {}
+ }
+ if (option.ignores) {
+ ignores.push(...option.ignores)
+ }
+ if (option.version) {
+ version = option.version
+ }
+ option.ignores = ignores
+ option.version = version
+ return [option]
+ }
+ }
+}
diff --git a/tests/lib/rules/no-unsupported-features/v-bind-attr-modifier.js b/tests/lib/rules/no-unsupported-features/v-bind-attr-modifier.js
new file mode 100644
index 000000000..7b9931e3c
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/v-bind-attr-modifier.js
@@ -0,0 +1,59 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('v-bind-attr-modifier', '^3.1.0')
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/v-bind-attr-modifier', rule, {
+ valid: [
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '^3.2.0' })
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions()
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({
+ version: '^2.5.0',
+ ignores: ['v-bind-attr-modifier']
+ })
+ }
+ ],
+ invalid: [
+ {
+ code: `
+
+
+ `,
+ options: buildOptions(),
+ errors: [
+ {
+ message:
+ '`.attr` modifiers on `v-bind` are not supported until Vue.js "3.2.0".',
+ line: 3
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js b/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js
new file mode 100644
index 000000000..7b1742412
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/v-bind-prop-modifier-shorthand.js
@@ -0,0 +1,110 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder(
+ 'v-bind-prop-modifier-shorthand',
+ '^2.6.0'
+)
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/v-bind-prop-modifier-shorthand', rule, {
+ valid: [
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '2.6.0-beta.1' })
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '3.2.0' })
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '2.6.0-beta.2' })
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '2.6.0-beta.3' })
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions()
+ }
+ ],
+ invalid: [
+ {
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: buildOptions(),
+ errors: [
+ {
+ message: '`.prop` shorthand are not supported until Vue.js "3.2.0".',
+ line: 3
+ }
+ ]
+ },
+ {
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: buildOptions({ version: '2.5.99' }),
+ errors: [
+ {
+ message: '`.prop` shorthand are not supported until Vue.js "3.2.0".',
+ line: 3
+ }
+ ]
+ },
+ {
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: buildOptions({ version: '3.1.0' }),
+ errors: [
+ {
+ message: '`.prop` shorthand are not supported until Vue.js "3.2.0".',
+ line: 3
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/v-bind-same-name-shorthand.js b/tests/lib/rules/no-unsupported-features/v-bind-same-name-shorthand.js
new file mode 100644
index 000000000..3c5e2c8a4
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/v-bind-same-name-shorthand.js
@@ -0,0 +1,92 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder(
+ 'v-bind-same-name-shorthand',
+ '^3.3.0'
+)
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/v-bind-same-name-shorthand', rule, {
+ valid: [
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '3.4.0' })
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions()
+ }
+ ],
+ invalid: [
+ {
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: buildOptions(),
+ errors: [
+ {
+ message:
+ '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+ line: 3
+ }
+ ]
+ },
+ {
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: buildOptions({ version: '2.7.0' }),
+ errors: [
+ {
+ message:
+ '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+ line: 3
+ }
+ ]
+ },
+ {
+ code: `
+
+
+ `,
+ output: `
+
+
+ `,
+ options: buildOptions(),
+ errors: [
+ {
+ message:
+ '`v-bind` same-name shorthand is not supported until Vue.js "3.4.0".',
+ line: 3
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/v-is.js b/tests/lib/rules/no-unsupported-features/v-is.js
new file mode 100644
index 000000000..c9cf3fdc5
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/v-is.js
@@ -0,0 +1,55 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('v-is', '^2.6.0')
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/v-is', rule, {
+ valid: [
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '^3.0.0' })
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions()
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '^2.5.0', ignores: ['v-is'] })
+ }
+ ],
+ invalid: [
+ {
+ code: `
+
+
+ `,
+ options: buildOptions(),
+ errors: [
+ {
+ message: '`v-is` are not supported until Vue.js "3.0.0".',
+ line: 3
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/v-memo.js b/tests/lib/rules/no-unsupported-features/v-memo.js
new file mode 100644
index 000000000..3b9569cb0
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/v-memo.js
@@ -0,0 +1,55 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('v-memo', '^3.1.0')
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/v-memo', rule, {
+ valid: [
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '^3.2.0' })
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions()
+ },
+ {
+ code: `
+
+
+ `,
+ options: buildOptions({ version: '^2.5.0', ignores: ['v-memo'] })
+ }
+ ],
+ invalid: [
+ {
+ code: `
+
+
+ `,
+ options: buildOptions(),
+ errors: [
+ {
+ message: '`v-memo` are not supported until Vue.js "3.2.0".',
+ line: 3
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unsupported-features/v-model-argument.js b/tests/lib/rules/no-unsupported-features/v-model-argument.js
new file mode 100644
index 000000000..e7fe0a4ec
--- /dev/null
+++ b/tests/lib/rules/no-unsupported-features/v-model-argument.js
@@ -0,0 +1,56 @@
+/**
+ * @author Yosuke Ota
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../../eslint-compat').RuleTester
+const rule = require('../../../../lib/rules/no-unsupported-features')
+const utils = require('./utils')
+
+const buildOptions = utils.optionsBuilder('v-model-argument', '^2.6.0')
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2019 }
+})
+
+tester.run('no-unsupported-features/v-model-argument', rule, {
+ valid: [
+ {
+ code: `
+
+
+
+
+
+ `,
+ errors: [
+ {
+ message: 'The "Bar" component has been registered but not used.',
+ line: 14
+ }
+ ]
}
]
})
diff --git a/tests/lib/rules/no-unused-emit-declarations.js b/tests/lib/rules/no-unused-emit-declarations.js
new file mode 100644
index 000000000..b4469150d
--- /dev/null
+++ b/tests/lib/rules/no-unused-emit-declarations.js
@@ -0,0 +1,789 @@
+/**
+ * @author ItMaga
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-unused-emit-declarations')
+const {
+ getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
+
+const tester = new RuleTester({
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2020,
+ sourceType: 'module'
+ }
+})
+
+tester.run('no-unused-emit-declarations', rule, {
+ valid: [
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ }
+ ],
+ invalid: [
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 26,
+ endColumn: 33
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 24,
+ endColumn: 29
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 7,
+ column: 19,
+ endColumn: 24
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 20,
+ endColumn: 29
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 6,
+ column: 35,
+ endColumn: 40
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 19,
+ endColumn: 24
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 26,
+ endColumn: 31
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 8,
+ column: 19,
+ endColumn: 24
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 26,
+ endColumn: 31
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 19,
+ endColumn: 24
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 26,
+ endColumn: 31
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ endLine: 4,
+ column: 33,
+ endColumn: 38
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 3,
+ column: 24,
+ endColumn: 29
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ languageOptions: {
+ parserOptions: { parser: require.resolve('@typescript-eslint/parser') }
+ },
+ errors: [
+ {
+ messageId: 'unused',
+ line: 3,
+ column: 22,
+ endColumn: 38
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: '`update:foo` is defined as emit but never used.',
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ messageId: 'unused',
+ line: 4,
+ column: 19,
+ endColumn: 24
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unused-properties.js b/tests/lib/rules/no-unused-properties.js
new file mode 100644
index 000000000..b89ea01f0
--- /dev/null
+++ b/tests/lib/rules/no-unused-properties.js
@@ -0,0 +1,4786 @@
+/**
+ * @fileoverview Disallow unused properties, data and computed properties.
+ * @author Learning Equality
+ */
+'use strict'
+
+const { RuleTester, Linter } = require('../../eslint-compat')
+const assert = require('assert')
+const rule = require('../../../lib/rules/no-unused-properties')
+const {
+ getTypeScriptFixtureTestOptions
+} = require('../../test-utils/typescript')
+
+const tester = new RuleTester({
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2020,
+ sourceType: 'module'
+ }
+})
+
+const allOptions = [
+ { groups: ['props', 'computed', 'data', 'asyncData', 'methods', 'setup'] }
+]
+const deepDataOptions = [{ groups: ['data'], deepData: true }]
+
+const unreferencedOptions = {
+ // Report errors when accessing via unknown property, e.g. this[varName]
+ unknownMemberAsUnreferenced: [
+ {
+ groups: ['computed'],
+ unreferencedOptions: ['unknownMemberAsUnreferenced']
+ }
+ ],
+ // Report errors when returning this
+ returnAsUnreferenced: [
+ {
+ groups: ['computed'],
+ unreferencedOptions: ['returnAsUnreferenced']
+ }
+ ],
+ // Report all
+ all: [
+ {
+ groups: ['computed'],
+ unreferencedOptions: [
+ 'unknownMemberAsUnreferenced',
+ 'returnAsUnreferenced'
+ ]
+ }
+ ]
+}
+
+tester.run('no-unused-properties', rule, {
+ valid: [
+ // vuex getters
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ baz() }}
+
+ `,
+ options: allOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count1 }} {{ count2 }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+
+ // vuex mutations
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+
+ // vuex actions
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+
+ // vuex state
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+
+ // pinia getters
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ baz() }}
+
+ `,
+ options: allOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count1 }} {{ count2 }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+
+ // pinia actions
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `
+ },
+
+ // pinia state
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+
+ // pinia writable state
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `
+ },
+
+ // a property used in a script expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ // default options
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+
+ // a property being watched
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+
+ // a property used as a template identifier
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ count }}
+
+
+ `
+ },
+ // a property used as a template $props member expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ $props.count }}
+
+
+ `
+ },
+ // a property used as a template $props expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ $props }}
+
+
+ `
+ },
+
+ // properties used in a template expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ count1 + count2 }}
+
+
+ `
+ },
+ // properties used in a template expression as $props member expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ $props.count1 + $props.count2 }}
+
+
+ `
+ },
+
+ // a property used in v-if
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ // a property used in v-if as $props member expression
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+
+ // a property used in v-for
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ color }}
+
+
+ `
+ },
+ // a property used in v-for as $props member expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ color }}
+
+
+ `
+ },
+
+ // a property used in v-html
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ // a property used in v-html as $props member expression
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+
+ // a property passed in a component
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ count }}
+
+
+ `,
+ options: allOptions
+ },
+
+ // data used in a template expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ count1 + count2 }}
+
+
+ `,
+ options: allOptions
+ },
+
+ // data used in v-if
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ options: allOptions
+ },
+
+ // data used in v-for
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ color }}
+
+
+ `,
+ options: allOptions
+ },
+
+ // data used in v-html
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ options: allOptions
+ },
+
+ // data used in v-model
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ options: allOptions
+ },
+
+ // data passed in a component
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ count }}
+
+
+ `,
+ options: allOptions
+ },
+
+ // computed properties used in a template expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ count1 + count2 }}
+
+
+ `,
+ options: allOptions
+ },
+
+ // computed property used in v-if
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ options: allOptions
+ },
+
+ // computed property used in v-for
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ color }}
+
+
+ `,
+ options: allOptions
+ },
+
+ // computed property used in v-html
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ options: allOptions
+ },
+
+ // computed property used in v-model
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ options: allOptions
+ },
+
+ // computed property passed in a component
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ cont }}
+
+
+ `,
+ options: allOptions
+ },
+
+ // trace this
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ // use rest
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ foo }}
+
+
+ `
+ },
+
+ // function trace
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+
+ // render & functional
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('smart-list', {
+ functional: true,
+ props: {
+ items: {
+ type: Array,
+ required: true
+ },
+ isOrdered: Boolean
+ },
+ render: function (createElement, context) {
+ function appropriateListComponent () {
+ var items = context.props.items
+
+ if (items.length === 0) return EmptyList
+ if (typeof items[0] === 'object') return TableList
+ if (context.props.isOrdered) return OrderedList
+
+ return UnorderedList
+ }
+
+ return createElement(
+ appropriateListComponent(),
+ context.data,
+ context.children
+ )
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo'],
+ render: function (createElement, {props}) {
+ return createElement('button', props.foo)
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo'],
+ render: function (createElement, ctx) {
+ return createElement('button', fn(ctx.props))
+ }
+ })
+
+ function fn(props) {
+ return props.foo
+ }
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo'],
+ render: function (createElement, ctx) {
+ return createElement('button', fn(ctx))
+ }
+ })
+
+ function fn({props}) {
+ return props.foo
+ }
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo'],
+ render: function (createElement, {props:{foo}}) {
+ return createElement('button', foo)
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo'],
+ render: function (createElement, {props:[bar]}) {
+ return createElement('button')
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo'],
+ render: function (createElement, {props:bar={}}) {
+ return createElement('button', bar.foo)
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo'],
+ render: function (createElement, {...foo}) {
+ return createElement('button')
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo', 'bar'],
+ render: function (createElement, ctx) {
+ const a = ctx.props
+ const b = ctx.props
+ return createElement('button', a.foo + b.bar)
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo', 'bar'],
+ render: function (createElement, {props: a, props: b}) {
+ return createElement('button', a.foo + b.bar)
+ }
+ })
+ `
+ },
+ // render for Vue 3.x
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ props: ['foo'],
+ render (props) {
+ return h('button', props.foo)
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ props: ['foo'],
+ render ({foo}) {
+ return h('button', foo)
+ }
+ })
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+ export default {
+ props: ['foo'],
+ render (bar) {
+ const {...baz} = bar
+ return h('button')
+ }
+ })
+ `
+ },
+ // Vue.js 3.x Template Refs
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ options: [{ groups: ['props', 'setup'] }]
+ },
+
+ // sparse array
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ count }}
+
+
+ `
+ },
+ // optional chaining
+ {
+ filename: 'test.vue',
+ code: `
+ `
+ },
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ functional: true,
+ props: ['foo', 'bar'],
+ render: function (createElement, ctx) {
+ const a = ctx
+ const b = a?.props?.foo
+ const c = (a?.props)?.bar
+ }
+ })
+ `
+ },
+ // handlers
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [{ groups: ['props', 'methods'] }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [{ groups: ['props', 'data'] }]
+ },
+ // contexts
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `
+ },
+
+ // deep data
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ foo.baz.b }}
+
+
+ `,
+ options: deepDataOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ foo.bar }}
+ {{ foo.baz }}
+
+
+ `,
+ options: deepDataOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ obj.num.toLocaleString() }}
+
+ `,
+ options: deepDataOptions
+ },
+
+ // ignore public members
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [{ groups: ['data'], ignorePublicMembers: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [{ groups: ['computed'], ignorePublicMembers: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [{ groups: ['methods'], ignorePublicMembers: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [{ groups: ['setup'], ignorePublicMembers: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ options: [
+ {
+ groups: ['props', 'data', 'computed', 'methods', 'setup'],
+ ignorePublicMembers: true
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ options: [
+ {
+ groups: ['props', 'computed'],
+ ignorePublicMembers: true
+ }
+ ]
+ },
+
+ // expose
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{a}}
+
+ `,
+ options: allOptions
+ },
+
+ //style vars
+ {
+ filename: 'test.vue',
+ code: `
+
+ hello
+
+
+
+
+
+ `
+ },
+
+ // toRefs
+ {
+ // https://github.com/vuejs/eslint-plugin-vue/issues/1643
+ filename: 'test.vue',
+ code: `
+
+
+ {{ item }}
+
+
+
+
+
+ `,
+ languageOptions: {
+ parserOptions: {
+ parser: '@typescript-eslint/parser'
+ }
+ }
+ },
+
+ // Vue2 functional component
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{props.a}} {{props.b}}
+
+
+ `
+ },
+ {
+ // defineModel
+ filename: 'test.vue',
+ code: `
+
+
+ {{ foo }}
+
+ `
+ },
+
+ // props.prop in template
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{props}}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{props.a}}
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{foo.a}}
+
+ `
+ },
+ {
+ code: `
+
+
+ {{ props.foo }}{{ bar }}
+ `,
+ ...getTypeScriptFixtureTestOptions()
+ }
+ ],
+ invalid: [
+ // vuex unused mutations
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 6
+ }
+ ]
+ },
+
+ // vuex unused actions
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 5
+ }
+ ]
+ },
+
+ // vuex unused state
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count2 }} {{ count3 }}
+
+ `,
+ errors: [
+ {
+ message: "'count' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+
+ // vuex unused getters
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count1 }} {{ count2 }}
+
+ `,
+ errors: [
+ {
+ message: "'count' of computed property found, but never used.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count3' of computed property found, but never used.",
+ line: 7
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'a' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'a' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+
+ // pinia unused actions
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ add() }}
+
+ `,
+ errors: [
+ {
+ message: "'add2' of method found, but never used.",
+ line: 5
+ }
+ ]
+ },
+
+ // pinia unused state
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count2 }} {{ count3 }}
+
+ `,
+ errors: [
+ {
+ message: "'count' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+
+ // pinia unused writable state
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count2 }} {{ count3 }}
+
+ `,
+ errors: [
+ {
+ message: "'count' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+
+ // pinia unused getters
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count1 }} {{ count2 }}
+
+ `,
+ errors: [
+ {
+ message: "'count' of computed property found, but never used.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count2' of computed property found, but never used.",
+ line: 5
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'count3' of computed property found, but never used.",
+ line: 7
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'a' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ {{ count }}
+
+ `,
+ errors: [
+ {
+ message: "'a' of computed property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+
+ // unused property
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ cont }}
+
+
+ `,
+ errors: [
+ {
+ message: "'count' of property found, but never used.",
+ line: 7
+ }
+ ]
+ },
+
+ // unused data
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ cont }}
+
+
+ `,
+ options: [{ groups: ['props', 'computed', 'data'] }],
+ errors: [
+ {
+ message: "'count' of data found, but never used.",
+ line: 9
+ }
+ ]
+ },
+
+ // unused async data
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ cont }}
+
+
+ `,
+ options: [{ groups: ['props', 'computed', 'data', 'asyncData'] }],
+ errors: [
+ {
+ message: "'count' of async data found, but never used.",
+ line: 9
+ }
+ ]
+ },
+
+ // unused computed property
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ cont }}
+
+
+ `,
+ options: [{ groups: ['props', 'computed', 'data'] }],
+ errors: [
+ {
+ message: "'count' of computed property found, but never used.",
+ line: 8
+ }
+ ]
+ },
+
+ // all options
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ foo }}
+
+
+ `,
+ options: allOptions,
+ errors: [
+ {
+ message: "'a' of property found, but never used.",
+ line: 7
+ },
+ {
+ message: "'b' of data found, but never used.",
+ line: 9
+ },
+ {
+ message: "'c' of computed property found, but never used.",
+ line: 12
+ },
+ {
+ message: "'d' of method found, but never used.",
+ line: 17
+ },
+ {
+ message:
+ "'e' of property returned from `setup()` found, but never used.",
+ line: 20
+ }
+ ]
+ },
+
+ // trace this
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'count' of property found, but never used.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'count' of property found, but never used.",
+ line: 4
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ {
+ message: "'count' of property found, but never used.",
+ line: 4
+ }
+ ]
+ },
+
+ // setup
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'bar' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'bar' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ "'foo' of property found, but never used.",
+ "'bar' of property found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ "'foo' of property found, but never used.",
+ "'bar' of property found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ "'foo' of property found, but never used.",
+ "'bar' of property found, but never used."
+ ]
+ },
+
+ // function trace
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'bar' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'baz' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ "'foo' of property found, but never used.",
+ "'bar' of property found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ "'foo' of property found, but never used.",
+ "'bar' of property found, but never used.",
+ "'baz' of property found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ "'foo' of property found, but never used.",
+ "'bar' of property found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'baz' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ "'foo' of property found, but never used.",
+ "'bar' of property found, but never used.",
+ "'baz' of property found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: [
+ "'foo' of property found, but never used.",
+ "'bar' of property found, but never used.",
+ "'baz' of property found, but never used."
+ ]
+ },
+
+ // render & not functional
+ {
+ filename: 'test.js',
+ code: `
+ Vue.component('MyButton', {
+ props: ['foo'],
+ render: function (createElement, {props}) {
+ return createElement('button', props.foo)
+ }
+ })
+ `,
+ errors: ["'foo' of property found, but never used."]
+ },
+
+ // contexts
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'x' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'x' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'x' of property found, but never used."]
+ },
+
+ // deep data
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ foo.baz.a }}
+
+
+ `,
+ options: deepDataOptions,
+ errors: [
+ {
+ message: "'foo.baz.b' of data found, but never used.",
+ line: 14,
+ column: 21
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: [
+ "'foo.bar' of data found, but never used.",
+ "'foo.baz.b' of data found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: ["'foo.bar.a' of data found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: [
+ "'foo.bar.a' of data found, but never used.",
+ "'foo.baz.b' of data found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: ["'foo.bar.a' of data found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: ["'foo.bar.a' of data found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: [
+ {
+ message: "'foo.bar.a' of data found, but never used.",
+ line: 6,
+ column: 17
+ },
+ {
+ message: "'foo.baz.a' of data found, but never used.",
+ line: 9,
+ column: 17
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ options: [
+ {
+ groups: ['props', 'data', 'computed', 'methods', 'setup'],
+ ignorePublicMembers: true,
+ deepData: true
+ }
+ ],
+ errors: [
+ "'_a' of property found, but never used.",
+ "'a' of property found, but never used.",
+ "'_b' of property returned from `setup()` found, but never used.",
+ "'c._c2' of data found, but never used.",
+ "'_c' of data found, but never used.",
+ "'_d' of computed property found, but never used.",
+ "'_e' of method found, but never used.",
+ "'_f' of method found, but never used.",
+ "'_g' of method found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ `,
+ options: [
+ {
+ groups: ['data'],
+ ignorePublicMembers: true,
+ deepData: true
+ }
+ ],
+ errors: [
+ "'a' of data found, but never used.",
+ "'b' of data found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{a}}
+
+ `,
+ errors: ["'c' of property found, but never used."]
+ },
+
+ // expose
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{a}}
+
+ `,
+ options: allOptions,
+ errors: [
+ "'b' of property found, but never used.",
+ "'d' of data found, but never used.",
+ "'f' of computed property found, but never used.",
+ "'h' of method found, but never used."
+ ]
+ },
+
+ // toRef, toRefs
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'bar' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ errors: ["'bar' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: ["'foo.baz' of data found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: [
+ "'foo.bar.b' of data found, but never used.",
+ "'foo.baz.a' of data found, but never used."
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: deepDataOptions,
+ errors: [
+ "'foo.bar.b' of data found, but never used.",
+ "'foo.baz' of data found, but never used."
+ ]
+ },
+
+ // Vue2 functional component
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{a}} {{b}} {{props.c}}
+
+
+ `,
+ errors: [
+ {
+ message: "'a' of property found, but never used.",
+ line: 9
+ },
+ {
+ message: "'b' of property found, but never used.",
+ line: 10
+ }
+ ]
+ },
+
+ // unreferencedOptions: unknownMemberAsUnreferenced
+ {
+ filename: 'test.vue',
+ code: `
+ `,
+ options: unreferencedOptions.unknownMemberAsUnreferenced,
+ errors: [
+ {
+ message: "'two' of computed property found, but never used.",
+ line: 8
+ }
+ ]
+ },
+ // unreferencedOptions: returnAsUnreferenced
+ {
+ filename: 'test.vue',
+ code: `
+ `,
+ options: unreferencedOptions.returnAsUnreferenced,
+ errors: [
+ {
+ message: "'two' of computed property found, but never used.",
+ line: 8
+ }
+ ]
+ },
+ // unreferencedOptions: returnAsUnreferenced via variable with deepData
+ {
+ filename: 'test.vue',
+ code: `
+
+ `,
+ options: [
+ {
+ groups: ['data'],
+ unreferencedOptions: ['returnAsUnreferenced'],
+ deepData: true
+ }
+ ],
+ errors: [
+ {
+ message: "'foo.bar' of data found, but never used.",
+ line: 7
+ }
+ ]
+ },
+ // unreferencedOptions: all
+ {
+ filename: 'test.vue',
+ code: `
+ `,
+ options: unreferencedOptions.all,
+ errors: [
+ {
+ message: "'two' of computed property found, but never used.",
+ line: 8
+ }
+ ]
+ },
+ // script setup with typescript
+ {
+ code: `
+
+
+ {{ foo }}{{ bar }}
+ `,
+ errors: [
+ {
+ message: "'baz' of property found, but never used.",
+ line: 4
+ }
+ ],
+ ...getTypeScriptFixtureTestOptions()
+ },
+
+ {
+ // defineModel
+ filename: 'test.vue',
+ code: `
+
+
+ {{ a }}
+
+ `,
+ errors: [
+ {
+ message: "'unused' of property found, but never used.",
+ line: 6
+ }
+ ]
+ },
+
+ // a property used as a template $props member expression
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{ $props.foo }}
+
+
+ `,
+ errors: ["'bar' of property found, but never used."]
+ },
+
+ // props.prop in template
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{props.a}}
+
+ `,
+ errors: ["'b' of property found, but never used."]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ {{foo.a}}
+
+ `,
+ errors: ["'b' of property found, but never used."]
+ },
+ {
+ code: `
+
+
+ {{ props.foo }}{{ bar }}
+ `,
+ errors: ["'baz' of property found, but never used."],
+ ...getTypeScriptFixtureTestOptions()
+ }
+ ]
+})
+
+// https://github.com/vuejs/eslint-plugin-vue/issues/1789
+describe('`vue/no-unused-properties` and `vue/no-unused-components` should not conflict.', () => {
+ const linter = new Linter()
+ const config = {
+ files: ['**/*.vue'],
+ plugins: {
+ vue: {
+ rules: {
+ 'no-unused-components': require('../../../lib/rules/no-unused-components'),
+ 'no-unused-properties': rule
+ }
+ }
+ },
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2020,
+ sourceType: 'module'
+ },
+ rules: {
+ 'vue/no-unused-components': 'error',
+ 'vue/no-unused-properties': 'error'
+ }
+ }
+
+ it('should not be a false positive when using CSS v-bind().', () => {
+ const code = `
+
+
+ `
+ assert.deepStrictEqual(linter.verify(code, config, 'test.vue'), [])
+ })
+})
diff --git a/tests/lib/rules/no-unused-refs.js b/tests/lib/rules/no-unused-refs.js
new file mode 100644
index 000000000..a4407a608
--- /dev/null
+++ b/tests/lib/rules/no-unused-refs.js
@@ -0,0 +1,429 @@
+/**
+ * @fileoverview Disallow unused refs.
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-unused-refs')
+
+const tester = new RuleTester({
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2020,
+ sourceType: 'module'
+ }
+})
+
+tester.run('no-unused-refs', rule, {
+ valid: [
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+
+
+
+
+ `
+ },
+
+ // has unknown
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+
+ `
+ }
+ ],
+
+ invalid: [
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+ `,
+ errors: [
+ {
+ message: "'foo' is defined as ref, but never used.",
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+
+
+
+
+ `,
+ errors: [
+ {
+ message: "'bar' is defined as ref, but never used.",
+ line: 7
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ errors: [
+ {
+ message: "'x' is defined as ref, but never used.",
+ line: 3
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ errors: [
+ {
+ message: "'x' is defined as ref, but never used.",
+ line: 4
+ }
+ ]
+ },
+
+ // illegal use
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ errors: ["'x' is defined as ref, but never used."]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-unused-vars.js b/tests/lib/rules/no-unused-vars.js
index e033d4871..60e1c276b 100644
--- a/tests/lib/rules/no-unused-vars.js
+++ b/tests/lib/rules/no-unused-vars.js
@@ -5,50 +5,36 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
const rule = require('../../../lib/rules/no-unused-vars')
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
const tester = new RuleTester({
- parser: 'vue-eslint-parser',
- parserOptions: { ecmaVersion: 2015 }
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
})
tester.run('no-unused-vars', rule, {
valid: [
+ '
',
+ '',
+ '
',
+ '{{props}}',
+ '',
+ '{{item.name}}',
+ '{{c}}',
+ '{{value | f(x)}}',
+ '',
{
- code: '
'
- },
- {
- code: ''
- },
- {
- code: '
'
- },
- {
- code: '{{props}}'
- },
- {
- code: ''
+ code: '',
+ options: [{ ignorePattern: '^_' }]
},
{
- code: '{{item.name}}'
+ code: '',
+ options: [{ ignorePattern: '^ignore' }]
},
{
- code: '{{c}}'
- },
- {
- code: '{{value | f(x)}}'
+ code: '',
+ options: [{ ignorePattern: 'ignore$' }]
}
],
invalid: [
@@ -57,11 +43,19 @@ tester.run('no-unused-vars', rule, {
errors: ["'i' is defined but never used."]
},
{
- code: '',
+ code: '',
+ errors: ["'props' is defined but never used."]
+ },
+ {
+ code: '',
errors: ["'props' is defined but never used."]
},
{
- code: '',
errors: ["'j' is defined but never used."]
},
{
@@ -70,11 +64,18 @@ tester.run('no-unused-vars', rule, {
},
{
code: '',
- errors: ["'a' is defined but never used.", "'b' is defined but never used.", "'c' is defined but never used."]
+ errors: [
+ "'a' is defined but never used.",
+ "'b' is defined but never used.",
+ "'c' is defined but never used."
+ ]
},
{
code: '{{a}}',
- errors: ["'b' is defined but never used.", "'c' is defined but never used."]
+ errors: [
+ "'b' is defined but never used.",
+ "'c' is defined but never used."
+ ]
},
{
code: '{{b}}',
@@ -86,7 +87,99 @@ tester.run('no-unused-vars', rule, {
},
{
code: '{{value | x}}',
+ options: [{ ignorePattern: '^_' }],
+ errors: [
+ {
+ message: "'x' is defined but never used.",
+ suggestions: [
+ {
+ desc: 'Replace `x` with `_x` to ignore the unused variable.',
+ output:
+ '{{value | x}}'
+ }
+ ]
+ }
+ ]
+ },
+ {
+ code: '{{value}}',
+ options: [{ ignorePattern: 'ignore$' }],
errors: ["'x' is defined but never used."]
+ },
+ {
+ code: '',
+ options: [{ ignorePattern: '^ignore' }],
+ errors: ["'props' is defined but never used."]
+ },
+ {
+ code: '',
+ options: [{ ignorePattern: '^ignore' }],
+ errors: ["'props' is defined but never used."]
+ },
+ {
+ code: '',
+ errors: ["'_i' is defined but never used."]
+ },
+ {
+ code: '',
+ options: [{ ignorePattern: '^_' }],
+ errors: [
+ {
+ message: "'a' is defined but never used.",
+ suggestions: [
+ {
+ messageId: 'replaceWithUnderscore',
+ output:
+ ''
+ }
+ ]
+ }
+ ]
+ },
+ {
+ code: '{{f}}',
+ errors: [
+ "'a' is defined but never used.",
+ "'b' is defined but never used.",
+ "'c' is defined but never used.",
+ "'d' is defined but never used."
+ ]
+ },
+ {
+ code: '{{f}}',
+ errors: [
+ "'a' is defined but never used.",
+ "'b' is defined but never used.",
+ "'d' is defined but never used."
+ ]
+ },
+ {
+ code: '{{f}}',
+ errors: [
+ "'a' is defined but never used.",
+ "'bar' is defined but never used.",
+ "'d' is defined but never used."
+ ]
}
]
})
diff --git a/tests/lib/rules/no-use-computed-property-like-method.js b/tests/lib/rules/no-use-computed-property-like-method.js
new file mode 100644
index 000000000..4a5e25ebe
--- /dev/null
+++ b/tests/lib/rules/no-use-computed-property-like-method.js
@@ -0,0 +1,1209 @@
+/**
+ * @author tyankatsu {{ x }}
+
+ `
+ },
+ {
+ // `v-if`/`v-else-if`/`v-else` only
+ filename: 'test.vue',
+ code: `
+
+ {{ x }}
+ {{ x }}
+ {{ x }}
+
+ `
+ },
+ {
+ // `v-for` only
+ filename: 'test.vue',
+ code: `
+
+ {{ x }}
+
+ `
+ },
+ {
+ // `v-else-if`/`v-else` in template + `v-for`
+ filename: 'test.vue',
+ code: `
+
+ foo
+
+ {{ x }}
+
+
+ {{ x }}
+
+
+ `
+ }
+ ],
+ invalid: [
+ {
+ filename: 'test.vue',
+ code: `
+
+ foo
+ {{ x }}
+
+ `,
+ errors: [
+ {
+ message:
+ 'Unexpected `v-else` and `v-for` on the same element. Move `v-else` to a wrapper element instead.',
+ line: 4,
+ endLine: 4,
+ column: 11,
+ endColumn: 52
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+ foo
+ {{ x }}
+
+ `,
+ errors: [
+ {
+ message:
+ 'Unexpected `v-else-if` and `v-for` on the same element. Move `v-else-if` to a wrapper element instead.',
+ line: 4,
+ endLine: 4,
+ column: 11,
+ endColumn: 61
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-use-v-if-with-v-for.js b/tests/lib/rules/no-use-v-if-with-v-for.js
index 4ee3bb8ac..6d2661a4c 100644
--- a/tests/lib/rules/no-use-v-if-with-v-for.js
+++ b/tests/lib/rules/no-use-v-if-with-v-for.js
@@ -3,20 +3,11 @@
*/
'use strict'
-// ------------------------------------------------------------------------------
-// Requirements
-// ------------------------------------------------------------------------------
-
-const RuleTester = require('eslint').RuleTester
+const RuleTester = require('../../eslint-compat').RuleTester
const rule = require('../../../lib/rules/no-use-v-if-with-v-for')
-// ------------------------------------------------------------------------------
-// Tests
-// ------------------------------------------------------------------------------
-
const tester = new RuleTester({
- parser: 'vue-eslint-parser',
- parserOptions: { ecmaVersion: 2015 }
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
})
tester.run('no-use-v-if-with-v-for', rule, {
@@ -73,32 +64,88 @@ tester.run('no-use-v-if-with-v-for', rule, {
`
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ options: [{ allowUsingIterationVar: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ options: [{ allowUsingIterationVar: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ options: [{ allowUsingIterationVar: true }]
+ },
+ {
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `
}
],
invalid: [
{
filename: 'test.vue',
code: '',
- errors: [{
- message: "This 'v-if' should be moved to the wrapper element.",
- line: 1
- }]
+ errors: [
+ {
+ message: "This 'v-if' should be moved to the wrapper element.",
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- errors: [{
- message: "This 'v-if' should be moved to the wrapper element.",
- line: 1
- }]
+ errors: [
+ {
+ message: "This 'v-if' should be moved to the wrapper element.",
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
code: '',
- errors: [{
- message: "The 'list' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
- line: 1
- }]
+ errors: [
+ {
+ message:
+ "The 'list' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
+ line: 1
+ }
+ ]
},
{
filename: 'test.vue',
@@ -115,10 +162,13 @@ tester.run('no-use-v-if-with-v-for', rule, {
`,
- errors: [{
- message: "The 'users' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
- line: 6
- }]
+ errors: [
+ {
+ message:
+ "The 'users' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
+ line: 6
+ }
+ ]
},
{
filename: 'test.vue',
@@ -135,10 +185,90 @@ tester.run('no-use-v-if-with-v-for', rule, {
`,
- errors: [{
- message: "This 'v-if' should be moved to the wrapper element.",
- line: 6
- }]
+ errors: [
+ {
+ message: "This 'v-if' should be moved to the wrapper element.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ errors: [
+ {
+ message:
+ "The 'list' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ errors: [
+ {
+ message:
+ "The 'users' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: `
+
+
+
+
+ `,
+ errors: [
+ {
+ message: "This 'v-if' should be moved to the wrapper element.",
+ line: 6
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ errors: [
+ {
+ message:
+ "The 'list()' expression inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
+ line: 1
+ }
+ ]
+ },
+ {
+ filename: 'test.vue',
+ code: '',
+ errors: [
+ {
+ message:
+ "The '5' expression inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.",
+ line: 1
+ }
+ ]
}
]
})
diff --git a/tests/lib/rules/no-useless-concat.js b/tests/lib/rules/no-useless-concat.js
new file mode 100644
index 000000000..eca6901bb
--- /dev/null
+++ b/tests/lib/rules/no-useless-concat.js
@@ -0,0 +1,46 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-useless-concat')
+
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
+})
+
+tester.run('no-useless-concat', rule, {
+ valid: [
+ ``,
+ '',
+ ``,
+ // CSS vars injection
+ `
+ `
+ ],
+ invalid: [
+ {
+ code: ``,
+ errors: ['Unexpected string concatenation of literals.']
+ },
+ {
+ code: ``,
+ errors: ['Unexpected string concatenation of literals.']
+ },
+ // CSS vars injection
+ {
+ code: `
+ `,
+ errors: ['Unexpected string concatenation of literals.']
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-useless-mustaches.js b/tests/lib/rules/no-useless-mustaches.js
new file mode 100644
index 000000000..77d055e17
--- /dev/null
+++ b/tests/lib/rules/no-useless-mustaches.js
@@ -0,0 +1,265 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-useless-mustaches.js')
+
+const tester = new RuleTester({
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2020,
+ sourceType: 'module'
+ }
+})
+
+tester.run('no-useless-mustaches', rule, {
+ valid: [
+ `
+
+ foo
+ 'foo'
+ {{ foo }}
+ {{ 'foo'||'bar' }}
+ {{ 1 }}
+ {{ }}
+ {{ . }}
+ {{ null }}
+ `,
+ {
+ code: `
+
+ {{ 'comment'/*comment*/ }}
+ {{ 'comment'//comment
+ " }}
+
+ `,
+ options: [{ ignoreIncludesComment: true }]
+ },
+ {
+ code: `
+
+ {{ '\\n' }}
+ {{ '\\r' }}
+ `,
+ options: [{ ignoreStringEscape: true }]
+ }
+ ],
+ invalid: [
+ {
+ code: `
+
+ {{ 'foo' }}
+ `,
+ output: `
+
+ foo
+ `,
+ errors: [
+ {
+ message:
+ 'Unexpected mustache interpolation with a string literal value.',
+ line: 3,
+ column: 9,
+ endLine: 3
+ }
+ ]
+ },
+ {
+ code: `
+
+ {{ 'comment'/*comment*/ }}
+ {{ 'comment'//comment
+ }}
+
+ `,
+ output: null,
+ errors: [
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+ {{ '\\n' }}
+ {{ '\\r' }}
+ `,
+ output: null,
+ errors: [
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+ {{ '"' }}
+ {{ \`"'\` }}
+ {{ '\\\\' }}
+ {{ '\\\\r' }}
+ {{ '\\' }}
+ {{ \`foo\` }}
+ {{ \`foo\${bar}\` }}
+ {{ "'" }}
+ {{ \`foo\` }}
+ `,
+ output: `
+
+ "
+ "'
+ \\
+ \\r
+ {{ '\\' }}
+ foo
+ {{ \`foo\${bar}\` }}
+ '
+ foo
+ `,
+ errors: [
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+ {{ 'msg' }}
+ {{ "msg" }}
+ {{ 'msg' }}
+ {{ "msg" }}
+ {{ 'msg' }}
+ {{ "msg" }}
+ {{ '<msg>' }}
+ {{ "I'm" }}
+ {{ "no semi" }}
+ `,
+ output: `
+
+ msg
+ msg
+ msg
+ msg
+ msg
+ msg
+ <msg>
+ I'm
+ {{ "no semi" }}
+ `,
+ errors: [
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+ {{ 'I\\'m' }}
+ {{ "\\"Happy\\"" }}
+ {{ \`backtick \\\` and dollar \\$\` }}
+ {{ "\\\\" }}
+ `,
+ output: `
+
+ I'm
+ "Happy"
+ backtick \` and dollar $
+ \\
+ `,
+ errors: [
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+ {{ '<' }}
+ {{ '>' }}
+ {{ '&' }}
+ {{ '—' }}
+
+ `,
+ output: `
+
+ <
+ >
+ &
+ —
+
+ `,
+ errors: [
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.',
+ 'Unexpected mustache interpolation with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+ {{ '<' }}
+ {{ '<<' }}
+ {{ 'can be < anywhere' }}
+ {{ '...
+ ...
+ ...
+ ...
+
+ `
+ }
+ ],
+ invalid: [
+ {
+ filename: 'test.vue',
+ code: `
+
+
+ ...
+ ...
+ ...
+ ...
+ ...
+ ...
+
+ ...
+ ...
+ ...
+
+ ...
+
+
+ ...
+ ...
+ ...
+ ...
+
+
+ ...
+ ...
+ ...
+ ...
+
+ `,
+ errors: [
+ {
+ message: 'Unexpected useless attribute on ``.',
+ line: 18,
+ column: 30
+ },
+ {
+ message: 'Unexpected useless directive on ``.',
+ line: 19,
+ column: 36
+ },
+ {
+ message: 'Unexpected useless attribute on ``.',
+ line: 20,
+ column: 36
+ },
+ {
+ message: 'Unexpected useless directive on ``.',
+ line: 21,
+ column: 30
+ }
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-useless-v-bind.js b/tests/lib/rules/no-useless-v-bind.js
new file mode 100644
index 000000000..34a76d0df
--- /dev/null
+++ b/tests/lib/rules/no-useless-v-bind.js
@@ -0,0 +1,169 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-useless-v-bind.js')
+
+const tester = new RuleTester({
+ languageOptions: {
+ parser: require('vue-eslint-parser'),
+ ecmaVersion: 2020,
+ sourceType: 'module'
+ }
+})
+
+tester.run('no-useless-v-bind', rule, {
+ valid: [
+ `
+
+
+
+
+
+
+
+
+
+
+ `,
+ {
+ code: `
+
+
+
+
+ `,
+ options: [{ ignoreIncludesComment: true }]
+ },
+ {
+ code: `
+
+
+
+ `,
+ options: [{ ignoreStringEscape: true }]
+ }
+ ],
+ invalid: [
+ {
+ code: `
+
+
+
+ `,
+ output: `
+
+
+
+ `,
+ errors: [
+ {
+ message: 'Unexpected `v-bind` with a string literal value.',
+ line: 3,
+ column: 14,
+ endLine: 3,
+ endColumn: 25
+ },
+ {
+ message: 'Unexpected `v-bind` with a string literal value.',
+ line: 4,
+ column: 14,
+ endLine: 4,
+ endColumn: 31
+ }
+ ]
+ },
+ {
+ code: `
+
+
+
+
+ `,
+ output: null,
+ errors: [
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+
+
+ `,
+ output: null,
+ errors: [
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+
+
+
+
+
+
+
+
+
+ `,
+ output: `
+
+
+
+
+
+
+
+
+
+
+ `,
+ errors: [
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.'
+ ]
+ },
+ {
+ code: `
+
+
+
+
+
+
+
+ `,
+ output: `
+
+
+
+
+
+
+
+ `,
+ errors: [
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.',
+ 'Unexpected `v-bind` with a string literal value.'
+ ]
+ }
+ ]
+})
diff --git a/tests/lib/rules/no-v-for-template-key-on-child.js b/tests/lib/rules/no-v-for-template-key-on-child.js
new file mode 100644
index 000000000..7c65a2012
--- /dev/null
+++ b/tests/lib/rules/no-v-for-template-key-on-child.js
@@ -0,0 +1,148 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+const RuleTester = require('../../eslint-compat').RuleTester
+const rule = require('../../../lib/rules/no-v-for-template-key-on-child')
+
+const tester = new RuleTester({
+ languageOptions: { parser: require('vue-eslint-parser'), ecmaVersion: 2015 }
+})
+
+tester.run('no-v-for-template-key-on-child', rule, {
+ valid: [
+ {
+ filename: 'test.vue',
+ code: ''
+ },
+ {
+ filename: 'test.vue',
+ code: '