update html-indent

Author: mysticatea

docs/rules/html-indent.md

@@ -10,28 +10,13 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 - This rule checks all tags, also all expressions in directives and mustaches.
 - In the expressions, this rule supports ECMAScript 2017 syntaxes. It ignores unknown AST nodes, but it might be confused by non-standard syntaxes.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<template>
- <div class="foo">
-   Hello.
-    </div>
-</template>
+<eslint-code-block :rules="{'vue/html-indent': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
 <template>
+  <!-- ✓ GOOD -->
   <div class="foo">
     Hello.
   </div>
-</template>
-```
-
-```html
-<template>
   <div class="foo">
     Hello.
   </div>
@@ -56,8 +41,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
       displayMessage
     }}
   </div>
+
+  <!-- ✗ BAD -->
+ <div class="foo">
+   Hello.
+    </div>
 </template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -78,10 +69,12 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 - `alignAttributesVertically` (`boolean`) ... Condition for whether attributes should be vertically aligned to the first attribute in multiline case or not. Default is `true`
 - `ignores` (`string[]`) ... The selector to ignore nodes. The AST spec is [here](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md). You can use [esquery](https://github.com/estools/esquery#readme) to select nodes. Default is an empty array.
 
-:+1: Examples of **correct** code for `{attribute: 1, closeBracket: 1}`:
+### `2, {"attribute": 1, "closeBracket": 1}`
 
-```html
+<eslint-code-block :rules="{'vue/html-indent': ['error', 2, {attribute: 1, closeBracket: 1}]}">
+```
 <template>
+  <!-- ✓ GOOD -->
   <div
     id="a"
     class="b"
@@ -94,11 +87,14 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   </div>
 </template>
 ```
+</eslint-code-block>
 
-:+1: Examples of **correct** code for `{attribute: 2, closeBracket: 1}`:
+### `2, {"attribute": 2, "closeBracket": 1}`
 
-```html
+<eslint-code-block :rules="{'vue/html-indent': ['error', 2, {attribute: 2, closeBracket: 1}]}">
+```
 <template>
+  <!-- ✓ GOOD -->
   <div
       id="a"
       class="b"
@@ -111,39 +107,41 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   </div>
 </template>
 ```
+</eslint-code-block>
 
-:+1: Examples of **correct** code for `{ignores: ["VAttribute"]}`:
+### `2, {"ignores": ["VAttribute"]}`
 
-```html
+<eslint-code-block :rules="{'vue/html-indent': ['error', 2, {ignores: ['VAttribute']}]}">
+```
 <template>
+  <!-- ✓ GOOD -->
   <div
   id=""
     class=""
   />
 </template>
 ```
+</eslint-code-block>
 
-:+1: Examples of **correct** code for `{alignAttributesVertically: true}`:
+### `2, {"alignAttributesVertically": false}`
 
-```html
-<template>
-  <div id=""
-       class=""
-       some-attr=""
-  />
-</template>
+<eslint-code-block :rules="{'vue/html-indent': ['error', 2, {alignAttributesVertically: false}]}">
 ```
-
-:+1: Examples of **correct** code for `{alignAttributesVertically: false}`:
-
-```html
 <template>
+  <!-- ✓ GOOD -->
   <div id=""
     class=""
     some-attr=""
   />
+
+  <!-- ✗ BAD -->
+  <div id=""
+       class=""
+       some-attr=""
+  />
 </template>
 ```
+</eslint-code-block>
 
 ## :mag: Implementation