update html-closing-bracket-spacing rule

Author: mysticatea

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

@@ -3,24 +3,41 @@
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
-This rule enforces consistent spacing style before closing brackets `>` of tags.
-
-```html
-<div class="foo"> or <div class="foo" >
-<div class="foo"/> or <div class="foo" />
-```
-
-## Rule Details
-
-This rule has options.
+## :book: Rule Details
+
+This rule aims to enforce consistent spacing style before closing brackets `>` of tags.
+
+<eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error']}" code="
+&lt;template&gt;
+  &lt;!-- ✓ GOOD --&gt;
+  &lt;div&gt;
+  &lt;div foo&gt;
+  &lt;div foo=&quot;bar&quot;&gt;
+  &lt;/div&gt;
+  &lt;div /&gt;
+  &lt;div foo /&gt;
+  &lt;div foo=&quot;bar&quot; /&gt;
+
+  &lt;!-- ✗ BAD --&gt;
+  &lt;div &gt;
+  &lt;div foo &gt;
+  &lt;div foo=&quot;bar&quot; &gt;
+  &lt;/div &gt;
+  &lt;div/&gt;
+  &lt;div foo/&gt;
+  &lt;div foo=&quot;bar&quot;/&gt;
+&lt;/template&gt;
+" />
+
+## :wrench: Options
 
 ```json
 {
-    "vue/html-closing-bracket-spacing": ["error", {
-        "startTag": "always" | "never",
-        "endTag": "always" | "never",
-        "selfClosingTag": "always" | "never"
-    }]
+  "vue/html-closing-bracket-spacing": ["error", {
+    "startTag": "always" | "never",
+    "endTag": "always" | "never",
+    "selfClosingTag": "always" | "never"
+  }]
 }
 ```
 
@@ -34,51 +51,22 @@ This rule has options.
     - `"always"` ... requires one or more spaces.
     - `"never"` ... disallows spaces.
 
-Examples of **incorrect** code for this rule:
-
-```html
-<!--eslint html-closing-bracket-spacing: "error" -->
-
-<div >
-<div foo >
-<div foo="bar" >
-</div >
-<div/>
-<div foo/>
-<div foo="bar"/>
-```
-
-Examples of **correct** code for this rule:
-
-```html
-<!--eslint html-closing-bracket-spacing: "error" -->
-
-<div>
-<div foo>
-<div foo="bar">
-</div>
-<div />
-<div foo />
-<div foo="bar" />
-```
-
-```html
-<!--eslint html-closing-bracket-spacing: ["error", {
-    "startTag": "always",
-    "endTag": "always",
-    "selfClosingTag": "always"
-}] -->
-
-<div >
-<div foo >
-<div foo="bar" >
-</div >
-<div />
-<div foo />
-<div foo="bar" />
-```
-
-# Related rules
+### `{ "startTag": "always", "endTag": "always", "selfClosingTag": "always" }`
+
+<eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error', {strtTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}" code="
+&lt;template&gt;
+  &lt;!-- ✓ GOOD --&gt;
+  &lt;div &gt;
+  &lt;div foo &gt;
+  &lt;div foo=&quot;bar&quot; &gt;
+  &lt;/div &gt;
+  &lt;div /&gt;
+  &lt;div foo /&gt;
+  &lt;div foo=&quot;bar&quot; /&gt;
+&lt;/template&gt;
+" />
+
+## :bookmark: Related rules
 
 - [vue/no-multi-spaces](./no-multi-spaces.md)
 - [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)