Add the ruleset for Vue.js 3 (#1061)

- Add `plugin:vue/vue3-essential` config
- Add `plugin:vue/vue3-strongly-recommended` config
- Add `plugin:vue/vue3-recommended` config

.eslintrc.js

@@ -29,6 +29,7 @@ module.exports = {
  rules: {
  "consistent-docs-description": "error",
  "no-invalid-meta": "error",
+ "no-invalid-meta-docs-categories": "error",
  'eslint-plugin/require-meta-type': 'error',
  "require-meta-docs-url": ["error", {
  "pattern": `https://eslint.vuejs.org/rules/{{name}}.html`

docs/.vuepress/config.js

@@ -5,11 +5,47 @@
 'use strict'
 
 const rules = require('../../tools/lib/rules')
-const categories = require('../../tools/lib/categories')
 
-const uncategorizedRules = rules.filter(rule => !rule.meta.docs.category && !rule.meta.deprecated)
+const uncategorizedRules = rules.filter(rule => !rule.meta.docs.categories && !rule.meta.deprecated)
 const deprecatedRules = rules.filter(rule => rule.meta.deprecated)
 
+const sidebarCategories = [
+ { title: 'Base Rules', categoryIds: ['base'] },
+ { title: 'Priority A: Essential', categoryIds: ['vue3-essential', 'essential'] },
+ { title: 'Priority A: Essential for Vue.js 3.x', categoryIds: ['vue3-essential'] },
+ { title: 'Priority A: Essential for Vue.js 2.x', categoryIds: ['essential'] },
+ { title: 'Priority B: Strongly Recommended', categoryIds: ['vue3-strongly-recommended', 'strongly-recommended'] },
+ { title: 'Priority B: Strongly Recommended for Vue.js 3.x', categoryIds: ['vue3-strongly-recommended'] },
+ { title: 'Priority B: Strongly Recommended for Vue.js 2.x', categoryIds: ['strongly-recommended'] },
+ { title: 'Priority C: Recommended', categoryIds: ['vue3-recommended', 'recommended'] },
+ { title: 'Priority C: Recommended for Vue.js 3.x', categoryIds: ['vue3-recommended'] },
+ { title: 'Priority C: Recommended for Vue.js 2.x', categoryIds: ['recommended'] }
+]
+
+const categorizedRules = []
+for (const { title, categoryIds } of sidebarCategories) {
+ const categoryRules = rules
+ .filter(rule => rule.meta.docs.categories && !rule.meta.deprecated)
+ .filter(rule => categoryIds
+ .every(categoryId => rule.meta.docs.categories.includes(categoryId))
+ )
+ const children = categoryRules
+ .filter(({ ruleId }) => {
+ const exists = categorizedRules.some(({ children }) => children.some(([, alreadyRuleId]) => alreadyRuleId === ruleId))
+ return !exists
+ })
+ .map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
+
+ if (children.length === 0) {
+ continue
+ }
+ categorizedRules.push({
+ title,
+ collapsable: false,
+ children
+ })
+}
+
 const extraCategories = []
 if (uncategorizedRules.length > 0) {
  extraCategories.push({
@@ -59,11 +95,7 @@ module.exports = {
  '/rules/',
 
  // Rules in each category.
- ...categories.map(({ title, rules }) => ({
- title: title.replace(/ \(.+?\)/, ''),
- collapsable: false,
- children: rules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
- })),
+ ...categorizedRules,
 
  // Rules in no category.
  ...extraCategories

docs/rules/README.md

@@ -26,7 +26,114 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` | |
 | [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused | |
 
-## Priority A: Essential (Error Prevention)
+## Priority A: Essential (Error Prevention) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
+
+Enforce all the rules in this category, as well as all higher priority rules, with:
+
+```json
+{
+ "extends": "plugin:vue/vue3-essential"
+}
+```
+
+| Rule ID | Description | |
+|:--------|:------------|:---|
+| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties | |
+| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax | |
+| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: |
+| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
+| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: |
+| [vue/no-deprecated-v-bind-sync](./no-deprecated-v-bind-sync.md) | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: |
+| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names | |
+| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes | |
+| [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks | |
+| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` | |
+| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand | |
+| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys | |
+| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` | |
+| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
+| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties | |
+| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` | |
+| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` | |
+| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates | |
+| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | |
+| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for | |
+| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements | |
+| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |
+| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value | |
+| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives | |
+| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid | |
+| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property | |
+| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` | |
+| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root | |
+| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives | |
+| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives | |
+| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives | |
+| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives | |
+| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives | |
+| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives | |
+| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives | |
+| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives | |
+| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives | |
+| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives | |
+| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives | |
+| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives | |
+| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives | |
+| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives | |
+
+## Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
+
+Enforce all the rules in this category, as well as all higher priority rules, with:
+
+```json
+{
+ "extends": "plugin:vue/vue3-strongly-recommended"
+}
+```
+
+| Rule ID | Description | |
+|:--------|:------------|:---|
+| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: |
+| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: |
+| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
+| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: |
+| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: |
+| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: |
+| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
+| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: |
+| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
+| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element | :wrench: |
+| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: |
+| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: |
+| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: |
+| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope | |
+| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components | |
+| [vue/require-default-prop](./require-default-prop.md) | require default value for props | |
+| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props | |
+| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: |
+| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: |
+| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: |
+
+## Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 3.x" vertical="middle">for Vue.js 3.x</badge>
+
+Enforce all the rules in this category, as well as all higher priority rules, with:
+
+```json
+{
+ "extends": "plugin:vue/vue3-recommended"
+}
+```
+
+| Rule ID | Description | |
+|:--------|:------------|:---|
+| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
+| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | |
+| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack | |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | |
+
+## Priority A: Essential (Error Prevention) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
 
 Enforce all the rules in this category, as well as all higher priority rules, with:
 
@@ -77,7 +184,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives | |
 | [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives | |
 
-## Priority B: Strongly Recommended (Improving Readability)
+## Priority B: Strongly Recommended (Improving Readability) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
 
 Enforce all the rules in this category, as well as all higher priority rules, with:
 
@@ -111,7 +218,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: |
 | [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: |
 
-## Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+## Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead) <badge text="for Vue.js 2.x" vertical="middle" type="warn">for Vue.js 2.x</badge>
 
 Enforce all the rules in this category, as well as all higher priority rules, with:
 
@@ -160,18 +267,10 @@ For example:
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | |
 | [vue/max-len](./max-len.md) | enforce a maximum line length | |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
-| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax | |
-| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: |
-| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: |
-| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: |
-| [vue/no-deprecated-v-bind-sync](./no-deprecated-v-bind-sync.md) | disallow use of deprecated `.sync` modifier on `v-bind` directive (in Vue.js 3.0.0+) | :wrench: |
 | [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns | |
 | [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace | |
-| [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks | |
-| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand | |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions | |
 | [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax | |
-| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` | |
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes | |
 | [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
 | [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces | :wrench: |

docs/rules/attribute-hyphenation.md

@@ -7,7 +7,7 @@ description: enforce attribute naming style on custom components in template
 # vue/attribute-hyphenation
 > enforce attribute naming style on custom components in template
 
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-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.
 
 ## :book: Rule Details

docs/rules/attributes-order.md

@@ -7,7 +7,7 @@ description: enforce order of attributes
 # vue/attributes-order
 > enforce order of attributes
 
-- :gear: This rule is included in `"plugin:vue/recommended"`.
+- :gear: This rule is included in `"plugin:vue/vue3-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.
 
 ## :book: Rule Details

docs/rules/component-definition-name-casing.md

@@ -7,7 +7,7 @@ description: enforce specific casing for component definition name
 # vue/component-definition-name-casing
 > enforce specific casing for component definition name
 
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-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.
 
 Define a style for component definition name casing for consistency purposes.

docs/rules/component-tags-order.md

@@ -7,7 +7,7 @@ description: enforce order of component top-level elements
 # vue/component-tags-order
 > enforce order of component top-level elements
 
-- :gear: This rule is included in `"plugin:vue/recommended"`.
+- :gear: This rule is included in `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
 
 ## :book: Rule Details
 

docs/rules/html-closing-bracket-newline.md

@@ -7,7 +7,7 @@ description: require or disallow a line break before tag's closing brackets
 # vue/html-closing-bracket-newline
 > require or disallow a line break before tag's closing brackets
 
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-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.
 
 People have their own preference about the location of closing brackets.

docs/rules/html-closing-bracket-spacing.md

@@ -7,7 +7,7 @@ description: require or disallow a space before tag's closing brackets
 # 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"`.
+- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-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.
 
 ## :book: Rule Details

docs/rules/html-end-tags.md

@@ -7,7 +7,7 @@ description: enforce end tag style
 # vue/html-end-tags
 > enforce end tag style
 
-- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :gear: This rule is included in all of `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-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.
 
 ## :book: Rule Details