From 29143f7b6ef1eec412c2395186aa35bd2ca71461 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 11:40:40 +0900
Subject: [PATCH 01/12] Improved rule list doc

---
 docs/.vuepress/components/rules-table.vue |  77 +++
 docs/rules/README.md                      | 644 +++++++++-------------
 lib/configs/no-layout-rules.js            |   1 +
 tools/lib/utils.js                        |  36 ++
 tools/update-docs-rules-index.js          | 153 ++++-
 tools/update-docs.js                      |  36 +-
 6 files changed, 513 insertions(+), 434 deletions(-)
 create mode 100644 docs/.vuepress/components/rules-table.vue
 create mode 100644 tools/lib/utils.js

diff --git a/docs/.vuepress/components/rules-table.vue b/docs/.vuepress/components/rules-table.vue
new file mode 100644
index 000000000..33e2df76d
--- /dev/null
+++ b/docs/.vuepress/components/rules-table.vue
@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <div v-if="kindMarks.length > 1" class="filter-tool">
+      Highlight:
+      <label v-for="kindMark in kindMarks" :key="kindMark">
+        {{ kindMark
+        }}<input type="checkbox" :value="kindMark" v-model="checkedKindMarks" />
+      </label>
+    </div>
+    <div class="table-root" ref="tableRoot">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      kindMarks: [],
+      checkedKindMarks: []
+    }
+  },
+  mounted() {
+    this.setup()
+  },
+  watch: {
+    checkedKindMarks: {
+      handler: 'filterTable',
+      deep: true
+    }
+  },
+  methods: {
+    setup() {
+      const kindMarks = new Set()
+      const table = this.getTable()
+      for (const row of table.rows) {
+        for (const mark of row.cells[3].textContent.trim()) {
+          kindMarks.add(mark)
+        }
+      }
+      this.kindMarks = [...kindMarks]
+    },
+    getTable() {
+      return this.$refs.tableRoot.querySelector('table')
+    },
+    filterTable() {
+      const table = this.getTable()
+      if (!this.checkedKindMarks.length) {
+        table.classList.remove('highlighting')
+        return
+      }
+      table.classList.add('highlighting')
+      for (const row of table.rows) {
+        if (row.cells[0].tagName === 'TH') {
+          row.classList.add('highlight')
+          continue
+        }
+        const rowMarks = row.cells[3].textContent
+        const highlight = this.checkedKindMarks.every((mark) =>
+          rowMarks.includes(mark)
+        )
+        row.classList.toggle('highlight', highlight)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+.table-root ::v-deep .highlighting tr {
+  opacity: 0.3;
+}
+.table-root ::v-deep .highlighting .highlight {
+  opacity: 1;
+}
+</style>
diff --git a/docs/rules/README.md b/docs/rules/README.md
index 26ce0e59d..40ac39802 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -12,282 +12,172 @@ sidebarDepth: 0
   :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).
 :::
 
-## Base Rules (Enabling Correct ESLint Parsing)
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/base"
-}
-```
-
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [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 |  |
-| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | prevent `<script setup>` variables used in `<template>` to be marked as unused |  |
-
-## 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/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  |
-| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  |
-| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
-| [vue/no-computed-properties-in-data](./no-computed-properties-in-data.md) | disallow accessing computed properties in `data`. |  |
-| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-destroyed-lifecycle](./no-deprecated-destroyed-lifecycle.md) | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md) | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md) | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-events-api](./no-deprecated-events-api.md) | disallow using deprecated events api (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md) | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-html-element-is](./no-deprecated-html-element-is.md) | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md) | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-props-default-this](./no-deprecated-props-default-this.md) | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-router-link-tag-prop](./no-deprecated-router-link-tag-prop.md) | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) |  |
-| [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-deprecated-v-is](./no-deprecated-v-is.md) | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) | :wrench: |
-| [vue/no-deprecated-v-on-native-modifier](./no-deprecated-v-on-native-modifier.md) | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  |
-| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md) | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: |
-| [vue/no-deprecated-vue-config-keycodes](./no-deprecated-vue-config-keycodes.md) | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  |
-| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
-| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  |
-| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
-| [vue/no-export-in-script-setup](./no-export-in-script-setup.md) | disallow `export` in `<script setup>` |  |
-| [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  |
-| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
-| [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 | :wrench: |
-| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
-| [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  |
-| [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 | :bulb: |
-| [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/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  |
-| [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md) | disallow key of `<template v-for>` placed on child elements |  |
-| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` |  |
-| [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-slots-as-functions](./require-slots-as-functions.md) | enforce properties of `$slots` to be used as a function |  |
-| [vue/require-toggle-inside-transition](./require-toggle-inside-transition.md) | require control the display of the content inside `<transition>` |  |
-| [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/return-in-emits-validator](./return-in-emits-validator.md) | enforce that a return statement is present in emits validator |  |
-| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  |
-| [vue/valid-define-emits](./valid-define-emits.md) | enforce valid `defineEmits` compiler macro |  |
-| [vue/valid-define-props](./valid-define-props.md) | enforce valid `defineProps` compiler macro |  |
-| [vue/valid-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench::bulb: |
-| [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-is](./valid-v-is.md) | enforce valid `v-is` directives |  |
-| [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` 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/first-attribute-linebreak](./first-attribute-linebreak.md) | enforce the location of first attribute | :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/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  |
-| [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-explicit-emits](./require-explicit-emits.md) | require `emits` option with name triggered by `$emit()` | :bulb: |
-| [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-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :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 | :wrench: |
-| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  |
-| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
-| [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 | :wrench: |
-
-## 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:
-
-```json
-{
-  "extends": "plugin:vue/essential"
-}
-```
+Mark indicating rule type:
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  |
-| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  |
-| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
-| [vue/no-computed-properties-in-data](./no-computed-properties-in-data.md) | disallow accessing computed properties in `data`. |  |
-| [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md) | disallow custom modifiers on v-model used on the component |  |
-| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
-| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  |
-| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
-| [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  |
-| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  |
-| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
-| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
-| [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  |
-| [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 | :bulb: |
-| [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/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  |
-| [vue/no-v-for-template-key](./no-v-for-template-key.md) | disallow `key` attribute on `<template v-for>` |  |
-| [vue/no-v-model-argument](./no-v-model-argument.md) | disallow adding an argument to `v-model` used in custom component |  |
-| [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-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench::bulb: |
-| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  |
-| [vue/valid-v-bind-sync](./valid-v-bind-sync.md) | enforce valid `.sync` modifier on `v-bind` directives |  |
-| [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 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:
+- :white_check_mark: 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.
 
-```json
-{
-  "extends": "plugin:vue/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/first-attribute-linebreak](./first-attribute-linebreak.md) | enforce the location of first attribute | :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/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  |
-| [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 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:
-
-```json
-{
-  "extends": "plugin:vue/recommended"
-}
-```
+## Base Rules (Enabling Correct ESLint Parsing)
 
-| 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 | :wrench: |
-| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  |
-| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  |
-| [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 | :wrench: |
+Rules in this category are enable for all presets provided by eslint-plugin-vue.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` |  | :white_check_mark: |
+| [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |  | :white_check_mark: |
+| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | prevent `<script setup>` variables used in `<template>` to be marked as unused |  | :white_check_mark: |
+
+</rules-table>
+
+## Priority A: Essential (Error Prevention)
+
+- :green_heart: Indicates that the rule is for Vue3 and is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :yellow_heart: Indicates that the rule is for Vue2 and is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  | :green_heart::yellow_heart::hammer: |
+| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-computed-properties-in-data](./no-computed-properties-in-data.md) | disallow accessing computed properties in `data`. |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md) | disallow custom modifiers on v-model used on the component |  | :yellow_heart::white_check_mark: |
+| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: | :green_heart::white_check_mark: |
+| [vue/no-deprecated-destroyed-lifecycle](./no-deprecated-destroyed-lifecycle.md) | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: | :green_heart::white_check_mark: |
+| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md) | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md) | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: | :green_heart::white_check_mark: |
+| [vue/no-deprecated-events-api](./no-deprecated-events-api.md) | disallow using deprecated events api (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md) | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-html-element-is](./no-deprecated-html-element-is.md) | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md) | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-props-default-this](./no-deprecated-props-default-this.md) | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-router-link-tag-prop](./no-deprecated-router-link-tag-prop.md) | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: | :green_heart::hammer: |
+| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: | :green_heart::hammer: |
+| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: | :green_heart::hammer: |
+| [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: | :green_heart::white_check_mark: |
+| [vue/no-deprecated-v-is](./no-deprecated-v-is.md) | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) | :wrench: | :green_heart::hammer: |
+| [vue/no-deprecated-v-on-native-modifier](./no-deprecated-v-on-native-modifier.md) | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md) | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: | :green_heart::white_check_mark: |
+| [vue/no-deprecated-vue-config-keycodes](./no-deprecated-vue-config-keycodes.md) | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
+| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-export-in-script-setup](./no-export-in-script-setup.md) | disallow `export` in `<script setup>` |  | :green_heart::white_check_mark: |
+| [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  | :green_heart::hammer: |
+| [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  | :yellow_heart::white_check_mark: |
+| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  | :green_heart::yellow_heart::hammer: |
+| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand | :wrench: | :green_heart::hammer: |
+| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  | :green_heart::yellow_heart::hammer: |
+| [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` |  | :green_heart::hammer: |
+| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  | :green_heart::yellow_heart::hammer: |
+| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | :bulb: | :green_heart::yellow_heart::hammer: |
+| [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 |  | :green_heart::yellow_heart::hammer: |
+| [vue/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md) | disallow key of `<template v-for>` placed on child elements |  | :green_heart::white_check_mark: |
+| [vue/no-v-for-template-key](./no-v-for-template-key.md) | disallow `key` attribute on `<template v-for>` |  | :yellow_heart::white_check_mark: |
+| [vue/no-v-model-argument](./no-v-model-argument.md) | disallow adding an argument to `v-model` used in custom component |  | :yellow_heart::white_check_mark: |
+| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` |  | :green_heart::hammer: |
+| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/require-slots-as-functions](./require-slots-as-functions.md) | enforce properties of `$slots` to be used as a function |  | :green_heart::white_check_mark: |
+| [vue/require-toggle-inside-transition](./require-toggle-inside-transition.md) | require control the display of the content inside `<transition>` |  | :green_heart::white_check_mark: |
+| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  | :green_heart::yellow_heart::hammer: |
+| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/return-in-emits-validator](./return-in-emits-validator.md) | enforce that a return statement is present in emits validator |  | :green_heart::white_check_mark: |
+| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  | :green_heart::yellow_heart::hammer: |
+| [vue/valid-define-emits](./valid-define-emits.md) | enforce valid `defineEmits` compiler macro |  | :green_heart::white_check_mark: |
+| [vue/valid-define-props](./valid-define-props.md) | enforce valid `defineProps` compiler macro |  | :green_heart::white_check_mark: |
+| [vue/valid-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench::bulb: | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-bind-sync](./valid-v-bind-sync.md) | enforce valid `.sync` modifier on `v-bind` directives |  | :yellow_heart::white_check_mark: |
+| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives |  | :green_heart::white_check_mark: |
+| [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` directives |  | :green_heart::white_check_mark: |
+| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  | :green_heart::yellow_heart::white_check_mark: |
+
+</rules-table>
+
+## Priority B: Strongly Recommended (Improving Readability)
+
+- :green_heart: Indicates that the rule is for Vue3 and is included in `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
+- :yellow_heart: Indicates that the rule is for Vue2 and is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/first-attribute-linebreak](./first-attribute-linebreak.md) | enforce the location of first attribute | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [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: | :green_heart::yellow_heart::lipstick: |
+| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: | :green_heart::yellow_heart::lipstick: |
+| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  | :green_heart::yellow_heart::hammer: |
+| [vue/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  | :green_heart::yellow_heart::hammer: |
+| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |  | :green_heart::yellow_heart::hammer: |
+| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  | :green_heart::yellow_heart::hammer: |
+| [vue/require-explicit-emits](./require-explicit-emits.md) | require `emits` option with name triggered by `$emit()` | :bulb: | :green_heart::hammer: |
+| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  | :green_heart::yellow_heart::hammer: |
+| [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: | :green_heart::yellow_heart::lipstick: |
+| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :wrench: | :green_heart::hammer: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: | :green_heart::yellow_heart::hammer: |
+
+</rules-table>
+
+## Priority C: Recommended (Potentially Dangerous Patterns)
+
+- :green_heart: Indicates that the rule is for Vue3 and is included in `"plugin:vue/vue3-recommended"`.
+- :yellow_heart: Indicates that the rule is for Vue2 and is included in `"plugin:vue/recommended"`.
+
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  | :green_heart::yellow_heart::hammer: |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: | :green_heart::yellow_heart::hammer: |
+
+</rules-table>
 
 ## Uncategorized
 
@@ -304,111 +194,119 @@ For example:
 }
 ```
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/block-lang](./block-lang.md) | disallow use other than available `lang` |  |
-| [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: |
-| [vue/component-api-style](./component-api-style.md) | enforce component API style |  |
-| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
-| [vue/component-options-name-casing](./component-options-name-casing.md) | enforce the casing of component name in `components` options | :wrench::bulb: |
-| [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name |  |
-| [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench: |
-| [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  |
-| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |
-| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
-| [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
-| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
-| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name |  |
-| [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
-| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
-| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |
-| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: |
-| [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: |
-| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  |
-| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  |
-| [vue/no-expose-after-await](./no-expose-after-await.md) | disallow asynchronously registered `expose` |  |
-| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  |
-| [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  |
-| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property | :bulb: |
-| [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  |
-| [vue/no-restricted-block](./no-restricted-block.md) | disallow specific block |  |
-| [vue/no-restricted-call-after-await](./no-restricted-call-after-await.md) | disallow asynchronously called restricted methods |  |
-| [vue/no-restricted-class](./no-restricted-class.md) | disallow specific classes in Vue components |  |
-| [vue/no-restricted-component-options](./no-restricted-component-options.md) | disallow specific component option |  |
-| [vue/no-restricted-custom-event](./no-restricted-custom-event.md) | disallow specific custom event | :bulb: |
-| [vue/no-restricted-html-elements](./no-restricted-html-elements.md) | disallow specific HTML elements |  |
-| [vue/no-restricted-props](./no-restricted-props.md) | disallow specific props | :bulb: |
-| [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute |  |
-| [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` |  |
-| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  |
-| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  |
-| [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  |
-| [vue/no-undef-components](./no-undef-components.md) | disallow use of undefined components in `<template>` |  |
-| [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties |  |
-| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: |
-| [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  |
-| [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs |  |
-| [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  |
-| [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: |
-| [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: |
-| [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md) | disallow v-text / v-html on component |  |
-| [vue/no-v-text](./no-v-text.md) | disallow use of v-text |  |
-| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: |
-| [vue/prefer-import-from-vue](./prefer-import-from-vue.md) | enforce import from 'vue' instead of import from '@vue/*' | :wrench: |
-| [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: |
-| [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: |
-| [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: |
-| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  |
-| [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: |
-| [vue/require-expose](./require-expose.md) | require declare public properties using `expose` | :bulb: |
-| [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  |
-| [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
-| [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  |
-| [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: |
-| [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: |
-| [vue/v-on-function-call](./v-on-function-call.md) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: |
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/block-lang](./block-lang.md) | disallow use other than available `lang` |  | :hammer: |
+| [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: | :lipstick: |
+| [vue/component-api-style](./component-api-style.md) | enforce component API style |  | :hammer: |
+| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: | :hammer: |
+| [vue/component-options-name-casing](./component-options-name-casing.md) | enforce the casing of component name in `components` options | :wrench::bulb: | :hammer: |
+| [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name |  | :hammer: |
+| [vue/define-macros-order](./define-macros-order.md) | enforce order of `defineEmits` and `defineProps` compiler macros | :wrench: | :lipstick: |
+| [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  | :hammer: |
+| [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |
+| [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
+| [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
+| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  | :hammer: |
+| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name |  | :white_check_mark: |
+| [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
+| [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
+| [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  | :hammer: |
+| [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: | :hammer: |
+| [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: | :white_check_mark: |
+| [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  | :hammer: |
+| [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  | :hammer: |
+| [vue/no-expose-after-await](./no-expose-after-await.md) | disallow asynchronously registered `expose` |  | :white_check_mark: |
+| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  | :white_check_mark: |
+| [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  | :hammer: |
+| [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property | :bulb: | :hammer: |
+| [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  | :hammer: |
+| [vue/no-restricted-block](./no-restricted-block.md) | disallow specific block |  | :hammer: |
+| [vue/no-restricted-call-after-await](./no-restricted-call-after-await.md) | disallow asynchronously called restricted methods |  | :hammer: |
+| [vue/no-restricted-class](./no-restricted-class.md) | disallow specific classes in Vue components |  | :white_check_mark: |
+| [vue/no-restricted-component-options](./no-restricted-component-options.md) | disallow specific component option |  | :hammer: |
+| [vue/no-restricted-custom-event](./no-restricted-custom-event.md) | disallow specific custom event | :bulb: | :hammer: |
+| [vue/no-restricted-html-elements](./no-restricted-html-elements.md) | disallow specific HTML elements |  | :hammer: |
+| [vue/no-restricted-props](./no-restricted-props.md) | disallow specific props | :bulb: | :hammer: |
+| [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute |  | :hammer: |
+| [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` |  | :hammer: |
+| [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  | :hammer: |
+| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  | :white_check_mark: |
+| [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  | :white_check_mark: |
+| [vue/no-undef-components](./no-undef-components.md) | disallow use of undefined components in `<template>` |  | :hammer: |
+| [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties |  | :hammer: |
+| [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
+| [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  | :hammer: |
+| [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs |  | :hammer: |
+| [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  | :white_check_mark: |
+| [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
+| [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
+| [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md) | disallow v-text / v-html on component |  | :white_check_mark: |
+| [vue/no-v-text](./no-v-text.md) | disallow use of v-text |  | :hammer: |
+| [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: | :lipstick: |
+| [vue/prefer-import-from-vue](./prefer-import-from-vue.md) | enforce import from 'vue' instead of import from '@vue/*' | :wrench: | :hammer: |
+| [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :white_check_mark: |
+| [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
+| [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
+| [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  | :hammer: |
+| [vue/require-emit-validator](./require-emit-validator.md) | require type definitions in emits | :bulb: | :hammer: |
+| [vue/require-expose](./require-expose.md) | require declare public properties using `expose` | :bulb: | :hammer: |
+| [vue/require-name-property](./require-name-property.md) | require a name property in Vue components |  | :hammer: |
+| [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: | :lipstick: |
+| [vue/sort-keys](./sort-keys.md) | enforce sort-keys in a manner that is compatible with order-in-components |  | :hammer: |
+| [vue/static-class-names-order](./static-class-names-order.md) | enforce static class names order | :wrench: | :hammer: |
+| [vue/v-for-delimiter-style](./v-for-delimiter-style.md) | enforce `v-for` directive's delimiter style | :wrench: | :lipstick: |
+| [vue/v-on-function-call](./v-on-function-call.md) | enforce or forbid parentheses after method calls without arguments in `v-on` directives | :wrench: | :hammer: |
+
+</rules-table>
 
 ### Extension Rules
 
 The following rules extend the rules provided by ESLint itself and apply them to the expressions in the `<template>`.
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-| [vue/array-bracket-newline](./array-bracket-newline.md) | enforce linebreaks after opening and before closing array brackets in `<template>` | :wrench: |
-| [vue/array-bracket-spacing](./array-bracket-spacing.md) | enforce consistent spacing inside array brackets in `<template>` | :wrench: |
-| [vue/arrow-spacing](./arrow-spacing.md) | enforce consistent spacing before and after the arrow in arrow functions in `<template>` | :wrench: |
-| [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>` | :wrench: |
-| [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks in `<template>` | :wrench: |
-| [vue/camelcase](./camelcase.md) | enforce camelcase naming convention in `<template>` |  |
-| [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas in `<template>` | :wrench: |
-| [vue/comma-spacing](./comma-spacing.md) | enforce consistent spacing before and after commas in `<template>` | :wrench: |
-| [vue/comma-style](./comma-style.md) | enforce consistent comma style in `<template>` | :wrench: |
-| [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots in `<template>` | :wrench: |
-| [vue/dot-notation](./dot-notation.md) | enforce dot notation whenever possible in `<template>` | :wrench: |
-| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` in `<template>` | :wrench: |
-| [vue/func-call-spacing](./func-call-spacing.md) | require or disallow spacing between function identifiers and their invocations in `<template>` | :wrench: |
-| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties in `<template>` | :wrench: |
-| [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords in `<template>` | :wrench: |
-| [vue/max-len](./max-len.md) | enforce a maximum line length in `.vue` files |  |
-| [vue/no-constant-condition](./no-constant-condition.md) | disallow constant expressions in conditions in `<template>` |  |
-| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns in `<template>` |  |
-| [vue/no-extra-parens](./no-extra-parens.md) | disallow unnecessary parentheses in `<template>` | :wrench: |
-| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace in `.vue` files |  |
-| [vue/no-loss-of-precision](./no-loss-of-precision.md) | disallow literal numbers that lose precision in `<template>` |  |
-| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax in `<template>` |  |
-| [vue/no-sparse-arrays](./no-sparse-arrays.md) | disallow sparse arrays in `<template>` |  |
-| [vue/no-useless-concat](./no-useless-concat.md) | disallow unnecessary concatenation of literals or template literals in `<template>` |  |
-| [vue/object-curly-newline](./object-curly-newline.md) | enforce consistent line breaks after opening and before closing braces in `<template>` | :wrench: |
-| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces in `<template>` | :wrench: |
-| [vue/object-property-newline](./object-property-newline.md) | enforce placing object properties on separate lines in `<template>` | :wrench: |
-| [vue/object-shorthand](./object-shorthand.md) | require or disallow method and property shorthand syntax for object literals in `<template>` | :wrench: |
-| [vue/operator-linebreak](./operator-linebreak.md) | enforce consistent linebreak style for operators in `<template>` | :wrench: |
-| [vue/prefer-template](./prefer-template.md) | require template literals instead of string concatenation in `<template>` | :wrench: |
-| [vue/quote-props](./quote-props.md) | require quotes around object literal property names in `<template>` | :wrench: |
-| [vue/space-in-parens](./space-in-parens.md) | enforce consistent spacing inside parentheses in `<template>` | :wrench: |
-| [vue/space-infix-ops](./space-infix-ops.md) | require spacing around infix operators in `<template>` | :wrench: |
-| [vue/space-unary-ops](./space-unary-ops.md) | enforce consistent spacing before or after unary operators in `<template>` | :wrench: |
-| [vue/template-curly-spacing](./template-curly-spacing.md) | require or disallow spacing around embedded expressions of template strings in `<template>` | :wrench: |
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+| [vue/array-bracket-newline](./array-bracket-newline.md) | enforce linebreaks after opening and before closing array brackets in `<template>` | :wrench: | :lipstick: |
+| [vue/array-bracket-spacing](./array-bracket-spacing.md) | enforce consistent spacing inside array brackets in `<template>` | :wrench: | :lipstick: |
+| [vue/arrow-spacing](./arrow-spacing.md) | enforce consistent spacing before and after the arrow in arrow functions in `<template>` | :wrench: | :lipstick: |
+| [vue/block-spacing](./block-spacing.md) | disallow or enforce spaces inside of blocks after opening block and before closing block in `<template>` | :wrench: | :lipstick: |
+| [vue/brace-style](./brace-style.md) | enforce consistent brace style for blocks in `<template>` | :wrench: | :lipstick: |
+| [vue/camelcase](./camelcase.md) | enforce camelcase naming convention in `<template>` |  | :hammer: |
+| [vue/comma-dangle](./comma-dangle.md) | require or disallow trailing commas in `<template>` | :wrench: | :lipstick: |
+| [vue/comma-spacing](./comma-spacing.md) | enforce consistent spacing before and after commas in `<template>` | :wrench: | :lipstick: |
+| [vue/comma-style](./comma-style.md) | enforce consistent comma style in `<template>` | :wrench: | :lipstick: |
+| [vue/dot-location](./dot-location.md) | enforce consistent newlines before and after dots in `<template>` | :wrench: | :lipstick: |
+| [vue/dot-notation](./dot-notation.md) | enforce dot notation whenever possible in `<template>` | :wrench: | :hammer: |
+| [vue/eqeqeq](./eqeqeq.md) | require the use of `===` and `!==` in `<template>` | :wrench: | :hammer: |
+| [vue/func-call-spacing](./func-call-spacing.md) | require or disallow spacing between function identifiers and their invocations in `<template>` | :wrench: | :lipstick: |
+| [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties in `<template>` | :wrench: | :lipstick: |
+| [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords in `<template>` | :wrench: | :lipstick: |
+| [vue/max-len](./max-len.md) | enforce a maximum line length in `.vue` files |  | :lipstick: |
+| [vue/no-constant-condition](./no-constant-condition.md) | disallow constant expressions in conditions in `<template>` |  | :white_check_mark: |
+| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns in `<template>` |  | :white_check_mark: |
+| [vue/no-extra-parens](./no-extra-parens.md) | disallow unnecessary parentheses in `<template>` | :wrench: | :lipstick: |
+| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace in `.vue` files |  | :white_check_mark: |
+| [vue/no-loss-of-precision](./no-loss-of-precision.md) | disallow literal numbers that lose precision in `<template>` |  | :white_check_mark: |
+| [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax in `<template>` |  | :hammer: |
+| [vue/no-sparse-arrays](./no-sparse-arrays.md) | disallow sparse arrays in `<template>` |  | :white_check_mark: |
+| [vue/no-useless-concat](./no-useless-concat.md) | disallow unnecessary concatenation of literals or template literals in `<template>` |  | :hammer: |
+| [vue/object-curly-newline](./object-curly-newline.md) | enforce consistent line breaks after opening and before closing braces in `<template>` | :wrench: | :lipstick: |
+| [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces in `<template>` | :wrench: | :lipstick: |
+| [vue/object-property-newline](./object-property-newline.md) | enforce placing object properties on separate lines in `<template>` | :wrench: | :lipstick: |
+| [vue/object-shorthand](./object-shorthand.md) | require or disallow method and property shorthand syntax for object literals in `<template>` | :wrench: | :hammer: |
+| [vue/operator-linebreak](./operator-linebreak.md) | enforce consistent linebreak style for operators in `<template>` | :wrench: | :lipstick: |
+| [vue/prefer-template](./prefer-template.md) | require template literals instead of string concatenation in `<template>` | :wrench: | :hammer: |
+| [vue/quote-props](./quote-props.md) | require quotes around object literal property names in `<template>` | :wrench: | :hammer: |
+| [vue/space-in-parens](./space-in-parens.md) | enforce consistent spacing inside parentheses in `<template>` | :wrench: | :lipstick: |
+| [vue/space-infix-ops](./space-infix-ops.md) | require spacing around infix operators in `<template>` | :wrench: | :lipstick: |
+| [vue/space-unary-ops](./space-unary-ops.md) | enforce consistent spacing before or after unary operators in `<template>` | :wrench: | :lipstick: |
+| [vue/template-curly-spacing](./template-curly-spacing.md) | require or disallow spacing around embedded expressions of template strings in `<template>` | :wrench: | :lipstick: |
+
+</rules-table>
 
 ## Deprecated
 
diff --git a/lib/configs/no-layout-rules.js b/lib/configs/no-layout-rules.js
index 4c88287af..ab03684b5 100644
--- a/lib/configs/no-layout-rules.js
+++ b/lib/configs/no-layout-rules.js
@@ -14,6 +14,7 @@ module.exports = {
     'vue/comma-dangle': 'off',
     'vue/comma-spacing': 'off',
     'vue/comma-style': 'off',
+    'vue/define-macros-order': 'off',
     'vue/dot-location': 'off',
     'vue/first-attribute-linebreak': 'off',
     'vue/func-call-spacing': 'off',
diff --git a/tools/lib/utils.js b/tools/lib/utils.js
new file mode 100644
index 000000000..0cb0b3f09
--- /dev/null
+++ b/tools/lib/utils.js
@@ -0,0 +1,36 @@
+const last = require('lodash/last')
+
+module.exports = { getPresetIds, formatItems }
+
+const presetCategories = {
+  base: null,
+  essential: 'base',
+  'vue3-essential': 'base',
+  'strongly-recommended': 'essential',
+  'vue3-strongly-recommended': 'vue3-essential',
+  recommended: 'strongly-recommended',
+  'vue3-recommended': 'vue3-strongly-recommended'
+  // 'use-with-caution': 'recommended',
+  // 'vue3-use-with-caution': 'vue3-recommended'
+}
+
+function formatItems(items) {
+  if (items.length <= 2) {
+    return items.join(' and ')
+  }
+  return `all of ${items.slice(0, -1).join(', ')} and ${last(items)}`
+}
+function getPresetIds(categoryIds) {
+  const subsetCategoryIds = []
+  for (const categoryId of categoryIds) {
+    for (const subsetCategoryId in presetCategories) {
+      if (presetCategories[subsetCategoryId] === categoryId) {
+        subsetCategoryIds.push(subsetCategoryId)
+      }
+    }
+  }
+  if (subsetCategoryIds.length === 0) {
+    return categoryIds
+  }
+  return [...new Set([...categoryIds, ...getPresetIds(subsetCategoryIds)])]
+}
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index 9b177d7ac..1916b3fca 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -7,9 +7,15 @@
 const fs = require('fs')
 const path = require('path')
 const rules = require('./lib/rules')
-const categories = require('./lib/categories')
+const { getPresetIds, formatItems } = require('./lib/utils')
 
 // -----------------------------------------------------------------------------
+const categorizedRules = rules.filter(
+  (rule) =>
+    rule.meta.docs.categories &&
+    !rule.meta.docs.extensionRule &&
+    !rule.meta.deprecated
+)
 const uncategorizedRules = rules.filter(
   (rule) =>
     !rule.meta.docs.categories &&
@@ -24,16 +30,26 @@ const uncategorizedExtensionRule = rules.filter(
 )
 const deprecatedRules = rules.filter((rule) => rule.meta.deprecated)
 
-function toRuleRow(rule) {
+function toRuleRow(rule, kindMarks = []) {
   const mark = [
     rule.meta.fixable ? ':wrench:' : '',
     rule.meta.hasSuggestions ? ':bulb:' : '',
     rule.meta.deprecated ? ':warning:' : ''
   ].join('')
+  const kindMark = [
+    ...kindMarks,
+    rule.meta.type === 'problem'
+      ? ':white_check_mark:'
+      : rule.meta.type === 'suggestion'
+      ? ':hammer:'
+      : rule.meta.type === 'layout'
+      ? ':lipstick:'
+      : ''
+  ].join('')
   const link = `[${rule.ruleId}](./${rule.name}.md)`
   const description = rule.meta.docs.description || '(no description)'
 
-  return `| ${link} | ${description} | ${mark} |`
+  return `| ${link} | ${description} | ${mark} | ${kindMark} |`
 }
 
 function toDeprecatedRuleRow(rule) {
@@ -46,25 +62,95 @@ function toDeprecatedRuleRow(rule) {
   return `| ${link} | ${replacedBy || '(no replacement)'} |`
 }
 
-// -----------------------------------------------------------------------------
-let rulesTableContent = categories
-  .map(
-    (category) => `
-## ${category.title.vuepress}
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
+const categoryGroups = [
+  {
+    title: 'Base Rules (Enabling Correct ESLint Parsing)',
+    description:
+      'Rules in this category are enable for all presets provided by eslint-plugin-vue.',
+    categoryIdForVue3: 'base',
+    categoryIdForVue2: 'base',
+    useMark: false
+  },
+  {
+    title: 'Priority A: Essential (Error Prevention)',
+    categoryIdForVue3: 'vue3-essential',
+    categoryIdForVue2: 'essential',
+    useMark: true
+  },
+  {
+    title: 'Priority B: Strongly Recommended (Improving Readability)',
+    categoryIdForVue3: 'vue3-strongly-recommended',
+    categoryIdForVue2: 'strongly-recommended',
+    useMark: true
+  },
+  {
+    title: 'Priority C: Recommended (Potentially Dangerous Patterns)',
+    categoryIdForVue3: 'vue3-recommended',
+    categoryIdForVue2: 'recommended',
+    useMark: true
+  }
+]
 
-\`\`\`json
-{
-  "extends": "plugin:vue/${category.categoryId}"
-}
-\`\`\`
+// -----------------------------------------------------------------------------
+let rulesTableContent = categoryGroups
+  .map((group) => {
+    const rules = categorizedRules.filter(
+      (rule) =>
+        rule.meta.docs.categories.includes(group.categoryIdForVue3) ||
+        rule.meta.docs.categories.includes(group.categoryIdForVue2)
+    )
+    let content = `
+## ${group.title}
+`
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-${category.rules.map(toRuleRow).join('\n')}
+    if (group.description) {
+      content += `
+${group.description}
+`
+    }
+    if (group.useMark) {
+      const presetsForVue3 = getPresetIds([group.categoryIdForVue3]).map(
+        (categoryId) => `\`"plugin:vue/${categoryId}"\``
+      )
+      const presetsForVue2 = getPresetIds([group.categoryIdForVue2]).map(
+        (categoryId) => `\`"plugin:vue/${categoryId}"\``
+      )
+      content += `
+- :green_heart: Indicates that the rule is for Vue3 and is included in ${formatItems(
+        presetsForVue3
+      )}.
+- :yellow_heart: Indicates that the rule is for Vue2 and is included in ${formatItems(
+        presetsForVue2
+      )}.
 `
-  )
+    }
+
+    content += `
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+${rules
+  .map((rule) => {
+    const mark = group.useMark
+      ? [
+          rule.meta.docs.categories.includes(group.categoryIdForVue3)
+            ? [':green_heart:']
+            : [],
+          rule.meta.docs.categories.includes(group.categoryIdForVue2)
+            ? [':yellow_heart:']
+            : []
+        ].flatMap((e) => e)
+      : []
+    return toRuleRow(rule, mark)
+  })
+  .join('\n')}
+
+</rules-table>
+`
+
+    return content
+  })
   .join('')
 
 // -----------------------------------------------------------------------------
@@ -90,9 +176,13 @@ For example:
 }
 if (uncategorizedRules.length) {
   rulesTableContent += `
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-${uncategorizedRules.map(toRuleRow).join('\n')}
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+${uncategorizedRules.map((rule) => toRuleRow(rule)).join('\n')}
+
+</rules-table>
 `
 }
 if (uncategorizedExtensionRule.length) {
@@ -101,9 +191,13 @@ if (uncategorizedExtensionRule.length) {
 
 The following rules extend the rules provided by ESLint itself and apply them to the expressions in the \`<template>\`.
 
-| Rule ID | Description |    |
-|:--------|:------------|:---|
-${uncategorizedExtensionRule.map(toRuleRow).join('\n')}
+<rules-table>
+
+| Rule ID | Description |    |    |
+|:--------|:------------|:--:|:--:|
+${uncategorizedExtensionRule.map((rule) => toRuleRow(rule)).join('\n')}
+
+</rules-table>
 `
 }
 
@@ -139,5 +233,12 @@ sidebarDepth: 0
   :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).
 :::
 
-${rulesTableContent}`
+Mark indicating rule type:
+
+- :white_check_mark: 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.
+
+${rulesTableContent.trim()}
+`
 )
diff --git a/tools/update-docs.js b/tools/update-docs.js
index 12deca0ea..0142a686c 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -20,45 +20,11 @@ For example:
 
 const fs = require('fs')
 const path = require('path')
-const last = require('lodash/last')
 const rules = require('./lib/rules')
+const { getPresetIds, formatItems } = require('./lib/utils')
 
 const ROOT = path.resolve(__dirname, '../docs/rules')
 
-const presetCategories = {
-  base: null,
-  essential: 'base',
-  'vue3-essential': 'base',
-  'strongly-recommended': 'essential',
-  'vue3-strongly-recommended': 'vue3-essential',
-  recommended: 'strongly-recommended',
-  'vue3-recommended': 'vue3-strongly-recommended'
-  // 'use-with-caution': 'recommended',
-  // 'vue3-use-with-caution': 'vue3-recommended'
-}
-
-function formatItems(items) {
-  if (items.length <= 2) {
-    return items.join(' and ')
-  }
-  return `all of ${items.slice(0, -1).join(', ')} and ${last(items)}`
-}
-
-function getPresetIds(categoryIds) {
-  const subsetCategoryIds = []
-  for (const categoryId of categoryIds) {
-    for (const subsetCategoryId in presetCategories) {
-      if (presetCategories[subsetCategoryId] === categoryId) {
-        subsetCategoryIds.push(subsetCategoryId)
-      }
-    }
-  }
-  if (subsetCategoryIds.length === 0) {
-    return categoryIds
-  }
-  return [...new Set([...categoryIds, ...getPresetIds(subsetCategoryIds)])]
-}
-
 function pickSince(content) {
   const fileIntro = /^---\n(.*\n)+---\n*/g.exec(content)
   if (fileIntro) {

From a6e28ad33695ef9b9d415de3bfa1246df7f4d4d3 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 11:51:13 +0900
Subject: [PATCH 02/12] update markdownlint config

---
 .markdownlint.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.markdownlint.yml b/.markdownlint.yml
index cb76e21d5..843f51eee 100644
--- a/.markdownlint.yml
+++ b/.markdownlint.yml
@@ -5,6 +5,7 @@ no-inline-html:
     - badge
     - eslint-code-block
     - sup
+    - rules-table
 
 # enforce consistency
 code-block-style:

From b262fdfcba598dde4650f7fb77cbae1e4cf3845b Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 19:14:29 +0900
Subject: [PATCH 03/12] Update tools/update-docs-rules-index.js

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 tools/update-docs-rules-index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index 1916b3fca..ab9725a65 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -39,7 +39,7 @@ function toRuleRow(rule, kindMarks = []) {
   const kindMark = [
     ...kindMarks,
     rule.meta.type === 'problem'
-      ? ':white_check_mark:'
+      ? ':warning:'
       : rule.meta.type === 'suggestion'
       ? ':hammer:'
       : rule.meta.type === 'layout'

From bc691782dce4903330fb2a6eab2fc96ea166ead3 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 19:14:36 +0900
Subject: [PATCH 04/12] Update docs/.vuepress/components/rules-table.vue

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 docs/.vuepress/components/rules-table.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/.vuepress/components/rules-table.vue b/docs/.vuepress/components/rules-table.vue
index 33e2df76d..045171df8 100644
--- a/docs/.vuepress/components/rules-table.vue
+++ b/docs/.vuepress/components/rules-table.vue
@@ -3,8 +3,8 @@
     <div v-if="kindMarks.length > 1" class="filter-tool">
       Highlight:
       <label v-for="kindMark in kindMarks" :key="kindMark">
-        {{ kindMark
-        }}<input type="checkbox" :value="kindMark" v-model="checkedKindMarks" />
+        <input type="checkbox" :value="kindMark" v-model="checkedKindMarks" />
+        {{ kindMark }}
       </label>
     </div>
     <div class="table-root" ref="tableRoot">

From 0e60e3ab406226213dc9e3a15718df1becba0d3b Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 19:14:45 +0900
Subject: [PATCH 05/12] Update docs/.vuepress/components/rules-table.vue

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 docs/.vuepress/components/rules-table.vue | 4 ++++
 1 file changed, 4 insertions(+)

diff --git a/docs/.vuepress/components/rules-table.vue b/docs/.vuepress/components/rules-table.vue
index 045171df8..a9190ffe5 100644
--- a/docs/.vuepress/components/rules-table.vue
+++ b/docs/.vuepress/components/rules-table.vue
@@ -74,4 +74,8 @@ export default {
 .table-root ::v-deep .highlighting .highlight {
   opacity: 1;
 }
+.filter-tool label {
+  display: inline-flex;
+  margin-right: 0.5ex;
+}
 </style>

From f371d73482e4f2869861592141da8511860f4240 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 19:15:02 +0900
Subject: [PATCH 06/12] Update tools/update-docs-rules-index.js

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 tools/update-docs-rules-index.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index ab9725a65..fda0db629 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -116,10 +116,10 @@ ${group.description}
         (categoryId) => `\`"plugin:vue/${categoryId}"\``
       )
       content += `
-- :green_heart: Indicates that the rule is for Vue3 and is included in ${formatItems(
+- :green_heart: Indicates that the rule is for Vue 3 and is included in ${formatItems(
         presetsForVue3
       )}.
-- :yellow_heart: Indicates that the rule is for Vue2 and is included in ${formatItems(
+- :yellow_heart: Indicates that the rule is for Vue 2 and is included in ${formatItems(
         presetsForVue2
       )}.
 `

From 881fc4346ed59ce5ee4a12a23d3c065b8209ad35 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 19:15:07 +0900
Subject: [PATCH 07/12] Update tools/update-docs-rules-index.js

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 tools/update-docs-rules-index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index fda0db629..2730509cb 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -66,7 +66,7 @@ const categoryGroups = [
   {
     title: 'Base Rules (Enabling Correct ESLint Parsing)',
     description:
-      'Rules in this category are enable for all presets provided by eslint-plugin-vue.',
+      'Rules in this category are enabled for all presets provided by eslint-plugin-vue.',
     categoryIdForVue3: 'base',
     categoryIdForVue2: 'base',
     useMark: false

From 8dbb92fc8bb9071f323e0e08e50e572fb91f0b63 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 19:15:29 +0900
Subject: [PATCH 08/12] Update tools/lib/utils.js

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 tools/lib/utils.js | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/tools/lib/utils.js b/tools/lib/utils.js
index 0cb0b3f09..99ce022b6 100644
--- a/tools/lib/utils.js
+++ b/tools/lib/utils.js
@@ -14,12 +14,16 @@ const presetCategories = {
   // 'vue3-use-with-caution': 'vue3-recommended'
 }
 
-function formatItems(items) {
-  if (items.length <= 2) {
-    return items.join(' and ')
+function formatPresets(presets) {
+  if (presets.length === 1) {
+    return `${presets[0]} preset`
   }
-  return `all of ${items.slice(0, -1).join(', ')} and ${last(items)}`
+  if (presets.length === 2) {
+    return `${presets.join(' and ')} presets`
+  }
+  return `all of ${presets.slice(0, -1).join(', ')} and ${last(presets)} presets`
 }
+
 function getPresetIds(categoryIds) {
   const subsetCategoryIds = []
   for (const categoryId of categoryIds) {

From 38b40e2cab8d7fd60ebb051401e084c4b95f8680 Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 19:15:57 +0900
Subject: [PATCH 09/12] Update tools/lib/utils.js

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 tools/lib/utils.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/tools/lib/utils.js b/tools/lib/utils.js
index 99ce022b6..e7ce2d102 100644
--- a/tools/lib/utils.js
+++ b/tools/lib/utils.js
@@ -27,8 +27,8 @@ function formatPresets(presets) {
 function getPresetIds(categoryIds) {
   const subsetCategoryIds = []
   for (const categoryId of categoryIds) {
-    for (const subsetCategoryId in presetCategories) {
-      if (presetCategories[subsetCategoryId] === categoryId) {
+    for (const [subsetCategoryId, supersetCategoryId] of Object.entries(presetCategories)) {
+      if (supersetCategoryId === categoryId) {
         subsetCategoryIds.push(subsetCategoryId)
       }
     }

From 1b2bd6c1f06efb4a472d27c24a6503fffa04c51a Mon Sep 17 00:00:00 2001
From: Yosuke Ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 19:16:10 +0900
Subject: [PATCH 10/12] Update tools/update-docs-rules-index.js

Co-authored-by: Flo Edelmann <florian-edelmann@online.de>
---
 tools/update-docs-rules-index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index 2730509cb..e469d007d 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -140,7 +140,7 @@ ${rules
           rule.meta.docs.categories.includes(group.categoryIdForVue2)
             ? [':yellow_heart:']
             : []
-        ].flatMap((e) => e)
+        ].flat()
       : []
     return toRuleRow(rule, mark)
   })

From 061b699403a29bc3766de4dfceb928984130e20f Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 20:33:54 +0900
Subject: [PATCH 11/12] update

---
 docs/.vuepress/components/rules-table.vue |  15 +-
 docs/.vuepress/styles/index.styl          |   6 +
 docs/rules/README.md                      | 275 +++++++++++-----------
 package.json                              |   1 -
 tools/lib/utils.js                        |  20 +-
 tools/update-docs-rules-index.js          |  37 +--
 6 files changed, 187 insertions(+), 167 deletions(-)

diff --git a/docs/.vuepress/components/rules-table.vue b/docs/.vuepress/components/rules-table.vue
index a9190ffe5..29d31c4c6 100644
--- a/docs/.vuepress/components/rules-table.vue
+++ b/docs/.vuepress/components/rules-table.vue
@@ -4,7 +4,7 @@
       Highlight:
       <label v-for="kindMark in kindMarks" :key="kindMark">
         <input type="checkbox" :value="kindMark" v-model="checkedKindMarks" />
-        {{ kindMark }}
+        <span class="emoji">{{ kindMark }}</span>
       </label>
     </div>
     <div class="table-root" ref="tableRoot">
@@ -14,6 +14,8 @@
 </template>
 
 <script>
+const emojis = ['3️⃣', '2️⃣', '⚠️']
+
 export default {
   data() {
     return {
@@ -35,7 +37,14 @@ export default {
       const kindMarks = new Set()
       const table = this.getTable()
       for (const row of table.rows) {
-        for (const mark of row.cells[3].textContent.trim()) {
+        row.cells[3].classList.add('emoji')
+        const trimmed = row.cells[3].textContent.trim()
+        if (!trimmed) {
+          continue
+        }
+        const chars =
+          trimmed.match(new RegExp(`${emojis.join('|')}|.`, 'ug')) || []
+        for (const mark of chars) {
           kindMarks.add(mark)
         }
       }
@@ -46,7 +55,7 @@ export default {
     },
     filterTable() {
       const table = this.getTable()
-      if (!this.checkedKindMarks.length) {
+      if (this.checkedKindMarks.length === 0) {
         table.classList.remove('highlighting')
         return
       }
diff --git a/docs/.vuepress/styles/index.styl b/docs/.vuepress/styles/index.styl
index 48680bbf3..724c68247 100644
--- a/docs/.vuepress/styles/index.styl
+++ b/docs/.vuepress/styles/index.styl
@@ -18,3 +18,9 @@
     }
   }
 }
+
+.theme-container.rule-list .theme-default-content
+  max-width: 1280px;
+
+.emoji
+  font-family: "Segoe UI Emoji", "Segoe UI Symbol", "Apple Color Emoji", "Noto Color Emoji", "Noto Emoji", sans-serif
diff --git a/docs/rules/README.md b/docs/rules/README.md
index 40ac39802..9a54292c9 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -1,5 +1,6 @@
 ---
 sidebarDepth: 0
+pageClass: rule-list
 ---
 
 # Available rules
@@ -14,168 +15,168 @@ sidebarDepth: 0
 
 Mark indicating rule type:
 
-- :white_check_mark: Possible Problems: These rules relate to possible logic errors in code.
+- <span class="emoji">:warning:</span> 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 enable for all presets provided by eslint-plugin-vue.
+Rules in this category are enabled for all presets provided by eslint-plugin-vue.
 
 <rules-table>
 
 | Rule ID | Description |    |    |
 |:--------|:------------|:--:|:--:|
-| [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` |  | :white_check_mark: |
-| [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |  | :white_check_mark: |
-| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | prevent `<script setup>` variables used in `<template>` to be marked as unused |  | :white_check_mark: |
+| [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` |  | :warning: |
+| [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |  | :warning: |
+| [vue/script-setup-uses-vars](./script-setup-uses-vars.md) | prevent `<script setup>` variables used in `<template>` to be marked as unused |  | :warning: |
 
 </rules-table>
 
 ## Priority A: Essential (Error Prevention)
 
-- :green_heart: Indicates that the rule is for Vue3 and is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :yellow_heart: Indicates that the rule is for Vue2 and is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :three: Indicates that the rule is for Vue 3 and is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"` presets.
+- :two: Indicates that the rule is for Vue 2 and is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"` presets.
 
 <rules-table>
 
 | Rule ID | Description |    |    |
 |:--------|:------------|:--:|:--:|
-| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  | :green_heart::yellow_heart::hammer: |
-| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-computed-properties-in-data](./no-computed-properties-in-data.md) | disallow accessing computed properties in `data`. |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md) | disallow custom modifiers on v-model used on the component |  | :yellow_heart::white_check_mark: |
-| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: | :green_heart::white_check_mark: |
-| [vue/no-deprecated-destroyed-lifecycle](./no-deprecated-destroyed-lifecycle.md) | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: | :green_heart::white_check_mark: |
-| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md) | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md) | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: | :green_heart::white_check_mark: |
-| [vue/no-deprecated-events-api](./no-deprecated-events-api.md) | disallow using deprecated events api (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md) | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-html-element-is](./no-deprecated-html-element-is.md) | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md) | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-props-default-this](./no-deprecated-props-default-this.md) | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-router-link-tag-prop](./no-deprecated-router-link-tag-prop.md) | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: | :green_heart::hammer: |
-| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: | :green_heart::hammer: |
-| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: | :green_heart::hammer: |
-| [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: | :green_heart::white_check_mark: |
-| [vue/no-deprecated-v-is](./no-deprecated-v-is.md) | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) | :wrench: | :green_heart::hammer: |
-| [vue/no-deprecated-v-on-native-modifier](./no-deprecated-v-on-native-modifier.md) | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md) | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: | :green_heart::white_check_mark: |
-| [vue/no-deprecated-vue-config-keycodes](./no-deprecated-vue-config-keycodes.md) | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  | :green_heart::white_check_mark: |
-| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-export-in-script-setup](./no-export-in-script-setup.md) | disallow `export` in `<script setup>` |  | :green_heart::white_check_mark: |
-| [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  | :green_heart::hammer: |
-| [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  | :yellow_heart::white_check_mark: |
-| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  | :green_heart::yellow_heart::hammer: |
-| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand | :wrench: | :green_heart::hammer: |
-| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  | :green_heart::yellow_heart::hammer: |
-| [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` |  | :green_heart::hammer: |
-| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  | :green_heart::yellow_heart::hammer: |
-| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | :bulb: | :green_heart::yellow_heart::hammer: |
-| [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 |  | :green_heart::yellow_heart::hammer: |
-| [vue/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md) | disallow key of `<template v-for>` placed on child elements |  | :green_heart::white_check_mark: |
-| [vue/no-v-for-template-key](./no-v-for-template-key.md) | disallow `key` attribute on `<template v-for>` |  | :yellow_heart::white_check_mark: |
-| [vue/no-v-model-argument](./no-v-model-argument.md) | disallow adding an argument to `v-model` used in custom component |  | :yellow_heart::white_check_mark: |
-| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` |  | :green_heart::hammer: |
-| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/require-slots-as-functions](./require-slots-as-functions.md) | enforce properties of `$slots` to be used as a function |  | :green_heart::white_check_mark: |
-| [vue/require-toggle-inside-transition](./require-toggle-inside-transition.md) | require control the display of the content inside `<transition>` |  | :green_heart::white_check_mark: |
-| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  | :green_heart::yellow_heart::hammer: |
-| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/return-in-emits-validator](./return-in-emits-validator.md) | enforce that a return statement is present in emits validator |  | :green_heart::white_check_mark: |
-| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  | :green_heart::yellow_heart::hammer: |
-| [vue/valid-define-emits](./valid-define-emits.md) | enforce valid `defineEmits` compiler macro |  | :green_heart::white_check_mark: |
-| [vue/valid-define-props](./valid-define-props.md) | enforce valid `defineProps` compiler macro |  | :green_heart::white_check_mark: |
-| [vue/valid-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench::bulb: | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-bind-sync](./valid-v-bind-sync.md) | enforce valid `.sync` modifier on `v-bind` directives |  | :yellow_heart::white_check_mark: |
-| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives |  | :green_heart::white_check_mark: |
-| [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` directives |  | :green_heart::white_check_mark: |
-| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  | :green_heart::yellow_heart::white_check_mark: |
+| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  | :three::two::hammer: |
+| [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  | :three::two::warning: |
+| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  | :three::two::warning: |
+| [vue/no-computed-properties-in-data](./no-computed-properties-in-data.md) | disallow accessing computed properties in `data`. |  | :three::two::warning: |
+| [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md) | disallow custom modifiers on v-model used on the component |  | :two::warning: |
+| [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-destroyed-lifecycle](./no-deprecated-destroyed-lifecycle.md) | disallow using deprecated `destroyed` and `beforeDestroy` lifecycle hooks (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-dollar-listeners-api](./no-deprecated-dollar-listeners-api.md) | disallow using deprecated `$listeners` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-dollar-scopedslots-api](./no-deprecated-dollar-scopedslots-api.md) | disallow using deprecated `$scopedSlots` (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-events-api](./no-deprecated-events-api.md) | disallow using deprecated events api (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-filter](./no-deprecated-filter.md) | disallow using deprecated filters syntax (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-functional-template](./no-deprecated-functional-template.md) | disallow using deprecated the `functional` template (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-html-element-is](./no-deprecated-html-element-is.md) | disallow using deprecated the `is` attribute on HTML elements (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-inline-template](./no-deprecated-inline-template.md) | disallow using deprecated `inline-template` attribute (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-props-default-this](./no-deprecated-props-default-this.md) | disallow deprecated `this` access in props default function (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-router-link-tag-prop](./no-deprecated-router-link-tag-prop.md) | disallow using deprecated `tag` property on `RouterLink` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-scope-attribute](./no-deprecated-scope-attribute.md) | disallow deprecated `scope` attribute (in Vue.js 2.5.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-slot-attribute](./no-deprecated-slot-attribute.md) | disallow deprecated `slot` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-slot-scope-attribute](./no-deprecated-slot-scope-attribute.md) | disallow deprecated `slot-scope` attribute (in Vue.js 2.6.0+) | :wrench: | :three::hammer: |
+| [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: | :three::warning: |
+| [vue/no-deprecated-v-is](./no-deprecated-v-is.md) | disallow deprecated `v-is` directive (in Vue.js 3.1.0+) | :wrench: | :three::hammer: |
+| [vue/no-deprecated-v-on-native-modifier](./no-deprecated-v-on-native-modifier.md) | disallow using deprecated `.native` modifiers (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-deprecated-v-on-number-modifiers](./no-deprecated-v-on-number-modifiers.md) | disallow using deprecated number (keycode) modifiers (in Vue.js 3.0.0+) | :wrench: | :three::warning: |
+| [vue/no-deprecated-vue-config-keycodes](./no-deprecated-vue-config-keycodes.md) | disallow using deprecated `Vue.config.keyCodes` (in Vue.js 3.0.0+) |  | :three::warning: |
+| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  | :three::two::warning: |
+| [vue/no-dupe-v-else-if](./no-dupe-v-else-if.md) | disallow duplicate conditions in `v-if` / `v-else-if` chains |  | :three::two::warning: |
+| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  | :three::two::warning: |
+| [vue/no-export-in-script-setup](./no-export-in-script-setup.md) | disallow `export` in `<script setup>` |  | :three::warning: |
+| [vue/no-lifecycle-after-await](./no-lifecycle-after-await.md) | disallow asynchronously registered lifecycle hooks |  | :three::hammer: |
+| [vue/no-multiple-template-root](./no-multiple-template-root.md) | disallow adding multiple root nodes to the template |  | :two::warning: |
+| [vue/no-mutating-props](./no-mutating-props.md) | disallow mutation of component props |  | :three::two::hammer: |
+| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  | :three::two::warning: |
+| [vue/no-ref-as-operand](./no-ref-as-operand.md) | disallow use of value wrapped by `ref()` (Composition API) as an operand | :wrench: | :three::hammer: |
+| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  | :three::two::hammer: |
+| [vue/no-reserved-props](./no-reserved-props.md) | disallow reserved names in props |  | :three::two::warning: |
+| [vue/no-setup-props-destructure](./no-setup-props-destructure.md) | disallow destructuring of `props` passed to `setup` |  | :three::hammer: |
+| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: | :three::two::warning: |
+| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  | :three::two::warning: |
+| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  | :three::two::warning: |
+| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  | :three::two::warning: |
+| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  | :three::two::hammer: |
+| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes | :bulb: | :three::two::hammer: |
+| [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 |  | :three::two::hammer: |
+| [vue/no-useless-template-attributes](./no-useless-template-attributes.md) | disallow useless attribute on `<template>` |  | :three::two::warning: |
+| [vue/no-v-for-template-key-on-child](./no-v-for-template-key-on-child.md) | disallow key of `<template v-for>` placed on child elements |  | :three::warning: |
+| [vue/no-v-for-template-key](./no-v-for-template-key.md) | disallow `key` attribute on `<template v-for>` |  | :two::warning: |
+| [vue/no-v-model-argument](./no-v-model-argument.md) | disallow adding an argument to `v-model` used in custom component |  | :two::warning: |
+| [vue/no-watch-after-await](./no-watch-after-await.md) | disallow asynchronously registered `watch` |  | :three::hammer: |
+| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  | :three::two::warning: |
+| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: | :three::two::hammer: |
+| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  | :three::two::warning: |
+| [vue/require-slots-as-functions](./require-slots-as-functions.md) | enforce properties of `$slots` to be used as a function |  | :three::warning: |
+| [vue/require-toggle-inside-transition](./require-toggle-inside-transition.md) | require control the display of the content inside `<transition>` |  | :three::warning: |
+| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  | :three::two::warning: |
+| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  | :three::two::hammer: |
+| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  | :three::two::warning: |
+| [vue/return-in-emits-validator](./return-in-emits-validator.md) | enforce that a return statement is present in emits validator |  | :three::warning: |
+| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  | :three::two::hammer: |
+| [vue/valid-define-emits](./valid-define-emits.md) | enforce valid `defineEmits` compiler macro |  | :three::warning: |
+| [vue/valid-define-props](./valid-define-props.md) | enforce valid `defineProps` compiler macro |  | :three::warning: |
+| [vue/valid-next-tick](./valid-next-tick.md) | enforce valid `nextTick` function calls | :wrench::bulb: | :three::two::warning: |
+| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  | :three::two::warning: |
+| [vue/valid-v-bind-sync](./valid-v-bind-sync.md) | enforce valid `.sync` modifier on `v-bind` directives |  | :two::warning: |
+| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  | :three::two::warning: |
+| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  | :three::two::warning: |
+| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  | :three::two::warning: |
+| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  | :three::two::warning: |
+| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  | :three::two::warning: |
+| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  | :three::two::warning: |
+| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  | :three::two::warning: |
+| [vue/valid-v-is](./valid-v-is.md) | enforce valid `v-is` directives |  | :three::warning: |
+| [vue/valid-v-memo](./valid-v-memo.md) | enforce valid `v-memo` directives |  | :three::warning: |
+| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  | :three::two::warning: |
+| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  | :three::two::warning: |
+| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  | :three::two::warning: |
+| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  | :three::two::warning: |
+| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  | :three::two::warning: |
+| [vue/valid-v-slot](./valid-v-slot.md) | enforce valid `v-slot` directives |  | :three::two::warning: |
+| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  | :three::two::warning: |
 
 </rules-table>
 
 ## Priority B: Strongly Recommended (Improving Readability)
 
-- :green_heart: Indicates that the rule is for Vue3 and is included in `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"`.
-- :yellow_heart: Indicates that the rule is for Vue2 and is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :three: Indicates that the rule is for Vue 3 and is included in `"plugin:vue/vue3-strongly-recommended"` and `"plugin:vue/vue3-recommended"` presets.
+- :two: Indicates that the rule is for Vue 2 and is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"` presets.
 
 <rules-table>
 
 | Rule ID | Description |    |    |
 |:--------|:------------|:--:|:--:|
-| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/first-attribute-linebreak](./first-attribute-linebreak.md) | enforce the location of first attribute | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [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: | :green_heart::yellow_heart::lipstick: |
-| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: | :green_heart::yellow_heart::lipstick: |
-| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  | :green_heart::yellow_heart::hammer: |
-| [vue/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  | :green_heart::yellow_heart::hammer: |
-| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |  | :green_heart::yellow_heart::hammer: |
-| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  | :green_heart::yellow_heart::hammer: |
-| [vue/require-explicit-emits](./require-explicit-emits.md) | require `emits` option with name triggered by `$emit()` | :bulb: | :green_heart::hammer: |
-| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  | :green_heart::yellow_heart::hammer: |
-| [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: | :green_heart::yellow_heart::lipstick: |
-| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :wrench: | :green_heart::hammer: |
-| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: | :three::two::hammer: |
+| [vue/component-definition-name-casing](./component-definition-name-casing.md) | enforce specific casing for component definition name | :wrench: | :three::two::hammer: |
+| [vue/first-attribute-linebreak](./first-attribute-linebreak.md) | enforce the location of first attribute | :wrench: | :three::two::lipstick: |
+| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: | :three::two::lipstick: |
+| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: | :three::two::lipstick: |
+| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: | :three::two::hammer: |
+| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: | :three::two::lipstick: |
+| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: | :three::two::lipstick: |
+| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: | :three::two::lipstick: |
+| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: | :three::two::lipstick: |
+| [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: | :three::two::lipstick: |
+| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: | :three::two::lipstick: |
+| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: | :three::two::lipstick: |
+| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: | :three::two::lipstick: |
+| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  | :three::two::hammer: |
+| [vue/one-component-per-file](./one-component-per-file.md) | enforce that each component should be in its own file |  | :three::two::hammer: |
+| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |  | :three::two::hammer: |
+| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  | :three::two::hammer: |
+| [vue/require-explicit-emits](./require-explicit-emits.md) | require `emits` option with name triggered by `$emit()` | :bulb: | :three::hammer: |
+| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  | :three::two::hammer: |
+| [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: | :three::two::lipstick: |
+| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: | :three::two::hammer: |
+| [vue/v-on-event-hyphenation](./v-on-event-hyphenation.md) | enforce v-on event naming style on custom components in template | :wrench: | :three::hammer: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: | :three::two::hammer: |
+| [vue/v-slot-style](./v-slot-style.md) | enforce `v-slot` directive style | :wrench: | :three::two::hammer: |
 
 </rules-table>
 
 ## Priority C: Recommended (Potentially Dangerous Patterns)
 
-- :green_heart: Indicates that the rule is for Vue3 and is included in `"plugin:vue/vue3-recommended"`.
-- :yellow_heart: Indicates that the rule is for Vue2 and is included in `"plugin:vue/recommended"`.
+- :three: Indicates that the rule is for Vue 3 and is included in `"plugin:vue/vue3-recommended"` preset.
+- :two: Indicates that the rule is for Vue 2 and is included in `"plugin:vue/recommended"` preset.
 
 <rules-table>
 
 | Rule ID | Description |    |    |
 |:--------|:------------|:--:|:--:|
-| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  | :green_heart::yellow_heart::white_check_mark: |
-| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  | :green_heart::yellow_heart::hammer: |
-| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: | :green_heart::yellow_heart::hammer: |
-| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: | :green_heart::yellow_heart::hammer: |
+| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: | :three::two::hammer: |
+| [vue/component-tags-order](./component-tags-order.md) | enforce order of component top-level elements | :wrench: | :three::two::hammer: |
+| [vue/no-lone-template](./no-lone-template.md) | disallow unnecessary `<template>` |  | :three::two::warning: |
+| [vue/no-multiple-slot-args](./no-multiple-slot-args.md) | disallow to pass multiple arguments to scoped slots |  | :three::two::warning: |
+| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  | :three::two::hammer: |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: | :three::two::hammer: |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template | :wrench: | :three::two::hammer: |
 
 </rules-table>
 
@@ -210,22 +211,22 @@ For example:
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  | :hammer: |
-| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name |  | :white_check_mark: |
+| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name |  | :warning: |
 | [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: | :lipstick: |
 | [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  | :hammer: |
 | [vue/no-boolean-default](./no-boolean-default.md) | disallow boolean defaults | :wrench: | :hammer: |
-| [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: | :white_check_mark: |
+| [vue/no-child-content](./no-child-content.md) | disallow element's child contents which would be overwritten by a directive like `v-html` or `v-text` | :bulb: | :warning: |
 | [vue/no-duplicate-attr-inheritance](./no-duplicate-attr-inheritance.md) | enforce `inheritAttrs` to be set to `false` when using `v-bind="$attrs"` |  | :hammer: |
 | [vue/no-empty-component-block](./no-empty-component-block.md) | disallow the `<template>` `<script>` `<style>` block to be empty |  | :hammer: |
-| [vue/no-expose-after-await](./no-expose-after-await.md) | disallow asynchronously registered `expose` |  | :white_check_mark: |
-| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  | :white_check_mark: |
+| [vue/no-expose-after-await](./no-expose-after-await.md) | disallow asynchronously registered `expose` |  | :warning: |
+| [vue/no-invalid-model-keys](./no-invalid-model-keys.md) | require valid keys in model option |  | :warning: |
 | [vue/no-multiple-objects-in-class](./no-multiple-objects-in-class.md) | disallow to pass multiple objects into array to class |  | :hammer: |
 | [vue/no-potential-component-option-typo](./no-potential-component-option-typo.md) | disallow a potential typo in your component property | :bulb: | :hammer: |
 | [vue/no-reserved-component-names](./no-reserved-component-names.md) | disallow the use of reserved names in component definitions |  | :hammer: |
 | [vue/no-restricted-block](./no-restricted-block.md) | disallow specific block |  | :hammer: |
 | [vue/no-restricted-call-after-await](./no-restricted-call-after-await.md) | disallow asynchronously called restricted methods |  | :hammer: |
-| [vue/no-restricted-class](./no-restricted-class.md) | disallow specific classes in Vue components |  | :white_check_mark: |
+| [vue/no-restricted-class](./no-restricted-class.md) | disallow specific classes in Vue components |  | :warning: |
 | [vue/no-restricted-component-options](./no-restricted-component-options.md) | disallow specific component option |  | :hammer: |
 | [vue/no-restricted-custom-event](./no-restricted-custom-event.md) | disallow specific custom event | :bulb: | :hammer: |
 | [vue/no-restricted-html-elements](./no-restricted-html-elements.md) | disallow specific HTML elements |  | :hammer: |
@@ -233,21 +234,21 @@ For example:
 | [vue/no-restricted-static-attribute](./no-restricted-static-attribute.md) | disallow specific attribute |  | :hammer: |
 | [vue/no-restricted-v-bind](./no-restricted-v-bind.md) | disallow specific argument in `v-bind` |  | :hammer: |
 | [vue/no-static-inline-styles](./no-static-inline-styles.md) | disallow static inline `style` attributes |  | :hammer: |
-| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  | :white_check_mark: |
-| [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  | :white_check_mark: |
+| [vue/no-template-target-blank](./no-template-target-blank.md) | disallow target="_blank" attribute without rel="noopener noreferrer" |  | :warning: |
+| [vue/no-this-in-before-route-enter](./no-this-in-before-route-enter.md) | disallow `this` usage in a `beforeRouteEnter` method |  | :warning: |
 | [vue/no-undef-components](./no-undef-components.md) | disallow use of undefined components in `<template>` |  | :hammer: |
 | [vue/no-undef-properties](./no-undef-properties.md) | disallow undefined properties |  | :hammer: |
 | [vue/no-unsupported-features](./no-unsupported-features.md) | disallow unsupported Vue.js syntax on the specified version | :wrench: | :hammer: |
 | [vue/no-unused-properties](./no-unused-properties.md) | disallow unused properties |  | :hammer: |
 | [vue/no-unused-refs](./no-unused-refs.md) | disallow unused refs |  | :hammer: |
-| [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  | :white_check_mark: |
+| [vue/no-use-computed-property-like-method](./no-use-computed-property-like-method.md) | disallow use computed property like method |  | :warning: |
 | [vue/no-useless-mustaches](./no-useless-mustaches.md) | disallow unnecessary mustache interpolations | :wrench: | :hammer: |
 | [vue/no-useless-v-bind](./no-useless-v-bind.md) | disallow unnecessary `v-bind` directives | :wrench: | :hammer: |
-| [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md) | disallow v-text / v-html on component |  | :white_check_mark: |
+| [vue/no-v-text-v-html-on-component](./no-v-text-v-html-on-component.md) | disallow v-text / v-html on component |  | :warning: |
 | [vue/no-v-text](./no-v-text.md) | disallow use of v-text |  | :hammer: |
 | [vue/padding-line-between-blocks](./padding-line-between-blocks.md) | require or disallow padding lines between blocks | :wrench: | :lipstick: |
 | [vue/prefer-import-from-vue](./prefer-import-from-vue.md) | enforce import from 'vue' instead of import from '@vue/*' | :wrench: | :hammer: |
-| [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :white_check_mark: |
+| [vue/prefer-prop-type-boolean-first](./prefer-prop-type-boolean-first.md) | enforce `Boolean` comes first in component prop types | :bulb: | :warning: |
 | [vue/prefer-separate-static-class](./prefer-separate-static-class.md) | require static class names in template to be in a separate `class` attribute | :wrench: | :hammer: |
 | [vue/prefer-true-attribute-shorthand](./prefer-true-attribute-shorthand.md) | require shorthand form attribute when `v-bind` value is `true` | :bulb: | :hammer: |
 | [vue/require-direct-export](./require-direct-export.md) | require the component to be directly exported |  | :hammer: |
@@ -286,13 +287,13 @@ The following rules extend the rules provided by ESLint itself and apply them to
 | [vue/key-spacing](./key-spacing.md) | enforce consistent spacing between keys and values in object literal properties in `<template>` | :wrench: | :lipstick: |
 | [vue/keyword-spacing](./keyword-spacing.md) | enforce consistent spacing before and after keywords in `<template>` | :wrench: | :lipstick: |
 | [vue/max-len](./max-len.md) | enforce a maximum line length in `.vue` files |  | :lipstick: |
-| [vue/no-constant-condition](./no-constant-condition.md) | disallow constant expressions in conditions in `<template>` |  | :white_check_mark: |
-| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns in `<template>` |  | :white_check_mark: |
+| [vue/no-constant-condition](./no-constant-condition.md) | disallow constant expressions in conditions in `<template>` |  | :warning: |
+| [vue/no-empty-pattern](./no-empty-pattern.md) | disallow empty destructuring patterns in `<template>` |  | :warning: |
 | [vue/no-extra-parens](./no-extra-parens.md) | disallow unnecessary parentheses in `<template>` | :wrench: | :lipstick: |
-| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace in `.vue` files |  | :white_check_mark: |
-| [vue/no-loss-of-precision](./no-loss-of-precision.md) | disallow literal numbers that lose precision in `<template>` |  | :white_check_mark: |
+| [vue/no-irregular-whitespace](./no-irregular-whitespace.md) | disallow irregular whitespace in `.vue` files |  | :warning: |
+| [vue/no-loss-of-precision](./no-loss-of-precision.md) | disallow literal numbers that lose precision in `<template>` |  | :warning: |
 | [vue/no-restricted-syntax](./no-restricted-syntax.md) | disallow specified syntax in `<template>` |  | :hammer: |
-| [vue/no-sparse-arrays](./no-sparse-arrays.md) | disallow sparse arrays in `<template>` |  | :white_check_mark: |
+| [vue/no-sparse-arrays](./no-sparse-arrays.md) | disallow sparse arrays in `<template>` |  | :warning: |
 | [vue/no-useless-concat](./no-useless-concat.md) | disallow unnecessary concatenation of literals or template literals in `<template>` |  | :hammer: |
 | [vue/object-curly-newline](./object-curly-newline.md) | enforce consistent line breaks after opening and before closing braces in `<template>` | :wrench: | :lipstick: |
 | [vue/object-curly-spacing](./object-curly-spacing.md) | enforce consistent spacing inside braces in `<template>` | :wrench: | :lipstick: |
diff --git a/package.json b/package.json
index 2ec6b6532..093aab994 100644
--- a/package.json
+++ b/package.json
@@ -81,7 +81,6 @@
     "eslint-plugin-unicorn": "^40.1.0",
     "eslint-plugin-vue": "file:.",
     "espree": "^9.0.0",
-    "lodash": "^4.17.21",
     "markdownlint-cli": "^0.31.1",
     "mocha": "^7.1.2",
     "nyc": "^15.1.0",
diff --git a/tools/lib/utils.js b/tools/lib/utils.js
index e7ce2d102..eb3f53fd7 100644
--- a/tools/lib/utils.js
+++ b/tools/lib/utils.js
@@ -1,5 +1,3 @@
-const last = require('lodash/last')
-
 module.exports = { getPresetIds, formatItems }
 
 const presetCategories = {
@@ -14,20 +12,24 @@ const presetCategories = {
   // 'vue3-use-with-caution': 'vue3-recommended'
 }
 
-function formatPresets(presets) {
-  if (presets.length === 1) {
-    return `${presets[0]} preset`
+function formatItems(items, suffix) {
+  if (items.length === 1) {
+    return `${items[0]}${suffix ? ` ${suffix[0]}` : ''}`
   }
-  if (presets.length === 2) {
-    return `${presets.join(' and ')} presets`
+  if (items.length === 2) {
+    return `${items.join(' and ')}${suffix ? ` ${suffix[1]}` : ''}`
   }
-  return `all of ${presets.slice(0, -1).join(', ')} and ${last(presets)} presets`
+  return `all of ${items.slice(0, -1).join(', ')} and ${[...items].pop()}${
+    suffix ? ` ${suffix[1]}` : ''
+  }`
 }
 
 function getPresetIds(categoryIds) {
   const subsetCategoryIds = []
   for (const categoryId of categoryIds) {
-    for (const [subsetCategoryId, supersetCategoryId] of Object.entries(presetCategories)) {
+    for (const [subsetCategoryId, supersetCategoryId] of Object.entries(
+      presetCategories
+    )) {
       if (supersetCategoryId === categoryId) {
         subsetCategoryIds.push(subsetCategoryId)
       }
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index 02246c9f4..27ab06979 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -9,6 +9,9 @@ const path = require('path')
 const rules = require('./lib/rules')
 const { getPresetIds, formatItems } = require('./lib/utils')
 
+const VUE3_EMOJI = ':three:'
+const VUE2_EMOJI = ':two:'
+
 // -----------------------------------------------------------------------------
 const categorizedRules = rules.filter(
   (rule) =>
@@ -30,22 +33,19 @@ const uncategorizedExtensionRule = rules.filter(
 )
 const deprecatedRules = rules.filter((rule) => rule.meta.deprecated)
 
+const TYPE_MARK = {
+  problem: ':warning:',
+  suggestion: ':hammer:',
+  layout: ':lipstick:'
+}
+
 function toRuleRow(rule, kindMarks = []) {
   const mark = [
     rule.meta.fixable ? ':wrench:' : '',
     rule.meta.hasSuggestions ? ':bulb:' : '',
     rule.meta.deprecated ? ':warning:' : ''
   ].join('')
-  const kindMark = [
-    ...kindMarks,
-    rule.meta.type === 'problem'
-      ? ':warning:'
-      : rule.meta.type === 'suggestion'
-      ? ':hammer:'
-      : rule.meta.type === 'layout'
-      ? ':lipstick:'
-      : ''
-  ].join('')
+  const kindMark = [...kindMarks, TYPE_MARK[rule.meta.type]].join('')
   const link = `[${rule.ruleId}](./${rule.name}.md)`
   const description = rule.meta.docs.description || '(no description)'
 
@@ -116,11 +116,13 @@ ${group.description}
         (categoryId) => `\`"plugin:vue/${categoryId}"\``
       )
       content += `
-- :green_heart: Indicates that the rule is for Vue 3 and is included in ${formatItems(
-        presetsForVue3
+- ${VUE3_EMOJI} Indicates that the rule is for Vue 3 and is included in ${formatItems(
+        presetsForVue3,
+        ['preset', 'presets']
       )}.
-- :yellow_heart: Indicates that the rule is for Vue 2 and is included in ${formatItems(
-        presetsForVue2
+- ${VUE2_EMOJI} Indicates that the rule is for Vue 2 and is included in ${formatItems(
+        presetsForVue2,
+        ['preset', 'presets']
       )}.
 `
     }
@@ -135,10 +137,10 @@ ${rules
     const mark = group.useMark
       ? [
           rule.meta.docs.categories.includes(group.categoryIdForVue3)
-            ? [':green_heart:']
+            ? [VUE3_EMOJI]
             : [],
           rule.meta.docs.categories.includes(group.categoryIdForVue2)
-            ? [':yellow_heart:']
+            ? [VUE2_EMOJI]
             : []
         ].flat()
       : []
@@ -221,6 +223,7 @@ fs.writeFileSync(
   readmeFilePath,
   `---
 sidebarDepth: 0
+pageClass: rule-list
 ---
 
 # Available rules
@@ -235,7 +238,7 @@ sidebarDepth: 0
 
 Mark indicating rule type:
 
-- :white_check_mark: Possible Problems: These rules relate to possible logic errors in code.
+- <span class="emoji">:warning:</span> 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.
 

From 5584fcb8a22e2fc05c5f4a4de911949bad7a6f20 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Fri, 22 Apr 2022 20:36:47 +0900
Subject: [PATCH 12/12] update markdownlint config

---
 .markdownlint.yml | 1 +
 1 file changed, 1 insertion(+)

diff --git a/.markdownlint.yml b/.markdownlint.yml
index 843f51eee..b300725cc 100644
--- a/.markdownlint.yml
+++ b/.markdownlint.yml
@@ -6,6 +6,7 @@ no-inline-html:
     - eslint-code-block
     - sup
     - rules-table
+    - span
 
 # enforce consistency
 code-block-style: