update documentation examples to match style guide

Author: chrisvfritz

docs/rules/attribute-hyphenation.md

@@ -15,41 +15,25 @@ Default casing is set to `always`
 :+1: Examples of **correct** code`:
 
 ```html
-<template>
-  <foo my-prop="prop">
-    <a onClick="return false"></a>
-  </foo>
-</template>
+<MyComponent my-prop="prop"/>
 ```
 
 :-1: Examples of **incorrect** code`:
 
 ```html
-<template>
-  <foo myProp="prop">
-    <a onClick="return false"></a>
-  </foo>
-</template>
+<MyComponent myProp="prop"/>
 ```
 
 ### `"never"` - Don't use hyphenated name. (It errors on hyphens except `data-` and `aria-`.)
 
 :+1: Examples of **correct** code`:
 
 ```html
-<template>
-  <foo myProp="prop">
-    <a onClick="return false"></a>
-  </foo>
-</template>
+<MyComponent myProp="prop"/>
 ```
 
 :-1: Examples of **incorrect** code`:
 
 ```html
-<template>
-  <foo my-prop="prop">
-    <a onClick="return false"></a>
-  </foo>
-</template>
+<MyComponent my-prop="prop"/>
 ```

docs/rules/html-end-tags.md

@@ -17,30 +17,21 @@ This rule reports the following elements:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div>
-        <p>
-        <p>
-        <input></input>
-        <br></br>
-    </div>
-</template>
+<div>
+<p>
+<p>
+<input></input>
+<br></br>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div></div>
-        <p></p>
-        <p></p>
-        <div />
-        <input>
-        <br>
-    </div>
-</template>
+<div></div>
+<p></p>
+<p></p>
+<input>
+<br>
 ```
 
 ## :wrench: Options

docs/rules/html-quotes.md

@@ -15,43 +15,27 @@ This rule reports the quotes of attributes if it is different to configured quot
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <img src='./logo.png'>
-        <img src=./logo.png>
-    </div>
-</template>
+<img src='./logo.png'>
+<img src=./logo.png>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <img src="./logo.png">
-    </div>
-</template>
+<img src="./logo.png">
 ```
 
 :-1: Examples of **incorrect** code for this rule with `"single"` option:
 
 ```html
-<template>
-    <div>
-        <img src="./logo.png">
-        <img src=./logo.png>
-    </div>
-</template>
+<img src="./logo.png">
+<img src=./logo.png>
 ```
 
 :+1: Examples of **correct** code for this rule with `"single"` option:
 
 ```html
-<template>
-    <div>
-        <img src='./logo.png'>
-    </div>
-</template>
+<img src='./logo.png'>
 ```
 
 ## :wrench: Options

docs/rules/html-self-closing.md

@@ -4,8 +4,8 @@
 
 In Vue.js template, we can use either two styles for elements which don't have their content.
 
-1. `<your-component></your-component>`
-2. `<your-component />` (self-closing)
+1. `<YourComponent></YourComponent>`
+2. `<YourComponent/>` (self-closing)
 
 Self-closing is simple and shorter, but it's not supported in raw HTML.
 This rule helps you to unify the self-closing style.
@@ -16,20 +16,20 @@ This rule has options which specify self-closing style for each context.
 
 ```json
 {
-    "html-self-closing": [2, {
-        "html": {
-            "normal": "never",
-            "void": "never",
-            "component": "always"
-        },
-        "svg": "always",
-        "math": "always"
-    }]
+  "html-self-closing": ["error", {
+    "html": {
+      "void": "never",
+      "normal": "always",
+      "component": "always"
+    },
+    "svg": "always",
+    "math": "always"
+  }]
 }
 ```
 
-- `html.normal` (`"never"` by default) ... The style of well-known HTML elements except void elements.
 - `html.void` (`"never"` by default) ... The style of well-known HTML void elements.
+- `html.normal` (`"always"` by default) ... The style of well-known HTML elements except void elements.
 - `html.component` (`"always"` by default) ... The style of Vue.js custom components.
 - `svg`(`"always"` by default) .... The style of well-known SVG elements.
 - `math`(`"always"` by default) .... The style of well-known MathML elements.
