Repository: vuejs/eslint-plugin-vue
Pull request #706 (2018-12-04 23:18:07)

Update "What is the latest version" Warning Link
The current link points to documentation that was moved. This updates it.


Patch:
diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index d7789c7b..13d824a5 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -1,18 +1,20 @@
 <template>
-  <eslint-editor
-    :linter="linter"
-    :config="config"
-    :code="code"
-    :style="{ height }"
-    class="eslint-code-block"
-    filename="example.vue"
-    language="html"
-    :preprocess="preprocess"
-    :postprocess="postprocess"
-    dark
-    :format="format"
-    :fix="fix"
-  />
+  <div class="eslint-code-container">
+    <eslint-editor
+      :linter="linter"
+      :config="config"
+      :code="code"
+      :style="{ height }"
+      class="eslint-code-block"
+      filename="example.vue"
+      language="html"
+      :preprocess="preprocess"
+      :postprocess="postprocess"
+      dark
+      :format="format"
+      :fix="fix"
+    />
+  </div>
 </template>
 
 <script>
@@ -92,7 +94,7 @@ export default {
 
     height () {
       const lines = this.code.split('\n').length
-      return `${Math.max(120, 20 * (1 + lines))}px`
+      return `${Math.max(120, 19 * lines)}px`
     }
   },
 
@@ -129,8 +131,18 @@ export default {
 </script>
 
 <style>
+.eslint-code-container {
+  border-radius: 6px;
+  padding: 1.25rem 0;
+  margin: 1em 0;
+  background-color: #1e1e1e;
+}
+
 .eslint-code-block {
   width: 100%;
-  margin: 1em 0;
+}
+
+.eslint-editor-actions {
+  bottom: -0.9rem;
 }
 </style>
diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 53feb9c8..803baab0 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -15,7 +15,8 @@ description: enforce attribute naming style on custom components in template
 This rule enforces using hyphenated attribute names on custom components in Vue templates.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
-```
+
+```vue
 <template>
   <!-- ✔ GOOD -->
   <MyComponent my-prop="prop" />
@@ -24,6 +25,7 @@ This rule enforces using hyphenated attribute names on custom components in Vue
   <MyComponent myProp="prop" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -46,7 +48,8 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 It errors on upper case letters.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
-```
+
+```vue
 <template>
   <!-- ✔ GOOD -->
   <MyComponent my-prop="prop" />
@@ -55,13 +58,15 @@ It errors on upper case letters.
   <MyComponent myProp="prop" />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"never"`
 It errors on hyphens except `data-`, `aria-` and `slot-scope`.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
-```
+
+```vue
 <template>
   <!-- ✔ GOOD -->
   <MyComponent myProp="prop" />
@@ -73,13 +78,15 @@ It errors on hyphens except `data-`, `aria-` and `slot-scope`.
   <MyComponent my-prop="prop" />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"never", { "ignore": ["custom-prop"] }` 
 Don't use hyphenated name but allow custom attributes
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', { ignore: ['custom-prop']}]}">
-```
+
+```vue
 <template>
   <!-- ✔ GOOD -->
   <MyComponent myProp="prop" />
@@ -92,6 +99,7 @@ Don't use hyphenated name but allow custom attributes
   <MyComponent my-prop="prop" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index d703d7f5..cbd38eee 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -40,7 +40,8 @@ This rule aims to enforce ordering of component attributes. The default order is
 ### the default order
 
 <eslint-code-block fix :rules="{'vue/attributes-order': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -85,6 +86,7 @@ This rule aims to enforce ordering of component attributes. The default order is
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -113,7 +115,8 @@ This rule aims to enforce ordering of component attributes. The default order is
 #### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
 <eslint-code-block fix :rules="{'vue/attributes-order': ['error', {order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -131,12 +134,14 @@ This rule aims to enforce ordering of component attributes. The default order is
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 #### `[['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
 <eslint-code-block fix :rules="{'vue/attributes-order': ['error', {order: [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -153,6 +158,7 @@ This rule aims to enforce ordering of component attributes. The default order is
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index 7be264ce..9db00825 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -30,6 +30,7 @@ ESLint doesn't provide any API to enhance `eslint-disable` functionality and ESL
 This rule sends all `eslint-disable`-like comments as errors to the post-process of the `.vue` file processor, then the post-process removes all `vue/comment-directive` errors and the reported errors in disabled areas.
 
 <eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error']}">
+
 ```vue
 <template>
   <!-- eslint-disable-next-line vue/max-attributes-per-line -->
@@ -37,6 +38,7 @@ This rule sends all `eslint-disable`-like comments as errors to the post-process
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index c7ea7ea8..c2bd5290 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -33,7 +33,8 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 ### `"PascalCase"`
 
 <eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <TheComponent />
@@ -44,12 +45,14 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
   <The-component />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"kebab-case"`
 
 <eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'kebab-case']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <the-component />
