update html-closing-bracket-spacing

Author: mysticatea

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

@@ -3,24 +3,43 @@
 - :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.
+## :book: Rule Details
 
-```html
-<div class="foo"> or <div class="foo" >
-<div class="foo"/> or <div class="foo" />
-```
+This rule aims to enforce consistent spacing style before closing brackets `>` of tags.
 
-## Rule Details
+<eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error']}">
+```
+<template>
+  <!-- ✓ GOOD -->
+  <div>
+  <div foo>
+  <div foo="bar">
+  </div>
+  <div />
+  <div foo />
+  <div foo="bar" />
+
+  <!-- ✗ BAD -->
+  <div >
+  <div foo >
+  <div foo="bar" >
+  </div >
+  <div/>
+  <div foo/>
+  <div foo="bar"/>
+</template>
+```
+</eslint-code-block>
 
-This rule has options.
+## :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 +53,24 @@ 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" -->
+### `{ "startTag": "always", "endTag": "always", "selfClosingTag": "always" }`
 
-<div>
-<div foo>
-<div foo="bar">
-</div>
-<div />
-<div foo />
-<div foo="bar" />
+<eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error', {startTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}">
 ```
-
-```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" />
+<template>
+  <!-- ✓ GOOD -->
+  <div >
+  <div foo >
+  <div foo="bar" >
+  </div >
+  <div />
+  <div foo />
+  <div foo="bar" />
+</template>
 ```
+</eslint-code-block>
 
-# Related rules
+## :bookmark: Related rules
 
 - [vue/no-multi-spaces](./no-multi-spaces.md)
 - [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)