update component-name-in-template-casing

Author: mysticatea

docs/rules/component-name-in-template-casing.md

@@ -6,68 +6,78 @@ Define a style for the component name in template casing for consistency purpose
 
 ## :book: Rule Details
 
-:+1: Examples of **correct** code for `PascalCase`:
+This rule aims to warn the tag names other than the configured casing in Vue.js template.
 
-```html
-<template>
-  <TheComponent />
-</template>
+## :wrench: Options
+
+```json
+{
+  "vue/component-name-in-template-casing": [
+    "error",
+    "PascalCase" | "kebab-case",
+    { "ignores": [] }
+  ]
+}
 ```
 
-:-1: Examples of **incorrect** code for `PascalCase`:
+- `"PascalCase"` (default) ... enforce tag names to pascal case. E.g. `<CoolComponent>`. This is consistent with the JSX practice.
+- `"kebab-case"` ... enforce tag names to kebab case: E.g. `<cool-component>`. This is consistent with the HTML practice which is case-insensitive originally.
+- `ignores` (`string[]`) ... The element names to ignore. Sets the element name to allow. For example, a custom element or a non-Vue component.
 
-```html
+### `"PascalCase"`
+
+<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error']}">
+```
 <template>
+  <!-- ✓ GOOD -->
+  <TheComponent />
+  
+  <!-- ✗ BAD -->
   <the-component />
   <theComponent />
   <The-component />
 </template>
 ```
+</eslint-code-block>
 
-:+1: Examples of **correct** code for `kebab-case`:
+### `"kebab-case"`
 
-```html
+<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error', 'kebab-case']}">
+```
 <template>
+  <!-- ✓ GOOD -->
   <the-component />
-</template>
-```
 
-:-1: Examples of **incorrect** code for `kebab-case`:
-
-```html
-<template>
+  <!-- ✗ BAD -->
   <TheComponent />
   <theComponent />
   <Thecomponent />
   <The-component />
 </template>
 ```
+</eslint-code-block>
 
-## :wrench: Options
 
-Default casing is set to `PascalCase`.
+### `"PascalCase", { ignores: ["custom-element"] }`
 
-```json
-  "vue/component-name-in-template-casing": ["error",
-    "PascalCase|kebab-case",
-    {
-      "ignores": []
-    }
-  ]
+<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {ignores: ['custom-element']}]}">
 ```
-
-- `ignores` (`string[]`) ... The element name to ignore. Sets the element name to allow. For example, a custom element or a non-Vue component.
-
-
-:+1: Examples of **correct** code for `{ignores: ["custom-element"]}`:
-
-```html
 <template>
-  <custom-element></custom-element>
+  <!-- ✓ GOOD -->
   <TheComponent/>
+  <custom-element></custom-element>
+  
+  <!-- ✗ BAD -->
+  <magic-element></magic-element>
 </template>
 ```
+</eslint-code-block>
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Component name casing in templates](https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/component-name-in-template-casing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/component-name-in-template-casing.js)