@@ -61,13 +64,15 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
   <The-component />
 </template>
 ```
+
 </eslint-code-block>
 
 
 ### `"PascalCase", { ignores: ["custom-element"] }`
 
 <eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {ignores: ['custom-element']}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <TheComponent/>
@@ -77,6 +82,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
   <magic-element></magic-element>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index 056905fe..d9198705 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -31,7 +31,8 @@ This rule enforces a line break (or no line break) before tag's closing brackets
 This rule aims to warn the right angle brackets which are at the location other than the configured location.
 
 <eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div id="foo" class="bar">
@@ -48,6 +49,7 @@ This rule aims to warn the right angle brackets which are at the location other
     class="bar">
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -73,7 +75,8 @@ Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-l
 ### `"multiline": "never"`
 
 <eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error', { 'multiline': 'never' }]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -87,6 +90,7 @@ Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-l
   >
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 20292810..e77b9d7e 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -15,7 +15,8 @@ description: require or disallow a space before tag's closing brackets
 This rule aims to enforce consistent spacing style before closing brackets `>` of tags.
 
 <eslint-code-block fix :rules="{'vue/html-closing-bracket-spacing': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div>
@@ -36,6 +37,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
   <div foo="bar"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -63,7 +65,8 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
 ### `"startTag": "always", "endTag": "always", "selfClosingTag": "always"`
 
 <eslint-code-block fix :rules="{'vue/html-closing-bracket-spacing': ['error', {startTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div >
@@ -75,6 +78,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
   <div foo="bar" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :couple: Related rules
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index fe8b704b..9cf5c110 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -15,7 +15,8 @@ description: enforce end tag style
 This rule aims to disallow lacking end tags.
 
 <eslint-code-block fix :rules="{'vue/html-end-tags': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div></div>
@@ -29,6 +30,7 @@ This rule aims to disallow lacking end tags.
   <p>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index fb5aab26..4c366451 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -18,7 +18,8 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 - In the expressions, this rule supports ECMAScript 2017 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div class="foo">
@@ -55,6 +56,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
     </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -81,7 +83,8 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 ### `2, {"attribute": 1, "closeBracket": 1}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {attribute: 1, closeBracket: 1}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -96,12 +99,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ### `2, {"attribute": 2, "closeBracket": 1}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {attribute: 2, closeBracket: 1}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -116,12 +121,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ### `2, {"ignores": ["VAttribute"]}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {ignores: ['VAttribute']}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -130,12 +137,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `2, {"alignAttributesVertically": false}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {alignAttributesVertically: false}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div id=""
@@ -150,12 +159,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `2, {"baseIndent": 0}`
 
 <eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {baseIndent: 0}]}">
-```
+
+```vue
 <template>
 <!-- ✓ GOOD -->
 <div>
@@ -172,6 +183,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index c63dcbd0..aa0180de 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -23,7 +23,8 @@ This rule enforces the quotes style of HTML attributes.
 This rule reports the quotes of attributes if it is different to configured quotes.
 
 <eslint-code-block fix :rules="{'vue/html-quotes': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <img src="./logo.png">
@@ -33,6 +34,7 @@ This rule reports the quotes of attributes if it is different to configured quot
   <img src=./logo.png>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -51,7 +53,8 @@ Default is set to `double`.
 ### `"single"`
 
 <eslint-code-block fix :rules="{'vue/html-quotes': ['error', 'single']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <img src='./logo.png'>
@@ -61,6 +64,7 @@ Default is set to `double`.
   <img src=./logo.png>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index bf818a01..da83e5b7 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -22,7 +22,8 @@ In Vue.js template, we can use either two styles for elements which don't have t
 Self-closing is simple and shorter, but it's not supported in the HTML spec.
 
 <eslint-code-block fix :rules="{'vue/html-self-closing': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div/>
@@ -37,6 +38,7 @@ Self-closing is simple and shorter, but it's not supported in the HTML spec.
   <svg><path d=""></path></svg>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -70,7 +72,8 @@ Every option can be set to one of the following values:
 ### `html: {normal: "never", void: "always"}`
 
 <eslint-code-block fix :rules="{'vue/html-self-closing': ['error', {html: {normal: 'never', void: 'always'}}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div></div>
@@ -85,6 +88,7 @@ Every option can be set to one of the following values:
   <svg><path d=""></path></svg>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index d7c3e2d5..97e0402e 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -21,7 +21,8 @@ An attribute is considered to be in a new line when there is a line break betwee
 There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 1).
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent lorem="1"/>
@@ -46,6 +47,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -69,7 +71,8 @@ There is a configurable number of attributes that are acceptable in one-line cas
 ### `"singleline": 3`
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {singleline: 3}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent lorem="1" ipsum="2" dolor="3" />
@@ -78,12 +81,14 @@ There is a configurable number of attributes that are acceptable in one-line cas
   <MyComponent lorem="1" ipsum="2" dolor="3" sit="4" />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"multiline": 2`
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {multiline: 2}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent
@@ -98,12 +103,14 @@ There is a configurable number of attributes that are acceptable in one-line cas
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"multiline": 1, "allowFirstLine": true`
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {multiline: { allowFirstLine: true }}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent lorem="1"
@@ -112,6 +119,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 1e9357a7..9fe8d45a 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -15,6 +15,7 @@ description: require a line break before and after the contents of a multiline e
 This rule enforces a line break before and after the contents of a multiline element.
 
 <eslint-code-block fix :rules="{'vue/multiline-html-element-content-newline': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -68,6 +69,7 @@ This rule enforces a line break before and after the contents of a multiline ele
   ></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -89,6 +91,7 @@ This rule enforces a line break before and after the contents of a multiline ele
 ### `"ignores": ["VueComponent", "pre", "textarea"]`
 
 <eslint-code-block fix :rules="{'vue/multiline-html-element-content-newline': ['error', { ignores: ['VueComponent', 'pre', 'textarea'] }]}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -103,6 +106,7 @@ This rule enforces a line break before and after the contents of a multiline ele
   Defines the Vue component that accepts preformatted text.</VueComponent>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index f9bea995..05db8ed4 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -15,7 +15,8 @@ description: enforce unified spacing in mustache interpolations
 This rule aims at enforcing unified spacing in mustache interpolations.
 
 <eslint-code-block fix :rules="{'vue/mustache-interpolation-spacing': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div>{{ text }}</div>