@@ -45,25 +45,18 @@ Every option can be set to one of the following values:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-/*eslint html-self-closing: "error"*/
-
-<template>
-    <div />
-    <img />
-    <your-component></your-component>
-    <svg><path d=""></path></svg>
-</template>
+<div></div>
+<img/>
+<img></img>
+<MyComponent/></MyComponent>
+<svg><path d=""></path></svg>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-/*eslint html-self-closing: "error"*/
-
-<template>
-    <div></div>
-    <img>
-    <your-component />
-    <svg><path d="" /></svg>
-</template>
+<div/>
+<img>
+<MyComponent/>
+<svg><path d=""/></svg>
 ```

docs/rules/jsx-uses-vars.md

@@ -10,12 +10,12 @@ This rule only has an effect when the `no-unused-vars` rule is enabled.
 Without this rule this code triggers warning:
 
 ```js
-import Hello from './Hello';
+import HelloWorld from './HelloWorld';
 
 export default {
   render () {
     return (
-      <Hello msg="world"></Hello>
+      <HelloWorld msg="world"/>
     )
   },
 };

docs/rules/max-attributes-per-line.md

@@ -14,30 +14,33 @@ There is a configurable number of attributes that are acceptable in one-line cas
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<component lorem="1" ipsum="2" dolor="3" sit="4">
-</component>
+<MyComponent lorem="1" ipsum="2"/>
 
-<component
+<MyComponent
+  lorem="1" ipsum="2"
+/>
+
+<MyComponent
   lorem="1" ipsum="2"
   dolor="3"
-  sit="4"
->
-</component>
+/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<component lorem="1" ipsum="2" dolor="3">
-</component>
+<MyComponent lorem="1"/>
+
+<MyComponent
+  lorem="1"
+  ipsum="2"
+/>
 
-<component
+<MyComponent
   lorem="1"
   ipsum="2"
   dolor="3"
-  sit="4"
->
-</component>
+/>
 ```
 
 ### :wrench:  Options
@@ -55,67 +58,67 @@ There is a configurable number of attributes that are acceptable in one-line cas
 ```
 
 #### `allowFirstLine`
+
 For multi-line declarations, defines if allows attributes to be put in the first line. (Default false)
 
 :-1: Example of **incorrect** code for this setting:
+
 ```html
-// [{ "multiline": { "allowFirstLine": false }}]
-<component foo="John" bar="Smith"
-  foobar={5555555}>
-</component>;
+<!-- [{ "multiline": { "allowFirstLine": false }}] -->
+<MyComponent foo="John"
+  bar="Smith"
+/>
 ```
 
 :+1: Example of **correct** code for this setting:
+
 ```html
-// [{ "multiline": { "allowFirstLine": false }}]
-<component
+<!-- [{ "multiline": { "allowFirstLine": false }}] -->
+<MyComponent
   foo="John"
   bar="Smith"
-  foobar={5555555}
-  >
-</component>;
+/>
 ```
 
-
 #### `singleline`
-Number of maximum attributes per line when the opening tag is in a single line. (Default is 3)
+
+Number of maximum attributes per line when the opening tag is in a single line. (Default is 1)
 
 :-1: Example of **incorrect** code for this setting:
 ```html
-// [{"singleline": 2,}]
-<component foo="John" bar="Smith" foobar={5555555}></component>;
+<!-- [{"singleline": 1}] -->
+<MyComponent foo="John" bar="Smith"/>
 ```
 
 :+1: Example of **correct** code for this setting:
 ```html
-// [{"singleline": 3,}]
-<component foo="John" bar="Smith" foobar={5555555}></component>;
+<!-- [{"singleline": 1}] -->
+<MyComponent foo="John"/>
 ```
 
-
 #### `multiline`
+
 Number of maximum attributes per line when a tag is in multiple lines. (Default is 1)
 
 :-1: Example of **incorrect** code for this setting:
+
 ```html
-// [{"multiline": 1}]
-<component foo="John" bar="Smith"
-  foobar={5555555}>
-</component>;
+<!-- [{"multiline": 1}] -->
+<MyComponent
+  foo="John" bar="Smith"
+/>
 ```
 
 :+1: Example of **correct** code for this setting:
+
 ```html
-// [{"multiline": 1}]
-<component
+<!-- [{"multiline": 1}] -->
+<MyComponent
   foo="John"
   bar="Smith"
-  foobar={5555555}
-  >
-</component>;
+/>
 ```
 
 ## When Not To Use It
 
 If you do not want to check the number of attributes declared per line you can disable this rule.
-