@@ -25,6 +26,7 @@ This rule aims at enforcing unified spacing in mustache interpolations.
   <div>{{text}}</div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -41,7 +43,8 @@ This rule aims at enforcing unified spacing in mustache interpolations.
 ### `"never"`
 
 <eslint-code-block fix :rules="{'vue/mustache-interpolation-spacing': ['error', 'never']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div>{{text}}</div>
@@ -51,6 +54,7 @@ This rule aims at enforcing unified spacing in mustache interpolations.
   <div>{{ text }}</div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index b5d307b5..98aa4a26 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -15,7 +15,8 @@ description: enforce specific casing for the name property in Vue components
 This rule aims at enforcing the style for the `name` property casing for consistency purposes.
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error']}">
-```
+
+```vue
 <script>
   /* ✓ GOOD */
   export default {
@@ -23,10 +24,12 @@ This rule aims at enforcing the style for the `name` property casing for consist
   }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error']}">
-```
+
+```vue
 <script>
   /* ✗ BAD */
   export default {
@@ -34,6 +37,7 @@ This rule aims at enforcing the style for the `name` property casing for consist
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -50,7 +54,8 @@ This rule aims at enforcing the style for the `name` property casing for consist
 ### `"kebab-case"`
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
-```
+
+```vue
 <script>
   /* ✓ GOOD */
   export default {
@@ -58,10 +63,12 @@ This rule aims at enforcing the style for the `name` property casing for consist
   }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
-```
+
+```vue
 <script>
   /* ✗ BAD */
   export default {
@@ -69,6 +76,7 @@ This rule aims at enforcing the style for the `name` property casing for consist
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index 92205af8..7e2a3962 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -17,7 +17,8 @@ If you need async computed properties you might want to consider using additiona
 This rule is aimed at preventing asynchronous methods from being called in computed properties.
 
 <eslint-code-block :rules="{'vue/no-async-in-computed-properties': ['error']}">
-```
+
+```vue
 <script>
 export default {
   computed: {
@@ -56,6 +57,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 9e76e8cd..4e8fccbd 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -18,7 +18,8 @@ This rule reports the elements which have both `v-for` and `v-if` directives in
 In that case, the `v-if` should be written on the wrapper element.
 
 <eslint-code-block :rules="{'vue/no-confusing-v-for-v-if': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <TodoItem
@@ -41,6 +42,7 @@ In that case, the `v-if` should be written on the wrapper element.
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 70bbf88b..2cbed8eb 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -16,7 +16,8 @@ This rule prevents to use duplicated names.
 This rule is aimed at preventing duplicated property names.
 
 <eslint-code-block :rules="{'vue/no-dupe-keys': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -37,6 +38,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -54,7 +56,8 @@ export default {
 ### `"groups": ["firebase"]`
 
 <eslint-code-block :rules="{'vue/no-dupe-keys': ['error', {groups: ['firebase']}]}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -67,6 +70,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 5658370f..bdccf50b 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -18,7 +18,8 @@ This rule reports duplicate attributes.
 `v-bind:foo` directives are handled as the attributes `foo`.
 
 <eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <MyComponent :foo="abc" />
@@ -33,6 +34,7 @@ This rule reports duplicate attributes.
   <MyComponent class="abc" class="def" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -55,13 +57,15 @@ This rule reports duplicate attributes.
 ### `"allowCoexistClass": false, "allowCoexistStyle": false`
 
 <eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error', {allowCoexistClass: false, allowCoexistStyle: false}]}">
-```
+
+```vue
 <template>
   <!-- ✗ BAD -->
   <MyComponent class="abc" :class="def" />
   <MyComponent style="abc" :style="def" />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index bc21e0a6..72655e99 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -15,7 +15,8 @@ description: disallow multiple spaces
 This rule aims at removing multiple spaces in tags, which are not used for indentation.
 
 <eslint-code-block fix :rules="{'vue/no-multi-spaces': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div
@@ -39,6 +40,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -56,6 +58,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
 ### `"ignoreProperties": true`
 
 <eslint-code-block fix :rules="{'vue/no-multi-spaces': ['error', { 'ignoreProperties': true }]}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -67,6 +70,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index b9dd2ee4..50210472 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -25,7 +25,8 @@ This rule tries to parse directives/mustaches in `<template>` by the parser whic
 Then reports syntax errors if exist.
 
 <eslint-code-block :rules="{'vue/no-parsing-error': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✗ BAD -->
   {{ . }}
@@ -35,6 +36,7 @@ Then reports syntax errors if exist.
   </div id="ghi">
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index ec2d9920..f16da3e2 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -14,7 +14,8 @@ description: disallow overwriting reserved keys
 This rule prevents to use [reserved names](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue-reserved.json) to avoid conflicts and unexpected behavior.
 
 <eslint-code-block :rules="{'vue/no-reserved-keys': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -35,6 +36,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -54,7 +56,8 @@ export default {
 ### `"reserved": ["foo", "foo2"], "groups": ["firebase"]`
 
 <eslint-code-block :rules="{'vue/no-reserved-keys': ['error', {reserved: ['foo', 'foo2'], groups: ['firebase']}]}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -67,6 +70,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index 5c6d15f3..cfa87ede 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -17,7 +17,8 @@ When using the data property on a component (i.e. anywhere except on `new Vue`),
 When the value of `data` is an object, it’s shared across all instances of a component.
 
 <eslint-code-block fix :rules="{'vue/no-shared-component-data': ['error']}">
-```
+
+```vue
 <script>
 /* ✓ GOOD */
 Vue.component('some-comp', {
@@ -37,10 +38,12 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block fix :rules="{'vue/no-shared-component-data': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 Vue.component('some-comp', {
@@ -56,6 +59,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 485e6366..8e3e694b 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -16,7 +16,8 @@ This rule is aimed at preventing the code which makes side effects in computed p
 It is considered a very bad practice to introduce side effects inside computed properties. It makes the code not predictable and hard to understand.
 
 <eslint-code-block :rules="{'vue/no-side-effects-in-computed-properties': ['error']}">
-```
+
+```vue
 <script>
 /* ✓ GOOD */
 export default {
@@ -31,10 +32,12 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/no-side-effects-in-computed-properties': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -50,6 +53,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index 9cf5ea38..8498e3cc 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -15,7 +15,8 @@ description: disallow spaces around equal signs in attribute
 This rule disallow spaces around equal signs in attribute.
 
 <eslint-code-block fix :rules="{'vue/no-spaces-around-equal-signs-in-attribute': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✗ BAD -->
   <div class = "item"></div>
@@ -23,6 +24,7 @@ This rule disallow spaces around equal signs in attribute.
   <div class="item"></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: tip Info
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index 1b67596a..e62f754b 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -16,7 +16,8 @@ Vue.js disallows `key` attribute on `<template>` elements.
 This rule reports the `<template>` elements which have `key` attribute.
 
 <eslint-code-block :rules="{'vue/no-template-key': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div key="foo"> ... </div>
@@ -28,6 +29,7 @@ This rule reports the `<template>` elements which have `key` attribute.
   <template :key="baz"> ... </template>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-template-shadow.md b/docs/rules/no-template-shadow.md
index b6e65593..3c323881 100644
--- a/docs/rules/no-template-shadow.md
+++ b/docs/rules/no-template-shadow.md
@@ -16,6 +16,7 @@ description: disallow variable declarations from shadowing variables declared in
 This rule aims to eliminate shadowed variable declarations of v-for directives or scope attributes.
 
 <eslint-code-block :rules="{'vue/no-template-shadow': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -42,6 +43,7 @@ This rule aims to eliminate shadowed variable declarations of v-for directives o
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 9cfef08b..b5e1230e 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -14,7 +14,8 @@ description: disallow mustaches in `<textarea>`
 This rule reports mustaches in `<textarea>`.
 
 <eslint-code-block :rules="{'vue/no-textarea-mustache': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <textarea v-model="message" />
@@ -23,6 +24,7 @@ This rule reports mustaches in `<textarea>`.
   <textarea>{{ message }}</textarea>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 9f104563..94d84a67 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -14,6 +14,7 @@ description: disallow registering components that are not used inside templates
 This rule reports components that haven't been used in the template.
 
 <eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+
 ```vue
 <!-- ✓ GOOD -->
 <template>
@@ -43,9 +44,11 @@ This rule reports components that haven't been used in the template.
   }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+
 ```vue
 <!-- ✗ BAD -->
 <template>
@@ -67,6 +70,7 @@ This rule reports components that haven't been used in the template.
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
@@ -89,6 +93,7 @@ Components registered under other than `PascalCase` name have to be called direc
 ### `ignoreWhenBindingPresent: false`
 
 <eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+
 ```vue
 <!-- ✓ GOOD -->
 <template>
@@ -114,9 +119,11 @@ Components registered under other than `PascalCase` name have to be called direc
   }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+
 ```vue
 <!-- ✗ BAD -->
 <template>
@@ -144,6 +151,7 @@ Components registered under other than `PascalCase` name have to be called direc
   }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index b78b78f8..cde104f4 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -14,7 +14,8 @@ description: disallow unused variable definitions of v-for directives or scope a
 This rule report variable definitions of v-for directives or scope attributes if those are not used.
 
 <eslint-code-block :rules="{'vue/no-unused-vars': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <ol v-for="i in 5">
@@ -27,6 +28,7 @@ This rule report variable definitions of v-for directives or scope attributes if
   </ol>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index f912b35e..44c33531 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -18,7 +18,8 @@ There are two common cases where this can be tempting:
  * To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
 
 <eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <ul v-if="complete">
@@ -45,6 +46,7 @@ There are two common cases where this can be tempting:
   /><!-- ↑ In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list. -->
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -62,7 +64,8 @@ There are two common cases where this can be tempting:
 ### `"allowUsingIterationVar": true`
 
 <eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error', {allowUsingIterationVar: true}]}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <TodoItem
@@ -79,6 +82,7 @@ There are two common cases where this can be tempting:
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index 45b1bbbe..76b01afb 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -14,7 +14,8 @@ description: disallow use of v-html to prevent XSS attack
 This rule reports all uses of `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross-Site Scripting (XSS) attacks.
 
 <eslint-code-block :rules="{'vue/no-v-html': ['error']}">
-```
+
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div>{{ someHTML }}</div>
@@ -23,6 +24,7 @@ This rule reports all uses of `v-html` directive in order to reduce the risk of
   <div v-html="someHTML"></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index 99c40bc2..c28e283b 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -16,7 +16,8 @@ This rule makes sure you keep declared order of properties in components.
 Recommended order of properties can be [found here](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended).
 
 <eslint-code-block fix :rules="{'vue/order-in-components': ['error']}">
-```
+
+```vue
 <script>
 /* ✓ GOOD */
 export default {
@@ -32,10 +33,12 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block fix :rules="{'vue/order-in-components': ['error']}">
-```
+
+```vue
 <script>
 /* ✗ BAD */
 export default {
@@ -51,6 +54,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index ea26d9b9..846766c6 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -15,7 +15,8 @@ description: enforce specific casing for the Prop name in Vue components
 This rule enforce proper casing of props in vue components(camelCase).
 
 <eslint-code-block fix :rules="{'vue/prop-name-casing': ['error']}">
-```
+
+```vue
 <script>
 export default {
   props: {
@@ -29,6 +30,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -45,7 +47,8 @@ export default {
 ### `"snake_case"`
 
 <eslint-code-block fix :rules="{'vue/prop-name-casing': ['error', 'snake_case']}">
-```
+
+```vue
 <script>
 export default {
   props: {
@@ -59,6 +62,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 9e1e0388..c586ffd6 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -15,6 +15,7 @@ This rule reports the `<component>` elements which do not have `v-bind:is` attri
 
 
 <eslint-code-block :rules="{'vue/require-component-is': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -26,6 +27,7 @@ This rule reports the `<component>` elements which do not have `v-bind:is` attri
   <component is="type"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 71bfacb1..f49849b7 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -14,7 +14,8 @@ description: require default value for props
 This rule requires default value to be set for each props that are not marked as `required` (except `Boolean` props).
 
 <eslint-code-block :rules="{'vue/require-default-prop': ['error']}">
-```
+
+```vue
 <script>
 export default {
   props: {
@@ -51,6 +52,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index d08ff1ff..79e500ee 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -26,6 +26,7 @@ The following types are forbidden and will be reported:
 It will catch most commonly made mistakes which are using strings instead of constructors.
 
 <eslint-code-block fix :rules="{'vue/require-prop-type-constructor': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -60,6 +61,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 18e5e8c7..dc730364 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -16,6 +16,7 @@ This rule enforces that a `props` statement contains type definition.
 In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
 
 <eslint-code-block :rules="{'vue/require-prop-types': ['error']}">
+
 ```vue
 <script>
 /* ✓ GOOD */
@@ -53,6 +54,7 @@ Vue.component('baz', {
 })
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index c8d5f20e..6c436bb6 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -14,6 +14,7 @@ description: enforce render function to always return value
 This rule aims to enforce render function to always return value
 
 <eslint-code-block :rules="{'vue/require-render-return': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -24,9 +25,11 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/require-render-return': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -39,6 +42,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index a88bf94b..2feff997 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -14,6 +14,7 @@ description: require `v-bind:key` with `v-for` directives
 This rule reports the elements which have `v-for` and do not have `v-bind:key` with exception to custom components.
 
 <eslint-code-block :rules="{'vue/require-v-for-key': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -25,6 +26,7 @@ This rule reports the elements which have `v-for` and do not have `v-bind:key` w
   <div v-for="todo in todos"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index 21ca812f..ff9d75e8 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -14,6 +14,7 @@ description: enforce props default values to be valid
 This rule checks whether the default value of each prop is valid for the given type. It should report an error when default value for type `Array` or `Object` is not returned using function.
 
 <eslint-code-block :rules="{'vue/require-valid-default-prop': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -66,6 +67,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index e05eb57e..6e156a70 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -14,6 +14,7 @@ description: enforce that a return statement is present in computed property
 This rule enforces that a `return` statement is present in `computed` properties.
 
 <eslint-code-block :rules="{'vue/return-in-computed-property': ['error']}">
+
 ```vue
 <script>
 export default {
@@ -40,6 +41,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -58,6 +60,7 @@ This rule has an object option:
 ### `treatUndefinedAsUnspecified: false`
 
 <eslint-code-block :rules="{'vue/return-in-computed-property': ['error', { treatUndefinedAsUnspecified: false }]}">
+
 ```vue
 <script>
 export default {
@@ -84,6 +87,7 @@ export default {
 }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 450f4d72..59934fae 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -14,6 +14,7 @@ description: enforce consistent indentation in `<script>`
 This rule is similar to core [indent](https://eslint.org/docs/rules/indent) rule, but it has an option for inside of `<script>` tag.
 
 <eslint-code-block fix :rules="{'vue/script-indent': ['error']}">
+
 ```vue
 <script>
 let a = {
@@ -38,6 +39,7 @@ const d = {
       }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -81,6 +83,7 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
 
 ### `2, "baseIndent": 1`
 <eslint-code-block fix :rules="{'vue/script-indent': ['error', 2, { 'baseIndent': 1 }]}">
+
 ```vue
 <script>
   let a = {
@@ -105,6 +108,7 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
         }
 </script>
 ```
+
 </eslint-code-block>
 
 ## :couple: Related rules
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index 560e0e16..92f5f90d 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -16,6 +16,7 @@ This rule enforces a line break before and after the contents of a singleline el
 
 
 <eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -44,6 +45,7 @@ This rule enforces a line break before and after the contents of a singleline el
   <div attr><!-- comment --></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -69,6 +71,7 @@ This rule enforces a line break before and after the contents of a singleline el
 ### `"ignoreWhenNoAttributes": true`
 
 <eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': true}]}">
+
 ```vue
 <template>
   <!-- ✗ BAD -->
@@ -79,11 +82,13 @@ This rule enforces a line break before and after the contents of a singleline el
   <div attr><!-- comment --></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ### `"ignoreWhenNoAttributes": false`
 
 <eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': false}]}">
+
 ```vue
 <template>
   <!-- ✗ BAD -->
@@ -94,6 +99,7 @@ This rule enforces a line break before and after the contents of a singleline el
   <div><!-- comment --></div>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index f3fb0732..fdf821b6 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -14,6 +14,7 @@ description: disallow usage of `this` in template
 This rule aims at preventing usage of `this` in Vue templates.
 
 <eslint-code-block :rules="{'vue/this-in-template': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -27,6 +28,7 @@ This rule aims at preventing usage of `this` in Vue templates.
   </a>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -42,6 +44,7 @@ This rule aims at preventing usage of `this` in Vue templates.
 ### `"always"`
 
 <eslint-code-block :rules="{'vue/this-in-template': ['error', 'always']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -55,6 +58,7 @@ This rule aims at preventing usage of `this` in Vue templates.
   </a>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :mag: Implementation
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index fc0c3303..95be3bb0 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -14,6 +14,7 @@ description: enforce usage of `exact` modifier on `v-on`
 This rule enforce usage of `exact` modifier on `v-on` when there is another `v-on` with modifier.
 
 <eslint-code-block :rules="{'vue/use-v-on-exact': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -24,6 +25,7 @@ This rule enforce usage of `exact` modifier on `v-on` when there is another `v-o
   <button v-on:click="foo" v-on:click.ctrl="foo"></button>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 788dc567..515b9a25 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -15,6 +15,7 @@ description: enforce `v-bind` directive style
 This rule enforces `v-bind` directive style which you should use shorthand or long form.
 
 <eslint-code-block fix :rules="{'vue/v-bind-style': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -24,6 +25,7 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
   <div v-bind:foo="bar"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -41,6 +43,7 @@ Default is set to `shorthand`.
 ### `"longform"`
 
 <eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'longform']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -50,6 +53,7 @@ Default is set to `shorthand`.
   <div :foo="bar"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 6c7caf96..bdb70948 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -15,6 +15,7 @@ description: enforce `v-on` directive style
 This rule enforces `v-on` directive style which you should use shorthand or long form.
 
 <eslint-code-block fix :rules="{'vue/v-on-style': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -24,6 +25,7 @@ This rule enforces `v-on` directive style which you should use shorthand or long
   <div v-on:click="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
@@ -41,6 +43,7 @@ Default is set to `shorthand`.
 ### `"longform"`
 
 <eslint-code-block fix :rules="{'vue/v-on-style': ['error', 'longform']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -50,6 +53,7 @@ Default is set to `shorthand`.
   <div @click="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :books: Further reading
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 4878c8ea..777a674d 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -16,20 +16,25 @@ This rule checks whether every template root is valid.
 This rule reports the template root in the following cases:
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- There is no root element -->
 <template></template>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- The root is text -->
 <template>Lorem ipsum</template>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- There are multiple root elements -->
 <template>
@@ -37,24 +42,29 @@ This rule reports the template root in the following cases:
   <div>hello</div>
 </template>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- The root element has `v-for` directives -->
 <template>
   <div v-for="item in items"/>
 </template>
 ```
+
 </eslint-code-block>
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+
 ```vue
 <!-- The root element is `<template>` or `<slot>` -->
 <template>
   <slot />
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index 8078cd7f..30d096e4 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -21,6 +21,7 @@ This rule reports `v-bind` directives in the following cases:
 This rule does not report `v-bind` directives which do not have their argument (E.g. `<div v-bind="aaa"></div>`) because it's valid if the attribute value is an object.
 
 <eslint-code-block :rules="{'vue/valid-v-bind': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -35,6 +36,7 @@ This rule does not report `v-bind` directives which do not have their argument (
   <div v-bind:aaa.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 64aabba6..624140b0 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -20,6 +20,7 @@ This rule reports `v-cloak` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-cloak="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-cloak': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-cloak` directives in the following cases:
   <div v-cloak="ccc"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index dfe7d99d..c644929f 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -22,6 +22,7 @@ This rule reports `v-else-if` directives in the following cases:
 - The directive is on the elements which have `v-if`/`v-else` directives. E.g. `<div v-if="foo" v-else-if="bar"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-else-if': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -34,6 +35,7 @@ This rule reports `v-else-if` directives in the following cases:
   <div v-else-if.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 7092b322..c632ca1e 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -22,6 +22,7 @@ This rule reports `v-else` directives in the following cases:
 - The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. `<div v-if="foo" v-else></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-else': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -34,6 +35,7 @@ This rule reports `v-else` directives in the following cases:
   <div v-else.bbb/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 9d4a5c78..619434ec 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -24,6 +24,7 @@ This rule reports `v-for` directives in the following cases:
 If the element which has the directive is a reserved element, this rule does not report it even if the element does not have `v-bind:key` directive because it's not fatal error. [require-v-for-key] rule reports it.
 
 <eslint-code-block :rules="{'vue/valid-v-for': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -53,6 +54,7 @@ If the element which has the directive is a reserved element, this rule does not
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index 37125ab1..0de9a9cb 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -20,6 +20,7 @@ This rule reports `v-html` directives in the following cases:
 - The directive does not have that attribute value. E.g. `<div v-html></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-html': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-html` directives in the following cases:
   <div v-html.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 023de85f..0729ab70 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -21,6 +21,7 @@ This rule reports `v-if` directives in the following cases:
 - The directive is on the elements which have `v-else`/`v-else-if` directives. E.g. `<div v-else v-if="foo"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-if': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -42,6 +43,7 @@ This rule reports `v-if` directives in the following cases:
   />
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 7d59a158..0aa8a753 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -24,6 +24,7 @@ This rule reports `v-model` directives in the following cases:
 - The directive's reference is iteration variables. E.g. `<div v-for="x in list"><input type="file" v-model="x"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-model': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -46,6 +47,7 @@ This rule reports `v-model` directives in the following cases:
   </div>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index e9eaa5a8..1c77664f 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -20,6 +20,7 @@ This rule reports `v-on` directives in the following cases:
 - The directive does not have that attribute value and any verb modifiers. E.g. `<div v-on:click></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-on': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -37,6 +38,7 @@ This rule reports `v-on` directives in the following cases:
   <div @click/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
@@ -60,12 +62,14 @@ This rule has an object option:
 ### `"modifiers": ["foo"]`
 
 <eslint-code-block :rules="{'vue/valid-v-on': ['error', { modifiers: ['foo']}]}">
+
 ```vue
 <template>
   <div @click.foo="foo"/>
   <div v-on:click.foo="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :couple: Related rules
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index fbeeb09e..db786faf 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -20,6 +20,7 @@ This rule reports `v-once` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-once="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-once': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-once` directives in the following cases:
   <div v-once="ccc"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index 75a21c89..82c366f7 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -20,6 +20,7 @@ This rule reports `v-pre` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-pre="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-pre': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-pre` directives in the following cases:
   <div v-pre="ccc"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index fe4d0909..ce962c36 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -20,6 +20,7 @@ This rule reports `v-show` directives in the following cases:
 - The directive does not have that attribute value. E.g. `<div v-show></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-show': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-show` directives in the following cases:
   <div v-show.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index 759677c0..5c2d9901 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -20,6 +20,7 @@ This rule reports `v-text` directives in the following cases:
 - The directive does not have that attribute value. E.g. `<div v-text></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-text': ['error']}">
+
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -31,6 +32,7 @@ This rule reports `v-text` directives in the following cases:
   <div v-text.bbb="foo"/>
 </template>
 ```
+
 </eslint-code-block>
 
 ::: warning Note
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index bf1fb7d1..ad0033a1 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -150,7 +150,7 @@ If you use `Vetur` plugin, set `"vetur.validation.template": false` to avoid def
 
 Use [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint) extension that SublimeLinter provides for eslint.
 
-You have to open command-palette via `cmd/ctrl+shift+p` and type `Preferences: SublimeLinter Settings`, paste to the config on the right side:
+You have to open command-palette via `Cmd/Ctrl+Shift+P` and type `Preferences: SublimeLinter Settings`, paste to the config on the right side:
 
 ```json
 {
@@ -168,7 +168,7 @@ You need to go into `Settings -> Packages -> linter-eslint`, under the option "L
 
 #### IntelliJ IDEA / JetBrains WebStorm
 
-In the **Settings/Preferences** dialog (`Ctrl+Alt+S`), choose JavaScript under **Languages and Frameworks** and then choose **ESLint** under **Code Quality Tools**.
+In the **Settings/Preferences** dialog (`Cmd+,`/`Ctrl+Alt+S`), choose JavaScript under **Languages and Frameworks** and then choose **ESLint** under **Code Quality Tools**.
 On the **ESLint page** that opens, select the *Enable* checkbox.
 
 If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose **Apply ESLint Code Style Rules** on the context menu.
diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index c48ba50c..05630b19 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -23,7 +23,7 @@ module.exports = {
     type: 'suggestion',
     docs: {
       description: 'enforce specific casing for the component naming style in template',
-      category: 'strongly-recommended',
+      category: undefined,
       url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0/docs/rules/component-name-in-template-casing.md'
     },
     fixable: 'code',
diff --git a/lib/rules/no-multi-spaces.js b/lib/rules/no-multi-spaces.js
index 22a7a819..df2e42b5 100644
--- a/lib/rules/no-multi-spaces.js
+++ b/lib/rules/no-multi-spaces.js
@@ -46,7 +46,7 @@ module.exports = {
         if (context.parserServices.getTemplateBodyTokenStore == null) {
           context.report({
             loc: { line: 1, column: 0 },
-            message: 'Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error.'
+            message: 'Use the latest vue-eslint-parser. See also https://vuejs.github.io/eslint-plugin-vue/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error.'
           })
           return
         }
diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js
index cc8b4874..b9992daf 100644
--- a/lib/rules/order-in-components.js
+++ b/lib/rules/order-in-components.js
@@ -168,7 +168,7 @@ module.exports = {
         const propertiesAbove = properties.slice(0, i)
         const unorderedProperties = propertiesAbove
           .filter(p => orderMap.get(p.name) > orderMap.get(property.name))
-          .sort((p1, p2) => orderMap.get(p1.name) > orderMap.get(p2.name))
+          .sort((p1, p2) => orderMap.get(p1.name) > orderMap.get(p2.name) ? 1 : -1)
 
         const firstUnorderedProperty = unorderedProperties[0]
 
diff --git a/lib/utils/indent-common.js b/lib/utils/indent-common.js
index c86460da..28e68b0a 100644
--- a/lib/utils/indent-common.js
+++ b/lib/utils/indent-common.js
@@ -895,7 +895,7 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
       if (!PREFORMATTED_ELEMENT_NAMES.includes(node.name)) {
         const isTopLevel = node.parent.type !== 'VElement'
         const offset = isTopLevel ? options.baseIndent : 1
-        processNodeList(node.children.filter(isNotEmptyTextNode), node.startTag, node.endTag, offset)
+        processNodeList(node.children.filter(isNotEmptyTextNode), node.startTag, node.endTag, offset, false)
       } else {
         const startTagToken = tokenStore.getFirstToken(node)
         const endTagToken = node.endTag && tokenStore.getFirstToken(node.endTag)
@@ -991,7 +991,7 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
       const firstTokenInfo = offsets.get(tokenStore.getFirstToken(node))
 
       for (const token of tokens) {
-        offsets.set(token, firstTokenInfo)
+        offsets.set(token, Object.assign({}, firstTokenInfo))
       }
     },
 
diff --git a/lib/utils/index.js b/lib/utils/index.js
index feee8cc1..009bbae8 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -34,7 +34,7 @@ module.exports = {
     if (context.parserServices.defineTemplateBodyVisitor == null) {
       context.report({
         loc: { line: 1, column: 0 },
-        message: 'Use the latest vue-eslint-parser. See also https://github.com/vuejs/eslint-plugin-vue#what-is-the-use-the-latest-vue-eslint-parser-error'
+        message: 'Use the latest vue-eslint-parser. See also https://vuejs.github.io/eslint-plugin-vue/user-guide/#what-is-the-use-the-latest-vue-eslint-parser-error'
       })
       return {}
     }
diff --git a/package.json b/package.json
index f00a94c0..09bbdf61 100644
--- a/package.json
+++ b/package.json
@@ -19,7 +19,7 @@
   "files": [
     "lib"
   ],
-  "homepage": "https://github.com/vuejs/eslint-plugin-vue#readme",
+  "homepage": "https://vuejs.github.io/eslint-plugin-vue/",
   "keywords": [
     "eslint",
     "eslint-plugin",
diff --git a/tools/update-docs.js b/tools/update-docs.js
index eecebec6..78aac8c1 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -117,6 +117,19 @@ class DocFile {
     return this
   }
 
+  adjustCodeBlocks () {
+    // Adjust the necessary blank lines before and after the code block so that GitHub can recognize `.md`.
+    this.content = this.content.replace(
+      /(<eslint-code-block([\s\S]*?)>)\n+```/gm,
+      '$1\n\n```'
+    )
+    this.content = this.content.replace(
+      /```\n+<\/eslint-code-block>/gm,
+      '```\n\n</eslint-code-block>'
+    )
+    return this
+  }
+
   updateFooter () {
     const { name } = this.rule
     const footerPattern = /## :mag: Implementation.+$/s
@@ -142,5 +155,6 @@ for (const rule of rules) {
     .updateFooter()
     .updateCodeBlocks()
     .updateFileIntro()
+    .adjustCodeBlocks()
     .write()
 }


Test patch:
diff --git a/tests/fixtures/html-indent/issue729.vue b/tests/fixtures/html-indent/issue729.vue
new file mode 100644
index 00000000..d9d39660
--- /dev/null
+++ b/tests/fixtures/html-indent/issue729.vue
@@ -0,0 +1,29 @@
+<!--{}-->
+<template>
+  <div>
+    <div>text
+      <a/>
+    </div>
+    <div>text
+      text
+      <a/>
+    </div>
+    <div>text
+      <!-- comment -->
+      <a/>
+    </div>
+    <div>text
+      <!-- comment -->
+    </div>
+    <div><a/>
+      <a/>
+    </div>
+    <div><a/>
+      <!-- comment -->
+      <a/>
+    </div>
+    <div><a/>
+      <a/>
+    </div>
+  </div>
+</template>