From 786289e62843e957b78a8037b4c28ce5a3c0fef9 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Wed, 25 Jul 2018 16:39:13 +0900
Subject: [PATCH 01/99] Docs: add vuepress documentation

---
 .eslintignore                                 |   3 +
 .vscode/settings.json                         |   7 +-
 README.md                                     | 288 +-----------------
 .../components/eslint-code-block.vue          | 114 +++++++
 docs/.vuepress/config.js                      |  45 +++
 docs/README.md                                |  13 +
 docs/developer-guide/README.md                |  48 +++
 docs/rules/README.md                          | 116 +++++++
 docs/rules/attribute-hyphenation.md           |  83 ++---
 docs/user-guide/README.md                     | 179 +++++++++++
 package.json                                  |   9 +-
 ...e-readme.js => update-docs-rules-index.js} |  39 ++-
 12 files changed, 604 insertions(+), 340 deletions(-)
 create mode 100644 docs/.vuepress/components/eslint-code-block.vue
 create mode 100644 docs/.vuepress/config.js
 create mode 100644 docs/README.md
 create mode 100644 docs/developer-guide/README.md
 create mode 100644 docs/rules/README.md
 create mode 100644 docs/user-guide/README.md
 rename tools/{update-readme.js => update-docs-rules-index.js} (71%)

diff --git a/.eslintignore b/.eslintignore
index 9efb24842..20f3203c8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -3,3 +3,6 @@
 /node_modules
 /tests/fixtures
 /tests/integrations/*/node_modules
+
+!.vuepress
+/docs/.vuepress/dist
diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6287f25a9..7bd96f8d9 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,5 +2,10 @@
     "editor.tabSize": 2,
     "eslint.options": {
         "rulePaths": ["eslint-internal-rules"]
-    }
+    },
+    "eslint.validate": [
+        "javascript",
+        "javascriptreact",
+        { "language": "vue", "autoFix": true }
+    ]
 }
diff --git a/README.md b/README.md
index f0798eb06..47b8cdd90 100644
--- a/README.md
+++ b/README.md
@@ -6,275 +6,21 @@
 
 > Official ESLint plugin for Vue.js
 
-## :exclamation: Attention - this is documentation for version `5.x` :exclamation:
+## :book: Documentation
 
-This branch contains `eslint-plugin-vue@next` which is a pre-released `5.0`, but it's not the default version that you get with `npm install eslint-plugin-vue`. In order to install this you need to specify either `"eslint-plugin-vue": "next"` in `package.json` or do `npm install eslint-plugin-vue@next`.
+See https://vuejs.github.io/eslint-plugin-vue/
 
-Please try it and report any issues that you might have encountered.
+> :exclamation: Attention - this is documentation for version `5.x` :exclamation:
+>
+> This branch contains `eslint-plugin-vue@next` which is a pre-released `5.0`, but it's not the default version that you get with `npm install eslint-plugin-vue`. In order to install this you need to specify either `"eslint-plugin-vue": "next"` in `package.json` or do `npm install eslint-plugin-vue@next`.
+>
+> Please try it and report any issues that you might have encountered.
+>
+> If you want to check previous releases [go here](https://github.com/vuejs/eslint-plugin-vue/releases).
 
-If you want to check previous releases [go here](https://github.com/vuejs/eslint-plugin-vue/releases).
+## :anchor: Versioning Policy
 
-## :art: Playground on the Web
-
-You can try this plugin on the Web.
-
-- https://mysticatea.github.io/vue-eslint-demo/
-
-## :grey_exclamation: Requirements
-
-- [ESLint](http://eslint.org/) `^5.0.0`.
-- Node.js `>=6.5.0`
-
-## :cd: Installation
-
-```bash
-npm install --save-dev eslint eslint-plugin-vue@next
-```
-
-## :rocket: Usage
-
-Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
-
-Example **.eslintrc.js**:
-
-```js
-module.exports = {
-  extends: [
-    // add more generic rulesets here, such as:
-    // 'eslint:recommended',
-    'plugin:vue/essential'
-  ],
-  rules: {
-    // override/add rules settings here, such as:
-    // 'vue/no-unused-vars': 'error'
-  }
-}
-```
-
-### Single File Components
-
-ESLint only targets `.js` files by default. You must include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern.
-
-Examples:
-
-```bash
-eslint --ext .js,.vue src
-eslint src/**/*.{js,vue}
-```
-
-### Attention
-
-All component-related rules are being applied to code that passes any of the following checks:
-
-* `Vue.component()` expression
-* `Vue.extend()` expression
-* `Vue.mixin()` expression
-* `export default {}` in `.vue` or `.jsx` file
-
-If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment `// @vue/component` that marks object in the next line as a Vue component in any file, e.g.:
-
-```js
-// @vue/component
-const CustomComponent = {
-  name: 'custom-component',
-  template: '<div></div>'
-}
-```
-```js
-Vue.component('AsyncComponent', (resolve, reject) => {
-  setTimeout(() => {
-    // @vue/component
-    resolve({
-      name: 'async-component',
-      template: '<div></div>'
-    })
-  }, 500)
-})
-```
-
-### `eslint-disable` functionality in `<template>`
-
-You can use `<!-- eslint-disable -->`-like HTML comments in `<template>` of `.vue` files. For example:
-
-```html
-<template>
-  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
-  <div a="1" b="2" c="3" d="4">
-  </div>
-</template>
-```
-
-If you want to disallow `eslint-disable` functionality, please disable [vue/comment-directive](./docs/rules/comment-directive.md) rule.
-
-## :gear: Configs
-
-This plugin provides four predefined configs:
-- `plugin:vue/base` - Settings and rules to enable correct ESLint parsing
-- `plugin:vue/essential` - Above, plus rules to prevent errors or unintended behavior
-- `plugin:vue/strongly-recommended` - Above, plus rules to considerably improve code readability and/or dev experience
-- `plugin:vue/recommended` - Above, plus rules to enforce subjective community defaults to ensure consistency
-
-## :bulb: Rules
-
-Rules are grouped by priority to help you understand their purpose. The `--fix` option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
-
-<!--RULES_TABLE_START-->
-
-### Base Rules (Enabling Correct ESLint Parsing)
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/base"
-}
-```
-
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-|  | [vue/comment-directive](./docs/rules/comment-directive.md) | support comment-directives in `<template>` |
-|  | [vue/jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |
-
-### Priority A: Essential (Error Prevention)
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/essential"
-}
-```
-
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-|  | [vue/no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |
-|  | [vue/no-dupe-keys](./docs/rules/no-dupe-keys.md) | disallow duplication of field names |
-|  | [vue/no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplication of attributes |
-|  | [vue/no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>` |
-|  | [vue/no-reserved-keys](./docs/rules/no-reserved-keys.md) | disallow overwriting reserved keys |
-| :wrench: | [vue/no-shared-component-data](./docs/rules/no-shared-component-data.md) | enforce component's data property to be a function |
-|  | [vue/no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
-|  | [vue/no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `<template>` |
-|  | [vue/no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>` |
-|  | [vue/no-unused-vars](./docs/rules/no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |
-|  | [vue/require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements |
-|  | [vue/require-render-return](./docs/rules/require-render-return.md) | enforce render function to always return value |
-|  | [vue/require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives |
-|  | [vue/require-valid-default-prop](./docs/rules/require-valid-default-prop.md) | enforce props default values to be valid |
-|  | [vue/return-in-computed-property](./docs/rules/return-in-computed-property.md) | enforce that a return statement is present in computed property |
-|  | [vue/valid-template-root](./docs/rules/valid-template-root.md) | enforce valid template root |
-|  | [vue/valid-v-bind](./docs/rules/valid-v-bind.md) | enforce valid `v-bind` directives |
-|  | [vue/valid-v-cloak](./docs/rules/valid-v-cloak.md) | enforce valid `v-cloak` directives |
-|  | [vue/valid-v-else-if](./docs/rules/valid-v-else-if.md) | enforce valid `v-else-if` directives |
-|  | [vue/valid-v-else](./docs/rules/valid-v-else.md) | enforce valid `v-else` directives |
-|  | [vue/valid-v-for](./docs/rules/valid-v-for.md) | enforce valid `v-for` directives |
-|  | [vue/valid-v-html](./docs/rules/valid-v-html.md) | enforce valid `v-html` directives |
-|  | [vue/valid-v-if](./docs/rules/valid-v-if.md) | enforce valid `v-if` directives |
-|  | [vue/valid-v-model](./docs/rules/valid-v-model.md) | enforce valid `v-model` directives |
-|  | [vue/valid-v-on](./docs/rules/valid-v-on.md) | enforce valid `v-on` directives |
-|  | [vue/valid-v-once](./docs/rules/valid-v-once.md) | enforce valid `v-once` directives |
-|  | [vue/valid-v-pre](./docs/rules/valid-v-pre.md) | enforce valid `v-pre` directives |
-|  | [vue/valid-v-show](./docs/rules/valid-v-show.md) | enforce valid `v-show` directives |
-|  | [vue/valid-v-text](./docs/rules/valid-v-text.md) | enforce valid `v-text` directives |
-
-### Priority B: Strongly Recommended (Improving Readability)
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/strongly-recommended"
-}
-```
-
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-| :wrench: | [vue/attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | enforce attribute naming style on custom components in template |
-| :wrench: | [vue/html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
-| :wrench: | [vue/html-indent](./docs/rules/html-indent.md) | enforce consistent indentation in `<template>` |
-| :wrench: | [vue/html-self-closing](./docs/rules/html-self-closing.md) | enforce self-closing style |
-| :wrench: | [vue/max-attributes-per-line](./docs/rules/max-attributes-per-line.md) | enforce the maximum number of attributes per line |
-| :wrench: | [vue/mustache-interpolation-spacing](./docs/rules/mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations |
-| :wrench: | [vue/name-property-casing](./docs/rules/name-property-casing.md) | enforce specific casing for the name property in Vue components |
-| :wrench: | [vue/no-multi-spaces](./docs/rules/no-multi-spaces.md) | disallow multiple spaces |
-|  | [vue/require-default-prop](./docs/rules/require-default-prop.md) | require default value for props |
-|  | [vue/require-prop-types](./docs/rules/require-prop-types.md) | require type definitions in props |
-| :wrench: | [vue/v-bind-style](./docs/rules/v-bind-style.md) | enforce `v-bind` directive style |
-| :wrench: | [vue/v-on-style](./docs/rules/v-on-style.md) | enforce `v-on` directive style |
-
-### Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
-
-Enforce all the rules in this category, as well as all higher priority rules, with:
-
-```json
-{
-  "extends": "plugin:vue/recommended"
-}
-```
-
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-| :wrench: | [vue/attributes-order](./docs/rules/attributes-order.md) | enforce order of attributes |
-| :wrench: | [vue/html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes |
-|  | [vue/no-confusing-v-for-v-if](./docs/rules/no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element |
-| :wrench: | [vue/order-in-components](./docs/rules/order-in-components.md) | enforce order of properties in components |
-|  | [vue/this-in-template](./docs/rules/this-in-template.md) | enforce usage of `this` in template |
-
-### Uncategorized
-
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-| :wrench: | [vue/html-closing-bracket-newline](./docs/rules/html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets |
-| :wrench: | [vue/html-closing-bracket-spacing](./docs/rules/html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets |
-|  | [vue/no-use-v-if-with-v-for](./docs/rules/no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |
-|  | [vue/no-v-html](./docs/rules/no-v-html.md) | disallow use of v-html to prevent XSS attack |
-| :wrench: | [vue/prop-name-casing](./docs/rules/prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |
-| :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
-
-<!--RULES_TABLE_END-->
-
-## :couple: FAQ
-
-### What is the "Use the latest vue-eslint-parser" error?
-
-The most rules of `eslint-plugin-vue` require `vue-eslint-parser` to check `<template>` ASTs.
-
-Make sure you have one of the following settings in your **.eslintrc**:
-
-- `"extends": ["plugin:vue/recommended"]`
-- `"extends": ["plugin:vue/base"]`
-
-If you already use other parser (e.g. `"parser": "babel-eslint"`), please move it into `parserOptions`, so it doesn't collide with the `vue-eslint-parser` used by this plugin's configuration:
-
-```diff
-- "parser": "babel-eslint",
-  "parserOptions": {
-+     "parser": "babel-eslint",
-      "ecmaVersion": 2017,
-      "sourceType": "module"
-  }
-```
-
-The `vue-eslint-parser` uses the parser which is set by `parserOptions.parser` to parse scripts.
-
-### Why doesn't it work on .vue file?
-
-1. Make sure you don't have `eslint-plugin-html` in your config. The `eslint-plugin-html` extracts the content from `<script>` tags, but `eslint-plugin-vue` requires `<script>` tags and `<template>` tags in order to distinguish template and script in single file components.
-
-  ```diff
-    "plugins": [
-      "vue",
-  -   "html"
-    ]
-  ```
-
-2. Make sure your tool is set to lint `.vue` files.
-  - CLI targets only `.js` files by default. You have to specify additional extensions by `--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`.
-  - VSCode targets only JavaScript or HTML files by default. You have to add `"vue"` to the `"eslint.validate"` array in vscode settings. e.g. `"eslint.validate": [ "javascript", "javascriptreact", "vue" ]`
-
-## :anchor: Semantic Versioning Policy
-
-This plugin follows [semantic versioning](http://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
+This plugin is following [Semantic Versioning](http://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
 
 ## :newspaper: Changelog
 
@@ -282,17 +28,9 @@ We're using [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/release
 
 ## :beers: Contribution guide
 
-In order to add a new rule, you should:
-- Create issue on GH with description of proposed rule
-- Generate a new rule using the [official yeoman generator](https://github.com/eslint/generator-eslint)
-- Run `npm start`
-- Write test scenarios & implement logic
-- Describe the rule in the generated `docs` file
-- Make sure all tests are passing
-- Run `npm run update` in order to update readme and recommended configuration
-- Create PR and link created issue in description
+Contributing is welcome!
 
-We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new [issue](https://github.com/vuejs/eslint-plugin-vue/issues), but first please make sure your question does not repeat previous ones.
+See https://vuejs.github.io/eslint-plugin-vue/developer-guide/
 
 ## :lock: License
 
diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
new file mode 100644
index 000000000..7972b6b4b
--- /dev/null
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -0,0 +1,114 @@
+<template>
+    <eslint-editor
+        :linter="linter"
+        :config="config"
+        :code="cookedCode"
+        :style="{ height }"
+        class="eslint-code-block"
+        filename="example.vue"
+        language="html"
+        dark
+        fix
+    />
+</template>
+
+<script>
+// https://github.com/vuejs/vuepress/issues/451
+import EslintEditor from '../../../node_modules/vue-eslint-editor'
+import { rules } from '../../../'
+
+export default {
+  name: 'ESLintCodeBlock',
+  components: { EslintEditor },
+
+  props: {
+    code: {
+      type: String,
+      default: ''
+    },
+    rules: {
+      type: Object,
+      default () {
+        return {}
+      }
+    }
+  },
+
+  data () {
+    return {
+      linter: null
+    }
+  },
+
+  computed: {
+    config () {
+      return {
+        globals: {
+          // ES2015 globals
+          ArrayBuffer: false,
+          DataView: false,
+          Float32Array: false,
+          Float64Array: false,
+          Int16Array: false,
+          Int32Array: false,
+          Int8Array: false,
+          Map: false,
+          Promise: false,
+          Proxy: false,
+          Reflect: false,
+          Set: false,
+          Symbol: false,
+          Uint16Array: false,
+          Uint32Array: false,
+          Uint8Array: false,
+          Uint8ClampedArray: false,
+          WeakMap: false,
+          WeakSet: false,
+          // ES2017 globals
+          Atomics: false,
+          SharedArrayBuffer: false
+        },
+        rules: this.rules,
+        parser: 'vue-eslint-parser',
+        parserOptions: {
+          ecmaVersion: 2019,
+          sourceType: 'module'
+        }
+      }
+    },
+
+    cookedCode () {
+      return `${this.code.trim()}\n`
+    },
+
+    height () {
+      const lines = this.cookedCode.split('\n').length
+      return `${Math.max(120, 20 * (1 + lines))}px`
+    }
+  },
+
+  async mounted () {
+    // Load linter.
+    const [
+      { default: Linter },
+      { parseForESLint }
+    ] = await Promise.all([
+      import('eslint4b/dist/linter'),
+      import('espree').then(() => import('vue-eslint-parser'))
+    ])
+    const linter = (this.linter = new Linter())
+
+    for (const ruleId of Object.keys(rules)) {
+      linter.defineRule(`vue/${ruleId}`, rules[ruleId])
+    }
+    linter.defineParser('vue-eslint-parser', { parseForESLint })
+  }
+}
+</script>
+
+<style>
+.eslint-code-block {
+    width: 100%;
+    margin: 1em 0;
+}
+</style>
diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
new file mode 100644
index 000000000..271618b5f
--- /dev/null
+++ b/docs/.vuepress/config.js
@@ -0,0 +1,45 @@
+/**
+ * @author Toru Nagashima <https://github.com/mysticatea>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const categories = require('../../tools/lib/categories')
+
+module.exports = {
+  base: '/eslint-plugin-vue/',
+  title: 'eslint-plugin-vue',
+  description: 'Official ESLint plugin for Vue.js',
+  serviceWorker: true,
+  evergreen: true,
+
+  themeConfig: {
+    repo: 'vuejs/eslint-plugin-vue',
+    docsRepo: 'vuejs/eslint-plugin-vue',
+    docsDir: 'docs',
+    docsBranch: 'master',
+    editLinks: true,
+    lastUpdated: true,
+    serviceWorker: {
+      updatePopup: true
+    },
+
+    nav: [
+      { text: 'User Guide', link: '/user-guide/' },
+      { text: 'Developer Guide', link: '/developer-guide/' },
+      { text: 'Rules', link: '/rules/' }
+    ],
+
+    sidebar: {
+      '/rules/': [
+        '/rules/',
+        ...categories.map(({ title, rules }) => ({
+          title: title.replace(/ \(.+?\)/, ''),
+          collapsable: false,
+          children: rules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
+        }))
+      ],
+      '/': ['/', '/user-guide/', '/developer-guide/', '/rules/']
+    }
+  }
+}
diff --git a/docs/README.md b/docs/README.md
new file mode 100644
index 000000000..a3e621aea
--- /dev/null
+++ b/docs/README.md
@@ -0,0 +1,13 @@
+# Introduction
+
+Official ESLint plugin for Vue.js.
+
+## 🏁 Goal
+
+This plugin allows us to check the `<template>` and `<script>` of `.vue` files with ESLint.
+
+- Finds syntax errors.
+- Finds the wrong use of [Vue.js Directives](https://vuejs.org/v2/api/#Directives).
+- Finds the violation for [Vue.js Style Guide](https://vuejs.org/v2/style-guide/).
+
+ESLint editor integrations are useful to check your code in real-time.
diff --git a/docs/developer-guide/README.md b/docs/developer-guide/README.md
new file mode 100644
index 000000000..06f2bb083
--- /dev/null
+++ b/docs/developer-guide/README.md
@@ -0,0 +1,48 @@
+# Developer Guide
+
+Contributing is welcome.
+
+## 🐛 Bug reporting
+
+If you think you’ve found a bug in ESLint, please [create a new issue](https://github.com/vuejs/eslint-plugin-vue/issues/new) or a pull request on GitHub.
+
+Please include as much detail as possible to help us properly address your issue. If we need to triage issues and constantly ask people for more detail, that’s time taken away from actually fixing issues. Help us be as efficient as possible by including a lot of detail in your issues.
+
+## ✨ Proposing a new rule or a rule change
+
+In order to add a new rule or a rule change, you should:
+
+- Create issue on GitHub with description of proposed rule
+- Generate a new rule using the [official yeoman generator](https://github.com/eslint/generator-eslint)
+- Run `npm start`
+- Write test scenarios & implement logic
+- Describe the rule in the generated `docs` file
+- Make sure all tests are passing
+- Run `npm run update` in order to update readme and recommended configuration
+- Create PR and link created issue in description
+
+We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new [issue](https://github.com/vuejs/eslint-plugin-vue/issues), but first please make sure your question does not repeat previous ones.
+
+## 🔥 Working with rules
+
+Before you start writing new rule, please read the [official ESLint guide](https://eslint.org/docs/developer-guide/working-with-rules).
+
+Next in order to get an idea how does the AST of the code that you want to check looks like, you can use one of the following applications:
+- [astexplorer.net](http://astexplorer.net/) - best tool to inspect ASTs, but it doesn't support Vue templates yet
+- [ast.js.org](https://ast.js.org/) - not fully featured, but supports Vue templates syntax
+
+Since single file components in Vue are not plain JavaScript, we can't use the default parser, and we had to introduce additional one: `vue-eslint-parser`, that generates enhanced AST with nodes that represent specific parts of the template syntax, as well as what's inside the `<script>` tag.
+
+To know more about certain nodes in produced ASTs, go here:
+- [ESTree docs](https://github.com/estree/estree)
+- [vue-eslint-parser AST docs](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md)
+
+The `vue-eslint-parser` provides few useful parser services, to help traverse the produced AST and access tokens of the template:
+- `context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)`
+- `context.parserServices.getTemplateBodyTokenStore()`
+
+Check out an [example rule](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/mustache-interpolation-spacing.js) to get a better understanding of how these work.
+
+Please be aware that regarding what kind of code examples you'll write in tests, you'll have to accordingly setup the parser in `RuleTester` (you can do it on per test case basis though). [See an example here](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/attribute-hyphenation.js#L19)
+
+If you'll stuck, remember there are plenty of rules you can learn from already, and if you can't find the right solution - don't hesitate to reach out in issues. We're happy to help!
diff --git a/docs/rules/README.md b/docs/rules/README.md
new file mode 100644
index 000000000..9add5e041
--- /dev/null
+++ b/docs/rules/README.md
@@ -0,0 +1,116 @@
+---
+sidebarDepth: 0
+---
+
+# All rules
+
+## Base Rules (Enabling Correct ESLint Parsing)
+
+Enforce all the rules in this category, as well as all higher priority rules, with:
+
+```json
+{
+  "extends": "plugin:vue/base"
+}
+```
+
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/comment-directive](./comment-directive.md) | support comment-directives in `<template>` |  |
+| [vue/jsx-uses-vars](./jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |  |
+
+## Priority A: Essential (Error Prevention)
+
+Enforce all the rules in this category, as well as all higher priority rules, with:
+
+```json
+{
+  "extends": "plugin:vue/essential"
+}
+```
+
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
+| [vue/no-dupe-keys](./no-dupe-keys.md) | disallow duplication of field names |  |
+| [vue/no-duplicate-attributes](./no-duplicate-attributes.md) | disallow duplication of attributes |  |
+| [vue/no-parsing-error](./no-parsing-error.md) | disallow parsing errors in `<template>` |  |
+| [vue/no-reserved-keys](./no-reserved-keys.md) | disallow overwriting reserved keys |  |
+| [vue/no-shared-component-data](./no-shared-component-data.md) | enforce component's data property to be a function | :wrench: |
+| [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
+| [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
+| [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
+| [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
+| [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
+| [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  |
+| [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  |
+| [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  |
+| [vue/return-in-computed-property](./return-in-computed-property.md) | enforce that a return statement is present in computed property |  |
+| [vue/valid-template-root](./valid-template-root.md) | enforce valid template root |  |
+| [vue/valid-v-bind](./valid-v-bind.md) | enforce valid `v-bind` directives |  |
+| [vue/valid-v-cloak](./valid-v-cloak.md) | enforce valid `v-cloak` directives |  |
+| [vue/valid-v-else-if](./valid-v-else-if.md) | enforce valid `v-else-if` directives |  |
+| [vue/valid-v-else](./valid-v-else.md) | enforce valid `v-else` directives |  |
+| [vue/valid-v-for](./valid-v-for.md) | enforce valid `v-for` directives |  |
+| [vue/valid-v-html](./valid-v-html.md) | enforce valid `v-html` directives |  |
+| [vue/valid-v-if](./valid-v-if.md) | enforce valid `v-if` directives |  |
+| [vue/valid-v-model](./valid-v-model.md) | enforce valid `v-model` directives |  |
+| [vue/valid-v-on](./valid-v-on.md) | enforce valid `v-on` directives |  |
+| [vue/valid-v-once](./valid-v-once.md) | enforce valid `v-once` directives |  |
+| [vue/valid-v-pre](./valid-v-pre.md) | enforce valid `v-pre` directives |  |
+| [vue/valid-v-show](./valid-v-show.md) | enforce valid `v-show` directives |  |
+| [vue/valid-v-text](./valid-v-text.md) | enforce valid `v-text` directives |  |
+
+## Priority B: Strongly Recommended (Improving Readability)
+
+Enforce all the rules in this category, as well as all higher priority rules, with:
+
+```json
+{
+  "extends": "plugin:vue/strongly-recommended"
+}
+```
+
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: |
+| [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: |
+| [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: |
+| [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: |
+| [vue/max-attributes-per-line](./max-attributes-per-line.md) | enforce the maximum number of attributes per line | :wrench: |
+| [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: |
+| [vue/name-property-casing](./name-property-casing.md) | enforce specific casing for the name property in Vue components | :wrench: |
+| [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: |
+| [vue/require-default-prop](./require-default-prop.md) | require default value for props |  |
+| [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  |
+| [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: |
+| [vue/v-on-style](./v-on-style.md) | enforce `v-on` directive style | :wrench: |
+
+## Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)
+
+Enforce all the rules in this category, as well as all higher priority rules, with:
+
+```json
+{
+  "extends": "plugin:vue/recommended"
+}
+```
+
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
+| [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
+| [vue/no-confusing-v-for-v-if](./no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element |  |
+| [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
+| [vue/this-in-template](./this-in-template.md) | enforce usage of `this` in template |  |
+
+## Uncategorized
+
+| Rule ID | Description |    |
+|:--------|:------------|:---|
+| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
+| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: |
+| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
+| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
+| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components | :wrench: |
+| [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index fc9435d69..0cca25e02 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -11,44 +11,45 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 'vue/attribute-hyphenation': [2, 'always'|'never', { 'ignore': ['custom-prop'] }]
 ```
 
-### `[2, "always"]` - Use hyphenated name. (It errors on upper case letters.)
-
-:+1: Examples of **correct** code`:
-
-```html
-<MyComponent my-prop="prop"/>
-```
-
-:-1: Examples of **incorrect** code`:
-
-```html
-<MyComponent myProp="prop"/>
-```
-
-### `[2, "never"]` - Don't use hyphenated name. (It errors on hyphens except `data-`, `aria-` and `slot-scope-`.)
-
-:+1: Examples of **correct** code`:
-
-```html
-<MyComponent myProp="prop"/>
-```
-
-:-1: Examples of **incorrect** code`:
-
-```html
-<MyComponent my-prop="prop"/>
-```
-
-### `[2, "never", { 'ignore': ['custom-prop'] }]` - Don't use hyphenated name but allow custom attributes
-
-:+1: Examples of **correct** code`:
-
-```html
-<MyComponent myProp="prop" custom-prop="foo" data-id="1"/>
-```
-
-:-1: Examples of **incorrect** code`:
-
-```html
-<MyComponent my-prop="prop" custom-prop="foo" data-id="1"/>
-```
+### `["error", "always"]` - Use hyphenated name. (It errors on upper case letters.)
+
+<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'always']}" code="
+&lt;template&gt;
+  &lt;!-- ✔ GOOD --&gt;
+  &lt;MyComponent my-prop=&quot;prop&quot; /&gt;
+
+  &lt;!-- ✘ BAD --&gt;
+  &lt;MyComponent myProp=&quot;prop&quot; /&gt;
+&lt;/template&gt;
+" />
+
+### `["error", "never"]` - Don't use hyphenated name. (It errors on hyphens except `data-`, `aria-` and `slot-scope`.)
+
+<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never']}" code="
+&lt;template&gt;
+  &lt;!-- ✔ GOOD --&gt;
+  &lt;MyComponent myProp=&quot;prop&quot; /&gt;
+  &lt;MyComponent data-id=&quot;prop&quot; /&gt;
+  &lt;MyComponent aria-role=&quot;button&quot; /&gt;
+  &lt;MyComponent slot-scope=&quot;prop&quot; /&gt;
+
+  &lt;!-- ✘ BAD --&gt;
+  &lt;MyComponent my-prop=&quot;prop&quot; /&gt;
+&lt;/template&gt;
+" />
+
+### `["error", "never", { "ignore": ["custom-prop"] }]` - Don't use hyphenated name but allow custom attributes
+
+<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never', {'ignore': ['custom-prop']}]}" code="
+&lt;template&gt;
+  &lt;!-- ✔ GOOD --&gt;
+  &lt;MyComponent myProp=&quot;prop&quot; /&gt;
+  &lt;MyComponent custom-prop=&quot;prop&quot; /&gt;
+  &lt;MyComponent data-id=&quot;prop&quot; /&gt;
+  &lt;MyComponent aria-role=&quot;button&quot; /&gt;
+  &lt;MyComponent slot-scope=&quot;prop&quot; /&gt;
+
+  &lt;!-- ✘ BAD --&gt;
+  &lt;MyComponent my-prop=&quot;prop&quot; /&gt;
+&lt;/template&gt;
+" />
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
new file mode 100644
index 000000000..7d89fd641
--- /dev/null
+++ b/docs/user-guide/README.md
@@ -0,0 +1,179 @@
+# User Guide
+
+## 💿 Installation
+
+Use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install.
+
+```bash
+npm install --save-dev eslint eslint-plugin-vue@next
+```
+
+::: tip Requirements
+- ESLint v5.0.0 or later
+- Node.js v6.5.0 or later
+:::
+
+## 📖 Usage
+
+### Configuration
+
+Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
+
+Example **.eslintrc.js**:
+
+```js
+module.exports = {
+  extends: [
+    // add more generic rulesets here, such as:
+    // 'eslint:recommended',
+    'plugin:vue/recommended'
+  ],
+  rules: {
+    // override/add rules settings here, such as:
+    // 'vue/no-unused-vars': 'error'
+  }
+}
+```
+
+See [the rule list](../README.md) to get the `extends` &amp; `rules` that this plugin provides.
+
+#### Use together with custom parsers
+
+If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [typescript-eslint-parser](https://www.npmjs.com/package/typescript-eslint-parser), you have to use `parserOptions.parser` option instead of `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, so this plugin doesn't work if you overwrote `parser` option.
+
+```diff
+- "parser": "babel-eslint",
+  "parserOptions": {
++     "parser": "babel-eslint",
+      "sourceType": "module"
+  }
+```
+
+### Command
+
+You have to include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default.
+
+Examples:
+
+```bash
+eslint --ext .js,.vue src
+eslint "src/**/*.{js,vue}"
+```
+
+### Editor integrations
+
+#### Visual Studio Code
+
+Use [dbaeumer.vscode-eslint](https://marketplace.visualstudio.com/items?itemName=dbaeumer.vscode-eslint) extension that Microsoft provides officially.
+
+You have to configure the `eslint.validate` option of the extension to check `.vue` files because the extension targets only `*.js` or `*.jsx` files by default.
+
+Example **.vscode/settings.json**:
+
+```json
+{
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    { "language": "vue", "autoFix": true }
+  ]
+}
+```
+
+### The code of components
+
+All component-related rules are being applied to code that passes any of the following checks:
+
+* `Vue.component()` expression
+* `Vue.extend()` expression
+* `Vue.mixin()` expression
+* `export default {}` in `.vue` or `.jsx` file
+
+If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment `// @vue/component` that marks object in the next line as a Vue component in any file, e.g.:
+
+```js
+// @vue/component
+const CustomComponent = {
+  name: 'custom-component',
+  template: '<div></div>'
+}
+```
+
+```js
+Vue.component('AsyncComponent', (resolve, reject) => {
+  setTimeout(() => {
+    // @vue/component
+    resolve({
+      name: 'async-component',
+      template: '<div></div>'
+    })
+  }, 500)
+})
+```
+
+### `<!-- eslint-disable -->`
+
+You can use `<!-- eslint-disable -->`-like HTML comments in `<template>` of `.vue` files to disable a certain rule temporarily.
+
+For example:
+
+```html
+<template>
+  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
+  <div a="1" b="2" c="3" d="4">
+  </div>
+</template>
+```
+
+If you want to disallow `eslint-disable` functionality in `<template>`, disable [vue/comment-directive](../rules/comment-directive.md) rule.
+
+## ❓ FAQ
+
+### What is the "Use the latest vue-eslint-parser" error?
+
+The most rules of `eslint-plugin-vue` require `vue-eslint-parser` to check `<template>` ASTs.
+
+Make sure you have one of the following settings in your **.eslintrc**:
+
+- `"extends": ["plugin:vue/recommended"]`
+- `"extends": ["plugin:vue/base"]`
+
+If you already use other parser (e.g. `"parser": "babel-eslint"`), please move it into `parserOptions`, so it doesn't collide with the `vue-eslint-parser` used by this plugin's configuration:
+
+```diff
+- "parser": "babel-eslint",
+  "parserOptions": {
++     "parser": "babel-eslint",
+      "ecmaVersion": 2017,
+      "sourceType": "module"
+  }
+```
+
+See also: "[Use together with custom parsers](#use-together-with-custom-parsers)" section.
+
+### Why doesn't it work on .vue file?
+
+1. Make sure you don't have `eslint-plugin-html` in your config. The `eslint-plugin-html` extracts the content from `<script>` tags, but `eslint-plugin-vue` requires `<script>` tags and `<template>` tags in order to distinguish template and script in single file components.
+
+    ```diff
+      "plugins": [
+        "vue",
+    -   "html"
+      ]
+    ```
+
+2. Make sure your tool is set to lint `.vue` files.
+    - CLI targets only `.js` files by default. You have to specify additional extensions by `--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`.
+    - VSCode targets only JavaScript or HTML files by default. You have to add `"vue"` to the `"eslint.validate"` array in vscode settings. e.g. `"eslint.validate": [ "javascript", "javascriptreact", "vue" ]`
+
+## 🚥 Versioning policy
+
+This plugin is following [Semantic Versioning](https://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
+
+## 📰 Changelog
+
+We are using [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases).
+
+## 🔒 License
+
+See the [LICENSE](https://github.com/vuejs/eslint-plugin-vue/blob/master/LICENSE) file for license rights and limitations (MIT).
diff --git a/package.json b/package.json
index b0934b7d3..3fcbc2725 100644
--- a/package.json
+++ b/package.json
@@ -11,7 +11,9 @@
     "pretest": "npm run lint",
     "preversion": "npm test && npm run update && git add .",
     "version": "npm run lint -- --fix && git add .",
-    "update": "node ./tools/update.js"
+    "update": "node ./tools/update.js",
+    "docs:watch": "vuepress dev docs",
+    "docs:build": "vuepress build docs"
   },
   "files": [
     "lib"
@@ -54,8 +56,11 @@
     "eslint-plugin-eslint-plugin": "^1.4.0",
     "eslint-plugin-html": "^4.0.1",
     "eslint-plugin-vue-libs": "^3.0.0",
+    "eslint4b": "^5.1.0",
     "lodash": "^4.17.4",
     "mocha": "^5.2.0",
-    "nyc": "^12.0.2"
+    "nyc": "^12.0.2",
+    "vue-eslint-editor": "^0.1.0",
+    "vuepress": "github:vuejs/vuepress#9b602f2b6fb824522c8c7dbbba60a3e2abfd76ba"
   }
 }
diff --git a/tools/update-readme.js b/tools/update-docs-rules-index.js
similarity index 71%
rename from tools/update-readme.js
rename to tools/update-docs-rules-index.js
index c8cf4997c..9892a3da7 100644
--- a/tools/update-readme.js
+++ b/tools/update-docs-rules-index.js
@@ -1,14 +1,9 @@
 /**
  * @author Toru Nagashima
- * @copyright 2017 Toru Nagashima. All rights reserved.
  * See LICENSE file in root directory for full license.
  */
 'use strict'
 
-/*
-This script updates the rule tables of `README.md` file from rule's meta data.
-*/
-
 const fs = require('fs')
 const path = require('path')
 const rules = require('./lib/rules')
@@ -20,17 +15,17 @@ const deprecatedRules = rules.filter(rule => rule.meta.deprecated)
 
 function toRuleRow (rule) {
   const mark = `${rule.meta.fixable ? ':wrench:' : ''}${rule.meta.deprecated ? ':warning:' : ''}`
-  const link = `[${rule.ruleId}](./docs/rules/${rule.name}.md)`
+  const link = `[${rule.ruleId}](./${rule.name}.md)`
   const description = rule.meta.docs.description || '(no description)'
 
-  return `| ${mark} | ${link} | ${description} |`
+  return `| ${link} | ${description} | ${mark} |`
 }
 
 function toDeprecatedRuleRow (rule) {
-  const link = `[${rule.ruleId}](./docs/rules/${rule.name}.md)`
+  const link = `[${rule.ruleId}](./${rule.name}.md)`
   const replacedRules = rule.meta.docs.replacedBy || []
   const replacedBy = replacedRules
-    .map(name => `[vue/${name}](./docs/rules/${name}.md)`)
+    .map(name => `[vue/${name}](./${name}.md)`)
     .join(', ')
 
   return `| ${link} | ${replacedBy || '(no replacement)'} |`
@@ -38,7 +33,7 @@ function toDeprecatedRuleRow (rule) {
 
 // -----------------------------------------------------------------------------
 let rulesTableContent = categories.map(category => `
-### ${category.title}
+## ${category.title}
 
 Enforce all the rules in this category, as well as all higher priority rules, with:
 
@@ -48,18 +43,18 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 }
 \`\`\`
 
-|    | Rule ID | Description |
-|:---|:--------|:------------|
+| Rule ID | Description |    |
+|:--------|:------------|:---|
 ${category.rules.map(toRuleRow).join('\n')}
 `).join('')
 
 // -----------------------------------------------------------------------------
 if (uncategorizedRules.length >= 1) {
   rulesTableContent += `
-### Uncategorized
+## Uncategorized
 
-|    | Rule ID | Description |
-|:---|:--------|:------------|
+| Rule ID | Description |    |
+|:--------|:------------|:---|
 ${uncategorizedRules.map(toRuleRow).join('\n')}
 `
 }
@@ -67,7 +62,7 @@ ${uncategorizedRules.map(toRuleRow).join('\n')}
 // -----------------------------------------------------------------------------
 if (deprecatedRules.length >= 1) {
   rulesTableContent += `
-### Deprecated
+## Deprecated
 
 > - :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
 > - :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
@@ -79,11 +74,13 @@ ${deprecatedRules.map(toDeprecatedRuleRow).join('\n')}
 }
 
 // -----------------------------------------------------------------------------
-const readmeFilePath = path.resolve(__dirname, '../README.md')
+const readmeFilePath = path.resolve(__dirname, '../docs/rules/README.md')
 fs.writeFileSync(
   readmeFilePath,
-  fs.readFileSync(readmeFilePath, 'utf8').replace(
-    /<!--RULES_TABLE_START-->[\s\S]*<!--RULES_TABLE_END-->/,
-    `<!--RULES_TABLE_START-->\n${rulesTableContent}\n<!--RULES_TABLE_END-->`
-  )
+  `---
+sidebarDepth: 0
+---
+
+# All rules
+${rulesTableContent}`
 )

From 7d2b646c795516e649da98f9d0e9bd485ea8cee5 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Thu, 2 Aug 2018 11:39:23 +0900
Subject: [PATCH 02/99] small update for rule index

---
 docs/rules/README.md             | 13 +++++++++++++
 tools/update-docs-rules-index.js | 13 +++++++++++++
 2 files changed, 26 insertions(+)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 9add5e041..6dec2e031 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -106,6 +106,19 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 
 ## Uncategorized
 
+No preset enables the rules in this category.
+Please enable each rule if you want.
+
+For example:
+
+```json
+{
+  "rules": {
+    "vue/html-closing-bracket-newline": "error"
+  }
+}
+```
+
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index 9892a3da7..a7c8edf48 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -53,6 +53,19 @@ if (uncategorizedRules.length >= 1) {
   rulesTableContent += `
 ## Uncategorized
 
+No preset enables the rules in this category.
+Please enable each rule if you want.
+
+For example:
+
+\`\`\`json
+{
+  "rules": {
+    "${uncategorizedRules[0].ruleId}": "error"
+  }
+}
+\`\`\`
+
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 ${uncategorizedRules.map(toRuleRow).join('\n')}

From f624ae9824f53555271e3b8208d2e60580b90f22 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Thu, 2 Aug 2018 12:07:56 +0900
Subject: [PATCH 03/99] add links to source code

---
 docs/rules/attribute-hyphenation.md           |   5 +
 docs/rules/attributes-order.md                |   5 +
 docs/rules/comment-directive.md               |   5 +
 docs/rules/html-closing-bracket-newline.md    |   5 +
 docs/rules/html-closing-bracket-spacing.md    |   5 +
 docs/rules/html-end-tags.md                   |   5 +
 docs/rules/html-indent.md                     |   5 +
 docs/rules/html-quotes.md                     |   5 +
 docs/rules/html-self-closing.md               |   5 +
 docs/rules/jsx-uses-vars.md                   |   5 +
 docs/rules/max-attributes-per-line.md         |   5 +
 docs/rules/mustache-interpolation-spacing.md  |   5 +
 docs/rules/name-property-casing.md            |   5 +
 docs/rules/no-async-in-computed-properties.md |   5 +
 docs/rules/no-confusing-v-for-v-if.md         |   5 +
 docs/rules/no-dupe-keys.md                    |   5 +
 docs/rules/no-duplicate-attributes.md         |   5 +
 docs/rules/no-multi-spaces.md                 |   5 +
 docs/rules/no-parsing-error.md                |   5 +
 docs/rules/no-reserved-keys.md                |   5 +
 docs/rules/no-shared-component-data.md        |   5 +
 .../no-side-effects-in-computed-properties.md |   5 +
 docs/rules/no-template-key.md                 |   5 +
 docs/rules/no-textarea-mustache.md            |   5 +
 docs/rules/no-unused-vars.md                  |   5 +
 docs/rules/no-use-v-if-with-v-for.md          |   5 +
 docs/rules/no-v-html.md                       |   5 +
 docs/rules/order-in-components.md             |   5 +
 docs/rules/prop-name-casing.md                |   5 +
 docs/rules/require-component-is.md            |   5 +
 docs/rules/require-default-prop.md            |   5 +
 docs/rules/require-prop-types.md              |   5 +
 docs/rules/require-render-return.md           |   5 +
 docs/rules/require-v-for-key.md               |   5 +
 docs/rules/require-valid-default-prop.md      |   5 +
 docs/rules/return-in-computed-property.md     |   5 +
 docs/rules/script-indent.md                   |   5 +
 docs/rules/this-in-template.md                |   5 +
 docs/rules/v-bind-style.md                    |   5 +
 docs/rules/v-on-style.md                      |   5 +
 docs/rules/valid-template-root.md             |   5 +
 docs/rules/valid-v-bind.md                    |   5 +
 docs/rules/valid-v-cloak.md                   |   5 +
 docs/rules/valid-v-else-if.md                 |   5 +
 docs/rules/valid-v-else.md                    |   5 +
 docs/rules/valid-v-for.md                     |   5 +
 docs/rules/valid-v-html.md                    |   5 +
 docs/rules/valid-v-if.md                      |   5 +
 docs/rules/valid-v-model.md                   |   5 +
 docs/rules/valid-v-on.md                      |   5 +
 docs/rules/valid-v-once.md                    |   5 +
 docs/rules/valid-v-pre.md                     |   5 +
 docs/rules/valid-v-show.md                    |   5 +
 docs/rules/valid-v-text.md                    |   5 +
 tools/update-docs.js                          | 100 +++++++++++++-----
 55 files changed, 342 insertions(+), 28 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 0cca25e02..d7bcb774c 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -53,3 +53,8 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
   &lt;MyComponent my-prop=&quot;prop&quot; /&gt;
 &lt;/template&gt;
 " />
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/attribute-hyphenation.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/attribute-hyphenation.js)
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index e7b9a6209..70197212f 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -122,3 +122,8 @@ Specify custom order of attribute groups
 ## Related links
 
 - [Style guide - Element attribute order](https://vuejs.org/v2/style-guide/#Element-attribute-order-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/attributes-order.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/attributes-order.js)
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index 42a12a860..32e1e792f 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -33,3 +33,8 @@ This rule sends all `eslint-disable`-like comments as errors to the post-process
 ## :books: Further reading
 
 - [Disabling rules with inline comments](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/comment-directive.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/comment-directive.js)
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index 4658611e0..779477c72 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -93,3 +93,8 @@ Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-l
     class="bar"
     >
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-closing-bracket-newline.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-closing-bracket-newline.js)
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index ee3be2837..293f12c67 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -81,3 +81,8 @@ Examples of **correct** code for this rule:
 
 - [vue/no-multi-spaces](./no-multi-spaces.md)
 - [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-closing-bracket-spacing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-closing-bracket-spacing.js)
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index 2832acf6f..a2e663622 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -33,3 +33,8 @@ This rule reports:
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-end-tags.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-end-tags.js)
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index 0b407c955..a5b869be8 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -144,3 +144,8 @@ This rule enforces a consistent indentation style in `<template>`. The default s
   />
 </template>
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-indent.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-indent.js)
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index 376c8ba7b..ab27475f4 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -45,3 +45,8 @@ This rule reports the quotes of attributes if it is different to configured quot
 
 - `"double"` (default) ... requires double quotes.
 - `"single"` ... requires single quotes.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-quotes.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-quotes.js)
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 08312c7c1..5c60ba21b 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -65,3 +65,8 @@ Every option can be set to one of the following values:
 ## Related links
 
 - [Style guide - Self closing components](https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-self-closing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/html-self-closing.js)
diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index 5f02a04bd..f799f689d 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -28,3 +28,8 @@ After turning on, `Hello` is being marked as used and `no-unused-vars` rule does
 ## When Not To Use It
 
 If you are not using JSX or if you do not use the `no-unused-vars` rule then you can disable this rule.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/jsx-uses-vars.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/jsx-uses-vars.js)
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index a1be329d0..2c6291b2a 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -129,3 +129,8 @@ If you do not want to check the number of attributes declared per line you can d
 ## Related links
 
 - [Style guide - Multi attribute elements](https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/max-attributes-per-line.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/max-attributes-per-line.js)
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index 097f1ddaa..e594c8ffd 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -56,3 +56,8 @@ Default spacing is set to `always`
 ```html
 <div>{{text}}</div>
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/mustache-interpolation-spacing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/mustache-interpolation-spacing.js)
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index c8457af82..d096c9294 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -34,3 +34,8 @@ Default casing is set to `PascalCase`.
 ## Related links
 
 - [Style guide - Component name casing in JS/JSX](https://vuejs.org/v2/style-guide/#Component-name-casing-in-JS-JSX-strongly-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/name-property-casing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/name-property-casing.js)
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index 800fcea7f..be86f3a2a 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -58,3 +58,8 @@ Nothing.
 ## Related links
 
 - [vue-async-computed](https://github.com/foxbenjaminfox/vue-async-computed)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-async-in-computed-properties.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-async-in-computed-properties.js)
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 282306a05..fadb3b41b 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -54,3 +54,8 @@ Nothing.
 - [Style guide - Avoid v-if with v-for](https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)
 - [Guide - Conditional / v-if with v-for](https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for)
 - [Guide - List / v-for with v-if](https://vuejs.org/v2/guide/list.html#v-for-with-v-if)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-confusing-v-for-v-if.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-confusing-v-for-v-if.js)
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index aa86d0f58..a718871d1 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -74,3 +74,8 @@ export default {
   }
 }
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-dupe-keys.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-dupe-keys.js)
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 51a377893..7752ac8a2 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -49,3 +49,8 @@ Needs investigation to check.
 
 [`v-bind:class`]: https://vuejs.org/v2/guide/class-and-style.html
 [`v-bind:style`]: https://vuejs.org/v2/guide/class-and-style.html
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-duplicate-attributes.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-duplicate-attributes.js)
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index d6c648c7e..b2e882b55 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -28,3 +28,8 @@ Examples of **correct** code for this rule:
 ### Options
 
 Nothing
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-multi-spaces.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-multi-spaces.js)
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index c5988b793..242bf5301 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -85,3 +85,8 @@ The error codes which have `x-` prefix are original of this rule because errors
 
 - `x-invalid-end-tag` enables the errors about the end tags of elements which have not opened.
 - `x-invalid-namespace` enables the errors about invalid `xmlns` attributes. See also [step 10. of "create an element for a token"](https://html.spec.whatwg.org/multipage/parsing.html#create-an-element-for-the-token).
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-parsing-error.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-parsing-error.js)
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index 86c15cbbb..b9f8e4a69 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -60,3 +60,8 @@ export default {
 ## Related links
 
 - [List of reserved keys](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue-reserved.json)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-reserved-keys.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-reserved-keys.js)
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index e47cbb5e6..7e6033c69 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -56,3 +56,8 @@ Nothing.
 ## Related links
 
 - [API - data](https://vuejs.org/v2/api/#data)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-shared-component-data.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-shared-component-data.js)
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index e8966625f..0f4791e7e 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -33,3 +33,8 @@ computed: {
   }
 }
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-side-effects-in-computed-properties.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-side-effects-in-computed-properties.js)
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index b7da4c4b0..c5d82473c 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -26,3 +26,8 @@ This rule reports the `<template>` elements which have `key` attribute.
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-template-key.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-template-key.js)
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index fee06d01e..54f98b015 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -29,3 +29,8 @@ Nothing.
 ## Related links
 
 - [Guide - Forms / Multiline text](https://vuejs.org/v2/guide/forms.html#Multiline-text)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-textarea-mustache.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-textarea-mustache.js)
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index 34e48ebbb..7b802f139 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -29,3 +29,8 @@ This rule report variable definitions of v-for directives or scope attributes if
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-vars.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-unused-vars.js)
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index e8987af74..600fa5ec3 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -101,3 +101,8 @@ computed: {
 - [Style guide - Avoid v-if with v-for](https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)
 - [Guide - Conditional / v-if with v-for](https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for)
 - [Guide - List / v-for with v-if](https://vuejs.org/v2/guide/list.html#v-for-with-v-if)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-use-v-if-with-v-for.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-use-v-if-with-v-for.js)
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index 84df87342..50c46f5ab 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -35,3 +35,8 @@ If you are certain the content passed `to v-html` is sanitized HTML you can disa
 ## Related links
 
 - [XSS in Vue.js](https://blog.sqreen.io/xss-in-vue-js/)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-v-html.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-v-html.js)
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index 7b326931d..e0aa29329 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -75,3 +75,8 @@ If you want some of properties to be treated equally in order you can group them
 ## Related links
 
 - [Style guide - Component/instance options order](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/order-in-components.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/order-in-components.js)
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index b02473529..f192eaa22 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -39,3 +39,8 @@ Default casing is set to `camelCase`.
 ## Related links
 
 - [Style guide - Prop name casing](https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/prop-name-casing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/prop-name-casing.js)
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index dd9ad27fa..1ff2a361e 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -31,3 +31,8 @@ Nothing.
 ## Related links
 
 - [Guide - Dynamic Components](https://vuejs.org/v2/guide/components.html#Dynamic-Components)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-component-is.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-component-is.js)
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 93fc6b5a9..18fba4b55 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -45,3 +45,8 @@ props: {
 ## Related links
 
 - [Style guide - Prop definitions](https://vuejs.org/v2/style-guide/#Prop-definitions-essential)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-default-prop.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-default-prop.js)
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 568ffc6bc..338ce654b 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -55,3 +55,8 @@ Nothing.
 ## Related links
 
 - [Style guide - Prop definitions](https://vuejs.org/v2/style-guide/#Prop-definitions-essential)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-prop-types.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-prop-types.js)
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index a28826c2a..47158bb42 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -37,3 +37,8 @@ export default {
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-render-return.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-render-return.js)
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index 7a3b02c4d..2b6dec909 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -39,3 +39,8 @@ Nothing.
 
 - [Style guide - Keyed v-for](https://vuejs.org/v2/style-guide/#Keyed-v-for-essential)
 - [Guide - v-for with a Component](https://vuejs.org/v2/guide/list.html#v-for-with-a-Component)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-v-for-key.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-v-for-key.js)
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index 2049534b4..aad55904b 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -63,3 +63,8 @@ Nothing.
 ## Related links
 
 - [Guide - Prop Validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-valid-default-prop.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-valid-default-prop.js)
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 761db13a1..517f23285 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -44,3 +44,8 @@ This rule has an object option:
   }]
 }
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/return-in-computed-property.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/return-in-computed-property.js)
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 1e073899e..c377df6f5 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -83,3 +83,8 @@ const d = {
 
 - [indent](https://eslint.org/docs/rules/indent)
 - [vue/html-indent](./html-indent.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/script-indent.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/script-indent.js)
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index d0603edd2..a5ce6a07f 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -63,3 +63,8 @@ Default is set to `never`.
   {{ text }}
 </a>
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/this-in-template.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/this-in-template.js)
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index b314c34d2..77adff074 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -39,3 +39,8 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
 ## Related links
 
 - [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-bind-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-bind-style.js)
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index ebf2f4f45..9b93ee550 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -39,3 +39,8 @@ This rule enforces `v-on` directive style which you should use shorthand or long
 ## Related links
 
 - [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/v-on-style.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/v-on-style.js)
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 2f4b24ff4..7e9b5f413 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -98,3 +98,8 @@ template: `
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-template-root.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-template-root.js)
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index dfc9091dd..d430a572c 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -40,3 +40,8 @@ Nothing.
 
 
 [no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-bind.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-bind.js)
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 4b7b9a4a1..4927fc093 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -29,3 +29,8 @@ This rule reports `v-cloak` directives in the following cases:
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-cloak.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-cloak.js)
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index a73340085..edc29c9ec 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -45,3 +45,8 @@ Nothing.
 [valid-v-if]:   valid-v-if.md
 [valid-v-else]: valid-v-else.md
 [no-parsing-error]:   no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-else-if.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-else-if.js)
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 5c63b1554..7a0d63887 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -43,3 +43,8 @@ Nothing.
 [valid-v-if]:       valid-v-if.md
 [valid-v-else-if]:  valid-v-else-if.md
 [no-parsing-error]:      no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-else.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-else.js)
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 13f8e9ded..cfb14c284 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -66,3 +66,8 @@ Nothing.
 
 [require-v-for-key]: require-v-for-key.md
 [no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-for.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-for.js)
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index d562b6754..fcd74dc9e 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -38,3 +38,8 @@ Nothing.
 
 
 [no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-html.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-html.js)
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 53c42f426..d036fc8a7 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -53,3 +53,8 @@ Nothing.
 [valid-v-else]:    valid-v-else.md
 [valid-v-else-if]: valid-v-else-if.md
 [no-parsing-error]:      no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-if.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-if.js)
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 2661c6b36..25538933c 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -53,3 +53,8 @@ Nothing.
 
 
 [no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-model.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-model.js)
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index 18580ccc0..0f05d0cbb 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -44,3 +44,8 @@ Nothing.
 
 
 [no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-on.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-on.js)
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index 0c3aefb9b..be3f5f425 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -29,3 +29,8 @@ This rule reports `v-once` directives in the following cases:
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-once.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-once.js)
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index 4b36030cb..693a416ee 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -29,3 +29,8 @@ This rule reports `v-pre` directives in the following cases:
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-pre.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-pre.js)
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index 5742c76b7..3dfd20fa5 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -38,3 +38,8 @@ Nothing.
 
 
 [no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-show.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-show.js)
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index df777712a..5109126ae 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -38,3 +38,8 @@ Nothing.
 
 
 [no-parsing-error]: no-parsing-error.md
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/valid-v-text.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/valid-v-text.js)
diff --git a/tools/update-docs.js b/tools/update-docs.js
index bf7c55119..7ff532fe3 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -24,6 +24,8 @@ const last = require('lodash/last')
 const rules = require('./lib/rules')
 const categories = require('./lib/categories')
 
+const ROOT = path.resolve(__dirname, '../docs/rules')
+
 function formatItems (items) {
   if (items.length <= 2) {
     return items.join(' and ')
@@ -31,39 +33,81 @@ function formatItems (items) {
   return `all of ${items.slice(0, -1).join(', ')} and ${last(items)}`
 }
 
-const ROOT = path.resolve(__dirname, '../docs/rules')
-for (const rule of rules) {
-  const filePath = path.join(ROOT, `${rule.name}.md`)
-  const categoryIndex = categories.findIndex(category => category.categoryId === rule.meta.docs.category)
-  const title = `# ${rule.meta.docs.description} (${rule.ruleId})`
-  const notes = []
-
-  if (categoryIndex >= 0) {
-    const presets = categories.slice(categoryIndex).map(category => `\`"plugin:vue/${category.categoryId}"\``)
-    notes.push(`- :gear: This rule is included in ${formatItems(presets)}.`)
+class DocFile {
+  constructor (rule) {
+    this.rule = rule
+    this.filePath = path.join(ROOT, `${rule.name}.md`)
+    this.content = fs.readFileSync(this.filePath, 'utf8')
+  }
+
+  static read (rule) {
+    return new DocFile(rule)
   }
-  if (rule.meta.deprecated) {
-    if (rule.meta.docs.replacedBy) {
-      const replacedRules = rule.meta.docs.replacedBy.map(name => `[vue/${name}](${name}.md) rule`)
-      notes.push(`- :warning: This rule was **deprecated** and replaced by ${formatItems(replacedRules)}.`)
+
+  write () {
+    fs.writeFileSync(this.filePath, this.content)
+  }
+
+  updateHeader () {
+    const { ruleId, meta } = this.rule
+    const categoryIndex = categories.findIndex(category => category.categoryId === meta.docs.category)
+    const title = `# ${meta.docs.description} (${ruleId})`
+    const notes = []
+
+    if (categoryIndex >= 0) {
+      const presets = categories.slice(categoryIndex).map(category => `\`"plugin:vue/${category.categoryId}"\``)
+      notes.push(`- :gear: This rule is included in ${formatItems(presets)}.`)
+    }
+    if (meta.deprecated) {
+      if (meta.docs.replacedBy) {
+        const replacedRules = meta.docs.replacedBy.map(name => `[vue/${name}](${name}.md) rule`)
+        notes.push(`- :warning: This rule was **deprecated** and replaced by ${formatItems(replacedRules)}.`)
+      } else {
+        notes.push(`- :warning: This rule was **deprecated**.`)
+      }
+    }
+    if (meta.fixable) {
+      notes.push(`- :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.`)
+    }
+
+    // Add an empty line after notes.
+    if (notes.length >= 1) {
+      notes.push('', '')
+    }
+
+    const headerPattern = /^#[^\n]*\n+(?:- .+\n)*\n*/
+    const header = `${title}\n\n${notes.join('\n')}`
+    if (headerPattern.test(this.content)) {
+      this.content = this.content.replace(headerPattern, header)
     } else {
-      notes.push(`- :warning: This rule was **deprecated**.`)
+      this.content = `${header}${this.content.trim()}\n`
     }
-  }
-  if (rule.meta.fixable) {
-    notes.push(`- :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.`)
+
+    return this
   }
 
-  // Add an empty line after notes.
-  if (notes.length >= 1) {
-    notes.push('', '')
+  updateFooter () {
+    const { name } = this.rule
+    const footerPattern = /## :mag: Implementation.+$/s
+    const footer = `## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/${name}.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/${name}.js)
+`
+    if (footerPattern.test(this.content)) {
+      this.content = this.content.replace(footerPattern, footer)
+    } else {
+      this.content = `${this.content.trim()}\n\n${footer}`
+    }
+
+    return this
   }
+}
 
-  fs.writeFileSync(
-    filePath,
-    fs.readFileSync(filePath, 'utf8').replace(
-      /^#[^\n]*\n+(?:- .+\n)*\n*/,
-      `${title}\n\n${notes.join('\n')}`
-    )
-  )
+for (const rule of rules) {
+  DocFile
+    .read(rule)
+    .updateHeader()
+    .updateFooter()
+    .write()
 }

From a429e6dfddbf752eea8c90883fa61f6430d58d64 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Thu, 2 Aug 2018 12:17:02 +0900
Subject: [PATCH 04/99] small tweaks

---
 docs/README.md                   |  2 --
 docs/rules/README.md             | 24 +++++++++++++++++-------
 tools/update-docs-rules-index.js |  4 ++--
 3 files changed, 19 insertions(+), 11 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index a3e621aea..bc76fc024 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -2,8 +2,6 @@
 
 Official ESLint plugin for Vue.js.
 
-## 🏁 Goal
-
 This plugin allows us to check the `<template>` and `<script>` of `.vue` files with ESLint.
 
 - Finds syntax errors.
diff --git a/docs/rules/README.md b/docs/rules/README.md
index 6dec2e031..933ebec29 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -41,6 +41,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
 | [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
 | [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
+| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
 | [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
 | [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  |
 | [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  |
@@ -74,6 +75,8 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue/attribute-hyphenation](./attribute-hyphenation.md) | enforce attribute naming style on custom components in template | :wrench: |
+| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
+| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: |
 | [vue/html-end-tags](./html-end-tags.md) | enforce end tag style | :wrench: |
 | [vue/html-indent](./html-indent.md) | enforce consistent indentation in `<template>` | :wrench: |
 | [vue/html-self-closing](./html-self-closing.md) | enforce self-closing style | :wrench: |
@@ -81,6 +84,8 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/mustache-interpolation-spacing](./mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations | :wrench: |
 | [vue/name-property-casing](./name-property-casing.md) | enforce specific casing for the name property in Vue components | :wrench: |
 | [vue/no-multi-spaces](./no-multi-spaces.md) | disallow multiple spaces | :wrench: |
+| [vue/no-template-shadow](./no-template-shadow.md) | disallow variable declarations from shadowing variables declared in the outer scope |  |
+| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components | :wrench: |
 | [vue/require-default-prop](./require-default-prop.md) | require default value for props |  |
 | [vue/require-prop-types](./require-prop-types.md) | require type definitions in props |  |
 | [vue/v-bind-style](./v-bind-style.md) | enforce `v-bind` directive style | :wrench: |
@@ -100,7 +105,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 |:--------|:------------|:---|
 | [vue/attributes-order](./attributes-order.md) | enforce order of attributes | :wrench: |
 | [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
-| [vue/no-confusing-v-for-v-if](./no-confusing-v-for-v-if.md) | disallow confusing `v-for` and `v-if` on the same element |  |
+| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
 | [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
 | [vue/this-in-template](./this-in-template.md) | enforce usage of `this` in template |  |
 
@@ -114,16 +119,21 @@ For example:
 ```json
 {
   "rules": {
-    "vue/html-closing-bracket-newline": "error"
+    "vue/component-name-in-template-casing": "error"
   }
 }
 ```
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
-| [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets | :wrench: |
-| [vue/html-closing-bracket-spacing](./html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets | :wrench: |
-| [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
-| [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
-| [vue/prop-name-casing](./prop-name-casing.md) | enforce specific casing for the Prop name in Vue components | :wrench: |
+| [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
+
+## Deprecated
+
+- :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
+- :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
+
+| Rule ID | Replaced by |
+|:--------|:------------|
+| [vue/no-confusing-v-for-v-if](./no-confusing-v-for-v-if.md) | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) |
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index a7c8edf48..a1fbe1626 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -77,8 +77,8 @@ if (deprecatedRules.length >= 1) {
   rulesTableContent += `
 ## Deprecated
 
-> - :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
-> - :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
+- :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
+- :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
 
 | Rule ID | Replaced by |
 |:--------|:------------|

From f760b3621aab45c0835c34e395a0a41f04acc7f3 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Thu, 2 Aug 2018 13:50:20 +0900
Subject: [PATCH 05/99] upgrade vuepress

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index fb18b9eec..fd015735f 100644
--- a/package.json
+++ b/package.json
@@ -61,6 +61,6 @@
     "mocha": "^5.2.0",
     "nyc": "^12.0.2",
     "vue-eslint-editor": "^0.1.0",
-    "vuepress": "github:vuejs/vuepress#9b602f2b6fb824522c8c7dbbba60a3e2abfd76ba"
+    "vuepress": "^0.13.1"
   }
 }

From 5a83e46f87cedd7758a997032b37103e992873eb Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 11:44:26 +0900
Subject: [PATCH 06/99] update eslint-code-block component

---
 .../components/eslint-code-block.vue          | 23 ++++++++++++-------
 1 file changed, 15 insertions(+), 8 deletions(-)

diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index 7972b6b4b..2a4b71a9b 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -2,7 +2,7 @@
     <eslint-editor
         :linter="linter"
         :config="config"
-        :code="cookedCode"
+        :code="code"
         :style="{ height }"
         class="eslint-code-block"
         filename="example.vue"
@@ -22,10 +22,6 @@ export default {
   components: { EslintEditor },
 
   props: {
-    code: {
-      type: String,
-      default: ''
-    },
     rules: {
       type: Object,
       default () {
@@ -77,16 +73,27 @@ export default {
       }
     },
 
-    cookedCode () {
-      return `${this.code.trim()}\n`
+    code () {
+      return `${this.computeCodeFromSlot(this.$slots.default).trim()}\n`
     },
 
     height () {
-      const lines = this.cookedCode.split('\n').length
+      const lines = this.code.split('\n').length
       return `${Math.max(120, 20 * (1 + lines))}px`
     }
   },
 
+  methods: {
+    computeCodeFromSlot (nodes) {
+      if (!Array.isArray(nodes)) {
+        return ''
+      }
+      return nodes.map(node =>
+        node.text || this.computeCodeFromSlot(node.children)
+      ).join('')
+    }
+  },
+
   async mounted () {
     // Load linter.
     const [

From f7a3056f617ba4109fc6c51b699f1590708aedc4 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:16:17 +0900
Subject: [PATCH 07/99] update attribute-hyphenation

---
 docs/rules/attribute-hyphenation.md | 70 ++++++++++++++++-------------
 1 file changed, 38 insertions(+), 32 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index d7bcb774c..3e1d137c0 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -13,46 +13,52 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 
 ### `["error", "always"]` - Use hyphenated name. (It errors on upper case letters.)
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'always']}" code="
-&lt;template&gt;
-  &lt;!-- ✔ GOOD --&gt;
-  &lt;MyComponent my-prop=&quot;prop&quot; /&gt;
+<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
+```
+<template>
+  <!-- ✔ GOOD -->
+  <MyComponent my-prop="prop" />
 
-  &lt;!-- ✘ BAD --&gt;
-  &lt;MyComponent myProp=&quot;prop&quot; /&gt;
-&lt;/template&gt;
-" />
+  <!-- ✘ BAD -->
+  <MyComponent myProp="prop" />
+</template>
+```
+</eslint-code-block>
 
 ### `["error", "never"]` - Don't use hyphenated name. (It errors on hyphens except `data-`, `aria-` and `slot-scope`.)
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never']}" code="
-&lt;template&gt;
-  &lt;!-- ✔ GOOD --&gt;
-  &lt;MyComponent myProp=&quot;prop&quot; /&gt;
-  &lt;MyComponent data-id=&quot;prop&quot; /&gt;
-  &lt;MyComponent aria-role=&quot;button&quot; /&gt;
-  &lt;MyComponent slot-scope=&quot;prop&quot; /&gt;
+<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
+```
+<template>
+  <!-- ✔ GOOD -->
+  <MyComponent myProp="prop" />
+  <MyComponent data-id="prop" />
+  <MyComponent aria-role="button" />
+  <MyComponent slot-scope="prop" />
 
-  &lt;!-- ✘ BAD --&gt;
-  &lt;MyComponent my-prop=&quot;prop&quot; /&gt;
-&lt;/template&gt;
-" />
+  <!-- ✘ BAD -->
+  <MyComponent my-prop="prop" />
+</template>
+```
+</eslint-code-block>
 
 ### `["error", "never", { "ignore": ["custom-prop"] }]` - Don't use hyphenated name but allow custom attributes
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never', {'ignore': ['custom-prop']}]}" code="
-&lt;template&gt;
-  &lt;!-- ✔ GOOD --&gt;
-  &lt;MyComponent myProp=&quot;prop&quot; /&gt;
-  &lt;MyComponent custom-prop=&quot;prop&quot; /&gt;
-  &lt;MyComponent data-id=&quot;prop&quot; /&gt;
-  &lt;MyComponent aria-role=&quot;button&quot; /&gt;
-  &lt;MyComponent slot-scope=&quot;prop&quot; /&gt;
-
-  &lt;!-- ✘ BAD --&gt;
-  &lt;MyComponent my-prop=&quot;prop&quot; /&gt;
-&lt;/template&gt;
-" />
+<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never', {'ignore': ['custom-prop']}]}">
+```
+<template>
+  <!-- ✔ GOOD -->
+  <MyComponent myProp="prop" />
+  <MyComponent custom-prop="prop" />
+  <MyComponent data-id="prop" />
+  <MyComponent aria-role="button" />
+  <MyComponent slot-scope="prop" />
+
+  <!-- ✘ BAD -->
+  <MyComponent my-prop="prop" />
+</template>
+```
+</eslint-code-block>
 
 ## :mag: Implementation
 

From 2cd19595ee8137e90e577d5f7e1d22c3073d425c Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:16:30 +0900
Subject: [PATCH 08/99] update attributes-order

---
 docs/rules/attributes-order.md | 221 ++++++++++++++++-----------------
 1 file changed, 110 insertions(+), 111 deletions(-)

diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 1fa82ea32..5fd858b07 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -6,129 +6,128 @@
 ## :book: Rule Details
 
 This rule aims to enforce ordering of component attributes. The default order is specified in the [Vue styleguide](https://vuejs.org/v2/style-guide/#Element-attribute-order-recommended) and is:
-- DEFINITION
-ex: 'is'
-- LIST_RENDERING
-ex: 'v-for item in items'
-- CONDITIONALS
-ex: 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
-- RENDER_MODIFIERS
-ex: 'v-once', 'v-pre'
-- GLOBAL
-ex: 'id'
-- UNIQUE
-ex: 'ref', 'key', 'slot'
-- TWO\_WAY\_BINDING
-ex: 'v-model'
-- OTHER_DIRECTIVES
-ex: 'v-custom-directive'
-- OTHER_ATTR
-ex: 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"'
-- EVENTS
-ex: '@click="functionCall"', 'v-on="event"'
-- CONTENT
-ex: 'v-text', 'v-html'
-
-:+1: Examples of **correct** code`:
-
-```html
-<div
-  is="header"
-  v-for="item in items"
-  v-if="!visible"
-  v-once
-  id="uniqueID"
-  ref="header"
-  v-model="headerData"
-  my-prop="prop"
-  @click="functionCall"
-  v-text="textContent">
-</div>
-```
 
-```html
-<div
-  v-for="item in items"
-  v-if="!visible"
-  prop-one="prop"
-  :prop-two="prop"
-  prop-three="prop"
-  @click="functionCall"
-  v-text="textContent">
-</div>
+- `DEFINITION`
+  ex: 'is'
+- `LIST_RENDERING`
+  ex: 'v-for item in items'
+- `CONDITIONALS`
+  ex: 'v-if', 'v-else-if', 'v-else', 'v-show', 'v-cloak'
+- `RENDER_MODIFIERS`
+  ex: 'v-once', 'v-pre'
+- `GLOBAL`
+  ex: 'id'
+- `UNIQUE`
+  ex: 'ref', 'key', 'slot'
+- `TWO_WAY_BINDING`
+  ex: 'v-model'
+- `OTHER_DIRECTIVES`
+  ex: 'v-custom-directive'
+- `OTHER_ATTR`
+  ex: 'custom-prop="foo"', 'v-bind:prop="foo"', ':prop="foo"'
+- `EVENTS`
+  ex: '@click="functionCall"', 'v-on="event"'
+- `CONTENT`
+  ex: 'v-text', 'v-html'
+
+### the default order
+
+<eslint-code-block :rules="{'vue/attributes-order': ['error']}">
 ```
-
-```html
-<div
-  prop-one="prop"
-  :prop-two="prop"
-  prop-three="prop">
-</div>
+<template>
+  <!-- ✓ GOOD -->
+  <div
+    is="header"
+    v-for="item in items"
+    v-if="!visible"
+    v-once
+    id="uniqueID"
+    ref="header"
+    v-model="headerData"
+    my-prop="prop"
+    @click="functionCall"
+    v-text="textContent">
+  </div>
+  <div
+    v-for="item in items"
+    v-if="!visible"
+    prop-one="prop"
+    :prop-two="prop"
+    prop-three="prop"
+    @click="functionCall"
+    v-text="textContent">
+  </div>
+  <div
+    prop-one="prop"
+    :prop-two="prop"
+    prop-three="prop">
+  </div>
+
+  <!-- ✗ BAD -->
+  <div
+    ref="header"
+    v-for="item in items"
+    v-once
+    id="uniqueID"
+    v-model="headerData"
+    my-prop="prop"
+    v-if="!visible"
+    is="header"
+    @click="functionCall"
+    v-text="textContent">
+  </div>
+</template>
 ```
+</eslint-code-block>
 
-:-1: Examples of **incorrect** code`:
-
-```html
-<div
-  ref="header"
-  v-for="item in items"
-  v-once
-  id="uniqueID"
-  v-model="headerData"
-  my-prop="prop"
-  v-if="!visible"
-  is="header"
-  @click="functionCall"
-  v-text="textContent">
-</div>
-```
-
-### `order`
-
-Specify custom order of attribute groups
+### custom orders
 
-:+1: Examples of **correct** code with custom order`:
+#### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
-```html
-<!-- 'vue/attributes-order': [2, { order: ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', ['BINDING', 'OTHER_ATTR'], 'EVENTS', 'CONTENT'] }] -->
-<div
-  is="header"
-  prop-one="prop"
-  :prop-two="prop">
-</div>
+<eslint-code-block :rules="{'vue/attributes-order': ['error', {order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
 ```
-
-```html
-<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
-<div
-  prop-one="prop"
-  prop-two="prop"
-  is="header">
-</div>
-```
-
-```html
-<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
-<div
-  ref="header"
-  is="header"
-  prop-one="prop"
-  prop-two="prop">
-</div>
+<template>
+  <!-- ✓ GOOD -->
+  <div
+    ref="header"
+    is="header"
+    prop-one="prop"
+    prop-two="prop">
+  </div>
+
+  <!-- ✗ BAD -->
+  <div
+    ref="header"
+    prop-one="prop"
+    is="header">
+  </div>
+</template>
 ```
+</eslint-code-block>
 
-:-1: Examples of **incorrect** code with custom order`:
+#### `[['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
-```html
-<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT'] }] -->
-<div
-  ref="header"
-  prop-one="prop"
-  is="header">
-</div>
+<eslint-code-block :rules="{'vue/attributes-order': ['error', {order: [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
+```
+<template>
+  <!-- ✓ GOOD -->
+  <div
+    ref="header"
+    is="header"
+    prop-one="prop"
+    prop-two="prop">
+  </div>
+  <div
+    is="header"
+    ref="header"
+    prop-one="prop"
+    prop-two="prop">
+  </div>
+</template>
 ```
+</eslint-code-block>
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Element attribute order](https://vuejs.org/v2/style-guide/#Element-attribute-order-recommended)
 

From 2f451eb1da310a5a8ab65da1f667d6307f9cbb4b Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:16:46 +0900
Subject: [PATCH 09/99] update component-name-in-template-casing

---
 .../component-name-in-template-casing.md      | 76 +++++++++++--------
 1 file changed, 43 insertions(+), 33 deletions(-)

diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index 08f851dde..15fbc2806 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/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)

From 4a60998710515eb4767905a7dfb497fd2d6f9c55 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:17:00 +0900
Subject: [PATCH 10/99] update html-closing-bracket-newline

---
 docs/rules/html-closing-bracket-newline.md | 91 +++++++++++-----------
 1 file changed, 44 insertions(+), 47 deletions(-)

diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index c16998ebd..f81a642dc 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -8,25 +8,49 @@ This rule enforces a line break (or no line break) before tag's closing brackets
 
 ```html
 <div
-    id="foo"
-    class="bar"> <!-- On the same line with the last attribute. -->
+  id="foo"
+  class="bar"> <!-- On the same line with the last attribute. -->
 </div>
 
 <div
-    id="foo"
-    class="bar"
+  id="foo"
+  class="bar"
 > <!-- On the next line. -->
 </div>
 ```
 
-## Rule Details
+## :book: Rule Details
+
+This rule aims to warn the right angle brackets which are at the location other than the configured location.
+
+<eslint-code-block :rules="{'vue/html-closing-bracket-newline': ['error']}">
+```
+<template>
+  <!-- ✓ GOOD -->
+  <div id="foo" class="bar">
+  <div
+    id="foo"
+    class="bar"
+  >
+
+  <!-- ✗ BAD -->
+  <div id="foo" class="bar"
+  >
+  <div
+    id="foo"
+    class="bar">
+</template>
+```
+</eslint-code-block>
+
+## :wrench: Options
 
 ```json
 {
-    "vue/html-closing-bracket-newline": ["error", {
-        "singleline": "never",
-        "multiline": "always"
-    }]
+  "vue/html-closing-bracket-newline": ["error", {
+    "singleline": "never",
+    "multiline": "always"
+  }]
 }
 ```
 
@@ -39,51 +63,24 @@ This rule enforces a line break (or no line break) before tag's closing brackets
 
 Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-level of the closing brackets.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<!-- eslint html-closing-bracket-newline: "error" -->
-
-<div id="foo" class="bar"
->
+### `{ "multiline": "never" }`
 
-<div
-    id="foo"
-    class="bar">
+<eslint-code-block :rules="{'vue/html-closing-bracket-newline': ['error', { 'multiline': 'never' }]}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<!-- eslint html-closing-bracket-newline: "error" -->
-
-<div id="foo" class="bar">
-<div
+<template>
+  <!-- ✓ GOOD -->
+  <div
     id="foo"
-    class="bar"
->
-```
-
-:-1: Examples of **incorrect** code for `{ "multiline": "never" }`:
-
-```html
-<!-- eslint html-closing-bracket-newline: ["error", { multiline: never }] -->
+    class="bar">
 
-<div
+  <!-- ✗ BAD -->
+  <div
     id="foo"
     class="bar"
->
-```
-
-:+1: Examples of **correct** code for `{ "multiline": "never" }`:
-
-```html
-<!-- html-closing-bracket-newline: ["error", { multiline: never }] -->
-
-<div
-    id="foo"
-    class="bar">
+  >
+</template>
 ```
+</eslint-code-block>
 
 ## :mag: Implementation
 

From b4f654bb3ffeac75d63174ba61b0aa1634ff4ca1 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:17:12 +0900
Subject: [PATCH 11/99] update html-closing-bracket-spacing

---
 docs/rules/html-closing-bracket-spacing.md | 98 ++++++++++------------
 1 file changed, 45 insertions(+), 53 deletions(-)

diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 8eb04a622..4b702d837 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/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)

From 40de2a3f593a76f67e3fabb2983c0f89db102a8e Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:17:30 +0900
Subject: [PATCH 12/99] update html-end-tags

---
 docs/rules/html-end-tags.md | 36 +++++++++++++++---------------------
 1 file changed, 15 insertions(+), 21 deletions(-)

diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index a2e663622..6901369d7 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -5,30 +5,24 @@
 
 ## :book: Rule Details
 
-This rule reports:
+This rule aims to disallow lacking end tags.
 
-- presence of and end tag on [Void elements](https://www.w3.org/TR/html51/syntax.html#void-elements)
-- absence of both an end tag (e.g. `</div>`) and a self-closing opening tag (e.g. `<div/>`) on other elements
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div>
-<p>
-<p>
-<input></input>
-<br></br>
+<eslint-code-block :rules="{'vue/html-end-tags': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div></div>
-<p></p>
-<p></p>
-<input>
-<br>
+<template>
+  <!-- ✓ GOOD -->
+  <div></div>
+  <p></p>
+  <p></p>
+  <input>
+  <br>
+
+  <!-- ✗ BAD -->
+  <div>
+  <p>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

From c1a2d3dce1a782f630f6e774e66c8f315df351ad Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:18:27 +0900
Subject: [PATCH 13/99] update html-indent

---
 docs/rules/html-indent.md | 68 +++++++++++++++++++--------------------
 1 file changed, 33 insertions(+), 35 deletions(-)

diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index a5b869be8..34f84a9ef 100644
--- a/docs/rules/html-indent.md
+++ b/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
 

From 03f7c961ea6f949e94c876d40f24c406ff79f7df Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:18:44 +0900
Subject: [PATCH 14/99] update html-quotes

---
 docs/rules/html-quotes.md | 48 ++++++++++++++++++++-------------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index ab27475f4..3e8f38e15 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -15,37 +15,39 @@ This rule enforces the quotes style of HTML attributes.
 
 This rule reports the quotes of attributes if it is different to configured quotes.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<img src='./logo.png'>
-<img src=./logo.png>
+<eslint-code-block :rules="{'vue/html-quotes': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<img src="./logo.png">
-```
-
-:-1: Examples of **incorrect** code for this rule with `"single"` option:
-
-```html
-<img src="./logo.png">
-<img src=./logo.png>
-```
-
-:+1: Examples of **correct** code for this rule with `"single"` option:
-
-```html
-<img src='./logo.png'>
+<template>
+  <!-- ✓ GOOD -->
+  <img src="./logo.png">
+
+  <!-- ✗ BAD -->
+  <img src='./logo.png'>
+  <img src=./logo.png>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
 - `"double"` (default) ... requires double quotes.
 - `"single"` ... requires single quotes.
 
+### `"single"`
+
+<eslint-code-block :rules="{'vue/html-quotes': ['error', 'single']}">
+```
+<template>
+  <!-- ✓ GOOD -->
+  <img src='./logo.png'>
+
+  <!-- ✗ BAD -->
+  <img src="./logo.png">
+  <img src=./logo.png>
+</template>
+```
+</eslint-code-block>
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/html-quotes.js)

From fe789327aa0264bfc11055f78a94a40a9160fdf1 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:18:58 +0900
Subject: [PATCH 15/99] update html-self-closing

---
 docs/rules/html-self-closing.md | 63 +++++++++++++++++++++------------
 1 file changed, 41 insertions(+), 22 deletions(-)

diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 5c60ba21b..8b7728085 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -8,12 +8,32 @@ In Vue.js template, we can use either two styles for elements which don't have t
 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.
+Self-closing is simple and shorter, but it's not supported in the HTML spec.
+This rule helps you to make consistent on the self-closing style.
 
-## Rule Details
+## :book: Rule Details
 
-This rule has options which specify self-closing style for each context.
+This rule aims to enforce the self-closing sign as the configured style.
+
+<eslint-code-block :rules="{'vue/html-self-closing': ['error']}">
+```
+<template>
+  <!-- ✓ GOOD -->
+  <div/>
+  <img>
+  <MyComponent/>
+  <svg><path d=""/></svg>
+
+  <!-- ✗ BAD -->
+  <div></div>
+  <img/>
+  <MyComponent></MyComponent>
+  <svg><path d=""></path></svg>
+</template>
+```
+</eslint-code-block>
+
+## :wrench: Options
 
 ```json
 {
@@ -41,28 +61,27 @@ Every option can be set to one of the following values:
 - `"never"` ... Disallow self-closing.
 - `"any"` ... Don't enforce self-closing style.
 
-----
+### `{html: {normal: "never", void: "always"}}`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div></div>
-<img/>
-<img></img>
-<MyComponent/></MyComponent>
-<svg><path d=""></path></svg>
+<eslint-code-block :rules="{'vue/html-self-closing': ['error', {html: {normal: 'never', void: 'always'}}]}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div/>
-<img>
-<MyComponent/>
-<svg><path d=""/></svg>
+<template>
+  <!-- ✓ GOOD -->
+  <div></div>
+  <img/>
+  <MyComponent/>
+  <svg><path d=""/></svg>
+
+  <!-- ✗ BAD -->
+  <div/>
+  <img>
+  <MyComponent></MyComponent>
+  <svg><path d=""></path></svg>
+</template>
 ```
+</eslint-code-block>
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Self closing components](https://vuejs.org/v2/style-guide/#Self-closing-components-strongly-recommended)
 

From 116eb34f3d8ad6df0bb3069d6dc524c48a853fc2 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 4 Aug 2018 12:19:12 +0900
Subject: [PATCH 16/99] update max-attributes-per-line

---
 docs/rules/max-attributes-per-line.md | 151 +++++++++++---------------
 1 file changed, 66 insertions(+), 85 deletions(-)

diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index 2c6291b2a..c1ebb11bc 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -5,7 +5,6 @@
 
 Limits the maximum number of attributes/properties per line to improve readability.
 
-
 ## :book: Rule Details
 
 This rule aims to enforce a number of attributes per line in templates.
@@ -14,43 +13,39 @@ An attribute is considered to be in a new line when there is a line break betwee
 
 There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 1).
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<MyComponent lorem="1" ipsum="2"/>
-
-<MyComponent
-  lorem="1" ipsum="2"
-/>
-
-<MyComponent
-  lorem="1" ipsum="2"
-  dolor="3"
-/>
+<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<MyComponent lorem="1"/>
-
-<MyComponent
-  lorem="1"
-  ipsum="2"
-/>
-
-<MyComponent
-  lorem="1"
-  ipsum="2"
-  dolor="3"
-/>
+<template>
+  <!-- ✓ GOOD -->
+  <MyComponent lorem="1"/>
+  <MyComponent
+    lorem="1"
+    ipsum="2"
+  />
+  <MyComponent
+    lorem="1"
+    ipsum="2"
+    dolor="3"
+  />
+
+  <!-- ✗ BAD -->
+  <MyComponent lorem="1" ipsum="2"/>
+  <MyComponent
+    lorem="1" ipsum="2"
+  />
+  <MyComponent
+    lorem="1" ipsum="2"
+    dolor="3"
+  />
+</template>
 ```
+</eslint-code-block>
 
-### :wrench:  Options
+## :wrench: Options
 
 ```json
 {
-  "vue/max-attributes-per-line": [2, {
+  "vue/max-attributes-per-line": ["error", {
     "singleline": 1,
     "multiline": {
       "max": 1,
@@ -60,73 +55,59 @@ 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)
+- `singleline` (`number`) ... The number of maximum attributes per line when the opening tag is in a single line. Default is `1`.
+- `multiline.max` (`number`) ... The max number of attributes per line when the opening tag is in multiple lines. Default is `1`. This can be `{ multiline: 1 }` instead of `{ multiline: { max: 1 }}` if you don't configure `allowFirstLine` property.
+- `multiline.allowFirstLine` (`boolean`) ... If `true`, it allows attributes on the same line as that tag name. Default is `false`.
 
-:-1: Example of **incorrect** code for this setting:
+### `{ "singleline": 3 }`
 
-```html
-<!-- [{ "multiline": { "allowFirstLine": false }}] -->
-<MyComponent foo="John"
-  bar="Smith"
-/>
+<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {singleline: 3}]}">
 ```
+<template>
+  <!-- ✓ GOOD -->
+  <MyComponent lorem="1" ipsum="2" dolor="3" />
 
-:+1: Example of **correct** code for this setting:
-
-```html
-<!-- [{ "multiline": { "allowFirstLine": false }}] -->
-<MyComponent
-  foo="John"
-  bar="Smith"
-/>
+  <!-- ✗ BAD -->
+  <MyComponent lorem="1" ipsum="2" dolor="3" sit="4" />
+</template>
 ```
+</eslint-code-block>
 
-#### `singleline`
-
-Number of maximum attributes per line when the opening tag is in a single line. (Default is 1)
+### `{ multiline: 2 }`
 
-:-1: Example of **incorrect** code for this setting:
-```html
-<!-- [{"singleline": 1}] -->
-<MyComponent foo="John" bar="Smith"/>
+<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {multiline: 2}]}">
 ```
-
-:+1: Example of **correct** code for this setting:
-```html
-<!-- [{"singleline": 1}] -->
-<MyComponent foo="John"/>
+<template>
+  <!-- ✓ GOOD -->
+  <MyComponent
+    lorem="1" ipsum="2"
+    dolor="3"
+  />
+
+  <!-- ✗ BAD -->
+  <MyComponent
+    lorem="1" ipsum="2" dolor="3"
+    sit="4"
+  />
+</template>
 ```
+</eslint-code-block>
 
-#### `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:
+### `{ multiline: 1, allowFirstLine: true }`
 
-```html
-<!-- [{"multiline": 1}] -->
-<MyComponent
-  foo="John" bar="Smith"
-/>
+<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {multiline: { allowFirstLine: true }}]}">
 ```
-
-:+1: Example of **correct** code for this setting:
-
-```html
-<!-- [{"multiline": 1}] -->
-<MyComponent
-  foo="John"
-  bar="Smith"
-/>
+<template>
+  <!-- ✓ GOOD -->
+  <MyComponent lorem="1"
+               ipsum="2"
+               dolor="3"
+  />
+</template>
 ```
+</eslint-code-block>
 
-## When Not To Use It
-
-If you do not want to check the number of attributes declared per line you can disable this rule.
-
-## Related links
+## :books: Further reading
 
 - [Style guide - Multi attribute elements](https://vuejs.org/v2/style-guide/#Multi-attribute-elements-strongly-recommended)
 

From 53e01ff188384f9c09fb46dbcd322f5e1b836794 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 11 Aug 2018 22:07:54 +0900
Subject: [PATCH 17/99] add uncategorized rules to sidebar

---
 docs/.vuepress/config.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 271618b5f..613af6448 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -4,6 +4,7 @@
  */
 'use strict'
 
+const uncategorizedRules = require('../../tools/lib/rules').filter(rule => !rule.meta.docs.category)
 const categories = require('../../tools/lib/categories')
 
 module.exports = {
@@ -33,12 +34,22 @@ module.exports = {
     sidebar: {
       '/rules/': [
         '/rules/',
+
+        // Rules in each category.
         ...categories.map(({ title, rules }) => ({
           title: title.replace(/ \(.+?\)/, ''),
           collapsable: false,
           children: rules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
-        }))
+        })),
+
+        // Rules in no category.
+        {
+          title: 'Uncategorized',
+          collapsable: false,
+          children: uncategorizedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
+        }
       ],
+
       '/': ['/', '/user-guide/', '/developer-guide/', '/rules/']
     }
   }

From f6d7fb4232ce13be33cfbbb1e97abe49cbca9e3d Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 11 Aug 2018 22:08:18 +0900
Subject: [PATCH 18/99] update mustache-interpolation-spacing

---
 docs/rules/mustache-interpolation-spacing.md | 63 +++++++++-----------
 1 file changed, 27 insertions(+), 36 deletions(-)

diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index e594c8ffd..1aa7a8e83 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -5,57 +5,48 @@
 
 ## :book: Rule Details
 
-This rule aims to enforce unified spacing in mustache interpolations.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div>{{   text   }}</div>
-<div>{{text}}</div>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div>{{ text }}</div>
-```
+This rule aims at enforcing unified spacing in mustache interpolations.
 
 ## :wrench: Options
 
-Default spacing is set to `always`
-
-```
-'vue/mustache-interpolation-spacing': [2, 'always'|'never']
+```json
+{
+  "vue/mustache-interpolation-spacing": ["error", "always" | "never"]
+}
 ```
 
-### `"always"` - Expect one space between expression and curly brackets.
+- `"always"` (default) ... Expect one space between expression and curly brackets.
+- `"never"` ... Expect no spaces between expression and curly brackets.
 
-:-1: Examples of **incorrect** code for this rule:
+### `"always"`
 
-```html
-<div>{{   text   }}</div>
-<div>{{text}}</div>
+<eslint-code-block :rules="{'vue/mustache-interpolation-spacing': ['error']}">
 ```
+<template>
+  <!-- ✓ GOOD -->
+  <div>{{ text }}</div>
+  <div>{{   text   }}</div><!-- Use vue/no-multi-spaces rule to disallow multiple spaces. -->
 
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div>{{ text }}</div>
+  <!-- ✗ BAD -->
+  <div>{{text}}</div>
+</template>
 ```
+</eslint-code-block>
 
-### `"never"` - Expect no spaces between expression and curly brackets.
+### `"never"`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div>{{ text }}</div>
+<eslint-code-block :rules="{'vue/mustache-interpolation-spacing': ['error', 'never']}">
 ```
+<template>
+  <!-- ✓ GOOD -->
+  <div>{{text}}</div>
 
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div>{{text}}</div>
+  <!-- ✗ BAD -->
+  <div>{{   text   }}</div>
+  <div>{{ text }}</div>
+</template>
 ```
+</eslint-code-block>
 
 ## :mag: Implementation
 

From dead35e6fc9adfe3e51f73174f7353cd22a8cd5e Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 11 Aug 2018 22:08:35 +0900
Subject: [PATCH 19/99] update name-property-casing

---
 docs/rules/name-property-casing.md | 65 +++++++++++++++++++++++-------
 1 file changed, 50 insertions(+), 15 deletions(-)

diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index d096c9294..3ca7fb5d9 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -3,35 +3,70 @@
 - :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.
 
-Define a style for the `name` property casing for consistency purposes.
-
 ## :book: Rule Details
 
-:+1: Examples of **correct** code for `PascalCase`:
+This rule aims at enforcing the style for the `name` property casing for consistency purposes.
+
+## :wrench: Options
 
-```js
-export default {
-  name: 'MyComponent'
+```json
+{
+  "vue/name-property-casing": ["error", "PascalCase" | "kebab-case"]
 }
 ```
 
-:+1: Examples of **correct** code for `kebab-case`:
+- `"PascalCase"` (default) ... Enforce the `name` property to Pascal case.
+- `"kebab-case"` ... Enforce the `name` property to kebab case.
 
-```js
-export default {
-  name: 'my-component'
-}
+### `"PascalCase"`
+
+<eslint-code-block :rules="{'vue/name-property-casing': ['error']}">
+```
+<script>
+  /* ✓ GOOD */
+  export default {
+    name: 'MyComponent'
+  }
+</script>
 ```
+</eslint-code-block>
 
-## :wrench: Options
+<eslint-code-block :rules="{'vue/name-property-casing': ['error']}">
+```
+<script>
+  /* ✗ BAD */
+  export default {
+    name: 'my-component'
+  }
+</script>
+```
+</eslint-code-block>
 
-Default casing is set to `PascalCase`.
+### `"kebab-case"`
+
+<eslint-code-block :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
+```
+<script>
+  /* ✓ GOOD */
+  export default {
+    name: 'my-component'
+  }
+</script>
+```
+</eslint-code-block>
 
+<eslint-code-block :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
 ```
-"vue/name-property-casing": ["error", "PascalCase|kebab-case"]
+<script>
+  /* ✗ BAD */
+  export default {
+    name: 'MyComponent'
+  }
+</script>
 ```
+</eslint-code-block>
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Component name casing in JS/JSX](https://vuejs.org/v2/style-guide/#Component-name-casing-in-JS-JSX-strongly-recommended)
 

From af5e64d1d310bf0bfed19251bb90e34dc359fe8a Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sat, 11 Aug 2018 22:08:58 +0900
Subject: [PATCH 20/99] update no-async-in-computed-properties

---
 docs/rules/no-async-in-computed-properties.md | 72 +++++++++----------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index be86f3a2a..1418231dc 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -9,53 +9,53 @@ If you need async computed properties you might want to consider using additiona
 
 This rule is aimed at preventing asynchronous methods from being called in computed properties.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```js
-computed: {
-  pro () {
-    return Promise.all([new Promise((resolve, reject) => {})])
-  },
-  foo: async function () {
-    return await someFunc()
-  },
-  bar () {
-    return fetch(url).then(response => {})
-  },
-  tim () {
-    setTimeout(() => { }, 0)
-  },
-  inter () {
-    setInterval(() => { }, 0)
-  },
-  anim () {
-    requestAnimationFrame(() => {})
-  }
-}
+<eslint-code-block :rules="{'vue/no-async-in-computed-properties': ['error']}">
 ```
+<script>
+export default {
+  computed: {
+    /* ✓ GOOD */
+    foo () {
+      var bar = 0
+      try {
+        bar = bar / this.a
+      } catch (e) {
+        return 0
+      } finally {
+        return bar
+      }
+    },
 
-:+1: Examples of **correct** code for this rule:
-
-```js
-computed: {
-  foo () {
-    var bar = 0
-    try {
-      bar = bar / this.a
-    } catch (e) {
-      return 0
-    } finally {
-      return bar
+    /* ✗ BAD */
+    pro () {
+      return Promise.all([new Promise((resolve, reject) => {})])
+    },
+    foo1: async function () {
+      return await someFunc()
+    },
+    bar () {
+      return fetch(url).then(response => {})
+    },
+    tim () {
+      setTimeout(() => { }, 0)
+    },
+    inter () {
+      setInterval(() => { }, 0)
+    },
+    anim () {
+      requestAnimationFrame(() => {})
     }
   }
 }
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
 Nothing.
 
-## Related links
+## :books: Further reading
 
 - [vue-async-computed](https://github.com/foxbenjaminfox/vue-async-computed)
 

From 8de5e5fdf6647b7f3df10a64396d01780bc8cc98 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sun, 12 Aug 2018 19:38:00 +0900
Subject: [PATCH 21/99] update no-confusing-v-for-v-if

---
 docs/rules/no-confusing-v-for-v-if.md | 43 +++++++++++++--------------
 1 file changed, 20 insertions(+), 23 deletions(-)

diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 70ec8a0ae..6122ee288 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -17,40 +17,37 @@ This rule reports the elements which have both `v-for` and `v-if` directives in
 
 In that case, the `v-if` should be written on the wrapper element.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<TodoItem
-  v-if="complete"
-  v-for="todo in todos"
-  :todo="todo"
-/>
+<eslint-code-block :rules="{'vue/no-confusing-v-for-v-if': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<TodoItem
-  v-for="todo in todos"
-  v-if="todo.shown"
-  :todo="todo"
-/>
-```
-
-```html
-<ul v-if="shown">
+<template>
+  <!-- ✓ GOOD -->
+  <TodoItem
+    v-for="todo in todos"
+    v-if="todo.shown"
+    :todo="todo"
+  />
+  <ul v-if="shown">
+    <TodoItem
+      v-for="todo in todos"
+      :todo="todo"
+    />
+  </ul>
+
+  <!-- ✗ BAD -->
   <TodoItem
+    v-if="complete"
     v-for="todo in todos"
     :todo="todo"
   />
-</ul>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
 Nothing.
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Avoid v-if with v-for](https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)
 - [Guide - Conditional / v-if with v-for](https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for)

From 68bdf1056d6031044791c32d568fb30368900335 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sun, 12 Aug 2018 19:38:17 +0900
Subject: [PATCH 22/99] update no-dupe-keys

---
 docs/rules/no-dupe-keys.md | 49 +++++++++++++-------------------------
 1 file changed, 17 insertions(+), 32 deletions(-)

diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index a718871d1..0770779fb 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -8,9 +8,10 @@ This rule prevents to use duplicated names.
 
 This rule is aimed at preventing duplicated property names.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```js
+<eslint-code-block :rules="{'vue/no-dupe-keys': ['error']}">
+```
+<script>
+/* ✗ BAD */
 export default {
   props: {
     foo: String
@@ -27,44 +28,26 @@ export default {
     foo () {}
   }
 }
+</script>
 ```
+</eslint-code-block>
 
-:+1: Examples of **correct** code for this rule:
+## :wrench: Options
 
-```js
-export default {
-  props: ['foo'],
-  computed: {
-    bar () {}
-  },
-  data () {
-    return {
-      baz: null
-    }
-  },
-  methods: {
-    boo () {}
-  }
+``` json
+{
+  "vue/no-dupe-keys": ["error", { "groups": [] }]
 }
 ```
 
-## :wrench: Options
-
-This rule has an object option:
+- `"groups"` (`string[]`) Array of additional groups to search for duplicates. Defailt is empty.
 
-`"groups"`: [] (default) array of additional groups to search for duplicates.
+### `{ "groups": ["firebase"] }`
 
-### Example:
-
-``` json
-"vue/no-dupe-keys": [2, {
-  groups: ["firebase"]
-}]
+<eslint-code-block :rules="{'vue/no-dupe-keys': ['error', {groups: ['firebase']}]}">
 ```
-
-:-1: Examples of **incorrect** code for this configuration
-
-```js
+<script>
+/* ✗ BAD */
 export default {
   computed: {
     foo () {}
@@ -73,7 +56,9 @@ export default {
     foo () {}
   }
 }
+</script>
 ```
+</eslint-code-block>
 
 ## :mag: Implementation
 

From 8325289ed459ea163a2b6c1e4640c8210ce9fb5f Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sun, 12 Aug 2018 19:38:31 +0900
Subject: [PATCH 23/99] update no-duplicate-attributes

---
 docs/rules/no-duplicate-attributes.md | 65 +++++++++++++++------------
 1 file changed, 36 insertions(+), 29 deletions(-)

diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 7752ac8a2..8e42358e3 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -10,46 +10,53 @@ It's possibly mistakes.
 This rule reports duplicate attributes.
 `v-bind:foo` directives are handled as the attributes `foo`.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<MyComponent
-  :foo="def"
-  foo="abc"
-/>
+<eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<MyComponent :foo="abc"/>
-```
-
-```html
-<MyComponent foo="abc"/>
+<template>
+  <!-- ✓ GOOD -->
+  <MyComponent :foo="abc" />
+  <MyComponent foo="abc" />
+  <MyComponent class="abc" :class="def" />
+
+  <!-- ✗ BAD -->
+  <MyComponent :foo="abc" foo="def" />
+  <MyComponent foo="abc" :foo="def" />
+  <MyComponent foo="abc" foo="def" />
+  <MyComponent :foo.a="abc" :foo.b="def" />
+  <MyComponent class="abc" class="def" />
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
-`allowCoexistClass` - Enables [`v-bind:class`] directive can coexist with the plain `class` attribute.
-`allowCoexistStyle` - Enables [`v-bind:style`] directive can coexist with the plain `style` attribute.
-
-```
-'vue/no-duplicate-attributes': [2, {
-  allowCoexistClass: Boolean // default: true
-  allowCoexistStyle: Boolean, // default: true
-}]
+```json
+{
+  "vue/no-duplicate-attributes": ["error", {
+    "allowCoexistClass": true,
+    "allowCoexistStyle": true
+  }]
+}
 ```
 
-## TODO: `<div foo foo></div>`
-
-`parse5` remove duplicate attributes on the tokenization phase.
-Needs investigation to check.
-
+- `allowCoexistClass` (`boolean`) ... Enables [`v-bind:class`] directive can coexist with the plain `class` attribute. Default is `true`.
+- `allowCoexistStyle` (`boolean`) ... Enables [`v-bind:style`] directive can coexist with the plain `style` attribute. Default is `true`.
 
 [`v-bind:class`]: https://vuejs.org/v2/guide/class-and-style.html
 [`v-bind:style`]: https://vuejs.org/v2/guide/class-and-style.html
 
+### `{ "allowCoexistClass": false, "allowCoexistStyle": false }`
+
+<eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error', {allowCoexistClass: false, allowCoexistStyle: false}]}">
+```
+<template>
+  <!-- ✗ BAD -->
+  <MyComponent class="abc" :class="def" />
+  <MyComponent style="abc" :style="def" />
+</template>
+```
+</eslint-code-block>
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-duplicate-attributes.js)

From cf02d78e5629659e7d529cda05bbad24ce557e6a Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Sun, 12 Aug 2018 19:38:48 +0900
Subject: [PATCH 24/99] update no-multi-spaces

---
 docs/rules/no-multi-spaces.md | 35 ++++++++++++++++-------------------
 1 file changed, 16 insertions(+), 19 deletions(-)

diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index b2e882b55..f9f7e61bd 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -3,31 +3,28 @@
 - :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.
 
-The `--fix` option on the command line can automatically fix some of the problems reported by this rule.
+## :book: Rule Details
 
-This rule aims to remove multiple spaces in a row between attributes which are not used for indentation.
+This rule aims at removing multiple spaces in tags, which are not used for indentation.
 
-## Rule Details
-
-Examples of **incorrect** code for this rule:
-
-```html
-<div     class="foo"
-      :style="bar"         />
+<eslint-code-block :rules="{'vue/no-multi-spaces': ['error']}">
 ```
-
-Examples of **correct** code for this rule:
-
-```html
-<div
-  class="foo"
-  :style="bar"
-/>
+<template>
+  <!-- ✓ GOOD -->
+  <div
+    class="foo"
+    :style="bar" />
+
+  <!-- ✗ BAD -->
+  <div     class="foo"
+    :style =  "bar"         />
+</template>
 ```
+</eslint-code-block>
 
-### Options
+## :wrench: Options
 
-Nothing
+Nothing.
 
 ## :mag: Implementation
 

From aef46cf7877cfd8d874cd166337a2c6bee45d754 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 14:26:19 +0900
Subject: [PATCH 25/99] update no-parsing-error

---
 docs/rules/no-parsing-error.md | 23 +++++++++++------------
 1 file changed, 11 insertions(+), 12 deletions(-)

diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index 242bf5301..dc2272900 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -17,25 +17,24 @@ This rule reports syntax errors in `<template>`. For example:
 This rule tries to parse directives/mustaches in `<template>` by the parser which parses `<script>`.
 Then reports syntax errors if exist.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-{{ . }}
-{{ foo. }}
+<eslint-code-block :rules="{'vue/no-parsing-error': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-{{ foo }}
-{{ foo.bar }}
+<template>
+  <!-- ✗ BAD -->
+  {{ . }}
+  {{ foo bar }}
+  <div :class="*abc*" / @click="def(">
+    </span>
+  </div id="ghi">
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
 ```json
 {
-  "vue/no-parsing-error": [2, {
+  "vue/no-parsing-error": ["error", {
     "abrupt-closing-of-empty-comment": true,
     "absence-of-digits-in-numeric-character-reference": true,
     "cdata-in-html-content": true,

From 4dcc6b903a4cd56dd295eac95ebfe84f238333ee Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 14:26:32 +0900
Subject: [PATCH 26/99] update no-reserved-keys

---
 docs/rules/no-reserved-keys.md | 45 +++++++++++++++++++---------------
 1 file changed, 25 insertions(+), 20 deletions(-)

diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index b9f8e4a69..dbc8d256f 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -2,13 +2,14 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-This rule prevents to use [reserved names](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue-reserved.json) to avoid conflicts and unexpected behavior.
-
-## Rule Details
+## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
+This rule prevents to use [reserved names](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue-reserved.json) to avoid conflicts and unexpected behavior.
 
-```js
+<eslint-code-block :rules="{'vue/no-reserved-keys': ['error']}">
+```
+<script>
+/* ✗ BAD */
 export default {
   props: {
     $el: String
@@ -25,28 +26,30 @@ export default {
     $nextTick () {}
   }
 }
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
-This rule has an object option:
-
-`"reserved"`: [] (default) array of additional restricted attributes inside `groups`.
-
-`"groups"`: [] (default) array of additional group names to search for duplicates in.
-
-### Example:
-
 ``` json
-"vue/no-reserved-keys": [2, {
-  reserved: ['foo', 'foo2'],
-  groups: ['firebase']
-}]
+{
+  "vue/no-reserved-keys": ["error", {
+    "reserved": [],
+    "groups": []
+  }]
+}
 ```
 
-:-1: Examples of **incorrect** code for this configuration
+- `reserved` (`string[]`) ... Array of additional restricted attributes inside `groups`. Default is empty.
+- `groups` (`string[]`) ... Array of additional group names to search for duplicates in. Default is empty.
 
-```js
+### `{ "reserved": ["foo", "foo2"], "groups": ["firebase"] }`
+
+<eslint-code-block :rules="{'vue/no-reserved-keys': ['error', {reserved: ['foo', 'foo2'], groups: ['firebase']}]}">
+```
+<script>
+/* ✗ BAD */
 export default {
   computed: {
     foo () {}
@@ -55,9 +58,11 @@ export default {
     foo2 () {}
   }
 }
+</script>
 ```
+</eslint-code-block>
 
-## Related links
+## :books: Further reading
 
 - [List of reserved keys](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue-reserved.json)
 

From 77356ee4789af466ae37b38c5abc318c7c4e565d Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 14:26:48 +0900
Subject: [PATCH 27/99] update no-shared-component-data

---
 docs/rules/no-shared-component-data.md | 48 ++++++++++++++------------
 1 file changed, 25 insertions(+), 23 deletions(-)

diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index 7e6033c69..bebc17605 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -9,27 +9,10 @@ When using the data property on a component (i.e. anywhere except on `new Vue`),
 
 When the value of `data` is an object, it’s shared across all instances of a component.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```js
-Vue.component('some-comp', {
-  data: {
-    foo: 'bar'
-  }
-})
+<eslint-code-block :rules="{'vue/no-shared-component-data': ['error']}">
 ```
-
-```js
-export default {
-  data: {
-    foo: 'bar'
-  }
-})
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```js
+<script>
+/* ✓ GOOD */
 Vue.component('some-comp', {
   data: function () {
     return {
@@ -37,9 +20,7 @@ Vue.component('some-comp', {
     }
   }
 })
-```
 
-```js
 export default {
   data () {
     return {
@@ -47,13 +28,34 @@ export default {
     }
   }
 }
+</script>
+```
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/no-shared-component-data': ['error']}">
+```
+<script>
+/* ✗ BAD */
+Vue.component('some-comp', {
+  data: {
+    foo: 'bar'
+  }
+})
+
+export default {
+  data: {
+    foo: 'bar'
+  }
+}
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
 Nothing.
 
-## Related links
+## :books: Further reading
 
 - [API - data](https://vuejs.org/v2/api/#data)
 

From d1fb784e9130b4c1f227458189e1ea5267c04e1e Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 14:27:01 +0900
Subject: [PATCH 28/99] update no-side-effects-in-computed-properties

---
 .../no-side-effects-in-computed-properties.md | 55 ++++++++++++-------
 1 file changed, 35 insertions(+), 20 deletions(-)

diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 0f4791e7e..61855cea4 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -4,35 +4,50 @@
 
 It is considered a very bad practice to introduce side effects inside computed properties. It makes the code not predictable and hard to understand.
 
+## :book: Rule Details
 
-## Rule Details
+This rule is aimed at preventing the code which makes side effects in computed properties.
 
-Examples of **incorrect** code for this rule:
-
-```js
-computed: {
-  fullName () {
-    this.firstName = 'lorem' // <- side effect
-    return `${this.firstName} ${this.lastName}`
-  },
-  reversedArray () {
-    return this.array.reverse() // <- side effect - orginal array is being mutated
+<eslint-code-block :rules="{'vue/no-side-effects-in-computed-properties': ['error']}">
+```
+<script>
+/* ✓ GOOD */
+export default {
+  computed: {
+    fullName () {
+      return `${this.firstName} ${this.lastName}`
+    },
+    reversedArray () {
+      return this.array.slice(0).reverse() // .slice makes a copy of the array, instead of mutating the orginal
+    }
   }
 }
+</script>
 ```
+</eslint-code-block>
 
-Examples of **correct** code for this rule:
-
-```js
-computed: {
-  fullName () {
-    return `${this.firstName} ${this.lastName}`
-  },
-  reversedArray () {
-    return this.array.slice(0).reverse() // .slice makes a copy of the array, instead of mutating the orginal
+<eslint-code-block :rules="{'vue/no-side-effects-in-computed-properties': ['error']}">
+```
+<script>
+/* ✗ BAD */
+export default {
+  computed: {
+    fullName () {
+      this.firstName = 'lorem' // <- side effect
+      return `${this.firstName} ${this.lastName}`
+    },
+    reversedArray () {
+      return this.array.reverse() // <- side effect - orginal array is being mutated
+    }
   }
 }
+</script>
 ```
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
 
 ## :mag: Implementation
 

From 54dabaca9e6ca6d8bb2277b19ef5545f2576b9cc Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 14:37:51 +0900
Subject: [PATCH 29/99] update no-template-key

---
 docs/rules/no-template-key.md | 24 ++++++++++++------------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index c5d82473c..d9d6f42eb 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -8,20 +8,20 @@ Vue.js disallows `key` attribute on `<template>` elements.
 
 This rule reports the `<template>` elements which have `key` attribute.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<template key="foo"> ... </template>
-<template v-bind:key="bar"> ... </template>
-<template :key="baz"> ... </template>
+<eslint-code-block :rules="{'vue/no-template-key': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div key="foo"> ... </div>
-<template> ... </template>
+<template>
+  <!-- ✓ GOOD -->
+  <div key="foo"> ... </div>
+  <template> ... </template>
+
+  <!-- ✗ BAD -->
+  <template key="foo"> ... </template>
+  <template v-bind:key="bar"> ... </template>
+  <template :key="baz"> ... </template>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

From fea2c989ed57dc2358515a736e3692d1384e4355 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 14:38:05 +0900
Subject: [PATCH 30/99] update no-template-shadow

---
 docs/rules/no-template-shadow.md | 57 +++++++++++++-------------------
 1 file changed, 23 insertions(+), 34 deletions(-)

diff --git a/docs/rules/no-template-shadow.md b/docs/rules/no-template-shadow.md
index c175228bb..630c3a6ad 100644
--- a/docs/rules/no-template-shadow.md
+++ b/docs/rules/no-template-shadow.md
@@ -8,51 +8,40 @@
 
 This rule aims to eliminate shadowed variable declarations of v-for directives or scope attributes.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<template>
-   <div>
-     <div v-for="i in 5">
-       <div v-for="i in 10"></div>
-     </div>
-   </div>
- </template>
- ```
-
- ```html
+<eslint-code-block :rules="{'vue/no-template-shadow': ['error']}">
+```
 <template>
-   <div>
-     <div v-for="i in 5"></div>
-   </div>
- </template>
+  <!-- ✓ GOOD -->
+  <div v-for="i in 5"></div>
+  <div v-for="j in 5"></div>
+
+  <!-- ✗ BAD -->
+  <div>
+    <div v-for="k in 5">
+      <div v-for="k in 10"></div>
+      <div slot-scope="{ k }"></div>
+    </div>
+  </div>
+  <div v-for="l in 5"></div>
+</template>
+
 <script>
   export default {
     data () {
       return {
-        i: 10
+        l: false
       }
     }
   }
-</script>
- ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<template>
-  <div v-for="i in 5"></div>
-  <div v-for="i in 5"></div>
-</template>
-<script>
-  export default {
-    computed: {
-      f () { }
-    }
-  }
 </script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
 Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-template-shadow.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-template-shadow.js)

From 1f3770f2a3d6603775650dde4e4064c3bf4aaa00 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 14:38:24 +0900
Subject: [PATCH 31/99] update no-textarea-mustache

---
 docs/rules/no-textarea-mustache.md | 18 +++++++++---------
 1 file changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 54f98b015..60b235089 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -10,23 +10,23 @@
 
 This rule reports mustaches in `<textarea>`.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<textarea>{{ message }}</textarea>
+<eslint-code-block :rules="{'vue/no-textarea-mustache': ['error']}">
 ```
+<template>
+  <!-- ✓ GOOD -->
+  <textarea v-model="message" />
 
-:+1: Examples of **correct** code for this rule:
-
-```html
-<textarea v-model="message"/>
+  <!-- ✗ BAD -->
+  <textarea>{{ message }}</textarea>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
 Nothing.
 
-## Related links
+## :books: Further reading
 
 - [Guide - Forms / Multiline text](https://vuejs.org/v2/guide/forms.html#Multiline-text)
 

From 303d5b9f1e7316c3ef50eb4970f28191ae543a56 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 14:39:32 +0900
Subject: [PATCH 32/99] update no-unused-vars

---
 docs/rules/no-unused-vars.md | 22 +++++++++-------------
 1 file changed, 9 insertions(+), 13 deletions(-)

diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index 7b802f139..376e88354 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -2,29 +2,25 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-This rule report variable definitions of v-for directives or scope attributes if those are not used.
-
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
+This rule report variable definitions of v-for directives or scope attributes if those are not used.
 
-```html
+<eslint-code-block :rules="{'vue/no-unused-vars': ['error']}">
+```
 <template>
-  <ol v-for="i in 5"><!-- "i" is defined but never used. -->
-    <li>item</li>
+  <!-- ✓ GOOD -->
+  <ol v-for="i in 5">
+    <li>{{ i }}</li>
   </ol>
-</template>
-```
-
-:+1: Examples of **correct** code for this rule:
 
-```html
-<template>
+  <!-- ✗ BAD -->
   <ol v-for="i in 5">
-    <li>{{i}}</li><!-- "i" is defined and used. -->
+    <li>item</li>
   </ol>
 </template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

From 3b23e2300d76b3e8e66d27277ee032ffad541697 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 15:54:11 +0900
Subject: [PATCH 33/99] update no-use-v-if-with-v-for

---
 docs/rules/no-use-v-if-with-v-for.md | 109 +++++++++++----------------
 1 file changed, 42 insertions(+), 67 deletions(-)

diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 25b272046..8e9678ec7 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -12,93 +12,68 @@
 >
 > https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential
 
-
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<TodoItem
-  v-if="complete"
-  v-for="todo in todos"
-  :todo="todo"
-/>
-```
-
-In this case, the `v-if` should be written on the wrapper element.
+This rule is aimed at preventing the use of `v-for` directives together with `v-if` directives on the same element.
 
-
-```html
-<TodoItem
-  v-for="todo in todos"
-  v-if="todo.shown"
-  :todo="todo"
-/>
+<eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error']}">
 ```
+<template>
+  <!-- ✓ GOOD -->
+  <ul v-if="complete">
+    <TodoItem
+      v-for="todo in todos"
+      :todo="todo"
+    />
+  </ul>
+  <TodoItem
+    v-for="todo in shownTodos"
+    :todo="todo"
+  />
 
-In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list.
-
-
-:+1: Examples of **correct** code for this rule:
-
-
-```html
-<ul v-if="complete">
+  <!-- ✗ BAD -->
   <TodoItem
+    v-if="complete"
     v-for="todo in todos"
     :todo="todo"
-  />
-</ul>
+  /><!-- ↑ In this case, the `v-if` should be written on the wrapper element. -->
+  <TodoItem
+    v-for="todo in todos"
+    v-if="todo.shown"
+    :todo="todo"
+  /><!-- ↑ In this case, the `v-for` list variable should be replace with a computed property that returns your filtered list. -->
+</template>
 ```
+</eslint-code-block>
 
-
-
-```html
-<TodoItem
-  v-for="todo in shownTodos"
-  :todo="todo"
-/>
-```
+## :wrench: Options
 
 ```js
-computed: {
-  shownTodos() {
-    return this.todos.filter((todo) => todo.shown)
-  }
+{
+  "vue/no-use-v-if-with-v-for": ["error", {
+    allowUsingIterationVar: false
+  }]
 }
 ```
 
-## :wrench: Options
+- `allowUsingIterationVar` (`boolean`) ... Enables The `v-if` directive use the reference which is to the variables which are defined by the `v-for` directives. Default is `false`.
 
-`allowUsingIterationVar` - Enables The `v-if` directive use the reference which is to the variables which are defined by the `v-for` directives.
+### { "allowUsingIterationVar": true }
 
-```js
-'vue/no-use-v-if-with-v-for': ['error', {
-  allowUsingIterationVar: true // default: false
-}]
+<eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error', {allowUsingIterationVar: true}]}">
 ```
-
-:+1: Examples of additional **correct** code for this rule with sample `"allowUsingIterationVar": true` options:
-
-```html
-<TodoItem
-  v-for="todo in todos"
-  v-if="todo.shown"
-  :todo="todo"
-/>
-```
-
-:-1: Examples of additional **incorrect** code for this rule with sample `"allowUsingIterationVar": true` options:
-
-```html
-<TodoItem
-  v-if="complete"
-  v-for="todo in todos"
-  :todo="todo"
-/>
+<template>
+  <!-- ✓ GOOD -->
+  <TodoItem
+    v-for="todo in todos"
+    v-if="todo.shown"
+    :todo="todo"
+  />
+</template>
 ```
+</eslint-code-block>
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Avoid v-if with v-for](https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential)
 - [Guide - Conditional / v-if with v-for](https://vuejs.org/v2/guide/conditional.html#v-if-with-v-for)

From fdfeb7688107c4317f7da6e5706657dc597efe2f Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 15:54:23 +0900
Subject: [PATCH 34/99] update no-v-html

---
 docs/rules/no-v-html.md | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index 11e3a4855..7b83ea6f7 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -8,33 +8,29 @@ This rule reports use of `v-html` directive in order to reduce the risk of injec
 
 This rule reports all uses of `v-html` to help prevent XSS attacks.
 
-This rule does not check syntax errors in directives because it's checked by no-parsing-error rule.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<template>
-    <div v-html="someHTML"></div>
-</template>
+<eslint-code-block :rules="{'vue/no-v-html': ['error']}">
 ```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
 <template>
-    <div>{{someHTML}}</div>
+  <!-- ✓ GOOD -->
+  <div>{{ someHTML }}</div>
+
+  <!-- ✗ BAD -->
+  <div v-html="someHTML"></div>
 </template>
 ```
+</eslint-code-block>
+
+This rule does not check syntax errors in directives because it's checked by no-parsing-error rule.
 
 ## :wrench: Options
 
 Nothing.
 
-## When Not To Use It
+## :mute: When Not To Use It
 
 If you are certain the content passed `to v-html` is sanitized HTML you can disable this rule.
 
-## Related links
+## :books: Further reading
 
 - [XSS in Vue.js](https://blog.sqreen.io/xss-in-vue-js/)
 

From 5902957496c146a36e75df1a6ede171b211e433f Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 15:55:10 +0900
Subject: [PATCH 35/99] update order-in-components

---
 docs/rules/order-in-components.md | 106 ++++++++++++++++--------------
 1 file changed, 56 insertions(+), 50 deletions(-)

diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index e0aa29329..a7a99ea3f 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -3,76 +3,82 @@
 - :gear: This rule is included in `"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 makes sure you keep declared order of properties in components.
-
 ## :book: Rule Details
 
+This rule makes sure you keep declared order of properties in components.
 Recommended order of properties can be [found here](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended).
 
-Examples of **incorrect** code for this rule:
-
-```js
-name: 'app',
-data () {
-  return {
-    msg: 'Welcome to Your Vue.js App'
+<eslint-code-block :rules="{'vue/order-in-components': ['error']}">
+```
+<script>
+/* ✓ GOOD */
+export default {
+  name: 'app',
+  props: {
+    propA: Number
+  },
+  data () {
+    return {
+      msg: 'Welcome to Your Vue.js App'
+    }
   }
-},
-props: {
-  propA: Number,
 }
+</script>
 ```
+</eslint-code-block>
 
-Examples of **correct** code for this rule:
-
-```js
-
+<eslint-code-block :rules="{'vue/order-in-components': ['error']}">
+```
+<script>
+/* ✗ BAD */
 export default {
   name: 'app',
-  props: {
-    propA: Number,
-  },
   data () {
     return {
       msg: 'Welcome to Your Vue.js App'
     }
   },
+  props: {
+    propA: Number
+  }
 }
-
+</script>
 ```
-
-### Options
-
-If you want you can change the order providing the optional configuration in your `.eslintrc` file. Setting responsible for the above order looks like this:
-
-``` json
-"vue/order-in-components": ["error", {
-  "order": [
-    "el",
-    "name",
-    "parent",
-    "functional",
-    ["delimiters", "comments"],
-    ["components", "directives", "filters"],
-    "extends",
-    "mixins",
-    "inheritAttrs",
-    "model",
-    ["props", "propsData"],
-    "data",
-    "computed",
-    "watch",
-    "LIFECYCLE_HOOKS",
-    "methods",
-    ["template", "render"],
-    "renderError"
-  ]
-}]
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/order-in-components": ["error", {
+    "order": [
+      "el",
+      "name",
+      "parent",
+      "functional",
+      ["delimiters", "comments"],
+      ["components", "directives", "filters"],
+      "extends",
+      "mixins",
+      "inheritAttrs",
+      "model",
+      ["props", "propsData"],
+      "data",
+      "computed",
+      "watch",
+      "LIFECYCLE_HOOKS",
+      "methods",
+      ["template", "render"],
+      "renderError"
+    ]
+  }]
+}
 ```
 
-If you want some of properties to be treated equally in order you can group them into arrays, like we did with `delimiters` and `comments`.
+- `order` (`(string | string[])[]`) ... The order of properties. Elements are the property names or `LIFECYCLE_HOOKS`. If an element is the array of strings, it means any of those can be placed there unordered. Default is above.
+
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Component/instance options order](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended)
 

From ac27804ffbeae140a1707d3048e8ae36623386cb Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Tue, 14 Aug 2018 15:55:25 +0900
Subject: [PATCH 36/99] update prop-name-casing

---
 docs/rules/prop-name-casing.md | 47 ++++++++++++++++++++++++----------
 1 file changed, 33 insertions(+), 14 deletions(-)

diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index ae26f2907..e87343fab 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -9,35 +9,54 @@ This rule would enforce proper casing of props in vue components(camelCase).
 
 (https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended).
 
-:+1: Examples of **correct** code for `camelCase`:
-
-```js
+<eslint-code-block :rules="{'vue/prop-name-casing': ['error']}">
+```
+<script>
 export default {
   props: {
-    greetingText: String
+    /* ✓ GOOD */
+    greetingText: String,
+
+    /* ✗ BAD */
+    'greeting-text': String,
+    greeting_text: String
   }
 }
+</script>
 ```
+</eslint-code-block>
 
-:-1: Examples of **incorrect** code for `camelCase`:
+## :wrench: Options
 
-```js
-export default {
-  props: {
-    'greeting-text': String
-  }
+```
+{
+  "vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
 }
 ```
 
-## :wrench: Options
+- `"camelCase"` (default) ... Enforce property names in `props` to camel case.
+- `"snake_case"` ... Enforce property names in `props` to snake case.
 
-Default casing is set to `camelCase`.
+### `"snake_case"`
 
+<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'snake_case']}">
 ```
-"vue/prop-name-casing": ["error", "camelCase|snake_case"]
+<script>
+export default {
+  props: {
+    /* ✓ GOOD */
+    greeting_text: String,
+
+    /* ✗ BAD */
+    'greeting-text': String,
+    greetingText: String
+  }
+}
+</script>
 ```
+</eslint-code-block>
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Prop name casing](https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended)
 

From ba25f2208e16de7cec065df036771e7cb0bfa60a Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 6 Nov 2018 13:10:24 +0100
Subject: [PATCH 37/99] Add `valid-*` eslint-code-block (#622)

---
 docs/rules/valid-v-bind.md    | 26 ++++++++--------
 docs/rules/valid-v-cloak.md   | 22 ++++++-------
 docs/rules/valid-v-else-if.md | 24 +++++++--------
 docs/rules/valid-v-else.md    | 24 +++++++--------
 docs/rules/valid-v-for.md     | 58 +++++++++++++++++------------------
 docs/rules/valid-v-html.md    | 22 ++++++-------
 docs/rules/valid-v-if.md      | 42 ++++++++++++-------------
 docs/rules/valid-v-model.md   | 45 +++++++++++++--------------
 docs/rules/valid-v-on.md      | 35 ++++++++++-----------
 docs/rules/valid-v-once.md    | 22 ++++++-------
 docs/rules/valid-v-pre.md     | 22 ++++++-------
 docs/rules/valid-v-show.md    | 22 ++++++-------
 docs/rules/valid-v-text.md    | 23 +++++++-------
 13 files changed, 193 insertions(+), 194 deletions(-)

diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index d430a572c..8809a9314 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -15,20 +15,22 @@ This rule does not report `v-bind` directives which do not have their argument (
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
+<eslint-code-block :rules="{'vue/valid-v-bind': ['error']}">
 ```html
-<div v-bind/>
-<div :aaa/>
-<div v-bind:aaa.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div v-bind="foo"/>
-<div v-bind:aaa="foo"/>
-<div :aaa="foo"/>
-<div :aaa.prop="foo"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-bind="foo"/>
+  <div v-bind:aaa="foo"/>
+  <div :aaa="foo"/>
+  <div :aaa.prop="foo"/>
+
+  <!-- ✗ BAD -->
+  <div v-bind/>
+  <div :aaa/>
+  <div v-bind:aaa.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 4927fc093..34ae27f72 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -12,19 +12,19 @@ This rule reports `v-cloak` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-cloak.bbb></div>`
 - The directive has that attribute value. E.g. `<div v-cloak="ccc"></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-cloak:aaa/>
-<div v-cloak.bbb/>
-<div v-cloak="ccc"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-cloak': ['error']}">
 ```html
-<div v-cloak/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-cloak/>
+
+  <!-- ✗ BAD -->
+  <div v-cloak:aaa/>
+  <div v-cloak.bbb/>
+  <div v-cloak="ccc"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index edc29c9ec..203e9a3be 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -16,20 +16,20 @@ This rule reports `v-else-if` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-else-if/>
-<div v-else-if:aaa="foo"/>
-<div v-else-if.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-else-if': ['error']}">
 ```html
-<div v-if="foo"/>
-<div v-else-if="bar"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo"/>
+  <div v-else-if="bar"/>
+
+  <!-- ✗ BAD -->
+  <div v-else-if/>
+  <div v-else-if:aaa="foo"/>
+  <div v-else-if.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 7a0d63887..b1f5e0bb4 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -14,20 +14,20 @@ This rule reports `v-else` directives in the following cases:
 - The directive is on the elements that the previous element don't have `v-if`/`v-if-else` directives. E.g. `<div v-else></div>`
 - The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. `<div v-if="foo" v-else></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-else="foo"/>
-<div v-else:aaa/>
-<div v-else.bbb/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-else': ['error']}">
 ```html
-<div v-if="foo"/>
-<div v-else/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo"/>
+  <div v-else/>
+
+  <!-- ✗ BAD -->
+  <div v-else="foo"/>
+  <div v-else:aaa/>
+  <div v-else.bbb/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index cfb14c284..3211e0d60 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -22,37 +22,37 @@ The following cases are syntax errors:
 - The directive's value is not the form `alias in expr`. E.g. `<div v-for="foo"></div>`
 - The alias is not LHS. E.g. `<div v-for="foo() in list"></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-for/>
-<div v-for:aaa="todo in todos"/>
-<div v-for.bbb="todo in todos"/>
-<div
-  v-for="todo in todos"
-  is="MyComponent"
-/>
-<MyComponent v-for="todo in todos"/>
-<MyComponent
-  v-for="todo in todos"
-  :key="foo"
-/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-for': ['error']}">
 ```html
-<div v-for="todo in todos"/>
-<MyComponent
-  v-for="todo in todos"
-  :key="todo.id"
-/>
-<div
-  v-for="todo in todos"
-  :is="MyComponent"
-  :key="todo.id"
-/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-for="todo in todos"/>
+  <MyComponent
+    v-for="todo in todos"
+    :key="todo.id"
+  />
+  <div
+    v-for="todo in todos"
+    :is="MyComponent"
+    :key="todo.id"
+  />
+
+  <!-- ✗ BAD -->
+  <div v-for/>
+  <div v-for:aaa="todo in todos"/>
+  <div v-for.bbb="todo in todos"/>
+  <div
+    v-for="todo in todos"
+    is="MyComponent"
+  />
+  <MyComponent v-for="todo in todos"/>
+  <MyComponent
+    v-for="todo in todos"
+    :key="foo"
+  />
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index fcd74dc9e..ccc4dfc60 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -14,19 +14,19 @@ This rule reports `v-html` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-html/>
-<div v-html:aaa="foo"/>
-<div v-html.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-html': ['error']}">
 ```html
-<div v-html="foo"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-html="foo"/>
+
+  <!-- ✗ BAD -->
+  <div v-html/>
+  <div v-html:aaa="foo"/>
+  <div v-html.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index d036fc8a7..6e38ae81c 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -15,29 +15,29 @@ This rule reports `v-if` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-if/>
-<div v-if:aaa="foo"/>
-<div v-if.bbb="foo"/>
-<div
-  v-if="foo"
-  v-else
-/>
-<div
-  v-if="foo"
-  v-else-if="bar"
-/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-if': ['error']}">
 ```html
-<div v-if="foo"/>
-<div v-else-if="bar"/>
-<div v-else/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-if="foo"/>
+  <div v-else-if="bar"/>
+  <div v-else/>
+
+  <!-- ✗ BAD -->
+  <div v-if/>
+  <div v-if:aaa="foo"/>
+  <div v-if.bbb="foo"/>
+  <div
+    v-if="foo"
+    v-else
+  />
+  <div
+    v-if="foo"
+    v-else-if="bar"
+  />
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 25538933c..78dbca74d 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -18,30 +18,30 @@ This rule reports `v-model` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<input v-model>
-<input v-model:aaa="foo">
-<input v-model.bbb="foo">
-<input v-model="foo + bar">
-<div v-model="foo"/>
-<div v-for="todo in todos">
-  <input v-model="todo">
-</div>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-model': ['error']}">
 ```html
-<input v-model="foo">
-<input v-model.lazy="foo">
-<textarea v-model="foo"/>
-<MyComponent v-model="foo"/>
-<div v-for="todo in todos">
-  <input v-model="todo.name">
-</div>
+<template>
+  <!-- ✓ GOOD -->
+  <input v-model="foo">
+  <input v-model.lazy="foo">
+  <textarea v-model="foo"/>
+  <MyComponent v-model="foo"/>
+  <div v-for="todo in todos">
+    <input v-model="todo.name">
+  </div>
+
+  <!-- ✗ BAD -->
+  <input v-model>
+  <input v-model:aaa="foo">
+  <input v-model.bbb="foo">
+  <input v-model="foo + bar">
+  <div v-model="foo"/>
+  <div v-for="todo in todos">
+    <input v-model="todo">
+  </div>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -51,7 +51,6 @@ Nothing.
 
 - [no-parsing-error]
 
-
 [no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index 0f05d0cbb..c38c6c21e 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -14,25 +14,25 @@ This rule reports `v-on` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-on/>
-<div v-on:click/>
-<div v-on:click.aaa="foo"/>
-<div @click/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-on': ['error']}">
 ```html
-<div v-on="foo"/>
-<div v-on:click="foo"/>
-<div @click="foo"/>
-<div @click.left="foo"/>
-<div @click.prevent/>
-<div @click.stop/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-on="foo"/>
+  <div v-on:click="foo"/>
+  <div @click="foo"/>
+  <div @click.left="foo"/>
+  <div @click.prevent/>
+  <div @click.stop/>
+
+  <!-- ✗ BAD -->
+  <div v-on/>
+  <div v-on:click/>
+  <div v-on:click.aaa="foo"/>
+  <div @click/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -42,7 +42,6 @@ Nothing.
 
 - [no-parsing-error]
 
-
 [no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index be3f5f425..f4d29de3d 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -12,19 +12,19 @@ This rule reports `v-once` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-once.bbb></div>`
 - The directive has that attribute value. E.g. `<div v-once="ccc"></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-once:aaa/>
-<div v-once.bbb/>
-<div v-once="ccc"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-once': ['error']}">
 ```html
-<div v-once/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-once/>
+
+  <!-- ✗ BAD -->
+  <div v-once:aaa/>
+  <div v-once.bbb/>
+  <div v-once="ccc"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index 693a416ee..b38b3534b 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -12,19 +12,19 @@ This rule reports `v-pre` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-pre.bbb></div>`
 - The directive has that attribute value. E.g. `<div v-pre="ccc"></div>`
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-pre:aaa/>
-<div v-pre.bbb/>
-<div v-pre="ccc"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-pre': ['error']}">
 ```html
-<div v-pre/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-pre/>
+
+  <!-- ✗ BAD -->
+  <div v-pre:aaa/>
+  <div v-pre.bbb/>
+  <div v-pre="ccc"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index 3dfd20fa5..8e54db32c 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -14,19 +14,20 @@ This rule reports `v-show` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
 
+<eslint-code-block :rules="{'vue/valid-v-show': ['error']}">
 ```html
-<div v-show/>
-<div v-show:aaa="foo"/>
-<div v-show.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div v-show="foo"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-show="foo"/>
+
+  <!-- ✗ BAD -->
+  <div v-show/>
+  <div v-show:aaa="foo"/>
+  <div v-show.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -36,7 +37,6 @@ Nothing.
 
 - [no-parsing-error]
 
-
 [no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index 5109126ae..86272c309 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -14,19 +14,19 @@ This rule reports `v-text` directives in the following cases:
 
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-text/>
-<div v-text:aaa="foo"/>
-<div v-text.bbb="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/valid-v-text': ['error']}">
 ```html
-<div v-text="foo"/>
+<template>
+  <!-- ✓ GOOD -->
+  <div v-text="foo"/>
+
+  <!-- ✗ BAD -->
+  <div v-text/>
+  <div v-text:aaa="foo"/>
+  <div v-text.bbb="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -36,7 +36,6 @@ Nothing.
 
 - [no-parsing-error]
 
-
 [no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation

From 75093d9c96c3768a55b8a7537b2945028e448233 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Mon, 12 Nov 2018 01:18:04 +0100
Subject: [PATCH 38/99] Update documentation

- no-spaces-around-equal-signs-in-attribute
- script-indent
- singleline-html-element-content-newline
- use-v-on-exact
---
 .gitignore                                    |   1 +
 ...-spaces-around-equal-signs-in-attribute.md |  36 ++++--
 docs/rules/script-indent.md                   |  89 +++++++-------
 ...singleline-html-element-content-newline.md | 116 ++++++++----------
 docs/rules/use-v-on-exact.md                  |  27 ++--
 package.json                                  |   2 +-
 6 files changed, 144 insertions(+), 127 deletions(-)

diff --git a/.gitignore b/.gitignore
index 1828a214c..29bf6ea21 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,3 +6,4 @@
 /test.*
 yarn.lock
 yarn-error.log
+docs/.vuepress/dist
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index 7ab72b26e..2999f849c 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -2,24 +2,38 @@
 
 - :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 disallow spaces around equal signs in attribute.
-
-HTML5 allows spaces around equal signs. But space-less is easier to read, and groups entities better together.
-
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
+This rule disallow spaces around equal signs in attribute.
 
-```html
-<div class = "item">
+<eslint-code-block :rules="{'vue/no-spaces-around-equal-signs-in-attribute': ['error']}">
 ```
+<template>
+  <!-- ✗ BAD -->
+  <div class = "item"></div>
+  <!-- ✓ GOOD -->
+  <div class="item"></div>
+</template>
+```
+</eslint-code-block>
+
+::: tip Info
+HTML5 allows spaces around equal signs. But space-less is easier to read, and groups entities better together.
+:::
 
-:+1: Examples of **correct** code for this rule:
+## :wrench: Options
 
-```html
-<div class="item">
+```json
+{
+  "vue/no-spaces-around-equal-signs-in-attribute": ["error"]
+}
 ```
 
 ## Further Reading
 
-* [HTML5 Style Guide - W3Schools *Spaces and Equal Signs*](https://www.w3schools.com/html/html5_syntax.asp)
\ No newline at end of file
+* [HTML5 Style Guide - W3Schools *Spaces and Equal Signs*](https://www.w3schools.com/html/html5_syntax.asp)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-spaces-around-equal-signs-in-attribute.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-spaces-around-equal-signs-in-attribute.js)
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index b0812555e..8d0b947e7 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -2,31 +2,12 @@
 
 - :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 is similar to core [indent](https://eslint.org/docs/rules/indent) rule, but it has an option for inside of `<script>` tag.
-
 ## Rule Details
 
-This rule has some options.
-
-```json
-{
-  "vue/script-indent": ["error", TYPE, {
-    "baseIndent": 0,
-    "switchCase": 0,
-    "ignores": []
-  }]
-}
-```
-
-- `TYPE` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
-- `baseIndent` (`integer`) ... The multiplier of indentation for top-level statements. Default is `0`.
-- `switchCase` (`integer`) ... The multiplier of indentation for `case`/`default` clauses. Default is `0`.
-- `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 this rule:
+This rule is similar to core [indent](https://eslint.org/docs/rules/indent) rule, but it has an option for inside of `<script>` tag.
 
-```js
-/*eslint vue/script-indent: "error"*/
+<eslint-code-block :rules="{'vue/script-indent': ['error']}">
+```vue
 <script>
 let a = {
   foo: 1,
@@ -50,11 +31,50 @@ const d = {
       }
 </script>
 ```
+</eslint-code-block>
+
+## :wrench: Options
+
+This rule has some options.
+
+```json
+{
+  "vue/script-indent": ["error", TYPE, {
+    "baseIndent": 0,
+    "switchCase": 0,
+    "ignores": []
+  }]
+}
+```
+
+- `TYPE` (`number | "tab"`) ... The type of indentation. Default is `2`. If this is a number, it's the number of spaces for one indent. If this is `"tab"`, it uses one tab for one indent.
+- `baseIndent` (`integer`) ... The multiplier of indentation for top-level statements. Default is `0`.
+- `switchCase` (`integer`) ... The multiplier of indentation for `case`/`default` clauses. Default is `0`.
+- `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 this rule:
+::: warning Note
+This rule only checks `.vue` files and does not interfere with other `.js` files. Unfortunately the default `indent` rule when turned on will try to lint both, so in order to make them complementary you can use `overrides` setting and disable `indent` rule on `.vue` files:
+:::
 
-```js
-/*eslint vue/script-indent: ["error", 2, {"baseIndent": 1}]*/
+```json
+{
+  "rules": {
+    "vue/script-indent": ["error", 4, { "baseIndent": 1 }]
+  },
+  "overrides": [
+    {
+      "files": ["*.vue"],
+      "rules": {
+        "indent": "off"
+      }
+    }
+  ]
+}
+```
+
+### `2, "baseIndent": 1`
+<eslint-code-block :rules="{'vue/script-indent': ['error', 2, { 'baseIndent': 1 }]}">
+```vue
 <script>
   let a = {
     foo: 1,
@@ -78,24 +98,7 @@ const d = {
         }
 </script>
 ```
-
-## Important note
-
-This rule only checks `.vue` files and does not interfere with other `.js` files. Unfortunately the default `indent` rule when turned on will try to lint both, so in order to make them complementary you can use `overrides` setting and disable `indent` rule on `.vue` files:
-
-```
-"rules": {
-  "vue/script-indent": ["error", 4, { "baseIndent": 1 }]
-},
-"overrides": [
-  {
-    "files": ["*.vue"],
-    "rules": {
-      "indent": "off"
-    }
-  }
-]
-```
+</eslint-code-block>
 
 ## Related rules
 
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index c58622ed0..9586dedd6 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -7,36 +7,36 @@
 This rule enforces a line break before and after the contents of a singleline element.
 
 
-:-1: Examples of **incorrect** code:
-
-```html
-<div attr>content</div>
-
-<tr attr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
-
-<div attr><!-- comment --></div>
-```
-
-:+1: Examples of **correct** code:
-
+<eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error']}">
 ```html
-<div attr>
-  content
-</div>
-
-<tr attr>
-  <td>
-    {{ data1 }}
-  </td>
-  <td>
-    {{ data2 }}
-  </td>
-</tr>
-
-<div attr>
-  <!-- comment -->
-</div>
+<template>
+  <!-- ✓ GOOD -->
+  <div attr>
+    content
+  </div>
+  
+  <tr attr>
+    <td>
+      {{ data1 }}
+    </td>
+    <td>
+      {{ data2 }}
+    </td>
+  </tr>
+  
+  <div attr>
+    <!-- comment -->
+  </div>
+  
+  <!-- ✗ BAD -->
+  <div attr>content</div>
+  
+  <tr attr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
+  
+  <div attr><!-- comment --></div>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -54,48 +54,38 @@ This rule enforces a line break before and after the contents of a singleline el
 - `ignores` ... the configuration for element names to ignore line breaks style.  
     default `["pre", "textarea"]`
 
-:-1: Examples of **incorrect** code for `{ignoreWhenNoAttributes: false}`:
-
-```html
-/* eslint vue/singleline-html-element-content-newline: ["error", { "ignoreWhenNoAttributes": false}] */
-
-<div>content</div>
-
-<tr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
 
-<div><!-- comment --></div>
-```
-
-:+1: Examples of **correct** code for `{ignoreWhenNoAttributes: true}` (default):
+### `"ignoreWhenNoAttributes": true`
 
+<eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': true}]}">
 ```html
-/* eslint vue/singleline-html-element-content-newline: ["error", { "ignoreWhenNoAttributes": true}] */
-
-<div>content</div>
-
-<tr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
-
-<div><!-- comment --></div>
+<template>
+  <!-- ✗ BAD -->
+  <div attr>content</div>
+  
+  <tr attr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
+  
+  <div attr><!-- comment --></div>
+</template>
 ```
+</eslint-code-block>
 
-:-1: Examples of **incorrect** code for `{ignoreWhenNoAttributes: true}` (default):
+### `"ignoreWhenNoAttributes": false`
 
+<eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': false}]}">
 ```html
-/* eslint vue/singleline-html-element-content-newline: ["error", { "ignoreWhenNoAttributes": true}] */
-
-<div attr>content</div>
-
-<tr attr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
-
-<div attr><!-- comment --></div>
+<template>
+  <!-- ✗ BAD -->
+  <div>content</div>
+  
+  <tr><td>{{ data1 }}</td><td>{{ data2 }}</td></tr>
+
+  <div><!-- comment --></div>
+</template>
 ```
+</eslint-code-block>
 
-:+1: Examples of **correct** code for `ignores`:
-
-```html
-/* eslint vue/singleline-html-element-content-newline: ["error", { "ignores": ["VueComponent", "pre", "textarea"]}] */
+## :mag: Implementation
 
-<VueComponent>content</VueComponent>
-
-<VueComponent attr><span>content</span></VueComponent>
-```
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/singleline-html-element-content-newline.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/singleline-html-element-content-newline.js)
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index 2753681ad..d76ac656b 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -1,27 +1,36 @@
-# Enforce usage of `exact` modifier on `v-on`
+# Enforce usage of `exact` modifier on `v-on` (vue/use-v-on-exact)
 
-- :gear: This rule is included in `"plugin:vue/essential"`.
+## :book: Rule Details
 
 This rule enforce usage of `exact` modifier on `v-on` when there is another `v-on` with modifier.
 
-:+1: Examples of **correct** code for this rule:
-
+<eslint-code-block :rules="{'vue/use-v-on-exact': ['error']}">
 ```html
 <template>
+  <!-- ✓ GOOD -->
   <button @click="foo" :click="foo"></button>
   <button v-on:click.exact="foo" v-on:click.ctrl="foo"></button>
+
+  <!-- ✗ BAD -->
+  <button v-on:click="foo" v-on:click.ctrl="foo"></button>
 </template>
 ```
+</eslint-code-block>
 
-:-1: Examples of **incorrect** code for this rule:
+## :wrench: Options
 
-```html
-<template>
-  <button v-on:click="foo" v-on:click.ctrl="foo"></button>
-</template>
+```json
+{
+  "vue/use-v-on-exact": ["error"]
+}
 ```
 
 ## Related rules
 
 - [vue/v-on-style](./v-on-style.md)
 - [vue/valid-v-on](./valid-v-on.md)
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/use-v-on-exact.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/use-v-on-exact.js)
diff --git a/package.json b/package.json
index c88772a00..7cc8e96e0 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,6 @@
     "typescript": "^3.1.3",
     "typescript-eslint-parser": "^20.0.0",
     "vue-eslint-editor": "^0.1.0",
-    "vuepress": "^0.13.1"
+    "vuepress": "^0.14.4"
   }
 }

From 029c14af4c0cd27ff6d26b2dda597d261aef64be Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Mon, 12 Nov 2018 01:18:28 +0100
Subject: [PATCH 39/99] Change some of blockquotes to warnings

---
 docs/rules/no-parsing-error.md     | 4 +++-
 docs/rules/no-textarea-mustache.md | 7 ++++---
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index dc2272900..2eabc3e8f 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -78,7 +78,9 @@ Then reports syntax errors if exist.
 You can disable HTML syntax errors by options. Please see [WHATWG HTML spec](https://html.spec.whatwg.org/multipage/parsing.html#parse-errors) to know the details of HTML syntax errors.
 Only `non-void-html-element-start-tag-with-trailing-solidus` is disabled by default because Vue.js supports self-closing tags.
 
-> Note this rule does not support all of those (E.g., it does not catch errors about DOCTYPE).
+::: warning Note
+This rule does not support all of those (E.g., it does not catch errors about DOCTYPE).
+:::
 
 The error codes which have `x-` prefix are original of this rule because errors in tree construction phase have not codified yet.
 
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 60b235089..1a955d143 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -2,9 +2,10 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-> Interpolation on textareas (`<textarea>{{text}}</textarea>`) won't work. Use `v-model` instead.
->
-> https://vuejs.org/v2/guide/forms.html#Multiline-text
+::: warning Note
+Interpolation on textareas (`<textarea>{{text}}</textarea>`) won't work. Use `v-model` instead.
+[https://vuejs.org/v2/guide/forms.html#Multiline-text](https://vuejs.org/v2/guide/forms.html#Multiline-text)
+:::
 
 ## :book: Rule Details
 

From 5dda9a0ef79f5fcc8e9af10136f45755045ec195 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Mon, 12 Nov 2018 23:50:15 +0100
Subject: [PATCH 40/99] require-prop-type-constructor

---
 docs/rules/require-prop-type-constructor.md | 44 +++++++++++----------
 1 file changed, 24 insertions(+), 20 deletions(-)

diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index b68350601..5c7757230 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -18,44 +18,48 @@ It will catch most commonly made mistakes which are using strings instead of con
 
 ## Rule Details
 
-Examples of **incorrect** code for this rule:
-
-```js
+<eslint-code-block :rules="{'vue/require-prop-type-constructor': ['error']}">
+```vue
+<script>
 export default {
   props: {
-    myProp: "Number",
-    anotherProp: ["Number", "String"],
+    /* ✓ GOOD */
+    myProp: Number,
+    anotherProp: [Number, String],
     myFieldWithBadType: {
-      type: "Object",
+      type: Object,
       default: function() {
         return {}
       },
     },
     myOtherFieldWithBadType: {
-      type: "Number",
+      type: Number,
       default: 1,
     },
-  }
-}
-```
-
-Examples of **correct** code for this rule:
-
-```js
-export default {
-  props: {
-    myProp: Number,
-    anotherProp: [Number, String],
+    /* ✗ BAD */
+    myProp: "Number",
+    anotherProp: ["Number", "String"],
     myFieldWithBadType: {
-      type: Object,
+      type: "Object",
       default: function() {
         return {}
       },
     },
     myOtherFieldWithBadType: {
-      type: Number,
+      type: "Number",
       default: 1,
     },
   }
 }
+</script>
 ```
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-prop-type-constructor.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/require-prop-type-constructor.js)

From cf5ac569d7eb9ec9116bd651bae9063a04caab2b Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 00:10:37 +0100
Subject: [PATCH 41/99] add missing Implementation blocks

---
 docs/rules/multiline-html-element-content-newline.md | 5 +++++
 docs/rules/no-unused-components.md                   | 5 +++++
 docs/rules/use-v-on-exact.md                         | 2 +-
 3 files changed, 11 insertions(+), 1 deletion(-)

diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 51be5b0fc..11468e440 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -85,3 +85,8 @@ content</VueComponent>
   class="bold">For example,</span>
 Defines the Vue component that accepts preformatted text.</VueComponent>
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/multiline-html-element-content-newline.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/multiline-html-element-content-newline.js)
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 28e6ac329..871f4b0c7 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -146,3 +146,8 @@ Note that components registered under other than `PascalCase` name have to be ca
   }
 </script>
 ```
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-unused-components.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/no-unused-components.js)
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index d76ac656b..dbd4fb023 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -1,4 +1,4 @@
-# Enforce usage of `exact` modifier on `v-on` (vue/use-v-on-exact)
+# enforce usage of `exact` modifier on `v-on` (vue/use-v-on-exact)
 
 ## :book: Rule Details
 

From e421e2fb16f0d7bda2d79b435d7c4410582f83e7 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 00:11:04 +0100
Subject: [PATCH 42/99] comment-directive

---
 docs/rules/comment-directive.md      | 24 +++++++++++++-----------
 docs/rules/no-use-v-if-with-v-for.md |  2 +-
 2 files changed, 14 insertions(+), 12 deletions(-)

diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index 32e1e792f..a573a5fd0 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -10,17 +10,9 @@ It supports usage of the following comments:
 - `eslint-disable-line`
 - `eslint-disable-next-line`
 
-For example:
-
-```html
-<template>
-  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
-  <div a="1" b="2" c="3" d="4">
-  </div>
-</template>
-```
-
-> Note: we can't write HTML comments in tags.
+::: warning Note
+We can't write HTML comments in tags.
+:::
 
 This rule doesn't throw any warning.
 
@@ -30,6 +22,16 @@ ESLint doesn't provide any API to enhance `eslint-disable` functionality and ESL
 
 This rule sends all `eslint-disable`-like comments as errors to the post-process of the `.vue` file processor, then the post-process removes all `vue/comment-directive` errors and the reported errors in disabled areas.
 
+<eslint-code-block :rules="{'vue/comment-directive': ['error']}">
+```vue
+<template>
+  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
+  <div a="1" b="2" c="3" d="4">
+  </div>
+</template>
+```
+</eslint-code-block>
+
 ## :books: Further reading
 
 - [Disabling rules with inline comments](https://eslint.org/docs/user-guide/configuring#disabling-rules-with-inline-comments)
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 8e9678ec7..a178e1534 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -48,7 +48,7 @@ This rule is aimed at preventing the use of `v-for` directives together with `v-
 
 ## :wrench: Options
 
-```js
+```json
 {
   "vue/no-use-v-if-with-v-for": ["error", {
     allowUsingIterationVar: false

From 88abee44a98379aa17049d2d73e1a50e1e8bd99a Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 00:32:40 +0100
Subject: [PATCH 43/99] require-render-return

---
 docs/rules/require-render-return.md | 22 ++++++++++++----------
 1 file changed, 12 insertions(+), 10 deletions(-)

diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index 47158bb42..92819ea90 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -2,19 +2,15 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-This rule aims to enforce render function to always return value
-
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
+This rule aims to enforce render function to always return value
 
-```js
-export default {
-  render () {}
-}
-```
+:-1: Examples of **incorrect** code for this rule:
 
-```js
+<eslint-code-block :rules="{'vue/require-render-return': ['error']}">
+```vue
+<script>
 export default {
   render (h) {
     if (foo) {
@@ -22,17 +18,23 @@ export default {
     }
   }
 }
+</script>
 ```
+</eslint-code-block>
 
 :+1: Examples of **correct** code for this rule:
 
-```js
+<eslint-code-block :rules="{'vue/require-render-return': ['error']}">
+```vue
+<script>
 export default {
   render (h) {
     return h('div', 'hello')
   }
 }
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

From b5c73797b9e404b492f3a8b0d65754c163584316 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 00:33:07 +0100
Subject: [PATCH 44/99] jsx-uses-vars code type

---
 docs/rules/jsx-uses-vars.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index f799f689d..d515ac9d7 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -11,7 +11,7 @@ This rule only has an effect when the `no-unused-vars` rule is enabled.
 
 Without this rule this code triggers warning:
 
-```js
+```jsx
 import HelloWorld from './HelloWorld';
 
 export default {

From eee4f2d4385ce08feab9b6653fc2c16edfcfefb1 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 00:33:27 +0100
Subject: [PATCH 45/99] require-prop-type-constructor

---
 docs/rules/require-prop-type-constructor.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index 5c7757230..74f9f75bb 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -3,6 +3,8 @@
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"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.
 
+## Rule Details
+
 This rule reports prop types that can't be presumed as constructors.
 
 It's impossible to catch every possible case and know whether the prop type is a constructor or not, hence this rule black list few types of nodes, instead of white-listing correct ones.
@@ -16,8 +18,6 @@ The following types are forbidden and will be reported:
 
 It will catch most commonly made mistakes which are using strings instead of constructors.
 
-## Rule Details
-
 <eslint-code-block :rules="{'vue/require-prop-type-constructor': ['error']}">
 ```vue
 <script>

From bc44d694eb360ef46eb2a6de6dbe68071dd25985 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 01:46:26 +0100
Subject: [PATCH 46/99] update

- require-v-for-key
- require-valid-default-prop
- return-in-computed-property
---
 docs/rules/require-v-for-key.md           |  25 +++---
 docs/rules/require-valid-default-prop.md  | 105 +++++++++++-----------
 docs/rules/return-in-computed-property.md |  33 ++++---
 3 files changed, 83 insertions(+), 80 deletions(-)

diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index 2b6dec909..8df615755 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -12,20 +12,19 @@ This rule reports the elements which have `v-for` and do not have `v-bind:key`.
 This rule does not report custom components.
 It will be reported by [valid-v-for] rule.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-for="todo in todos"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div
-  v-for="todo in todos"
-  :key="todo.id"
-/>
+<eslint-code-block :rules="{'vue/require-v-for-key': ['error']}">
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div
+    v-for="todo in todos"
+    :key="todo.id"
+  />
+  <!-- ✗ BAD -->
+  <div v-for="todo in todos"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index 21aac23cd..4761205fc 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -2,65 +2,64 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-This rule checks whether the default value of each prop is valid for the given type. It should report an error when default value for type `Array` or `Object` is not returned using function.
-
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
-
-```js
-props: {
-  propA: {
-    type: String,
-    default: {}
-  },
-  propB: {
-    type: String,
-    default: []
-  },
-  propC: {
-    type: Object,
-    default: []
-  },
-  propD: {
-    type: Array,
-    default: []
-  },
-  propE: {
-    type: Object,
-    default: { message: 'hello' }
-  }
-}
-```
-
-:+1: Examples of **correct** code for this rule:
+This rule checks whether the default value of each prop is valid for the given type. It should report an error when default value for type `Array` or `Object` is not returned using function.
 
-```js
-props: {
-  // basic type check (`null` means accept any type)
-  propA: Number,
-  // multiple possible types
-  propB: [String, Number],
-  // a number with default value
-  propD: {
-    type: Number,
-    default: 100
-  },
-  // object/array defaults should be returned from a factory function
-  propE: {
-    type: Object,
-    default() {
-      return { message: 'hello' }
+<eslint-code-block :rules="{'vue/require-valid-default-prop': ['error']}">
+```vue
+<script>
+export default {
+  props: {
+    /* ✓ GOOD */
+    // basic type check (`null` means accept any type)
+    propA: Number,
+    // multiple possible types
+    propB: [String, Number],
+    // a number with default value
+    propD: {
+      type: Number,
+      default: 100
+    },
+    // object/array defaults should be returned from a factory function
+    propE: {
+      type: Object,
+      default() {
+        return { message: 'hello' }
+      }
+    },
+    propF: {
+      type: Array,
+      default() {
+        return []
+      }
+    },
+    /* ✗ BAD */
+    propA: {
+      type: String,
+      default: {}
+    },
+    propB: {
+      type: String,
+      default: []
+    },
+    propC: {
+      type: Object,
+      default: []
+    },
+    propD: {
+      type: Array,
+      default: []
+    },
+    propE: {
+      type: Object,
+      default: { message: 'hello' }
     }
-  },
-  propF: {
-    type: Array,
-    default() {
-      return []
-    }
-  }  
+  }
 }
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 517f23285..08d214777 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -8,29 +8,34 @@ This rule enforces that a `return` statement is present in `computed` properties
 
 :-1: Examples of **incorrect** code for this rule:
 
-```js
-export default {
-  computed: {
-    foo () {},
-    bar: function () {}
-  }
-}
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```js
+<eslint-code-block :rules="{'vue/return-in-computed-property': ['error']}">
+```vue
+<script>
 export default {
   computed: {
+    /* ✓ GOOD */
     foo () {
-      return true
+      if (this.bar) {
+        return this.baz
+      } else {
+        return this.baf
+      }
     },
     bar: function () {
       return false
-    }
+    },
+    /* ✗ BAD */
+    baz () {
+      if (this.baf) {
+        return this.baf
+      }
+    },
+    baf: function () {}
   }
 }
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

From dd84609d1a3a8457f9290baa2b449fa18b393dfb Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 02:07:37 +0100
Subject: [PATCH 47/99] add missing options

---
 docs/rules/attribute-hyphenation.md | 14 ++++++++++----
 docs/rules/attributes-order.md      | 23 ++++++++++++++++++++++-
 docs/rules/html-quotes.md           |  8 ++++++++
 docs/rules/this-in-template.md      |  7 +++++--
 docs/rules/v-bind-style.md          |  7 +++++++
 docs/rules/v-on-style.md            |  7 +++++++
 6 files changed, 59 insertions(+), 7 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 3e1d137c0..4be253f5d 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -7,11 +7,16 @@
 
 Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to be ignored
 
-```
-'vue/attribute-hyphenation': [2, 'always'|'never', { 'ignore': ['custom-prop'] }]
+```json
+{
+  "vue/attribute-hyphenation": [2, "always" | "never", {
+    "ignore": ["custom-prop"]
+  }}]
+}
 ```
 
-### `["error", "always"]` - Use hyphenated name. (It errors on upper case letters.)
+### `["error", "always"]` - Use hyphenated name. 
+It errors on upper case letters.
 
 <eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
 ```
@@ -25,7 +30,8 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 ```
 </eslint-code-block>
 
-### `["error", "never"]` - Don't use hyphenated name. (It errors on hyphens except `data-`, `aria-` and `slot-scope`.)
+### `["error", "never"]` - Don't use hyphenated name. 
+It errors on hyphens except `data-`, `aria-` and `slot-scope`.
 
 <eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
 ```
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 5fd858b07..570fedd85 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -80,7 +80,28 @@ This rule aims to enforce ordering of component attributes. The default order is
 ```
 </eslint-code-block>
 
-### custom orders
+## :wrench: Options
+```json
+{
+  "vue/attributes-order": [2, {
+    "order": [
+      "DEFINITION",
+      "LIST_RENDERING",
+      "CONDITIONALS", 
+      "RENDER_MODIFIERS",
+      "GLOBAL", 
+      "UNIQUE", 
+      "TWO_WAY_BINDING", 
+      "OTHER_DIRECTIVES", 
+      "OTHER_ATTR", 
+      "EVENTS", 
+      "CONTENT"
+    ]
+  }]
+}
+```
+
+### Custom orders
 
 #### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index 3e8f38e15..59f20566d 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -30,6 +30,14 @@ This rule reports the quotes of attributes if it is different to configured quot
 
 ## :wrench: Options
 
+Default is set to `double`.
+
+```json
+{
+  "vue/html-quotes": [2, "double" | "single"]
+}
+```
+
 - `"double"` (default) ... requires double quotes.
 - `"single"` ... requires single quotes.
 
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index a5ce6a07f..4d9028e7b 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -24,8 +24,11 @@
 
 Default is set to `never`.
 
-```
-'vue/this-in-template': [2, 'always'|'never']
+```json
+{
+  "vue/this-in-template": [2, "always" | "never"]
+}
+
 ```
 
 ### `"always"` - Always use `this` while accessing properties from Vue
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 77adff074..c73e48e63 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -32,6 +32,13 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
 ```
 
 ## :wrench: Options
+Default is set to `shorthand`.
+
+```json
+{
+  "vue/v-bind-style": [2, "shorthand" | "longform"]
+}
+```
 
 - `"shorthand"` (default) ... requires using shorthand.
 - `"longform"` ... requires using long form.
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 9b93ee550..abaf60547 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -32,6 +32,13 @@ This rule enforces `v-on` directive style which you should use shorthand or long
 ```
 
 ## :wrench: Options
+Default is set to `shorthand`.
+
+```json
+{
+  "vue/v-on-style": [2, "shorthand" | "longform"]
+}
+```
 
 - `"shorthand"` (default) ... requires using shorthand.
 - `"longform"` ... requires using long form.

From 6206cc9c74c7e947a0c2d68d98aa7f83651dccfb Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 02:14:55 +0100
Subject: [PATCH 48/99] Update

- v-on-style
- v-bind-style
---
 docs/rules/attribute-hyphenation.md |  2 +-
 docs/rules/v-bind-style.md          | 45 +++++++++++++++--------------
 docs/rules/v-on-style.md            | 44 +++++++++++++++-------------
 3 files changed, 49 insertions(+), 42 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 4be253f5d..f0bb1ce94 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -11,7 +11,7 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 {
   "vue/attribute-hyphenation": [2, "always" | "never", {
     "ignore": ["custom-prop"]
-  }}]
+  }]
 }
 ```
 
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index c73e48e63..f19b288e1 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -3,33 +3,21 @@
 - :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 `v-bind` directive style which you should use shorthand or long form.
-
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-bind:foo="bar"/>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<div :foo="bar"/>
-```
-
-:-1: Examples of **incorrect** code for this rule with `"longform"` option:
+This rule enforces `v-bind` directive style which you should use shorthand or long form.
 
+<eslint-code-block :rules="{'vue/v-bind-style': ['error']}">
 ```html
-<div :foo="bar"/>
-```
-
-:+1: Examples of **correct** code for this rule with `"longform"` option:
+<template>
+  <!-- ✓ GOOD -->
+  <div :foo="bar"/>
 
-```html
-<div v-bind:foo="bar"/>
+  <!-- ✗ BAD -->
+  <div v-bind:foo="bar"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 Default is set to `shorthand`.
@@ -43,6 +31,21 @@ Default is set to `shorthand`.
 - `"shorthand"` (default) ... requires using shorthand.
 - `"longform"` ... requires using long form.
 
+### `"longform"`
+
+<eslint-code-block :rules="{'vue/v-bind-style': ['error', 'longform']}">
+```html
+<template>
+  <!-- ✓ GOOD -->
+  <div v-bind:foo="bar"/>
+
+  <!-- ✗ BAD -->
+  <div :foo="bar"/>
+</template>
+```
+</eslint-code-block>
+
+
 ## Related links
 
 - [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index abaf60547..d4b84d5f5 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -3,33 +3,22 @@
 - :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 `v-on` directive style which you should use shorthand or long form.
 
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<div v-on:click="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule:
+This rule enforces `v-on` directive style which you should use shorthand or long form.
 
+<eslint-code-block :rules="{'vue/v-on-style': ['error']}">
 ```html
-<div @click="foo"/>
-```
-
-:-1: Examples of **incorrect** code for this rule with `"longform"` option:
+<template>
+  <!-- ✓ GOOD -->
+  <div @click="foo"/>
 
-```html
-<div @click="foo"/>
-```
-
-:+1: Examples of **correct** code for this rule with `"longform"` option:
-
-```html
-<div v-on:click="foo"/>
+  <!-- ✗ BAD -->
+  <div v-on:click="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 Default is set to `shorthand`.
@@ -43,6 +32,21 @@ Default is set to `shorthand`.
 - `"shorthand"` (default) ... requires using shorthand.
 - `"longform"` ... requires using long form.
 
+### `"longform"`
+
+<eslint-code-block :rules="{'vue/v-on-style': ['error', 'longform']}">
+```html
+<template>
+  <!-- ✓ GOOD -->
+  <div v-on:click="foo"/>
+
+  <!-- ✗ BAD -->
+  <div @click="foo"/>
+</template>
+```
+</eslint-code-block>
+
+
 ## Related links
 
 - [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)

From 8cb65306677d712d260dadd96617a119d5c3aa66 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 02:26:40 +0100
Subject: [PATCH 49/99] fix remaining missing options

update: valid-v-on
---
 docs/rules/no-textarea-mustache.md | 10 +++++-----
 docs/rules/prop-name-casing.md     |  2 +-
 docs/rules/this-in-template.md     |  1 -
 docs/rules/valid-v-on.md           | 28 ++++++++++++++++------------
 4 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 1a955d143..6e93631bc 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -2,11 +2,6 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-::: warning Note
-Interpolation on textareas (`<textarea>{{text}}</textarea>`) won't work. Use `v-model` instead.
-[https://vuejs.org/v2/guide/forms.html#Multiline-text](https://vuejs.org/v2/guide/forms.html#Multiline-text)
-:::
-
 ## :book: Rule Details
 
 This rule reports mustaches in `<textarea>`.
@@ -23,6 +18,11 @@ This rule reports mustaches in `<textarea>`.
 ```
 </eslint-code-block>
 
+::: warning Note
+Interpolation on textareas (`<textarea>{{text}}</textarea>`) won't work. Use `v-model` instead.
+[https://vuejs.org/v2/guide/forms.html#Multiline-text](https://vuejs.org/v2/guide/forms.html#Multiline-text)
+:::
+
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index e87343fab..0f4a033e2 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -28,7 +28,7 @@ export default {
 
 ## :wrench: Options
 
-```
+```json
 {
   "vue/prop-name-casing": ["error", "camelCase" | "snake_case"]
 }
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index 4d9028e7b..bb3a74248 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -28,7 +28,6 @@ Default is set to `never`.
 {
   "vue/this-in-template": [2, "always" | "never"]
 }
-
 ```
 
 ### `"always"` - Always use `this` while accessing properties from Vue
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index ab423b790..4c3760be9 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -36,24 +36,28 @@ This rule does not check syntax errors in directives because it's checked by [no
 
 ## :wrench: Options
 
-This rule has an object option:
-
-`"modifiers"`: [] (default) array of additional allowed modifiers.
-
-### Example:
-
 ```json
-"vue/valid-v-on": [2, {
-  modifiers: ['foo']
-}]
+{
+  "vue/prop-name-casing": ["error", {
+    "modifiers": []
+  }]
+}
 ```
 
-:+1: Examples of **correct** code for this rule:
+This rule has an object option:
+
+`"modifiers"` array of additional allowed modifiers.
+
+### `"modifiers": ["foo"]`
 
+<eslint-code-block :rules="{'vue/valid-v-on': ['error', { modifiers: ['foo']}]}">
 ```html
-<div @click.foo="foo"/>
-<div v-on:click.foo="foo"/>
+<template>
+  <div @click.foo="foo"/>
+  <div v-on:click.foo="foo"/>
+</template>
 ```
+</eslint-code-block>
 
 ## :couple: Related rules
 

From 1e074332aa3deb7330f25398de62890bbc70ff3a Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 02:44:32 +0100
Subject: [PATCH 50/99] Update require-component-is & no-use-v-if-with-v-for

---
 docs/rules/no-unused-components.md   |  4 ++--
 docs/rules/no-use-v-if-with-v-for.md | 16 +++++-----------
 docs/rules/require-component-is.md   | 28 +++++++++++++++-------------
 3 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 871f4b0c7..81fe77f0f 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -2,10 +2,10 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-This rule reports components that haven't been used in the template.
-
 ## :book: Rule Details
 
+This rule reports components that haven't been used in the template.
+
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index a178e1534..116793d23 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -2,20 +2,14 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-> Never use `v-if` on the same element as `v-for`.
->
-> There are two common cases where this can be tempting:
->
-> * To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
->
-> * To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
->
-> https://vuejs.org/v2/style-guide/#Avoid-v-if-with-v-for-essential
-
 ## :book: Rule Details
 
 This rule is aimed at preventing the use of `v-for` directives together with `v-if` directives on the same element.
 
+There are two common cases where this can be tempting:
+ * To filter items in a list (e.g. `v-for="user in users" v-if="user.isActive"`). In these cases, replace `users` with a new computed property that returns your filtered list (e.g. `activeUsers`).
+ * To avoid rendering a list if it should be hidden (e.g. `v-for="user in users" v-if="shouldShowUsers"`). In these cases, move the `v-if` to a container element (e.g. `ul`, `ol`).
+
 <eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error']}">
 ```
 <template>
@@ -58,7 +52,7 @@ This rule is aimed at preventing the use of `v-for` directives together with `v-
 
 - `allowUsingIterationVar` (`boolean`) ... Enables The `v-if` directive use the reference which is to the variables which are defined by the `v-for` directives. Default is `false`.
 
-### { "allowUsingIterationVar": true }
+### `"allowUsingIterationVar": true`
 
 <eslint-code-block :rules="{'vue/no-use-v-if-with-v-for': ['error', {allowUsingIterationVar: true}]}">
 ```
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 1ff2a361e..95df74e2c 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -2,27 +2,29 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-> You can use the same mount point and dynamically switch between multiple components using the reserved `<component>` element and dynamically bind to its `is` attribute:
->
-> https://vuejs.org/v2/guide/components.html#Dynamic-Components
-
 ## :book: Rule Details
 
 This rule reports the `<component>` elements which do not have `v-bind:is` attributes.
 
-:-1: Examples of **incorrect** code for this rule:
 
-```html
-<component/>
-<component is="type"/>
+<eslint-code-block :rules="{'vue/require-component-is': ['error']}">
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <component :is="type"/>
+  <component v-bind:is="type"/>
+
+  <!-- ✗ BAD -->
+  <component/>
+  <component is="type"/>
+</template>
 ```
+</eslint-code-block>
 
-:+1: Examples of **correct** code for this rule:
+::: warning Note
+You can use the same mount point and dynamically switch between multiple components using the reserved `<component>` element and dynamically bind to its `is` attribute.
+:::
 
-```html
-<component :is="type"/>
-<component v-bind:is="type"/>
-```
 
 ## :wrench: Options
 

From a4971b11a922b975e480959168f2e2679aaa3164 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 03:15:19 +0100
Subject: [PATCH 51/99] Update formating from html to vue

---
 docs/rules/comment-directive.md                       | 2 +-
 docs/rules/singleline-html-element-content-newline.md | 6 +++---
 docs/rules/use-v-on-exact.md                          | 2 +-
 docs/rules/v-bind-style.md                            | 4 ++--
 docs/rules/v-on-style.md                              | 4 ++--
 docs/rules/valid-v-bind.md                            | 2 +-
 docs/rules/valid-v-cloak.md                           | 2 +-
 docs/rules/valid-v-else-if.md                         | 2 +-
 docs/rules/valid-v-else.md                            | 2 +-
 docs/rules/valid-v-for.md                             | 2 +-
 docs/rules/valid-v-html.md                            | 2 +-
 docs/rules/valid-v-if.md                              | 2 +-
 docs/rules/valid-v-model.md                           | 2 +-
 docs/rules/valid-v-on.md                              | 4 ++--
 docs/rules/valid-v-once.md                            | 2 +-
 docs/rules/valid-v-pre.md                             | 2 +-
 docs/rules/valid-v-show.md                            | 2 +-
 docs/rules/valid-v-text.md                            | 2 +-
 docs/user-guide/README.md                             | 2 +-
 19 files changed, 24 insertions(+), 24 deletions(-)

diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index a573a5fd0..55c65d738 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -22,7 +22,7 @@ ESLint doesn't provide any API to enhance `eslint-disable` functionality and ESL
 
 This rule sends all `eslint-disable`-like comments as errors to the post-process of the `.vue` file processor, then the post-process removes all `vue/comment-directive` errors and the reported errors in disabled areas.
 
-<eslint-code-block :rules="{'vue/comment-directive': ['error']}">
+<eslint-code-block :rules="{'vue/comment-directive': ['error'], 'vue/max-attributes-per-line': ['error']}">
 ```vue
 <template>
   <!-- eslint-disable-next-line vue/max-attributes-per-line -->
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index 9586dedd6..1d92ff2aa 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -8,7 +8,7 @@ This rule enforces a line break before and after the contents of a singleline el
 
 
 <eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div attr>
@@ -58,7 +58,7 @@ This rule enforces a line break before and after the contents of a singleline el
 ### `"ignoreWhenNoAttributes": true`
 
 <eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': true}]}">
-```html
+```vue
 <template>
   <!-- ✗ BAD -->
   <div attr>content</div>
@@ -73,7 +73,7 @@ This rule enforces a line break before and after the contents of a singleline el
 ### `"ignoreWhenNoAttributes": false`
 
 <eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': false}]}">
-```html
+```vue
 <template>
   <!-- ✗ BAD -->
   <div>content</div>
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index dbd4fb023..00a6f5982 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -5,7 +5,7 @@
 This rule enforce usage of `exact` modifier on `v-on` when there is another `v-on` with modifier.
 
 <eslint-code-block :rules="{'vue/use-v-on-exact': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <button @click="foo" :click="foo"></button>
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index f19b288e1..e01d9a427 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -8,7 +8,7 @@
 This rule enforces `v-bind` directive style which you should use shorthand or long form.
 
 <eslint-code-block :rules="{'vue/v-bind-style': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div :foo="bar"/>
@@ -34,7 +34,7 @@ Default is set to `shorthand`.
 ### `"longform"`
 
 <eslint-code-block :rules="{'vue/v-bind-style': ['error', 'longform']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-bind:foo="bar"/>
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index d4b84d5f5..3016562ba 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -9,7 +9,7 @@
 This rule enforces `v-on` directive style which you should use shorthand or long form.
 
 <eslint-code-block :rules="{'vue/v-on-style': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div @click="foo"/>
@@ -35,7 +35,7 @@ Default is set to `shorthand`.
 ### `"longform"`
 
 <eslint-code-block :rules="{'vue/v-on-style': ['error', 'longform']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-on:click="foo"/>
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index 8809a9314..7c0abb174 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -16,7 +16,7 @@ This rule does not report `v-bind` directives which do not have their argument (
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
 <eslint-code-block :rules="{'vue/valid-v-bind': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-bind="foo"/>
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 34ae27f72..d6e426a43 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -13,7 +13,7 @@ This rule reports `v-cloak` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-cloak="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-cloak': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-cloak/>
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index 203e9a3be..f8e809313 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -17,7 +17,7 @@ This rule reports `v-else-if` directives in the following cases:
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
 <eslint-code-block :rules="{'vue/valid-v-else-if': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-if="foo"/>
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index b1f5e0bb4..0ee550fba 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -15,7 +15,7 @@ This rule reports `v-else` directives in the following cases:
 - The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. `<div v-if="foo" v-else></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-else': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-if="foo"/>
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 3211e0d60..d924c34ac 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -23,7 +23,7 @@ The following cases are syntax errors:
 - The alias is not LHS. E.g. `<div v-for="foo() in list"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-for': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-for="todo in todos"/>
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index ccc4dfc60..659be35cc 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -15,7 +15,7 @@ This rule reports `v-html` directives in the following cases:
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
 <eslint-code-block :rules="{'vue/valid-v-html': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-html="foo"/>
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 6e38ae81c..43d6b272b 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -16,7 +16,7 @@ This rule reports `v-if` directives in the following cases:
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
 <eslint-code-block :rules="{'vue/valid-v-if': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-if="foo"/>
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 78dbca74d..59efadd8e 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -19,7 +19,7 @@ This rule reports `v-model` directives in the following cases:
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
 <eslint-code-block :rules="{'vue/valid-v-model': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <input v-model="foo">
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index 4c3760be9..2b5b440c2 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -15,7 +15,7 @@ This rule reports `v-on` directives in the following cases:
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
 <eslint-code-block :rules="{'vue/valid-v-on': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-on="foo"/>
@@ -51,7 +51,7 @@ This rule has an object option:
 ### `"modifiers": ["foo"]`
 
 <eslint-code-block :rules="{'vue/valid-v-on': ['error', { modifiers: ['foo']}]}">
-```html
+```vue
 <template>
   <div @click.foo="foo"/>
   <div v-on:click.foo="foo"/>
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index f4d29de3d..82dff1631 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -13,7 +13,7 @@ This rule reports `v-once` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-once="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-once': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-once/>
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index b38b3534b..bf28a69f7 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -13,7 +13,7 @@ This rule reports `v-pre` directives in the following cases:
 - The directive has that attribute value. E.g. `<div v-pre="ccc"></div>`
 
 <eslint-code-block :rules="{'vue/valid-v-pre': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-pre/>
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index 8e54db32c..f81d17339 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -16,7 +16,7 @@ This rule does not check syntax errors in directives because it's checked by [no
 
 
 <eslint-code-block :rules="{'vue/valid-v-show': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-show="foo"/>
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index 86272c309..def5c6c0e 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -15,7 +15,7 @@ This rule reports `v-text` directives in the following cases:
 This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
 
 <eslint-code-block :rules="{'vue/valid-v-text': ['error']}">
-```html
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-text="foo"/>
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index 6bb2eafec..f575c5e3a 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -117,7 +117,7 @@ You can use `<!-- eslint-disable -->`-like HTML comments in `<template>` of `.vu
 
 For example:
 
-```html
+```vue
 <template>
   <!-- eslint-disable-next-line vue/max-attributes-per-line -->
   <div a="1" b="2" c="3" d="4">

From cb102ebebd922218e1755639231e4930aebe1f7a Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 03:28:19 +0100
Subject: [PATCH 52/99] require-default-prop

---
 docs/rules/require-default-prop.md | 80 ++++++++++++++++--------------
 1 file changed, 42 insertions(+), 38 deletions(-)

diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index b85b7a10e..1967bb40a 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -2,51 +2,55 @@
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-This rule requires default value to be set for each props that are not marked as `required` (except `Boolean` props).
-
 ## Rule Details
 
-Examples of **incorrect** code for this rule:
-
-```js
-props: {
-  a: Number,
-  b: [Number, String],
-  c: [Boolean, Number],
-  d: {
-    type: Number
-  },
-  e: {
-    type: Number,
-    required: false
-  }
-}
-```
+This rule requires default value to be set for each props that are not marked as `required` (except `Boolean` props).
 
-Examples of **correct** code for this rule:
-
-```js
-props: {
-  a: {
-    type: Number,
-    required: true
-  },
-  b: {
-    type: Number,
-    default: 0
-  },
-  c: {
-    type: Number,
-    default: 0,
-    required: false
-  },
-  d: {
-    type: Boolean, // Boolean is the only type that doesn't require default
+<eslint-code-block :rules="{'vue/require-default-prop': ['error']}">
+```
+<script>
+export default {
+  props: {
+    /* ✓ GOOD */
+    a: {
+      type: Number,
+      required: true
+    },
+    b: {
+      type: Number,
+      default: 0
+    },
+    c: {
+      type: Number,
+      default: 0,
+      required: false
+    },
+    d: {
+      type: Boolean, // Boolean is the only type that doesn't require default
+    },
+
+    /* ✗ BAD */
+    e: Number,
+    f: [Number, String],
+    g: [Boolean, Number],
+    j: {
+      type: Number
+    },
+    i: {
+      type: Number,
+      required: false
+    }
   }
 }
+</script>
 ```
+</eslint-code-block>
+
+## :wrench: Options
+
+Nothing.
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Prop definitions](https://vuejs.org/v2/style-guide/#Prop-definitions-essential)
 

From 212c547d722919eb551f5dc94a5602e27c335ff2 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 03:29:14 +0100
Subject: [PATCH 53/99] Related links -> :books: Further reading

---
 .../multiline-html-element-content-newline.md  |  6 +++---
 docs/rules/no-unused-components.md             | 18 +++++++++---------
 docs/rules/require-component-is.md             |  2 +-
 docs/rules/require-prop-types.md               |  2 +-
 docs/rules/require-v-for-key.md                |  2 +-
 docs/rules/require-valid-default-prop.md       |  2 +-
 docs/rules/v-bind-style.md                     |  3 +--
 docs/rules/v-on-style.md                       |  3 +--
 8 files changed, 18 insertions(+), 20 deletions(-)

diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 11468e440..2e5bf2842 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -63,9 +63,9 @@ This rule enforces a line break before and after the contents of a multiline ele
 
 ```json
 {
-    "vue/multiline-html-element-content-newline": ["error", {
-        "ignores": ["pre", "textarea"]
-    }]
+  "vue/multiline-html-element-content-newline": ["error", {
+    "ignores": ["pre", "textarea"]
+  }]
 }
 ```
 
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 81fe77f0f..72913f272 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -66,9 +66,9 @@ Note that components registered under other than `PascalCase` name have to be ca
 
 ```json
 {
-    "vue/no-unused-components": ["error", {
-        "ignoreWhenBindingPresent": true
-    }]
+  "vue/no-unused-components": ["error", {
+    "ignoreWhenBindingPresent": true
+  }]
 }
 ```
 
@@ -80,9 +80,9 @@ Note that components registered under other than `PascalCase` name have to be ca
 
 ```json
 {
-    "vue/no-unused-components": ["error", {
-        "ignoreWhenBindingPresent": false
-    }]
+  "vue/no-unused-components": ["error", {
+    "ignoreWhenBindingPresent": false
+  }]
 }
 ```
 
@@ -116,9 +116,9 @@ Note that components registered under other than `PascalCase` name have to be ca
 
 ```json
 {
-    "vue/no-unused-components": ["error", {
-        "ignoreWhenBindingPresent": false
-    }]
+  "vue/no-unused-components": ["error", {
+    "ignoreWhenBindingPresent": false
+  }]
 }
 ```
 
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 95df74e2c..29eee438f 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -30,7 +30,7 @@ You can use the same mount point and dynamically switch between multiple compone
 
 Nothing.
 
-## Related links
+## :books: Further reading
 
 - [Guide - Dynamic Components](https://vuejs.org/v2/guide/components.html#Dynamic-Components)
 
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 338ce654b..84d8a8556 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -52,7 +52,7 @@ props: {
 
 Nothing.
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Prop definitions](https://vuejs.org/v2/style-guide/#Prop-definitions-essential)
 
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index 8df615755..7b5c5e828 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -34,7 +34,7 @@ Nothing.
 
 - [valid-v-for](./valid-v-for.md)
 
-## Related links
+## :books: Further reading
 
 - [Style guide - Keyed v-for](https://vuejs.org/v2/style-guide/#Keyed-v-for-essential)
 - [Guide - v-for with a Component](https://vuejs.org/v2/guide/list.html#v-for-with-a-Component)
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index 4761205fc..a0c68cdc3 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -65,7 +65,7 @@ export default {
 
 Nothing.
 
-## Related links
+## :books: Further reading
 
 - [Guide - Prop Validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)
 
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index e01d9a427..fb4f56088 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -45,8 +45,7 @@ Default is set to `shorthand`.
 ```
 </eslint-code-block>
 
-
-## Related links
+## :books: Further reading
 
 - [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
 
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 3016562ba..e3fbd649d 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -46,8 +46,7 @@ Default is set to `shorthand`.
 ```
 </eslint-code-block>
 
-
-## Related links
+## :books: Further reading
 
 - [Style guide - Directive shorthands](https://vuejs.org/v2/style-guide/#Directive-shorthands-strongly-recommended)
 

From c88cf5af135662b1637d7aaaba30a63d81ead6ee Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 03:36:19 +0100
Subject: [PATCH 54/99] standarize heading icons

---
 docs/rules/html-closing-bracket-spacing.md  | 2 +-
 docs/rules/jsx-uses-vars.md                 | 4 ++--
 docs/rules/require-default-prop.md          | 2 +-
 docs/rules/require-prop-type-constructor.md | 2 +-
 docs/rules/script-indent.md                 | 4 ++--
 docs/rules/use-v-on-exact.md                | 2 +-
 6 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 4b702d837..6bcbfbe87 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -70,7 +70,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
 ```
 </eslint-code-block>
 
-## :bookmark: Related rules
+## :couple: Related rules
 
 - [vue/no-multi-spaces](./no-multi-spaces.md)
 - [vue/html-closing-bracket-newline](./html-closing-bracket-newline.md)
diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index d515ac9d7..da2943a9a 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -7,7 +7,7 @@ This rule will find variables used in JSX and mark them as used.
 
 This rule only has an effect when the `no-unused-vars` rule is enabled.
 
-## Rule Details
+## :book: Rule Details
 
 Without this rule this code triggers warning:
 
@@ -25,7 +25,7 @@ export default {
 
 After turning on, `Hello` is being marked as used and `no-unused-vars` rule doesn't report an issue.
 
-## When Not To Use It
+## :mute: When Not To Use It
 
 If you are not using JSX or if you do not use the `no-unused-vars` rule then you can disable this rule.
 
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 1967bb40a..7c97bfd50 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -2,7 +2,7 @@
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-## Rule Details
+## :book: Rule Details
 
 This rule requires default value to be set for each props that are not marked as `required` (except `Boolean` props).
 
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index 74f9f75bb..34e971b43 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -3,7 +3,7 @@
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"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.
 
-## Rule Details
+## :book: Rule Details
 
 This rule reports prop types that can't be presumed as constructors.
 
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 8d0b947e7..fed597a9e 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -2,7 +2,7 @@
 
 - :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.
 
-## Rule Details
+## :book: Rule Details
 
 This rule is similar to core [indent](https://eslint.org/docs/rules/indent) rule, but it has an option for inside of `<script>` tag.
 
@@ -100,7 +100,7 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
 ```
 </eslint-code-block>
 
-## Related rules
+## :couple: Related rules
 
 - [indent](https://eslint.org/docs/rules/indent)
 - [vue/html-indent](./html-indent.md)
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index 00a6f5982..4a3497eb2 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -25,7 +25,7 @@ This rule enforce usage of `exact` modifier on `v-on` when there is another `v-o
 }
 ```
 
-## Related rules
+## :couple: Related rules
 
 - [vue/v-on-style](./v-on-style.md)
 - [vue/valid-v-on](./valid-v-on.md)

From 8982d6b3e555bee825bf516e6e93ee094ca96732 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 03:46:58 +0100
Subject: [PATCH 55/99] Add processors

---
 docs/.vuepress/components/eslint-code-block.vue | 8 ++++++--
 1 file changed, 6 insertions(+), 2 deletions(-)

diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index 2a4b71a9b..205a5574d 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -7,6 +7,8 @@
         class="eslint-code-block"
         filename="example.vue"
         language="html"
+        :preprocess="preprocess"
+        :postprocess="postprocess"
         dark
         fix
     />
@@ -15,7 +17,7 @@
 <script>
 // https://github.com/vuejs/vuepress/issues/451
 import EslintEditor from '../../../node_modules/vue-eslint-editor'
-import { rules } from '../../../'
+import { rules, processors } from '../../../'
 
 export default {
   name: 'ESLintCodeBlock',
@@ -32,7 +34,9 @@ export default {
 
   data () {
     return {
-      linter: null
+      linter: null,
+      preprocess: processors['.vue'].preprocess,
+      postprocess: processors['.vue'].postprocess
     }
   },
 

From b36f7ed5ad8e98ab82b140fc4bd91faed3564018 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 20:19:02 +0100
Subject: [PATCH 56/99] no-multi-spaces after merge

---
 docs/rules/no-multi-spaces.md | 37 +++++++++++++++++++----------------
 1 file changed, 20 insertions(+), 17 deletions(-)

diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index cfbd40864..7e6a16c43 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -24,28 +24,31 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
 
 ## :wrench: Options
 
-This rule has an object option:
-
-`"ignoreProperties": false` (default) whether or not objects' properties should be ignored
-
-### Example:
-
 ```json
-"vue/no-multi-spaces": [2, {
-  "ignoreProperties": true
-}]
+{
+  "vue/no-multi-spaces": [2, {
+    "ignoreProperties": false
+  }]
+}
 ```
 
-:+1: Examples of **correct** code for this rule:
+- `ignoreProperties` ... whether or not objects' properties should be ignored. default `false`
+
+### `"ignoreProperties": true`
 
-```html
-<i
-  :class="{
-    'fa-angle-up'   : isExpanded,
-    'fa-angle-down' : !isExpanded,
-  }"
-/>
+<eslint-code-block :rules="{'vue/no-multi-spaces': ['error', { 'ignoreProperties': true }]}">
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <i
+    :class="{
+      'fa-angle-up'   : isExpanded,
+      'fa-angle-down' : !isExpanded,
+    }"
+  />
+</template>
 ```
+</eslint-code-block>
 
 ## :mag: Implementation
 

From e2830ef5d8584df66afc340b1d6b86a6e80e7d94 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 20:31:55 +0100
Subject: [PATCH 57/99] improve consistency across docs

---
 docs/rules/html-closing-bracket-newline.md              | 2 +-
 docs/rules/html-closing-bracket-spacing.md              | 2 +-
 docs/rules/html-self-closing.md                         | 2 +-
 docs/rules/max-attributes-per-line.md                   | 6 +++---
 docs/rules/no-dupe-keys.md                              | 8 +++++---
 docs/rules/no-duplicate-attributes.md                   | 2 +-
 docs/rules/no-reserved-keys.md                          | 4 ++--
 docs/rules/no-side-effects-in-computed-properties.md    | 4 ++--
 docs/rules/no-spaces-around-equal-signs-in-attribute.md | 2 +-
 9 files changed, 17 insertions(+), 15 deletions(-)

diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index f81a642dc..d343bab1c 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -63,7 +63,7 @@ This rule aims to warn the right angle brackets which are at the location other
 
 Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-level of the closing brackets.
 
-### `{ "multiline": "never" }`
+### `"multiline": "never"`
 
 <eslint-code-block :rules="{'vue/html-closing-bracket-newline': ['error', { 'multiline': 'never' }]}">
 ```
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 6bcbfbe87..e7e6de7ca 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -53,7 +53,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
     - `"always"` ... requires one or more spaces.
     - `"never"` ... disallows spaces.
 
-### `{ "startTag": "always", "endTag": "always", "selfClosingTag": "always" }`
+### `"startTag": "always", "endTag": "always", "selfClosingTag": "always"`
 
 <eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error', {startTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}">
 ```
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 8b7728085..0ffe0d924 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -61,7 +61,7 @@ Every option can be set to one of the following values:
 - `"never"` ... Disallow self-closing.
 - `"any"` ... Don't enforce self-closing style.
 
-### `{html: {normal: "never", void: "always"}}`
+### `html: {normal: "never", void: "always"}`
 
 <eslint-code-block :rules="{'vue/html-self-closing': ['error', {html: {normal: 'never', void: 'always'}}]}">
 ```
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index c1ebb11bc..72ed05a88 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -59,7 +59,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
 - `multiline.max` (`number`) ... The max number of attributes per line when the opening tag is in multiple lines. Default is `1`. This can be `{ multiline: 1 }` instead of `{ multiline: { max: 1 }}` if you don't configure `allowFirstLine` property.
 - `multiline.allowFirstLine` (`boolean`) ... If `true`, it allows attributes on the same line as that tag name. Default is `false`.
 
-### `{ "singleline": 3 }`
+### `"singleline": 3`
 
 <eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {singleline: 3}]}">
 ```
@@ -73,7 +73,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
 ```
 </eslint-code-block>
 
-### `{ multiline: 2 }`
+### `multiline: 2`
 
 <eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {multiline: 2}]}">
 ```
@@ -93,7 +93,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
 ```
 </eslint-code-block>
 
-### `{ multiline: 1, allowFirstLine: true }`
+### `multiline: 1, allowFirstLine: true`
 
 <eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {multiline: { allowFirstLine: true }}]}">
 ```
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 0770779fb..91f3c1e1f 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -34,15 +34,17 @@ export default {
 
 ## :wrench: Options
 
-``` json
+```json
 {
-  "vue/no-dupe-keys": ["error", { "groups": [] }]
+  "vue/no-dupe-keys": ["error", {
+    "groups": []
+  }]
 }
 ```
 
 - `"groups"` (`string[]`) Array of additional groups to search for duplicates. Defailt is empty.
 
-### `{ "groups": ["firebase"] }`
+### `"groups": ["firebase"]`
 
 <eslint-code-block :rules="{'vue/no-dupe-keys': ['error', {groups: ['firebase']}]}">
 ```
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 8e42358e3..42b82a11b 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -45,7 +45,7 @@ This rule reports duplicate attributes.
 [`v-bind:class`]: https://vuejs.org/v2/guide/class-and-style.html
 [`v-bind:style`]: https://vuejs.org/v2/guide/class-and-style.html
 
-### `{ "allowCoexistClass": false, "allowCoexistStyle": false }`
+### `"allowCoexistClass": false, "allowCoexistStyle": false`
 
 <eslint-code-block :rules="{'vue/no-duplicate-attributes': ['error', {allowCoexistClass: false, allowCoexistStyle: false}]}">
 ```
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index dbc8d256f..cfde95576 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -32,7 +32,7 @@ export default {
 
 ## :wrench: Options
 
-``` json
+```json
 {
   "vue/no-reserved-keys": ["error", {
     "reserved": [],
@@ -44,7 +44,7 @@ export default {
 - `reserved` (`string[]`) ... Array of additional restricted attributes inside `groups`. Default is empty.
 - `groups` (`string[]`) ... Array of additional group names to search for duplicates in. Default is empty.
 
-### `{ "reserved": ["foo", "foo2"], "groups": ["firebase"] }`
+### `"reserved": ["foo", "foo2"], "groups": ["firebase"]`
 
 <eslint-code-block :rules="{'vue/no-reserved-keys': ['error', {reserved: ['foo', 'foo2'], groups: ['firebase']}]}">
 ```
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 61855cea4..0ea4491dd 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -2,12 +2,12 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-It is considered a very bad practice to introduce side effects inside computed properties. It makes the code not predictable and hard to understand.
-
 ## :book: Rule Details
 
 This rule is aimed at preventing the code which makes side effects in computed properties.
 
+It is considered a very bad practice to introduce side effects inside computed properties. It makes the code not predictable and hard to understand.
+
 <eslint-code-block :rules="{'vue/no-side-effects-in-computed-properties': ['error']}">
 ```
 <script>
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index 2999f849c..e1e2f00d6 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -29,7 +29,7 @@ HTML5 allows spaces around equal signs. But space-less is easier to read, and gr
 }
 ```
 
-## Further Reading
+## :books: Further reading
 
 * [HTML5 Style Guide - W3Schools *Spaces and Equal Signs*](https://www.w3schools.com/html/html5_syntax.asp)
 

From d78883512377da8eeb1e176dce238fd7a436ef71 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 20:49:27 +0100
Subject: [PATCH 58/99] this-in-template

---
 docs/rules/this-in-template.md | 84 +++++++++++++---------------------
 docs/rules/v-on-style.md       |  1 -
 2 files changed, 33 insertions(+), 52 deletions(-)

diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index bb3a74248..9a5f36569 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -4,67 +4,49 @@
 
 ## :book: Rule Details
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
-<a :href="this.url">
-  {{ this.text }}
-</a>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```html
-<a :href="url">
-  {{ text }}
-</a>
+<eslint-code-block :rules="{'vue/this-in-template': ['error']}">
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <a :href="url">
+    {{ text }}
+  </a>
+  
+  <!-- ✗ BAD -->
+  <a :href="this.url">
+    {{ this.text }}
+  </a>
+</template>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 
-Default is set to `never`.
-
 ```json
 {
   "vue/this-in-template": [2, "always" | "never"]
 }
 ```
-
-### `"always"` - Always use `this` while accessing properties from Vue
-
-:-1: Examples of **incorrect** code:
-
-```html
-<a :href="url">
-  {{ text }}
-</a>
-```
-
-:+1: Examples of **correct** code`:
-
-```html
-<a :href="this.url">
-  {{ this.text }}
-</a>
-```
-
-### `"never"` - Never use `this` keyword in expressions
-
-:-1: Examples of **incorrect** code:
-
-```html
-<a :href="this.url">
-  {{ this.text }}
-</a>
-```
-
-:+1: Examples of **correct** code:
-
-```html
-<a :href="url">
-  {{ text }}
-</a>
+- `"always"` ... Always use `this` while accessing properties from Vue.
+- `"never"` (default) ... Never use `this` keyword in expressions.
+
+### `"always"`
+
+<eslint-code-block :rules="{'vue/this-in-template': ['error', 'always']}">
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <a :href="this.url">
+    {{ this.text }}
+  </a>
+  
+  <!-- ✗ BAD -->
+  <a :href="url">
+    {{ text }}
+  </a>
+</template>
 ```
+</eslint-code-block>
 
 ## :mag: Implementation
 
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index e3fbd649d..7abc1ccd7 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -3,7 +3,6 @@
 - :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.
 
-
 ## :book: Rule Details
 
 This rule enforces `v-on` directive style which you should use shorthand or long form.

From 8fddc36c3a934d2d78741c0842efc775ea8880a8 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 21:01:10 +0100
Subject: [PATCH 59/99] require-prop-types

---
 docs/rules/require-prop-types.md | 72 ++++++++++++++++----------------
 1 file changed, 36 insertions(+), 36 deletions(-)

diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 84d8a8556..67873f061 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -2,51 +2,51 @@
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
-
 ## :book: Rule Details
 
 This rule enforces that a `props` statement contains type definition.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```js
-props: ['status']
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```js
-// Without options, just type reference
-props: {
-  status: String
-}
-```
+In committed code, prop definitions should always be as detailed as possible, specifying at least type(s).
 
-```js
-// With options with type field
-props: {
-  status: {
-    type: String,
-    required: true,
+<eslint-code-block :rules="{'vue/require-prop-types': ['error']}">
+```vue
+<script>
+/* ✓ GOOD */
+Vue.component('foo', {
+  props: {
+    // Without options, just type reference
+    foo: String,
+    // With options with type field
+    bar: {
+      type: String,
+      required: true,
+    },
+    // With options without type field but with validator field
+    baz: {
+      required: true,
+      validator: function (value) {
+        return (
+          value === null ||
+          Array.isArray(value) && value.length > 0
+        )
+      }
+    }
   }
-}
-```
+})
 
-```js
-// With options without type field but with validator field
-props: {
-  status: {
-    required: true,
-    validator: function (value) {
-      return (
-        value === null ||
-        Array.isArray(value) && value.length > 0
-      )
-    }
+/* ✗ BAD */
+Vue.component('bar', {
+  props: ['foo']
+})
+
+Vue.component('baz', {
+  props: {
+    foo: {},
   }
-}
+})
+</script>
 ```
+</eslint-code-block>
 
 ## :wrench: Options
 

From ce33e7c1862e33bfb505d42d9a5bc894ee7f0fd6 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 21:42:14 +0100
Subject: [PATCH 60/99] multiline-html-element-content-newline

---
 .../multiline-html-element-content-newline.md | 128 ++++++++++--------
 1 file changed, 68 insertions(+), 60 deletions(-)

diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 2e5bf2842..efe5aef44 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -6,58 +6,61 @@
 
 This rule enforces a line break before and after the contents of a multiline element.
 
-
-:-1: Examples of **incorrect** code:
-
-```html
-<div>multiline
-  content</div>
-
-<div
-  attr
->multiline start tag</div>
-
-<tr><td>multiline</td>
-  <td>children</td></tr>
-
-<div><!-- multiline
-  comment --></div>
-
-<div
-></div>
-```
-
-:+1: Examples of **correct** code:
-
-```html
-<div>
-  multiline
-  content
-</div>
-
-<div
-  attr
->
-  multiline start tag
-</div>
-
-<tr>
-  <td>multiline</td>
-  <td>children</td>
-</tr>
-
-<div>
-  <!-- multiline
-       comment -->
-</div>
-
-<div
->
-</div>
-
-<div attr>singleline element</div>
+<eslint-code-block :rules="{'vue/multiline-html-element-content-newline': ['error']}">
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <div>
+    multiline
+    content
+  </div>
+
+  <pre>some
+  content</pre>
+
+  <div
+    attr
+  >
+    multiline start tag
+  </div>
+
+  <table>
+    <tr>
+      <td>multiline</td>
+      <td>children</td>
+    </tr>
+  </table>
+
+  <div>
+    <!-- multiline
+         comment -->
+  </div>
+
+  <div
+  >
+  </div>
+
+  <div attr>singleline element</div>
+
+  <!-- ✗ BAD -->
+  <div>multiline
+    content</div>
+
+  <div
+    attr
+  >multiline start tag</div>
+  
+  <table><tr><td>multiline</td>
+    <td>children</td></tr></table>
+  
+  <div><!-- multiline
+    comment --></div>
+
+  <div
+  ></div>
+</template>
 ```
-
+</eslint-code-block>
 
 ## :wrench: Options
 
@@ -72,19 +75,24 @@ This rule enforces a line break before and after the contents of a multiline ele
 - `ignores` ... the configuration for element names to ignore line breaks style.  
     default `["pre", "textarea"]`
 
+### `"ignores": ["VueComponent", "pre", "textarea"]`
 
-:+1: Examples of **correct** code:
-
-```html
-/* eslint vue/multiline-html-element-content-newline: ["error", { "ignores": ["VueComponent", "pre", "textarea"]}] */
+<eslint-code-block :rules="{'vue/multiline-html-element-content-newline': ['error', { ignores: ['VueComponent', 'pre', 'textarea'] }]}">
+```vue
+<template>
+  <!-- ✓ GOOD -->
+  <VueComponent>multiline
+  content</VueComponent>
 
-<VueComponent>multiline
-content</VueComponent>
+  <pre>some
+  content</pre>
 
-<VueComponent><span
-  class="bold">For example,</span>
-Defines the Vue component that accepts preformatted text.</VueComponent>
+  <VueComponent><span
+    class="bold">For example,</span>
+  Defines the Vue component that accepts preformatted text.</VueComponent>
+</template>
 ```
+</eslint-code-block>
 
 ## :mag: Implementation
 

From e6676359956793d86aa1ee3f62363c60b1ec3605 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 22:15:16 +0100
Subject: [PATCH 61/99] fix json structure in return in computed property

---
 docs/rules/no-use-v-if-with-v-for.md      | 2 +-
 docs/rules/return-in-computed-property.md | 2 --
 2 files changed, 1 insertion(+), 3 deletions(-)

diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 116793d23..61a871c1a 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -45,7 +45,7 @@ There are two common cases where this can be tempting:
 ```json
 {
   "vue/no-use-v-if-with-v-for": ["error", {
-    allowUsingIterationVar: false
+    "allowUsingIterationVar": false
   }]
 }
 ```
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 08d214777..0a39cd1fb 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -6,8 +6,6 @@
 
 This rule enforces that a `return` statement is present in `computed` properties.
 
-:-1: Examples of **incorrect** code for this rule:
-
 <eslint-code-block :rules="{'vue/return-in-computed-property': ['error']}">
 ```vue
 <script>

From 55dff970de33c0639c52045298aa8bb40f2e642d Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 22:15:45 +0100
Subject: [PATCH 62/99] Add Further reading for few rules

---
 docs/rules/component-name-in-template-casing.md      | 8 +++-----
 docs/rules/no-side-effects-in-computed-properties.md | 4 ++++
 docs/rules/no-template-key.md                        | 4 ++++
 docs/rules/require-prop-type-constructor.md          | 4 ++++
 docs/rules/require-render-return.md                  | 4 ++++
 5 files changed, 19 insertions(+), 5 deletions(-)

diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index 15fbc2806..b41f0a40f 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -12,11 +12,9 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 
 ```json
 {
-  "vue/component-name-in-template-casing": [
-    "error",
-    "PascalCase" | "kebab-case",
-    { "ignores": [] }
-  ]
+  "vue/component-name-in-template-casing": ["error", "PascalCase" | "kebab-case", { 
+    "ignores": []
+  }]
 }
 ```
 
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 0ea4491dd..0e1ff92da 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -49,6 +49,10 @@ export default {
 
 Nothing.
 
+## :books: Further reading
+
+- [Guide - Computed Caching vs Methods](https://vuejs.org/v2/guide/computed.html#Computed-Caching-vs-Methods)
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-side-effects-in-computed-properties.js)
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index d9d6f42eb..c7ebb5441 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -27,6 +27,10 @@ This rule reports the `<template>` elements which have `key` attribute.
 
 Nothing.
 
+## :books: Further reading
+
+- [API - Special Attributes - key](https://vuejs.org/v2/api/#key)
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-template-key.js)
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index 34e971b43..8576044e7 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -59,6 +59,10 @@ export default {
 
 Nothing.
 
+## :books: Further reading
+
+- [Guide - Prop Validation](https://vuejs.org/v2/guide/components-props.html#Prop-Validation)
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-prop-type-constructor.js)
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index 92819ea90..7983954be 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -40,6 +40,10 @@ export default {
 
 Nothing.
 
+## :books: Further reading
+
+- [Guide - Render Functions & JSX](https://vuejs.org/v2/guide/render-function.html)
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/require-render-return.js)

From 81c106cbfa2874b7e22e2e50b6a7879ca15bfcd4 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 23:01:57 +0100
Subject: [PATCH 63/99] no-unused-components

---
 docs/rules/no-template-shadow.md   |   2 +-
 docs/rules/no-unused-components.md | 106 +++++++++++++----------------
 package.json                       |   2 +-
 3 files changed, 51 insertions(+), 59 deletions(-)

diff --git a/docs/rules/no-template-shadow.md b/docs/rules/no-template-shadow.md
index 630c3a6ad..65199789c 100644
--- a/docs/rules/no-template-shadow.md
+++ b/docs/rules/no-template-shadow.md
@@ -9,7 +9,7 @@
 This rule aims to eliminate shadowed variable declarations of v-for directives or scope attributes.
 
 <eslint-code-block :rules="{'vue/no-template-shadow': ['error']}">
-```
+```vue
 <template>
   <!-- ✓ GOOD -->
   <div v-for="i in 5"></div>
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 72913f272..cf8b377ec 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -6,61 +6,65 @@
 
 This rule reports components that haven't been used in the template.
 
-:-1: Examples of **incorrect** code for this rule:
-
-```html
+<eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+```vue
+<!-- ✓ GOOD -->
 <template>
   <div>
     <h2>Lorem ipsum</h2>
-    <TheModal />
+    <the-modal>
+      <component is="TheInput" />
+      <component :is="'TheDropdown'" />
+      <TheButton>CTA</TheButton>
+    </the-modal>
   </div>
 </template>
 
 <script>
   import TheButton from 'components/TheButton.vue'
   import TheModal from 'components/TheModal.vue'
+  import TheInput from 'components/TheInput.vue'
+  import TheDropdown from 'components/TheDropdown.vue'
 
   export default {
     components: {
-      TheButton // Unused component
-      'the-modal': TheModal // Unused component
+      TheButton,
+      TheModal,
+      TheInput,
+      TheDropdown,
     }
   }
 </script>
 ```
+</eslint-code-block>
 
-Note that components registered under other than `PascalCase` name have to be called directly under the specified name, whereas if you register it using `PascalCase` you can call it however you like, except using `snake_case`.
-
-:+1: Examples of **correct** code for this rule:
-
-```html
+<eslint-code-block :rules="{'vue/no-unused-components': ['error']}">
+```vue
+<!-- ✗ BAD -->
 <template>
   <div>
     <h2>Lorem ipsum</h2>
-    <the-modal>
-      <component is="TheInput" />
-      <component :is="'TheDropdown'" />
-      <TheButton>CTA</TheButton>
-    </the-modal>
+    <TheModal />
   </div>
 </template>
 
 <script>
   import TheButton from 'components/TheButton.vue'
   import TheModal from 'components/TheModal.vue'
-  import TheInput from 'components/TheInput.vue'
-  import TheDropdown from 'components/TheDropdown.vue'
 
   export default {
     components: {
-      TheButton,
-      TheModal,
-      TheInput,
-      TheDropdown,
+      TheButton, // Unused component
+      'the-modal': TheModal // Unused component
     }
   }
 </script>
 ```
+</eslint-code-block>
+
+::: warning Note
+Components registered under other than `PascalCase` name have to be called directly under the specified name, whereas if you register it using `PascalCase` you can call it however you like, except using `snake_case`.
+:::
 
 ## :wrench: Options
 
@@ -75,22 +79,17 @@ Note that components registered under other than `PascalCase` name have to be ca
 - `ignoreWhenBindingPresent` ... suppresses all errors if binding has been detected in the template
     default `true`
 
+### `ignoreWhenBindingPresent: false`
 
-:+1: Examples of **incorrect** code:
-
-```json
-{
-  "vue/no-unused-components": ["error", {
-    "ignoreWhenBindingPresent": false
-  }]
-}
-```
-
-```html
+<eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+```vue
+<!-- ✓ GOOD -->
 <template>
   <div>
     <h2>Lorem ipsum</h2>
-    <component :is="computedComponent" />
+    <TheButton v-if="" />
+    <TheSelect v-else-if="" />
+    <TheInput v-else="" />
   </div>
 </template>
 
@@ -101,34 +100,22 @@ Note that components registered under other than `PascalCase` name have to be ca
 
   export default {
     components: {
-      TheButton, // <- not used
-      TheSelect, // <- not used
-      TheInput, // <- not used
+      TheButton,
+      TheSelect,
+      TheInput,
     },
-    computed: {
-      computedComponent() { ... }
-    }
   }
 </script>
 ```
+</eslint-code-block>
 
-:+1: Examples of **correct** code:
-
-```json
-{
-  "vue/no-unused-components": ["error", {
-    "ignoreWhenBindingPresent": false
-  }]
-}
-```
-
-```html
+<eslint-code-block :rules="{'vue/no-unused-components': ['error', { 'ignoreWhenBindingPresent': false }]}">
+```vue
+<!-- ✗ BAD -->
 <template>
   <div>
     <h2>Lorem ipsum</h2>
-    <TheButton v-if="" />
-    <TheSelect v-else-if="" />
-    <TheInput v-else="" />
+    <component :is="computedComponent" />
   </div>
 </template>
 
@@ -139,13 +126,18 @@ Note that components registered under other than `PascalCase` name have to be ca
 
   export default {
     components: {
-      TheButton,
-      TheSelect,
-      TheInput,
+      TheButton, // <- not used
+      TheSelect, // <- not used
+      TheInput, // <- not used
     },
+    computed: {
+      computedComponent() {
+      }
+    }
   }
 </script>
 ```
+</eslint-code-block>
 
 ## :mag: Implementation
 
diff --git a/package.json b/package.json
index 6c146d6dc..af7992576 100644
--- a/package.json
+++ b/package.json
@@ -62,6 +62,6 @@
     "typescript": "^3.1.3",
     "typescript-eslint-parser": "^20.0.0",
     "vue-eslint-editor": "^0.1.0",
-    "vuepress": "^0.14.4"
+    "vuepress": "^0.14.5"
   }
 }

From dfb7e4e10e82c2b2bfe4aa5a1f4d5eae06eed7af Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 23:29:13 +0100
Subject: [PATCH 64/99] Enable fixing eslint-code-block only one fixable rules

---
 docs/.vuepress/components/eslint-code-block.vue       |  6 +++++-
 docs/rules/attribute-hyphenation.md                   |  6 +++---
 docs/rules/attributes-order.md                        |  6 +++---
 docs/rules/component-name-in-template-casing.md       |  6 +++---
 docs/rules/html-closing-bracket-newline.md            |  4 ++--
 docs/rules/html-closing-bracket-spacing.md            |  4 ++--
 docs/rules/html-end-tags.md                           |  2 +-
 docs/rules/html-indent.md                             | 10 +++++-----
 docs/rules/html-quotes.md                             |  4 ++--
 docs/rules/html-self-closing.md                       |  4 ++--
 docs/rules/max-attributes-per-line.md                 |  8 ++++----
 docs/rules/multiline-html-element-content-newline.md  |  4 ++--
 docs/rules/mustache-interpolation-spacing.md          |  4 ++--
 docs/rules/name-property-casing.md                    |  8 ++++----
 docs/rules/no-multi-spaces.md                         |  4 ++--
 docs/rules/no-shared-component-data.md                |  4 ++--
 .../no-spaces-around-equal-signs-in-attribute.md      |  2 +-
 docs/rules/order-in-components.md                     |  4 ++--
 docs/rules/prop-name-casing.md                        |  4 ++--
 docs/rules/require-prop-type-constructor.md           |  2 +-
 docs/rules/script-indent.md                           |  4 ++--
 docs/rules/singleline-html-element-content-newline.md |  6 +++---
 docs/rules/v-bind-style.md                            |  4 ++--
 docs/rules/v-on-style.md                              |  4 ++--
 tools/update-docs.js                                  | 11 +++++++++++
 25 files changed, 70 insertions(+), 55 deletions(-)

diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index 205a5574d..e74589e74 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -10,7 +10,7 @@
         :preprocess="preprocess"
         :postprocess="postprocess"
         dark
-        fix
+        :fix="fix"
     />
 </template>
 
@@ -24,6 +24,10 @@ export default {
   components: { EslintEditor },
 
   props: {
+    fix: {
+      type: Boolean,
+      default: false
+    },
     rules: {
       type: Object,
       default () {
diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index f0bb1ce94..e09998454 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -18,7 +18,7 @@ Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to
 ### `["error", "always"]` - Use hyphenated name. 
 It errors on upper case letters.
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
 ```
 <template>
   <!-- ✔ GOOD -->
@@ -33,7 +33,7 @@ It errors on upper case letters.
 ### `["error", "never"]` - Don't use hyphenated name. 
 It errors on hyphens except `data-`, `aria-` and `slot-scope`.
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
 ```
 <template>
   <!-- ✔ GOOD -->
@@ -50,7 +50,7 @@ It errors on hyphens except `data-`, `aria-` and `slot-scope`.
 
 ### `["error", "never", { "ignore": ["custom-prop"] }]` - Don't use hyphenated name but allow custom attributes
 
-<eslint-code-block :rules="{'vue/attribute-hyphenation': ['error', 'never', {'ignore': ['custom-prop']}]}">
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', {'ignore': ['custom-prop']}]}">
 ```
 <template>
   <!-- ✔ GOOD -->
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 570fedd85..02f0c90ee 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -32,7 +32,7 @@ This rule aims to enforce ordering of component attributes. The default order is
 
 ### the default order
 
-<eslint-code-block :rules="{'vue/attributes-order': ['error']}">
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -105,7 +105,7 @@ This rule aims to enforce ordering of component attributes. The default order is
 
 #### `['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
-<eslint-code-block :rules="{'vue/attributes-order': ['error', {order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error', {order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'DEFINITION', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -128,7 +128,7 @@ This rule aims to enforce ordering of component attributes. The default order is
 
 #### `[['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']`
 
-<eslint-code-block :rules="{'vue/attributes-order': ['error', {order: [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
+<eslint-code-block fix :rules="{'vue/attributes-order': ['error', {order: [['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS'], ['DEFINITION', 'GLOBAL', 'UNIQUE'], 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT']}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index b41f0a40f..106e21968 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -24,7 +24,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 
 ### `"PascalCase"`
 
-<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error']}">
+<eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -40,7 +40,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 
 ### `"kebab-case"`
 
-<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error', 'kebab-case']}">
+<eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'kebab-case']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -58,7 +58,7 @@ This rule aims to warn the tag names other than the configured casing in Vue.js
 
 ### `"PascalCase", { ignores: ["custom-element"] }`
 
-<eslint-code-block :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {ignores: ['custom-element']}]}">
+<eslint-code-block fix :rules="{'vue/component-name-in-template-casing': ['error', 'PascalCase', {ignores: ['custom-element']}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index d343bab1c..c8ed9f98d 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -23,7 +23,7 @@ This rule enforces a line break (or no line break) before tag's closing brackets
 
 This rule aims to warn the right angle brackets which are at the location other than the configured location.
 
-<eslint-code-block :rules="{'vue/html-closing-bracket-newline': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -65,7 +65,7 @@ Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-l
 
 ### `"multiline": "never"`
 
-<eslint-code-block :rules="{'vue/html-closing-bracket-newline': ['error', { 'multiline': 'never' }]}">
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-newline': ['error', { 'multiline': 'never' }]}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index e7e6de7ca..9faa77e32 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -7,7 +7,7 @@
 
 This rule aims to enforce consistent spacing style before closing brackets `>` of tags.
 
-<eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-spacing': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -55,7 +55,7 @@ This rule aims to enforce consistent spacing style before closing brackets `>` o
 
 ### `"startTag": "always", "endTag": "always", "selfClosingTag": "always"`
 
-<eslint-code-block :rules="{'vue/html-closing-bracket-spacing': ['error', {startTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}">
+<eslint-code-block fix :rules="{'vue/html-closing-bracket-spacing': ['error', {startTag: 'always', endTag: 'always', selfClosingTag: 'always' }]}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index 6901369d7..a18abeb6e 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -7,7 +7,7 @@
 
 This rule aims to disallow lacking end tags.
 
-<eslint-code-block :rules="{'vue/html-end-tags': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-end-tags': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index 34f84a9ef..1238d88d3 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -10,7 +10,7 @@ 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.
 
-<eslint-code-block :rules="{'vue/html-indent': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-indent': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -71,7 +71,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ### `2, {"attribute": 1, "closeBracket": 1}`
 
-<eslint-code-block :rules="{'vue/html-indent': ['error', 2, {attribute: 1, closeBracket: 1}]}">
+<eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {attribute: 1, closeBracket: 1}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -91,7 +91,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ### `2, {"attribute": 2, "closeBracket": 1}`
 
-<eslint-code-block :rules="{'vue/html-indent': ['error', 2, {attribute: 2, closeBracket: 1}]}">
+<eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {attribute: 2, closeBracket: 1}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -111,7 +111,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ### `2, {"ignores": ["VAttribute"]}`
 
-<eslint-code-block :rules="{'vue/html-indent': ['error', 2, {ignores: ['VAttribute']}]}">
+<eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {ignores: ['VAttribute']}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -125,7 +125,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 
 ### `2, {"alignAttributesVertically": false}`
 
-<eslint-code-block :rules="{'vue/html-indent': ['error', 2, {alignAttributesVertically: false}]}">
+<eslint-code-block fix :rules="{'vue/html-indent': ['error', 2, {alignAttributesVertically: false}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index 59f20566d..cfbc354c1 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -15,7 +15,7 @@ This rule enforces the quotes style of HTML attributes.
 
 This rule reports the quotes of attributes if it is different to configured quotes.
 
-<eslint-code-block :rules="{'vue/html-quotes': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-quotes': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -43,7 +43,7 @@ Default is set to `double`.
 
 ### `"single"`
 
-<eslint-code-block :rules="{'vue/html-quotes': ['error', 'single']}">
+<eslint-code-block fix :rules="{'vue/html-quotes': ['error', 'single']}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 0ffe0d924..7c03563c1 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -15,7 +15,7 @@ This rule helps you to make consistent on the self-closing style.
 
 This rule aims to enforce the self-closing sign as the configured style.
 
-<eslint-code-block :rules="{'vue/html-self-closing': ['error']}">
+<eslint-code-block fix :rules="{'vue/html-self-closing': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -63,7 +63,7 @@ Every option can be set to one of the following values:
 
 ### `html: {normal: "never", void: "always"}`
 
-<eslint-code-block :rules="{'vue/html-self-closing': ['error', {html: {normal: 'never', void: 'always'}}]}">
+<eslint-code-block fix :rules="{'vue/html-self-closing': ['error', {html: {normal: 'never', void: 'always'}}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index 72ed05a88..c24b44957 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -13,7 +13,7 @@ An attribute is considered to be in a new line when there is a line break betwee
 
 There is a configurable number of attributes that are acceptable in one-line case (default 1), as well as how many attributes are acceptable per line in multi-line case (default 1).
 
-<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error']}">
+<eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -61,7 +61,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
 
 ### `"singleline": 3`
 
-<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {singleline: 3}]}">
+<eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {singleline: 3}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -75,7 +75,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
 
 ### `multiline: 2`
 
-<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {multiline: 2}]}">
+<eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {multiline: 2}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -95,7 +95,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
 
 ### `multiline: 1, allowFirstLine: true`
 
-<eslint-code-block :rules="{'vue/max-attributes-per-line': ['error', {multiline: { allowFirstLine: true }}]}">
+<eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {multiline: { allowFirstLine: true }}]}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index efe5aef44..e7477d7cf 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -6,7 +6,7 @@
 
 This rule enforces a line break before and after the contents of a multiline element.
 
-<eslint-code-block :rules="{'vue/multiline-html-element-content-newline': ['error']}">
+<eslint-code-block fix :rules="{'vue/multiline-html-element-content-newline': ['error']}">
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -77,7 +77,7 @@ This rule enforces a line break before and after the contents of a multiline ele
 
 ### `"ignores": ["VueComponent", "pre", "textarea"]`
 
-<eslint-code-block :rules="{'vue/multiline-html-element-content-newline': ['error', { ignores: ['VueComponent', 'pre', 'textarea'] }]}">
+<eslint-code-block fix :rules="{'vue/multiline-html-element-content-newline': ['error', { ignores: ['VueComponent', 'pre', 'textarea'] }]}">
 ```vue
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index 1aa7a8e83..31c789cf2 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -20,7 +20,7 @@ This rule aims at enforcing unified spacing in mustache interpolations.
 
 ### `"always"`
 
-<eslint-code-block :rules="{'vue/mustache-interpolation-spacing': ['error']}">
+<eslint-code-block fix :rules="{'vue/mustache-interpolation-spacing': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -35,7 +35,7 @@ This rule aims at enforcing unified spacing in mustache interpolations.
 
 ### `"never"`
 
-<eslint-code-block :rules="{'vue/mustache-interpolation-spacing': ['error', 'never']}">
+<eslint-code-block fix :rules="{'vue/mustache-interpolation-spacing': ['error', 'never']}">
 ```
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index 3ca7fb5d9..cdbe2115c 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -20,7 +20,7 @@ This rule aims at enforcing the style for the `name` property casing for consist
 
 ### `"PascalCase"`
 
-<eslint-code-block :rules="{'vue/name-property-casing': ['error']}">
+<eslint-code-block fix :rules="{'vue/name-property-casing': ['error']}">
 ```
 <script>
   /* ✓ GOOD */
@@ -31,7 +31,7 @@ This rule aims at enforcing the style for the `name` property casing for consist
 ```
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/name-property-casing': ['error']}">
+<eslint-code-block fix :rules="{'vue/name-property-casing': ['error']}">
 ```
 <script>
   /* ✗ BAD */
@@ -44,7 +44,7 @@ This rule aims at enforcing the style for the `name` property casing for consist
 
 ### `"kebab-case"`
 
-<eslint-code-block :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
+<eslint-code-block fix :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
 ```
 <script>
   /* ✓ GOOD */
@@ -55,7 +55,7 @@ This rule aims at enforcing the style for the `name` property casing for consist
 ```
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
+<eslint-code-block fix :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">
 ```
 <script>
   /* ✗ BAD */
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index 7e6a16c43..e00b4c3f9 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -7,7 +7,7 @@
 
 This rule aims at removing multiple spaces in tags, which are not used for indentation.
 
-<eslint-code-block :rules="{'vue/no-multi-spaces': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-multi-spaces': ['error']}">
 ```
 <template>
   <!-- ✓ GOOD -->
@@ -36,7 +36,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
 
 ### `"ignoreProperties": true`
 
-<eslint-code-block :rules="{'vue/no-multi-spaces': ['error', { 'ignoreProperties': true }]}">
+<eslint-code-block fix :rules="{'vue/no-multi-spaces': ['error', { 'ignoreProperties': true }]}">
 ```vue
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index bebc17605..b3863e2db 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -9,7 +9,7 @@ When using the data property on a component (i.e. anywhere except on `new Vue`),
 
 When the value of `data` is an object, it’s shared across all instances of a component.
 
-<eslint-code-block :rules="{'vue/no-shared-component-data': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-shared-component-data': ['error']}">
 ```
 <script>
 /* ✓ GOOD */
@@ -32,7 +32,7 @@ export default {
 ```
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/no-shared-component-data': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-shared-component-data': ['error']}">
 ```
 <script>
 /* ✗ BAD */
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index e1e2f00d6..ccf8933b4 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -6,7 +6,7 @@
 
 This rule disallow spaces around equal signs in attribute.
 
-<eslint-code-block :rules="{'vue/no-spaces-around-equal-signs-in-attribute': ['error']}">
+<eslint-code-block fix :rules="{'vue/no-spaces-around-equal-signs-in-attribute': ['error']}">
 ```
 <template>
   <!-- ✗ BAD -->
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index a7a99ea3f..466a3cc33 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -8,7 +8,7 @@
 This rule makes sure you keep declared order of properties in components.
 Recommended order of properties can be [found here](https://vuejs.org/v2/style-guide/#Component-instance-options-order-recommended).
 
-<eslint-code-block :rules="{'vue/order-in-components': ['error']}">
+<eslint-code-block fix :rules="{'vue/order-in-components': ['error']}">
 ```
 <script>
 /* ✓ GOOD */
@@ -27,7 +27,7 @@ export default {
 ```
 </eslint-code-block>
 
-<eslint-code-block :rules="{'vue/order-in-components': ['error']}">
+<eslint-code-block fix :rules="{'vue/order-in-components': ['error']}">
 ```
 <script>
 /* ✗ BAD */
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index 0f4a033e2..0dce0b751 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -9,7 +9,7 @@ This rule would enforce proper casing of props in vue components(camelCase).
 
 (https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended).
 
-<eslint-code-block :rules="{'vue/prop-name-casing': ['error']}">
+<eslint-code-block fix :rules="{'vue/prop-name-casing': ['error']}">
 ```
 <script>
 export default {
@@ -39,7 +39,7 @@ export default {
 
 ### `"snake_case"`
 
-<eslint-code-block :rules="{'vue/prop-name-casing': ['error', 'snake_case']}">
+<eslint-code-block fix :rules="{'vue/prop-name-casing': ['error', 'snake_case']}">
 ```
 <script>
 export default {
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index 8576044e7..f222e0201 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -18,7 +18,7 @@ The following types are forbidden and will be reported:
 
 It will catch most commonly made mistakes which are using strings instead of constructors.
 
-<eslint-code-block :rules="{'vue/require-prop-type-constructor': ['error']}">
+<eslint-code-block fix :rules="{'vue/require-prop-type-constructor': ['error']}">
 ```vue
 <script>
 export default {
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index fed597a9e..83c9c807d 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -6,7 +6,7 @@
 
 This rule is similar to core [indent](https://eslint.org/docs/rules/indent) rule, but it has an option for inside of `<script>` tag.
 
-<eslint-code-block :rules="{'vue/script-indent': ['error']}">
+<eslint-code-block fix :rules="{'vue/script-indent': ['error']}">
 ```vue
 <script>
 let a = {
@@ -73,7 +73,7 @@ This rule only checks `.vue` files and does not interfere with other `.js` files
 ```
 
 ### `2, "baseIndent": 1`
-<eslint-code-block :rules="{'vue/script-indent': ['error', 2, { 'baseIndent': 1 }]}">
+<eslint-code-block fix :rules="{'vue/script-indent': ['error', 2, { 'baseIndent': 1 }]}">
 ```vue
 <script>
   let a = {
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index 1d92ff2aa..bf3226698 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -7,7 +7,7 @@
 This rule enforces a line break before and after the contents of a singleline element.
 
 
-<eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error']}">
+<eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error']}">
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -57,7 +57,7 @@ This rule enforces a line break before and after the contents of a singleline el
 
 ### `"ignoreWhenNoAttributes": true`
 
-<eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': true}]}">
+<eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': true}]}">
 ```vue
 <template>
   <!-- ✗ BAD -->
@@ -72,7 +72,7 @@ This rule enforces a line break before and after the contents of a singleline el
 
 ### `"ignoreWhenNoAttributes": false`
 
-<eslint-code-block :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': false}]}">
+<eslint-code-block fix :rules="{'vue/singleline-html-element-content-newline': ['error', {'ignoreWhenNoAttributes': false}]}">
 ```vue
 <template>
   <!-- ✗ BAD -->
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index fb4f56088..750a7bc49 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -7,7 +7,7 @@
 
 This rule enforces `v-bind` directive style which you should use shorthand or long form.
 
-<eslint-code-block :rules="{'vue/v-bind-style': ['error']}">
+<eslint-code-block fix :rules="{'vue/v-bind-style': ['error']}">
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -33,7 +33,7 @@ Default is set to `shorthand`.
 
 ### `"longform"`
 
-<eslint-code-block :rules="{'vue/v-bind-style': ['error', 'longform']}">
+<eslint-code-block fix :rules="{'vue/v-bind-style': ['error', 'longform']}">
 ```vue
 <template>
   <!-- ✓ GOOD -->
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 7abc1ccd7..2f48db9ff 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -7,7 +7,7 @@
 
 This rule enforces `v-on` directive style which you should use shorthand or long form.
 
-<eslint-code-block :rules="{'vue/v-on-style': ['error']}">
+<eslint-code-block fix :rules="{'vue/v-on-style': ['error']}">
 ```vue
 <template>
   <!-- ✓ GOOD -->
@@ -33,7 +33,7 @@ Default is set to `shorthand`.
 
 ### `"longform"`
 
-<eslint-code-block :rules="{'vue/v-on-style': ['error', 'longform']}">
+<eslint-code-block fix :rules="{'vue/v-on-style': ['error', 'longform']}">
 ```vue
 <template>
   <!-- ✓ GOOD -->
diff --git a/tools/update-docs.js b/tools/update-docs.js
index 7ff532fe3..74068379e 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -86,6 +86,16 @@ class DocFile {
     return this
   }
 
+  updateCodeBlocks () {
+    const { meta } = this.rule
+
+    this.content = this.content.replace(
+      /<eslint-code-block\s(:?fix[^\s]*)?\s*/g,
+      `<eslint-code-block ${meta.fixable ? 'fix ' : ''}`
+    )
+    return this
+  }
+
   updateFooter () {
     const { name } = this.rule
     const footerPattern = /## :mag: Implementation.+$/s
@@ -109,5 +119,6 @@ for (const rule of rules) {
     .read(rule)
     .updateHeader()
     .updateFooter()
+    .updateCodeBlocks()
     .write()
 }

From 53e780ad8335290ee069056abf616b2624de6102 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 13 Nov 2018 23:59:18 +0100
Subject: [PATCH 65/99] Add deprecated category

This category will be present only if we have deprecated rules
---
 docs/.vuepress/config.js | 27 +++++++++++++++++++++------
 docs/rules/README.md     |  6 ++++++
 tools/update.js          |  2 +-
 3 files changed, 28 insertions(+), 7 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index 613af6448..e365adbf1 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -4,9 +4,28 @@
  */
 'use strict'
 
-const uncategorizedRules = require('../../tools/lib/rules').filter(rule => !rule.meta.docs.category)
+const rules = require('../../tools/lib/rules')
+
+const uncategorizedRules = rules.filter(rule => !rule.meta.docs.category && !rule.meta.deprecated)
+const deprecatedRules = rules.filter(rule => rule.meta.deprecated)
 const categories = require('../../tools/lib/categories')
 
+const extraRules = []
+if (uncategorizedRules.length > 0) {
+  extraRules.push({
+    title: 'Uncategorized',
+    collapsable: false,
+    children: uncategorizedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
+  })
+}
+if (deprecatedRules.length > 0) {
+  extraRules.push({
+    title: 'Deprecated',
+    collapsable: false,
+    children: deprecatedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
+  })
+}
+
 module.exports = {
   base: '/eslint-plugin-vue/',
   title: 'eslint-plugin-vue',
@@ -43,11 +62,7 @@ module.exports = {
         })),
 
         // Rules in no category.
-        {
-          title: 'Uncategorized',
-          collapsable: false,
-          children: uncategorizedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
-        }
+        ...extraRules
       ],
 
       '/': ['/', '/user-guide/', '/developer-guide/', '/rules/']
diff --git a/docs/rules/README.md b/docs/rules/README.md
index 933ebec29..751616681 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -40,9 +40,11 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/no-side-effects-in-computed-properties](./no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |  |
 | [vue/no-template-key](./no-template-key.md) | disallow `key` attribute on `<template>` |  |
 | [vue/no-textarea-mustache](./no-textarea-mustache.md) | disallow mustaches in `<textarea>` |  |
+| [vue/no-unused-components](./no-unused-components.md) | disallow registering components that are not used inside templates |  |
 | [vue/no-unused-vars](./no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |  |
 | [vue/no-use-v-if-with-v-for](./no-use-v-if-with-v-for.md) | disallow use v-if on the same element as v-for |  |
 | [vue/require-component-is](./require-component-is.md) | require `v-bind:is` of `<component>` elements |  |
+| [vue/require-prop-type-constructor](./require-prop-type-constructor.md) | require prop type to be a constructor | :wrench: |
 | [vue/require-render-return](./require-render-return.md) | enforce render function to always return value |  |
 | [vue/require-v-for-key](./require-v-for-key.md) | require `v-bind:key` with `v-for` directives |  |
 | [vue/require-valid-default-prop](./require-valid-default-prop.md) | enforce props default values to be valid |  |
@@ -127,7 +129,11 @@ For example:
 | Rule ID | Description |    |
 |:--------|:------------|:---|
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
+| [vue/multiline-html-element-content-newline](./multiline-html-element-content-newline.md) | require a line break before and after the contents of a multiline element | :wrench: |
+| [vue/no-spaces-around-equal-signs-in-attribute](./no-spaces-around-equal-signs-in-attribute.md) | disallow spaces around equal signs in attribute | :wrench: |
 | [vue/script-indent](./script-indent.md) | enforce consistent indentation in `<script>` | :wrench: |
+| [vue/singleline-html-element-content-newline](./singleline-html-element-content-newline.md) | require a line break before and after the contents of a singleline element | :wrench: |
+| [vue/use-v-on-exact](./use-v-on-exact.md) | enforce usage of `exact` modifier on `v-on` |  |
 
 ## Deprecated
 
diff --git a/tools/update.js b/tools/update.js
index fd968f37b..f6ec8751f 100644
--- a/tools/update.js
+++ b/tools/update.js
@@ -8,4 +8,4 @@
 require('./update-lib-configs')
 require('./update-lib-index')
 require('./update-docs')
-require('./update-readme')
+require('./update-docs-rules-index')

From 22804afe41bbb2af756d79117aca77760d7dbc0f Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 00:03:48 +0100
Subject: [PATCH 66/99] Do not include cateogry in deprecated rules

---
 docs/.vuepress/config.js              | 10 +++++-----
 docs/rules/no-confusing-v-for-v-if.md |  1 -
 tools/update-docs.js                  |  7 +++----
 3 files changed, 8 insertions(+), 10 deletions(-)

diff --git a/docs/.vuepress/config.js b/docs/.vuepress/config.js
index e365adbf1..c12d341bd 100644
--- a/docs/.vuepress/config.js
+++ b/docs/.vuepress/config.js
@@ -5,21 +5,21 @@
 'use strict'
 
 const rules = require('../../tools/lib/rules')
+const categories = require('../../tools/lib/categories')
 
 const uncategorizedRules = rules.filter(rule => !rule.meta.docs.category && !rule.meta.deprecated)
 const deprecatedRules = rules.filter(rule => rule.meta.deprecated)
-const categories = require('../../tools/lib/categories')
 
-const extraRules = []
+const extraCategories = []
 if (uncategorizedRules.length > 0) {
-  extraRules.push({
+  extraCategories.push({
     title: 'Uncategorized',
     collapsable: false,
     children: uncategorizedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
   })
 }
 if (deprecatedRules.length > 0) {
-  extraRules.push({
+  extraCategories.push({
     title: 'Deprecated',
     collapsable: false,
     children: deprecatedRules.map(({ ruleId, name }) => [`/rules/${name}`, ruleId])
@@ -62,7 +62,7 @@ module.exports = {
         })),
 
         // Rules in no category.
-        ...extraRules
+        ...extraCategories
       ],
 
       '/': ['/', '/user-guide/', '/developer-guide/', '/rules/']
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 6122ee288..6a85500ad 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -1,6 +1,5 @@
 # disallow confusing `v-for` and `v-if` on the same element (vue/no-confusing-v-for-v-if)
 
-- :gear: This rule is included in `"plugin:vue/recommended"`.
 - :warning: This rule was **deprecated** and replaced by [vue/no-use-v-if-with-v-for](no-use-v-if-with-v-for.md) rule.
 
 > When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately.
diff --git a/tools/update-docs.js b/tools/update-docs.js
index 74068379e..8b92908e7 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -54,10 +54,6 @@ class DocFile {
     const title = `# ${meta.docs.description} (${ruleId})`
     const notes = []
 
-    if (categoryIndex >= 0) {
-      const presets = categories.slice(categoryIndex).map(category => `\`"plugin:vue/${category.categoryId}"\``)
-      notes.push(`- :gear: This rule is included in ${formatItems(presets)}.`)
-    }
     if (meta.deprecated) {
       if (meta.docs.replacedBy) {
         const replacedRules = meta.docs.replacedBy.map(name => `[vue/${name}](${name}.md) rule`)
@@ -65,6 +61,9 @@ class DocFile {
       } else {
         notes.push(`- :warning: This rule was **deprecated**.`)
       }
+    } else if (categoryIndex >= 0) {
+      const presets = categories.slice(categoryIndex).map(category => `\`"plugin:vue/${category.categoryId}"\``)
+      notes.push(`- :gear: This rule is included in ${formatItems(presets)}.`)
     }
     if (meta.fixable) {
       notes.push(`- :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.`)

From 9221c6f69b31f28439ad3787b2d53202870fa65e Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 00:21:48 +0100
Subject: [PATCH 67/99] Add example to return-in-computed-property

---
 docs/rules/return-in-computed-property.md | 37 +++++++++++++++++++++--
 1 file changed, 34 insertions(+), 3 deletions(-)

diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 0a39cd1fb..b91bdfb63 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -37,9 +37,6 @@ export default {
 
 ## :wrench: Options
 
-This rule has an object option:
-- `"treatUndefinedAsUnspecified"`: `true` (default) disallows implicitly returning undefined with a `return;` statement.
-
 ```json
 {
   "vue/return-in-computed-property": [2, {
@@ -48,6 +45,40 @@ This rule has an object option:
 }
 ```
 
+This rule has an object option:
+- `"treatUndefinedAsUnspecified"`: `true` (default) disallows implicitly returning undefined with a `return` statement.
+
+### `treatUndefinedAsUnspecified: false`
+
+<eslint-code-block :rules="{'vue/return-in-computed-property': ['error', { treatUndefinedAsUnspecified: false }]}">
+```vue
+<script>
+export default {
+  computed: {
+    /* ✓ GOOD */
+    foo () {
+      if (this.bar) {
+        return undefined
+      } else {
+        return
+      }
+    },
+    bar: function () {
+      return
+    },
+    /* ✗ BAD */
+    baz () {
+      if (this.baf) {
+        return this.baf
+      }
+    },
+    baf: function () {}
+  }
+}
+</script>
+```
+</eslint-code-block>
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/return-in-computed-property.js)

From 4ec403ed1596a80d873ecba91793959a9613c623 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 00:22:08 +0100
Subject: [PATCH 68/99] Add links and fix style

---
 docs/rules/no-confusing-v-for-v-if.md | 12 ++++++------
 docs/rules/no-v-html.md               |  8 +++-----
 docs/rules/prop-name-casing.md        |  4 +---
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 6a85500ad..38a906e14 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -2,12 +2,6 @@
 
 - :warning: This rule was **deprecated** and replaced by [vue/no-use-v-if-with-v-for](no-use-v-if-with-v-for.md) rule.
 
-> When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately.
->
-> https://vuejs.org/v2/guide/list.html#v-for-with-v-if
-
-So when they exist on the same node, `v-if` directive should use the reference which is to the variables which are defined by the `v-for` directives.
-
 ## :book: Rule Details
 
 This rule reports the elements which have both `v-for` and `v-if` directives in the following cases:
@@ -42,6 +36,12 @@ In that case, the `v-if` should be written on the wrapper element.
 ```
 </eslint-code-block>
 
+::: warning Note
+When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately.
+
+[https://vuejs.org/v2/guide/list.html#v-for-with-v-if](https://vuejs.org/v2/guide/list.html#v-for-with-v-if)
+:::
+
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index 6450166f1..54f412e5d 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -2,11 +2,9 @@
 
 - :gear: This rule is included in `"plugin:vue/recommended"`.
 
-This rule reports use of `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross-Site Scripting (XSS) attacks.
-
 ## :book: Rule Details
 
-This rule reports all uses of `v-html` to help prevent XSS attacks.
+This rule reports all uses of `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross-Site Scripting (XSS) attacks.
 
 <eslint-code-block :rules="{'vue/no-v-html': ['error']}">
 ```
@@ -20,7 +18,7 @@ This rule reports all uses of `v-html` to help prevent XSS attacks.
 ```
 </eslint-code-block>
 
-This rule does not check syntax errors in directives because it's checked by no-parsing-error rule.
+This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error](./no-parsing-error.md) rule.
 
 ## :wrench: Options
 
@@ -28,7 +26,7 @@ Nothing.
 
 ## :mute: When Not To Use It
 
-If you are certain the content passed `to v-html` is sanitized HTML you can disable this rule.
+If you are certain the content passed to `v-html` is sanitized HTML you can disable this rule.
 
 ## :books: Further reading
 
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index 0dce0b751..884a54513 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -3,11 +3,9 @@
 - :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 would enforce proper casing of props in vue components(camelCase).
-
 ## :book: Rule Details
 
-(https://vuejs.org/v2/style-guide/#Prop-name-casing-strongly-recommended).
+This rule enforce proper casing of props in vue components(camelCase).
 
 <eslint-code-block fix :rules="{'vue/prop-name-casing': ['error']}">
 ```

From c20aa92eebe483325df552c4d43e888974391407 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 00:52:41 +0100
Subject: [PATCH 69/99] fix rebase issue no-multi-spaces

---
 docs/rules/no-multi-spaces.md | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index e00b4c3f9..a8f2d2f7d 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -14,10 +14,22 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
   <div
     class="foo"
     :style="bar" />
+  <i
+    :class="{
+      'fa-angle-up' : isExpanded,
+      'fa-angle-down' : !isExpanded,
+    }"
+  />
 
   <!-- ✗ BAD -->
   <div     class="foo"
     :style =  "bar"         />
+  <i
+    :class="{
+      'fa-angle-up'   : isExpanded,
+      'fa-angle-down' : !isExpanded,
+    }"
+  />
 </template>
 ```
 </eslint-code-block>

From c21db9822099806218181991ad15fcd3e7d581b8 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 02:47:19 +0100
Subject: [PATCH 70/99] Update description of require-v-for-key

---
 docs/rules/require-v-for-key.md | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index 7b5c5e828..ddce0ca0e 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -2,15 +2,9 @@
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
-When `v-for` is written on custom components, it requires `v-bind:key` at the same time.
-On other elements, it's better that `v-bind:key` is written as well.
-
 ## :book: Rule Details
 
-This rule reports the elements which have `v-for` and do not have `v-bind:key`.
-
-This rule does not report custom components.
-It will be reported by [valid-v-for] rule.
+This rule reports the elements which have `v-for` and do not have `v-bind:key` with exception to custom components.
 
 <eslint-code-block :rules="{'vue/require-v-for-key': ['error']}">
 ```vue
@@ -26,6 +20,11 @@ It will be reported by [valid-v-for] rule.
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not report missing `v-bind:key` on custom components.
+It will be reported by [valid-v-for](./valid-v-for.md) rule.
+:::
+
 ## :wrench: Options
 
 Nothing.

From 7a0765e13aa5acb886323e1b780c8cb8079caad4 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 02:47:30 +0100
Subject: [PATCH 71/99] Update docs/rules/require-render-return.md

---
 docs/rules/require-render-return.md | 14 ++++++--------
 1 file changed, 6 insertions(+), 8 deletions(-)

diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index 7983954be..b6eee38d5 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -6,30 +6,28 @@
 
 This rule aims to enforce render function to always return value
 
-:-1: Examples of **incorrect** code for this rule:
-
 <eslint-code-block :rules="{'vue/require-render-return': ['error']}">
 ```vue
 <script>
 export default {
+  /* ✓ GOOD */
   render (h) {
-    if (foo) {
-      return h('div', 'hello')
-    }
+    return h('div', 'hello')
   }
 }
 </script>
 ```
 </eslint-code-block>
 
-:+1: Examples of **correct** code for this rule:
-
 <eslint-code-block :rules="{'vue/require-render-return': ['error']}">
 ```vue
 <script>
 export default {
+  /* ✗ BAD */
   render (h) {
-    return h('div', 'hello')
+    if (foo) {
+      return h('div', 'hello')
+    }
   }
 }
 </script>

From 09f688ba66b548380aaf7099d90a7535f9dd8b50 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 03:10:34 +0100
Subject: [PATCH 72/99] add moe notes

---
 docs/rules/valid-v-else-if.md | 10 ++++++----
 docs/rules/valid-v-for.md     | 16 +++++++++-------
 2 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index f8e809313..c96e31b21 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -14,8 +14,6 @@ This rule reports `v-else-if` directives in the following cases:
 - The directive is on the elements that the previous element don't have `v-if`/`v-else-if` directives. E.g. `<div v-else-if="bar"></div>`
 - The directive is on the elements which have `v-if`/`v-else` directives. E.g. `<div v-if="foo" v-else-if="bar"></div>`
 
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
 <eslint-code-block :rules="{'vue/valid-v-else-if': ['error']}">
 ```vue
 <template>
@@ -31,6 +29,10 @@ This rule does not check syntax errors in directives because it's checked by [no
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
 ## :wrench: Options
 
 Nothing.
@@ -42,9 +44,9 @@ Nothing.
 - [no-parsing-error]
 
 
-[valid-v-if]:   valid-v-if.md
+[valid-v-if]: valid-v-if.md
 [valid-v-else]: valid-v-else.md
-[no-parsing-error]:   no-parsing-error.md
+[no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation
 
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index d924c34ac..2d154354a 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -14,13 +14,7 @@ This rule reports `v-for` directives in the following cases:
 - If the element which has the directive is a custom component, the component does not have `v-bind:key` directive. E.g. `<your-component v-for="item in list"></your-component>`
 - The `v-bind:key` directive does not use the variables which are defined by the `v-for` directive. E.g. `<div v-for="x in list" :key="foo"></div>`
 
-If the element which has the directive is a reserved element, this rule does not report even if the element does not have `v-bind:key` directive because it's not fatal error. [require-v-for-key] rule reports it.
-
-This rule does not check syntax errors in directives. [no-parsing-error] rule reports it.
-The following cases are syntax errors:
-
-- The directive's value is not the form `alias in expr`. E.g. `<div v-for="foo"></div>`
-- The alias is not LHS. E.g. `<div v-for="foo() in list"></div>`
+If the element which has the directive is a reserved element, this rule does not report it even if the element does not have `v-bind:key` directive because it's not fatal error. [require-v-for-key] rule reports it.
 
 <eslint-code-block :rules="{'vue/valid-v-for': ['error']}">
 ```vue
@@ -54,6 +48,14 @@ The following cases are syntax errors:
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives. [no-parsing-error] rule reports it.
+The following cases are syntax errors:
+
+- The directive's value isn't `alias in expr`. E.g. `<div v-for="foo"></div>`
+- The alias isn't LHS. E.g. `<div v-for="foo() in list"></div>`
+:::
+
 ## :wrench: Options
 
 Nothing.

From b7be87a8787d47c6e8fb172bc748f6471bd66ca7 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 21:15:16 +0100
Subject: [PATCH 73/99] Improve readibility and add Further reading links

---
 docs/rules/attribute-hyphenation.md        | 33 +++++++++++++++++-----
 docs/rules/html-closing-bracket-newline.md |  4 +--
 docs/rules/html-self-closing.md            |  9 +++---
 docs/rules/max-attributes-per-line.md      |  4 +--
 docs/rules/no-parsing-error.md             |  6 +++-
 docs/rules/use-v-on-exact.md               |  4 +++
 6 files changed, 43 insertions(+), 17 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index e09998454..e36fa3861 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -3,19 +3,37 @@
 - :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.
 
-## :wrench: Options
+## :book: Rule Details
 
-Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to be ignored
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
+```
+<template>
+  <!-- ✔ GOOD -->
+  <MyComponent my-prop="prop" />
+
+  <!-- ✘ BAD -->
+  <MyComponent myProp="prop" />
+</template>
+```
+</eslint-code-block>
+
+## :wrench: Options
 
 ```json
 {
   "vue/attribute-hyphenation": [2, "always" | "never", {
-    "ignore": ["custom-prop"]
+    "ignore": []
   }]
 }
 ```
 
-### `["error", "always"]` - Use hyphenated name. 
+Default casing is set to `always` with `['data-', 'aria-', 'slot-scope']` set to be ignored
+
+- `"always"` (default) ... Use hyphenated name.
+- `"never"` ... Don't use hyphenated name except `data-`, `aria-` and `slot-scope`.
+- `"ignore"` ... Array of ignored names
+
+### `"always"`
 It errors on upper case letters.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
@@ -30,7 +48,7 @@ It errors on upper case letters.
 ```
 </eslint-code-block>
 
-### `["error", "never"]` - Don't use hyphenated name. 
+### `"never"`
 It errors on hyphens except `data-`, `aria-` and `slot-scope`.
 
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never']}">
@@ -48,9 +66,10 @@ It errors on hyphens except `data-`, `aria-` and `slot-scope`.
 ```
 </eslint-code-block>
 
-### `["error", "never", { "ignore": ["custom-prop"] }]` - Don't use hyphenated name but allow custom attributes
+### `"never", { "ignore": ["custom-prop"] }` 
+Don't use hyphenated name but allow custom attributes
 
-<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', {'ignore': ['custom-prop']}]}">
+<eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'never', { ignore: ['custom-prop']}]}">
 ```
 <template>
   <!-- ✔ GOOD -->
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index c8ed9f98d..faac17864 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -55,11 +55,11 @@ This rule aims to warn the right angle brackets which are at the location other
 ```
 
 - `singleline` ... the configuration for single-line elements. It's a single-line element if the element does not have attributes or the last attribute is on the same line as the opening bracket.
-    - `"never"` ... disallow line breaks before the closing bracket. This is the default.
+    - `"never"` (default) ... disallow line breaks before the closing bracket.
     - `"always"` ... require one line break before the closing bracket.
 - `multiline` ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
     - `"never"` ... disallow line breaks before the closing bracket.
-    - `"always"` ... require one line break before the closing bracket. This is the default.
+    - `"always"` (default) ... require one line break before the closing bracket.
 
 Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-level of the closing brackets.
 
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 7c03563c1..0e63b597e 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -3,17 +3,16 @@
 - :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.
 
+## :book: Rule Details
+
+This rule aims to enforce the self-closing sign as the configured style.
+
 In Vue.js template, we can use either two styles for elements which don't have their content.
 
 1. `<YourComponent></YourComponent>`
 2. `<YourComponent/>` (self-closing)
 
 Self-closing is simple and shorter, but it's not supported in the HTML spec.
-This rule helps you to make consistent on the self-closing style.
-
-## :book: Rule Details
-
-This rule aims to enforce the self-closing sign as the configured style.
 
 <eslint-code-block fix :rules="{'vue/html-self-closing': ['error']}">
 ```
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index c24b44957..81bbd5cf2 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -73,7 +73,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
 ```
 </eslint-code-block>
 
-### `multiline: 2`
+### `"multiline": 2`
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {multiline: 2}]}">
 ```
@@ -93,7 +93,7 @@ There is a configurable number of attributes that are acceptable in one-line cas
 ```
 </eslint-code-block>
 
-### `multiline: 1, allowFirstLine: true`
+### `"multiline": 1, "allowFirstLine": true`
 
 <eslint-code-block fix :rules="{'vue/max-attributes-per-line': ['error', {multiline: { allowFirstLine: true }}]}">
 ```
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index 2eabc3e8f..b98088c6d 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -10,7 +10,7 @@ This rule reports syntax errors in `<template>`. For example:
     - Invalid end tags.
     - Attributes in end tags.
     - ...
-    - See also: https://html.spec.whatwg.org/multipage/parsing.html#parse-errors
+    - See also: [WHATWG HTML spec](https://html.spec.whatwg.org/multipage/parsing.html#parse-errors)
 
 ## :book: Rule Details
 
@@ -87,6 +87,10 @@ The error codes which have `x-` prefix are original of this rule because errors
 - `x-invalid-end-tag` enables the errors about the end tags of elements which have not opened.
 - `x-invalid-namespace` enables the errors about invalid `xmlns` attributes. See also [step 10. of "create an element for a token"](https://html.spec.whatwg.org/multipage/parsing.html#create-an-element-for-the-token).
 
+## :books: Further reading
+
+- [WHATWG HTML spec](https://html.spec.whatwg.org/multipage/parsing.html#parse-errors)
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/no-parsing-error.js)
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index 4a3497eb2..dcf16f198 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -30,6 +30,10 @@ This rule enforce usage of `exact` modifier on `v-on` when there is another `v-o
 - [vue/v-on-style](./v-on-style.md)
 - [vue/valid-v-on](./valid-v-on.md)
 
+## :books: Further reading
+
+- [Guide - .exact Modifier](https://vuejs.org/v2/guide/events.html#exact-Modifier)
+
 ## :mag: Implementation
 
 - [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/use-v-on-exact.js)

From 3ec1f2cf8b5ad65126ea8586b760ca7cda11a7e6 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Wed, 14 Nov 2018 21:20:39 +0100
Subject: [PATCH 74/99] mustache-interpolation-spacing & name-property-casing

move default example to rule details
---
 docs/rules/mustache-interpolation-spacing.md | 24 +++++++++-----------
 docs/rules/name-property-casing.md           | 24 +++++++++-----------
 2 files changed, 22 insertions(+), 26 deletions(-)

diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index 31c789cf2..3d38ace07 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -7,19 +7,6 @@
 
 This rule aims at enforcing unified spacing in mustache interpolations.
 
-## :wrench: Options
-
-```json
-{
-  "vue/mustache-interpolation-spacing": ["error", "always" | "never"]
-}
-```
-
-- `"always"` (default) ... Expect one space between expression and curly brackets.
-- `"never"` ... Expect no spaces between expression and curly brackets.
-
-### `"always"`
-
 <eslint-code-block fix :rules="{'vue/mustache-interpolation-spacing': ['error']}">
 ```
 <template>
@@ -33,6 +20,17 @@ This rule aims at enforcing unified spacing in mustache interpolations.
 ```
 </eslint-code-block>
 
+## :wrench: Options
+
+```json
+{
+  "vue/mustache-interpolation-spacing": ["error", "always" | "never"]
+}
+```
+
+- `"always"` (default) ... Expect one space between expression and curly brackets.
+- `"never"` ... Expect no spaces between expression and curly brackets.
+
 ### `"never"`
 
 <eslint-code-block fix :rules="{'vue/mustache-interpolation-spacing': ['error', 'never']}">
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index cdbe2115c..f8f51d563 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -7,19 +7,6 @@
 
 This rule aims at enforcing the style for the `name` property casing for consistency purposes.
 
-## :wrench: Options
-
-```json
-{
-  "vue/name-property-casing": ["error", "PascalCase" | "kebab-case"]
-}
-```
-
-- `"PascalCase"` (default) ... Enforce the `name` property to Pascal case.
-- `"kebab-case"` ... Enforce the `name` property to kebab case.
-
-### `"PascalCase"`
-
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error']}">
 ```
 <script>
@@ -42,6 +29,17 @@ This rule aims at enforcing the style for the `name` property casing for consist
 ```
 </eslint-code-block>
 
+## :wrench: Options
+
+```json
+{
+  "vue/name-property-casing": ["error", "PascalCase" | "kebab-case"]
+}
+```
+
+- `"PascalCase"` (default) ... Enforce the `name` property to Pascal case.
+- `"kebab-case"` ... Enforce the `name` property to kebab case.
+
 ### `"kebab-case"`
 
 <eslint-code-block fix :rules="{'vue/name-property-casing': ['error', 'kebab-case']}">

From 8529e66187f7a7f8467fd596df6564eb3c8c9693 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 15 Nov 2018 00:58:32 +0100
Subject: [PATCH 75/99] Add IntelliJ IDEA / JetBrains WebStorm configuration
 help

 move editor configuration to correct section
---
 docs/user-guide/README.md | 61 +++++++++++++++++++++++++--------------
 1 file changed, 40 insertions(+), 21 deletions(-)

diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index f575c5e3a..a220684c1 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -80,6 +80,37 @@ Example **.vscode/settings.json**:
 }
 ```
 
+If you use `Vetur` plugin, set `"vetur.validation.template": false` to avoid default Vetur template validation. Check out [vetur documentation](https://vuejs.github.io/vetur/linting-error.html) for more info.
+
+#### Sublime Text
+
+Use [SublimeLinter-eslint](https://github.com/SublimeLinter/SublimeLinter-eslint) extension that SublimeLinter provides for eslint.
+
+You have to open command-palette via `cmd/ctrl+shift+p` and type `Preferences: SublimeLinter Settings`, paste to the config on the right side:
+
+```json
+{
+  "linters": {
+    "eslint": {
+      "selector": "text.html.vue, source.js - meta.attribute-with-value"
+    }
+  }
+}
+```
+
+#### Atom editor
+
+You need to go into `Settings -> Packages -> linter-eslint`, under the option "List of scopes to run eslint on", add `text.html.vue`. You may need to restart Atom.
+
+#### IntelliJ IDEA / JetBrains WebStorm
+
+In the **Settings/Preferences** dialog (`Ctrl+Alt+S`), choose JavaScript under **Languages and Frameworks** and then choose **ESLint** under **Code Quality Tools**.
+On the **ESLint page** that opens, select the *Enable* checkbox.
+
+If your ESLint configuration is updated (manually or from your version control), open it in the editor and choose **Apply ESLint Code Style Rules** on the context menu.
+
+read more: [JetBrains - ESLint](https://www.jetbrains.com/help/idea/eslint.html)
+
 ### The code of components
 
 All component-related rules are being applied to code that passes any of the following checks:
@@ -155,29 +186,17 @@ See also: "[Use together with custom parsers](#use-together-with-custom-parsers)
 
 1. Make sure you don't have `eslint-plugin-html` in your config. The `eslint-plugin-html` extracts the content from `<script>` tags, but `eslint-plugin-vue` requires `<script>` tags and `<template>` tags in order to distinguish template and script in single file components.
 
-    ```diff
-      "plugins": [
-        "vue",
-    -   "html"
-      ]
-    ```
+  ```diff
+    "plugins": [
+      "vue",
+  -   "html"
+    ]
+  ```
 
 2. Make sure your tool is set to lint `.vue` files.
-    - CLI targets only `.js` files by default. You have to specify additional extensions by `--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`. If you use `@vue/cli-plugin-eslint` and the `vue-cli-service lint` command - you don't have to worry about it.
-    - VSCode targets only JavaScript or HTML files by default. You have to add `"vue"` to the `"eslint.validate"` array in vscode settings. e.g. `"eslint.validate": [ "javascript", "javascriptreact", "vue" ]`
-    - If you use `Vetur` plugin in VSCode - set `"vetur.validation.template": false` to avoid default Vetur template validation. Check out [vetur documentation](https://github.com/vuejs/vetur/blob/master/docs/linting-error.md) for more info.
-    - For Atom editor, you need to go into Settings -> Packages -> linter-eslint, under the option “List of scopes to run eslint on”, add `text.html.vue`.
-    - For Sublime Text, you need to open command-pallete via cmd+shift+p (cmd => ctrl for windows) and type "Preferences: SublimeLinter Settings", paste to the config on the right side:
-      ```json
-      {
-        "linters": {
-          "eslint": {
-            "selector": "source.js, text.html.vue"
-          }
-        }
-      }
-      ```
- 
+  - CLI targets only `.js` files by default. You have to specify additional extensions by `--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`. If you use `@vue/cli-plugin-eslint` and the `vue-cli-service lint` command - you don't have to worry about it.
+  - If you are having issues with configuring editor please read [editor integrations](#editor-integrations)
+
 ## 🚥 Versioning policy
 
 This plugin is following [Semantic Versioning](https://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).

From 6a652eee7e3a4aa481b054d445dc45d53389d764 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 15 Nov 2018 01:45:08 +0100
Subject: [PATCH 76/99] Fix links

---
 docs/developer-guide/README.md | 2 +-
 docs/user-guide/README.md      | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/developer-guide/README.md b/docs/developer-guide/README.md
index 06f2bb083..c6098e58d 100644
--- a/docs/developer-guide/README.md
+++ b/docs/developer-guide/README.md
@@ -4,7 +4,7 @@ Contributing is welcome.
 
 ## 🐛 Bug reporting
 
-If you think you’ve found a bug in ESLint, please [create a new issue](https://github.com/vuejs/eslint-plugin-vue/issues/new) or a pull request on GitHub.
+If you think you’ve found a bug in ESLint, please [create a new issue](https://github.com/vuejs/eslint-plugin-vue/issues/new?labels=&template=bug_report.md) or a pull request on GitHub.
 
 Please include as much detail as possible to help us properly address your issue. If we need to triage issues and constantly ask people for more detail, that’s time taken away from actually fixing issues. Help us be as efficient as possible by including a lot of detail in your issues.
 
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index a220684c1..a614680cb 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -35,7 +35,7 @@ module.exports = {
 }
 ```
 
-See [the rule list](../README.md) to get the `extends` &amp; `rules` that this plugin provides.
+See [the rule list](../rules/README.md) to get the `extends` &amp; `rules` that this plugin provides.
 
 #### Use together with custom parsers
 

From d6aa089bbb8996b342460f8c36a6e4692a63b913 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 15 Nov 2018 01:51:10 +0100
Subject: [PATCH 77/99] replace emoji with shortcodes

---
 docs/developer-guide/README.md |  6 +++---
 docs/user-guide/README.md      | 12 ++++++------
 2 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/docs/developer-guide/README.md b/docs/developer-guide/README.md
index c6098e58d..05ff5607b 100644
--- a/docs/developer-guide/README.md
+++ b/docs/developer-guide/README.md
@@ -2,13 +2,13 @@
 
 Contributing is welcome.
 
-## 🐛 Bug reporting
+## :bug: Bug reporting
 
 If you think you’ve found a bug in ESLint, please [create a new issue](https://github.com/vuejs/eslint-plugin-vue/issues/new?labels=&template=bug_report.md) or a pull request on GitHub.
 
 Please include as much detail as possible to help us properly address your issue. If we need to triage issues and constantly ask people for more detail, that’s time taken away from actually fixing issues. Help us be as efficient as possible by including a lot of detail in your issues.
 
-## ✨ Proposing a new rule or a rule change
+## :sparkles: Proposing a new rule or a rule change
 
 In order to add a new rule or a rule change, you should:
 
@@ -23,7 +23,7 @@ In order to add a new rule or a rule change, you should:
 
 We're more than happy to see potential contributions, so don't hesitate. If you have any suggestions, ideas or problems feel free to add new [issue](https://github.com/vuejs/eslint-plugin-vue/issues), but first please make sure your question does not repeat previous ones.
 
-## 🔥 Working with rules
+## :fire: Working with rules
 
 Before you start writing new rule, please read the [official ESLint guide](https://eslint.org/docs/developer-guide/working-with-rules).
 
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index a614680cb..1ff082cf9 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -1,6 +1,6 @@
 # User Guide
 
-## 💿 Installation
+## :cd: Installation
 
 Use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install.
 
@@ -13,7 +13,7 @@ npm install --save-dev eslint eslint-plugin-vue@next
 - Node.js v6.5.0 or later
 :::
 
-## 📖 Usage
+## :book: Usage
 
 ### Configuration
 
@@ -158,7 +158,7 @@ For example:
 
 If you want to disallow `eslint-disable` functionality in `<template>`, disable [vue/comment-directive](../rules/comment-directive.md) rule.
 
-## ❓ FAQ
+## :question: FAQ
 
 ### What is the "Use the latest vue-eslint-parser" error?
 
@@ -197,14 +197,14 @@ See also: "[Use together with custom parsers](#use-together-with-custom-parsers)
   - CLI targets only `.js` files by default. You have to specify additional extensions by `--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`. If you use `@vue/cli-plugin-eslint` and the `vue-cli-service lint` command - you don't have to worry about it.
   - If you are having issues with configuring editor please read [editor integrations](#editor-integrations)
 
-## 🚥 Versioning policy
+## :traffic_light: Versioning policy
 
 This plugin is following [Semantic Versioning](https://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
 
-## 📰 Changelog
+## :newspaper: Changelog
 
 We are using [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases).
 
-## 🔒 License
+## :lock: License
 
 See the [LICENSE](https://github.com/vuejs/eslint-plugin-vue/blob/master/LICENSE) file for license rights and limitations (MIT).

From f82fc311de22a4aaa0e549b63b144888cb236f89 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 15 Nov 2018 02:01:02 +0100
Subject: [PATCH 78/99] Add yarn install guide

---
 docs/user-guide/README.md | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index 1ff082cf9..6332d5270 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -7,6 +7,9 @@ Use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install.
 ```bash
 npm install --save-dev eslint eslint-plugin-vue@next
 ```
+```bash
+yarn add eslint eslint-plugin-vue@next --dev
+```
 
 ::: tip Requirements
 - ESLint v5.0.0 or later

From 504eeeeb24fc05e1d5e84888d87e78ca815f266f Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Thu, 15 Nov 2018 21:05:55 +0100
Subject: [PATCH 79/99] Fix issue with not supported `vue/comment-directive`

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index af7992576..8a550d6b4 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "nyc": "^12.0.2",
     "typescript": "^3.1.3",
     "typescript-eslint-parser": "^20.0.0",
-    "vue-eslint-editor": "^0.1.0",
+    "vue-eslint-editor": "^0.1.3",
     "vuepress": "^0.14.5"
   }
 }

From 7332deb3ce573e20fde064d5b3f76126214c9200 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 16 Nov 2018 23:14:38 +0100
Subject: [PATCH 80/99] unify options json (2 -> "error")

2 is used only if few examples but "error" is used in alot of them
---
 docs/rules/attribute-hyphenation.md       | 2 +-
 docs/rules/attributes-order.md            | 2 +-
 docs/rules/html-quotes.md                 | 2 +-
 docs/rules/no-multi-spaces.md             | 2 +-
 docs/rules/return-in-computed-property.md | 2 +-
 docs/rules/this-in-template.md            | 2 +-
 docs/rules/v-bind-style.md                | 2 +-
 docs/rules/v-on-style.md                  | 2 +-
 8 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index e36fa3861..6eeca5785 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -21,7 +21,7 @@
 
 ```json
 {
-  "vue/attribute-hyphenation": [2, "always" | "never", {
+  "vue/attribute-hyphenation": ["error", "always" | "never", {
     "ignore": []
   }]
 }
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 02f0c90ee..379cddafe 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -83,7 +83,7 @@ This rule aims to enforce ordering of component attributes. The default order is
 ## :wrench: Options
 ```json
 {
-  "vue/attributes-order": [2, {
+  "vue/attributes-order": ["error", {
     "order": [
       "DEFINITION",
       "LIST_RENDERING",
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index cfbc354c1..ed9294619 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -34,7 +34,7 @@ Default is set to `double`.
 
 ```json
 {
-  "vue/html-quotes": [2, "double" | "single"]
+  "vue/html-quotes": ["error", "double" | "single"]
 }
 ```
 
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index a8f2d2f7d..b2e4c1ae5 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -38,7 +38,7 @@ This rule aims at removing multiple spaces in tags, which are not used for inden
 
 ```json
 {
-  "vue/no-multi-spaces": [2, {
+  "vue/no-multi-spaces": ["error", {
     "ignoreProperties": false
   }]
 }
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index b91bdfb63..6f09be343 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -39,7 +39,7 @@ export default {
 
 ```json
 {
-  "vue/return-in-computed-property": [2, {
+  "vue/return-in-computed-property": ["error", {
     "treatUndefinedAsUnspecified": true
   }]
 }
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index 9a5f36569..c5442a875 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -24,7 +24,7 @@
 
 ```json
 {
-  "vue/this-in-template": [2, "always" | "never"]
+  "vue/this-in-template": ["error", "always" | "never"]
 }
 ```
 - `"always"` ... Always use `this` while accessing properties from Vue.
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 750a7bc49..9cb66f809 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -24,7 +24,7 @@ Default is set to `shorthand`.
 
 ```json
 {
-  "vue/v-bind-style": [2, "shorthand" | "longform"]
+  "vue/v-bind-style": ["error", "shorthand" | "longform"]
 }
 ```
 
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 2f48db9ff..0eb9ad558 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -24,7 +24,7 @@ Default is set to `shorthand`.
 
 ```json
 {
-  "vue/v-on-style": [2, "shorthand" | "longform"]
+  "vue/v-on-style": ["error", "shorthand" | "longform"]
 }
 ```
 

From afd32325c1b1c64e35ed81a58ebfd27fdc55cdf1 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 16 Nov 2018 23:30:21 +0100
Subject: [PATCH 81/99] Add bad example of no-use-v-vi-with-v-for

---
 docs/rules/no-use-v-if-with-v-for.md | 7 +++++++
 1 file changed, 7 insertions(+)

diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 61a871c1a..794bf0677 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -63,6 +63,13 @@ There are two common cases where this can be tempting:
     v-if="todo.shown"
     :todo="todo"
   />
+
+  <!-- ✗ BAD -->
+  <TodoItem
+    v-for="todo in todos"
+    v-if="shown"
+    :todo="todo"
+  />
 </template>
 ```
 </eslint-code-block>

From 337db12067698ce95453870beeb6f0d2f15be5f7 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 16 Nov 2018 23:31:10 +0100
Subject: [PATCH 82/99] editor: update default formating to preset in
 documentation

---
 docs/.vuepress/components/eslint-code-block.vue | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index e74589e74..024fa5c9f 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -10,6 +10,7 @@
         :preprocess="preprocess"
         :postprocess="postprocess"
         dark
+        :format="format"
         :fix="fix"
     />
 </template>
@@ -40,7 +41,11 @@ export default {
     return {
       linter: null,
       preprocess: processors['.vue'].preprocess,
-      postprocess: processors['.vue'].postprocess
+      postprocess: processors['.vue'].postprocess,
+      format: {
+        insertSpaces: true,
+        tabSize: 2
+      }
     }
   },
 

From 8ef13673e1f82a1586428d7f925bf7d0189dae23 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Fri, 23 Nov 2018 23:25:04 +0100
Subject: [PATCH 83/99] Update vue-eslint-editor to fix tooltip issue

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 8d7560b25..c18c136fd 100644
--- a/package.json
+++ b/package.json
@@ -61,7 +61,7 @@
     "nyc": "^12.0.2",
     "typescript": "^3.1.3",
     "typescript-eslint-parser": "^20.0.0",
-    "vue-eslint-editor": "^0.1.3",
+    "vue-eslint-editor": "^0.1.4",
     "vuepress": "^0.14.5"
   }
 }

From 9afa0d40f95017660d9812e618b3f320d41539e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 00:50:38 +0100
Subject: [PATCH 84/99] Add comment about auto-generated content

---
 docs/rules/README.md | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 6c062ec21..79d20e1b8 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -2,7 +2,9 @@
 sidebarDepth: 0
 ---
 
-# All rules
+# Available rules
+
+<!-- Content below is auto generated in tools/lib/categories.js -->
 
 ## Base Rules (Enabling Correct ESLint Parsing)
 

From d16556ff82731852c31a65985db3388fc86afe5f Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 00:52:03 +0100
Subject: [PATCH 85/99] Fix indentations in Vue file

---
 .../components/eslint-code-block.vue          | 30 ++++++++++---------
 1 file changed, 16 insertions(+), 14 deletions(-)

diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index 024fa5c9f..cf7fb6b89 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -1,18 +1,18 @@
 <template>
-    <eslint-editor
-        :linter="linter"
-        :config="config"
-        :code="code"
-        :style="{ height }"
-        class="eslint-code-block"
-        filename="example.vue"
-        language="html"
-        :preprocess="preprocess"
-        :postprocess="postprocess"
-        dark
-        :format="format"
-        :fix="fix"
-    />
+  <eslint-editor
+    :linter="linter"
+    :config="config"
+    :code="code"
+    :style="{ height }"
+    class="eslint-code-block"
+    filename="example.vue"
+    language="html"
+    :preprocess="preprocess"
+    :postprocess="postprocess"
+    dark
+    :format="format"
+    :fix="fix"
+  />
 </template>
 
 <script>
@@ -116,11 +116,13 @@ export default {
       import('eslint4b/dist/linter'),
       import('espree').then(() => import('vue-eslint-parser'))
     ])
+
     const linter = (this.linter = new Linter())
 
     for (const ruleId of Object.keys(rules)) {
       linter.defineRule(`vue/${ruleId}`, rules[ruleId])
     }
+
     linter.defineParser('vue-eslint-parser', { parseForESLint })
   }
 }

From 8bef2da71c0eaa7ad6e045e71d6fe5b7dc84612e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 00:52:17 +0100
Subject: [PATCH 86/99] Add short description for vue/attribute-hyphenation
 rule

---
 docs/rules/attribute-hyphenation.md | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 6eeca5785..f8719bc14 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -5,6 +5,8 @@
 
 ## :book: Rule Details
 
+This rule enforces using hyphenated attribute names on custom components in Vue templates.
+
 <eslint-code-block fix :rules="{'vue/attribute-hyphenation': ['error', 'always']}">
 ```
 <template>

From a44f1bbd8479a1eaa747dfbe9e0875df1cc7900b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 01:06:25 +0100
Subject: [PATCH 87/99] Add short description for vue/this-in-template rule

---
 docs/rules/README.md                | 6 +++---
 docs/rules/this-in-template.md      | 4 +++-
 lib/rules/this-in-template.js       | 4 ++--
 tests/lib/rules/this-in-template.js | 2 +-
 tools/update-docs-rules-index.js    | 4 +++-
 5 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/docs/rules/README.md b/docs/rules/README.md
index 79d20e1b8..1511e1946 100644
--- a/docs/rules/README.md
+++ b/docs/rules/README.md
@@ -2,9 +2,9 @@
 sidebarDepth: 0
 ---
 
-# Available rules
+<!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
 
-<!-- Content below is auto generated in tools/lib/categories.js -->
+# Available rules
 
 ## Base Rules (Enabling Correct ESLint Parsing)
 
@@ -116,7 +116,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 | [vue/html-quotes](./html-quotes.md) | enforce quotes style of HTML attributes | :wrench: |
 | [vue/no-v-html](./no-v-html.md) | disallow use of v-html to prevent XSS attack |  |
 | [vue/order-in-components](./order-in-components.md) | enforce order of properties in components | :wrench: |
-| [vue/this-in-template](./this-in-template.md) | enforce usage of `this` in template |  |
+| [vue/this-in-template](./this-in-template.md) | disallow usage of `this` in template |  |
 
 ## Uncategorized
 
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index c5442a875..05d792def 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -1,9 +1,11 @@
-# enforce usage of `this` in template (vue/this-in-template)
+# disallow usage of `this` in template (vue/this-in-template)
 
 - :gear: This rule is included in `"plugin:vue/recommended"`.
 
 ## :book: Rule Details
 
+This rule aims at preventing usage of `this` in Vue templates.
+
 <eslint-code-block :rules="{'vue/this-in-template': ['error']}">
 ```vue
 <template>
diff --git a/lib/rules/this-in-template.js b/lib/rules/this-in-template.js
index 3a8ca4092..d0ffc57a1 100644
--- a/lib/rules/this-in-template.js
+++ b/lib/rules/this-in-template.js
@@ -1,5 +1,5 @@
 /**
- * @fileoverview enforce usage of `this` in template.
+ * @fileoverview disallow usage of `this` in template.
  * @author Armano
  */
 'use strict'
@@ -19,7 +19,7 @@ module.exports = {
   meta: {
     type: 'suggestion',
     docs: {
-      description: 'enforce usage of `this` in template',
+      description: 'disallow usage of `this` in template',
       category: 'recommended',
       url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.5/docs/rules/this-in-template.md'
     },
diff --git a/tests/lib/rules/this-in-template.js b/tests/lib/rules/this-in-template.js
index a35c08f8e..1f7c7c69b 100644
--- a/tests/lib/rules/this-in-template.js
+++ b/tests/lib/rules/this-in-template.js
@@ -1,5 +1,5 @@
 /**
- * @fileoverview enforce usage of `this` in template.
+ * @fileoverview disallow usage of `this` in template.
  * @author Armano
  */
 'use strict'
diff --git a/tools/update-docs-rules-index.js b/tools/update-docs-rules-index.js
index a1fbe1626..7d0799cd1 100644
--- a/tools/update-docs-rules-index.js
+++ b/tools/update-docs-rules-index.js
@@ -94,6 +94,8 @@ fs.writeFileSync(
 sidebarDepth: 0
 ---
 
-# All rules
+<!-- This file is automatically generated in tools/update-docs-rules-index.js, do not change! -->
+
+# Available rules
 ${rulesTableContent}`
 )

From 2f8415a4fb3f36447510229a8c421465745bb0e9 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 01:45:08 +0100
Subject: [PATCH 88/99] Update valid-template-root docs

---
 .../components/eslint-code-block.vue          |   4 +-
 docs/rules/valid-template-root.md             | 121 +++++-------------
 2 files changed, 37 insertions(+), 88 deletions(-)

diff --git a/docs/.vuepress/components/eslint-code-block.vue b/docs/.vuepress/components/eslint-code-block.vue
index cf7fb6b89..d7789c7bb 100644
--- a/docs/.vuepress/components/eslint-code-block.vue
+++ b/docs/.vuepress/components/eslint-code-block.vue
@@ -130,7 +130,7 @@ export default {
 
 <style>
 .eslint-code-block {
-    width: 100%;
-    margin: 1em 0;
+  width: 100%;
+  margin: 1em 0;
 }
 </style>
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 7e9b5f413..1d3a00598 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -8,92 +8,41 @@ This rule checks whether every template root is valid.
 
 This rule reports the template root in the following cases:
 
-- The root is nothing. E.g. `<template></template>`.
-- The root is text. E.g. `<template>hello</template>`.
-- The root is multiple elements. E.g. `<template><div>one</div><div>two</div></template>`.
-- The root element has `v-for` directives. E.g. `<template><div v-for="x in list">{{x}}</div></template>`.
-- The root element is `<template>` or `<slot>` elements. E.g. `<template><template>hello</template></template>`.
-
-:-1: Examples of **incorrect** code for this rule:
-
-```js
-template: ''
-```
-
-```html
-<template>
-</template>
-```
-
-```js
-template: `
-  <div>hello</div>
-  <div>hello</div>
-`
-```
-
-```html
-<template>
-  <div>hello</div>
-  <div>hello</div>
-</template>
-```
-
-```js
-template: 'abc'
-```
-
-```html
-<template>
-  abc
-</template>
-```
-
-```js
-template: '<div v-for="item in items"/>'
-```
-
-```html
-<template>
-  <div v-for="item in items"/>
-</template>
-```
-
-:+1: Examples of **correct** code for this rule:
-
-```js
-template: '<div>abc</div>'
-```
-
-```html
-<template>
-  <div>abc</div>
-</template>
-```
-
-```js
-template: '<div v-if="foo">abc</div>'
-```
-
-```html
-<template>
-  <div v-if="foo">abc</div>
-</template>
-```
-
-```js
-template: `
-  <div v-if="foo">abc</div>
-  <div v-else>def</div>
-`
-```
-
-```html
-<template>
-  <div v-if="foo">abc</div>
-  <div v-else>def</div>
-</template>
-```
+<eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+```vue
+<script>
+  // The root is nothing
+  Vue.component('example', {
+    template: ''
+  });
+
+  // The root is text
+  Vue.component('example', {
+    template: 'abc'
+  });
+
+  // The root is multiple elements
+  Vue.component('example', {
+    template: `
+      <div>hello</div>
+      <div>hello</div>
+    `
+  });
+
+  // The root element has `v-for` directives
+  Vue.component('example', {
+    template: '<div v-for="item in items"/>'
+  });
+
+  // The root element is `<template>` or `<slot>`
+  Vue.component('example', {
+    template: '<template>Hello</template>'
+  });
+</script>
+```
+</eslint-code-block>
+
+Same rules apply to `.vue` templates.
 
 ## :wrench: Options
 

From 7aa194cffd241b5eee0b1b92f5a89304b3c49353 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 02:15:53 +0100
Subject: [PATCH 89/99] Update user guide structure

---
 docs/README.md            |  16 ++++++
 docs/user-guide/README.md | 114 +++++++++++++++++---------------------
 2 files changed, 67 insertions(+), 63 deletions(-)

diff --git a/docs/README.md b/docs/README.md
index bc76fc024..953b51b5b 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,3 +1,7 @@
+---
+sidebarDepth: 0
+---
+
 # Introduction
 
 Official ESLint plugin for Vue.js.
@@ -9,3 +13,15 @@ This plugin allows us to check the `<template>` and `<script>` of `.vue` files w
 - Finds the violation for [Vue.js Style Guide](https://vuejs.org/v2/style-guide/).
 
 ESLint editor integrations are useful to check your code in real-time.
+
+## :traffic_light: Versioning policy
+
+This plugin is following [Semantic Versioning](https://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
+
+## :newspaper: Changelog
+
+We are using [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases).
+
+## :lock: License
+
+See the [LICENSE](https://github.com/vuejs/eslint-plugin-vue/blob/master/LICENSE) file for license rights and limitations (MIT).
diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index 6332d5270..308f16e76 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -40,7 +40,7 @@ module.exports = {
 
 See [the rule list](../rules/README.md) to get the `extends` &amp; `rules` that this plugin provides.
 
-#### Use together with custom parsers
+#### How to use custom parser?
 
 If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [typescript-eslint-parser](https://www.npmjs.com/package/typescript-eslint-parser), you have to use `parserOptions.parser` option instead of `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, so this plugin doesn't work if you overwrote `parser` option.
 
@@ -52,9 +52,9 @@ If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/p
   }
 ```
 
-### Command
+### Command line
 
-You have to include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default.
+If you want to run `eslint` from command line, make sure you include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default.
 
 Examples:
 
@@ -63,7 +63,54 @@ eslint --ext .js,.vue src
 eslint "src/**/*.{js,vue}"
 ```
 
-### Editor integrations
+### How ESLint detects components?
+
+All component-related rules are being applied to code that passes any of the following checks:
+
+* `Vue.component()` expression
+* `Vue.extend()` expression
+* `Vue.mixin()` expression
+* `export default {}` in `.vue` or `.jsx` file
+
+If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment `// @vue/component` that marks object in the next line as a Vue component in any file, e.g.:
+
+```js
+// @vue/component
+const CustomComponent = {
+  name: 'custom-component',
+  template: '<div></div>'
+}
+```
+
+```js
+Vue.component('AsyncComponent', (resolve, reject) => {
+  setTimeout(() => {
+    // @vue/component
+    resolve({
+      name: 'async-component',
+      template: '<div></div>'
+    })
+  }, 500)
+})
+```
+
+### Disabling rules via `<!-- eslint-disable -->`
+
+You can use `<!-- eslint-disable -->`-like HTML comments in `<template>` of `.vue` files to disable a certain rule temporarily.
+
+For example:
+
+```vue
+<template>
+  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
+  <div a="1" b="2" c="3" d="4">
+  </div>
+</template>
+```
+
+If you want to disallow `eslint-disable` functionality in `<template>`, disable [vue/comment-directive](../rules/comment-directive.md) rule.
+
+## :computer: Editor integrations
 
 #### Visual Studio Code
 
@@ -114,53 +161,6 @@ If your ESLint configuration is updated (manually or from your version control),
 
 read more: [JetBrains - ESLint](https://www.jetbrains.com/help/idea/eslint.html)
 
-### The code of components
-
-All component-related rules are being applied to code that passes any of the following checks:
-
-* `Vue.component()` expression
-* `Vue.extend()` expression
-* `Vue.mixin()` expression
-* `export default {}` in `.vue` or `.jsx` file
-
-If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment `// @vue/component` that marks object in the next line as a Vue component in any file, e.g.:
-
-```js
-// @vue/component
-const CustomComponent = {
-  name: 'custom-component',
-  template: '<div></div>'
-}
-```
-
-```js
-Vue.component('AsyncComponent', (resolve, reject) => {
-  setTimeout(() => {
-    // @vue/component
-    resolve({
-      name: 'async-component',
-      template: '<div></div>'
-    })
-  }, 500)
-})
-```
-
-### `<!-- eslint-disable -->`
-
-You can use `<!-- eslint-disable -->`-like HTML comments in `<template>` of `.vue` files to disable a certain rule temporarily.
-
-For example:
-
-```vue
-<template>
-  <!-- eslint-disable-next-line vue/max-attributes-per-line -->
-  <div a="1" b="2" c="3" d="4">
-  </div>
-</template>
-```
-
-If you want to disallow `eslint-disable` functionality in `<template>`, disable [vue/comment-directive](../rules/comment-directive.md) rule.
-
 ## :question: FAQ
 
 ### What is the "Use the latest vue-eslint-parser" error?
@@ -199,15 +199,3 @@ See also: "[Use together with custom parsers](#use-together-with-custom-parsers)
 2. Make sure your tool is set to lint `.vue` files.
   - CLI targets only `.js` files by default. You have to specify additional extensions by `--ext` option or glob patterns. E.g. `eslint "src/**/*.{js,vue}"` or `eslint src --ext .vue`. If you use `@vue/cli-plugin-eslint` and the `vue-cli-service lint` command - you don't have to worry about it.
   - If you are having issues with configuring editor please read [editor integrations](#editor-integrations)
-
-## :traffic_light: Versioning policy
-
-This plugin is following [Semantic Versioning](https://semver.org/) and [ESLint's Semantic Versioning Policy](https://github.com/eslint/eslint#semantic-versioning-policy).
-
-## :newspaper: Changelog
-
-We are using [GitHub Releases](https://github.com/vuejs/eslint-plugin-vue/releases).
-
-## :lock: License
-
-See the [LICENSE](https://github.com/vuejs/eslint-plugin-vue/blob/master/LICENSE) file for license rights and limitations (MIT).

From 1936eeda80bd1bbe4dd619899cf95663765e9316 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 03:08:04 +0100
Subject: [PATCH 90/99] Update rules heading in docs

---
 docs/.vuepress/style.styl                     | 20 +++++++++++++++++++
 docs/rules/attribute-hyphenation.md           |  6 +++++-
 docs/rules/attributes-order.md                |  6 +++++-
 docs/rules/comment-directive.md               |  6 +++++-
 .../component-name-in-template-casing.md      |  6 +++++-
 docs/rules/html-closing-bracket-newline.md    |  6 +++++-
 docs/rules/html-closing-bracket-spacing.md    |  6 +++++-
 docs/rules/html-end-tags.md                   |  6 +++++-
 docs/rules/html-indent.md                     |  6 +++++-
 docs/rules/html-quotes.md                     |  6 +++++-
 docs/rules/html-self-closing.md               |  6 +++++-
 docs/rules/jsx-uses-vars.md                   |  6 +++++-
 docs/rules/max-attributes-per-line.md         |  6 +++++-
 .../multiline-html-element-content-newline.md |  6 +++++-
 docs/rules/mustache-interpolation-spacing.md  |  6 +++++-
 docs/rules/name-property-casing.md            |  6 +++++-
 docs/rules/no-async-in-computed-properties.md |  6 +++++-
 docs/rules/no-confusing-v-for-v-if.md         |  6 +++++-
 docs/rules/no-dupe-keys.md                    |  6 +++++-
 docs/rules/no-duplicate-attributes.md         |  6 +++++-
 docs/rules/no-multi-spaces.md                 |  6 +++++-
 docs/rules/no-parsing-error.md                |  6 +++++-
 docs/rules/no-reserved-keys.md                |  6 +++++-
 docs/rules/no-shared-component-data.md        |  6 +++++-
 .../no-side-effects-in-computed-properties.md |  6 +++++-
 ...-spaces-around-equal-signs-in-attribute.md |  6 +++++-
 docs/rules/no-template-key.md                 |  6 +++++-
 docs/rules/no-template-shadow.md              |  6 +++++-
 docs/rules/no-textarea-mustache.md            |  6 +++++-
 docs/rules/no-unused-components.md            |  6 +++++-
 docs/rules/no-unused-vars.md                  |  6 +++++-
 docs/rules/no-use-v-if-with-v-for.md          |  6 +++++-
 docs/rules/no-v-html.md                       |  6 +++++-
 docs/rules/order-in-components.md             |  6 +++++-
 docs/rules/prop-name-casing.md                |  6 +++++-
 docs/rules/require-component-is.md            |  6 +++++-
 docs/rules/require-default-prop.md            |  6 +++++-
 docs/rules/require-prop-type-constructor.md   |  6 +++++-
 docs/rules/require-prop-types.md              |  6 +++++-
 docs/rules/require-render-return.md           |  6 +++++-
 docs/rules/require-v-for-key.md               |  6 +++++-
 docs/rules/require-valid-default-prop.md      |  6 +++++-
 docs/rules/return-in-computed-property.md     |  6 +++++-
 docs/rules/script-indent.md                   |  6 +++++-
 ...singleline-html-element-content-newline.md |  6 +++++-
 docs/rules/this-in-template.md                |  6 +++++-
 docs/rules/use-v-on-exact.md                  |  6 +++++-
 docs/rules/v-bind-style.md                    |  6 +++++-
 docs/rules/v-on-style.md                      |  6 +++++-
 docs/rules/valid-template-root.md             |  6 +++++-
 docs/rules/valid-v-bind.md                    |  6 +++++-
 docs/rules/valid-v-cloak.md                   |  6 +++++-
 docs/rules/valid-v-else-if.md                 |  6 +++++-
 docs/rules/valid-v-else.md                    |  6 +++++-
 docs/rules/valid-v-for.md                     |  6 +++++-
 docs/rules/valid-v-html.md                    |  6 +++++-
 docs/rules/valid-v-if.md                      |  6 +++++-
 docs/rules/valid-v-model.md                   |  6 +++++-
 docs/rules/valid-v-on.md                      |  6 +++++-
 docs/rules/valid-v-once.md                    |  6 +++++-
 docs/rules/valid-v-pre.md                     |  6 +++++-
 docs/rules/valid-v-show.md                    |  6 +++++-
 docs/rules/valid-v-text.md                    |  6 +++++-
 tools/update-docs.js                          | 11 +++++++---
 64 files changed, 338 insertions(+), 65 deletions(-)
 create mode 100644 docs/.vuepress/style.styl

diff --git a/docs/.vuepress/style.styl b/docs/.vuepress/style.styl
new file mode 100644
index 000000000..564ebd26e
--- /dev/null
+++ b/docs/.vuepress/style.styl
@@ -0,0 +1,20 @@
+.theme-container.rule-details .content > h1 {
+  font-size: 1.8rem;
+
+  + blockquote {
+    margin-top: -15px;
+    padding: 0;
+    border: 0;
+    font-weight: 500;
+    font-size: 1.4rem;
+    color: currentColor;
+
+    ::first-letter {
+      text-transform: uppercase;
+    }
+
+    p {
+      line-height: 1.2;
+    }
+  }
+}
diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index f8719bc14..c0673fc52 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -1,4 +1,8 @@
-# enforce attribute naming style on custom components in template (vue/attribute-hyphenation)
+---
+pageClass: rule-details
+---
+# vue/attribute-hyphenation
+> enforce attribute naming style on custom components in template
 
 - :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.
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 379cddafe..671ef8ee3 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -1,4 +1,8 @@
-# enforce order of attributes (vue/attributes-order)
+---
+pageClass: rule-details
+---
+# vue/attributes-order
+> enforce order of attributes
 
 - :gear: This rule is included in `"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.
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index 55c65d738..79b567e6f 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -1,4 +1,8 @@
-# support comment-directives in `<template>` (vue/comment-directive)
+---
+pageClass: rule-details
+---
+# vue/comment-directive
+> support comment-directives in `<template>`
 
 - :gear: This rule is included in all of `"plugin:vue/base"`, `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index e6fbb3164..bcd58bf2c 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -1,4 +1,8 @@
-# enforce specific casing for the component naming style in template (vue/component-name-in-template-casing)
+---
+pageClass: rule-details
+---
+# vue/component-name-in-template-casing
+> enforce specific casing for the component naming style in template
 
 - :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.
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index faac17864..4a1dab127 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -1,4 +1,8 @@
-# require or disallow a line break before tag's closing brackets (vue/html-closing-bracket-newline)
+---
+pageClass: rule-details
+---
+# vue/html-closing-bracket-newline
+> require or disallow a line break before tag's closing brackets
 
 - :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.
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 9faa77e32..05a4bc69d 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -1,4 +1,8 @@
-# require or disallow a space before tag's closing brackets (vue/html-closing-bracket-spacing)
+---
+pageClass: rule-details
+---
+# vue/html-closing-bracket-spacing
+> require or disallow a space before tag's closing brackets
 
 - :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.
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index a18abeb6e..a50ee6bc8 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -1,4 +1,8 @@
-# enforce end tag style (vue/html-end-tags)
+---
+pageClass: rule-details
+---
+# vue/html-end-tags
+> enforce end tag style
 
 - :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.
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index 1238d88d3..aba25901e 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -1,4 +1,8 @@
-# enforce consistent indentation in `<template>` (vue/html-indent)
+---
+pageClass: rule-details
+---
+# vue/html-indent
+> enforce consistent indentation in `<template>`
 
 - :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.
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index ed9294619..487062472 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -1,4 +1,8 @@
-# enforce quotes style of HTML attributes (vue/html-quotes)
+---
+pageClass: rule-details
+---
+# vue/html-quotes
+> enforce quotes style of HTML attributes
 
 - :gear: This rule is included in `"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.
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 0e63b597e..015af9df8 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -1,4 +1,8 @@
-# enforce self-closing style (vue/html-self-closing)
+---
+pageClass: rule-details
+---
+# vue/html-self-closing
+> enforce self-closing style
 
 - :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.
diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index da2943a9a..6c4ec3883 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -1,4 +1,8 @@
-# prevent variables used in JSX to be marked as unused (vue/jsx-uses-vars)
+---
+pageClass: rule-details
+---
+# vue/jsx-uses-vars
+> prevent variables used in JSX to be marked as unused
 
 - :gear: This rule is included in all of `"plugin:vue/base"`, `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index 81bbd5cf2..da4bd7b19 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -1,4 +1,8 @@
-# enforce the maximum number of attributes per line (vue/max-attributes-per-line)
+---
+pageClass: rule-details
+---
+# vue/max-attributes-per-line
+> enforce the maximum number of attributes per line
 
 - :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.
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 2572448ec..29c093ca6 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -1,4 +1,8 @@
-# require a line break before and after the contents of a multiline element (vue/multiline-html-element-content-newline)
+---
+pageClass: rule-details
+---
+# vue/multiline-html-element-content-newline
+> require a line break before and after the contents of a multiline element
 
 - :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.
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index 3d38ace07..0efd800af 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -1,4 +1,8 @@
-# enforce unified spacing in mustache interpolations (vue/mustache-interpolation-spacing)
+---
+pageClass: rule-details
+---
+# vue/mustache-interpolation-spacing
+> enforce unified spacing in mustache interpolations
 
 - :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.
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index f8f51d563..25cdc8f62 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -1,4 +1,8 @@
-# enforce specific casing for the name property in Vue components (vue/name-property-casing)
+---
+pageClass: rule-details
+---
+# vue/name-property-casing
+> enforce specific casing for the name property in Vue components
 
 - :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.
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index 1418231dc..17a70ca94 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -1,4 +1,8 @@
-# disallow asynchronous actions in computed properties (vue/no-async-in-computed-properties)
+---
+pageClass: rule-details
+---
+# vue/no-async-in-computed-properties
+> disallow asynchronous actions in computed properties
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 38a906e14..7962464a4 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -1,4 +1,8 @@
-# disallow confusing `v-for` and `v-if` on the same element (vue/no-confusing-v-for-v-if)
+---
+pageClass: rule-details
+---
+# vue/no-confusing-v-for-v-if
+> disallow confusing `v-for` and `v-if` on the same element
 
 - :warning: This rule was **deprecated** and replaced by [vue/no-use-v-if-with-v-for](no-use-v-if-with-v-for.md) rule.
 
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 91f3c1e1f..27e09a8b7 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -1,4 +1,8 @@
-# disallow duplication of field names (vue/no-dupe-keys)
+---
+pageClass: rule-details
+---
+# vue/no-dupe-keys
+> disallow duplication of field names
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index 42b82a11b..d1b7f6170 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -1,4 +1,8 @@
-# disallow duplication of attributes (vue/no-duplicate-attributes)
+---
+pageClass: rule-details
+---
+# vue/no-duplicate-attributes
+> disallow duplication of attributes
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index b2e4c1ae5..e77a8e321 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -1,4 +1,8 @@
-# disallow multiple spaces (vue/no-multi-spaces)
+---
+pageClass: rule-details
+---
+# vue/no-multi-spaces
+> disallow multiple spaces
 
 - :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.
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index b98088c6d..ada15c6fb 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -1,4 +1,8 @@
-# disallow parsing errors in `<template>` (vue/no-parsing-error)
+---
+pageClass: rule-details
+---
+# vue/no-parsing-error
+> disallow parsing errors in `<template>`
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index cfde95576..02bfb1a91 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -1,4 +1,8 @@
-# disallow overwriting reserved keys (vue/no-reserved-keys)
+---
+pageClass: rule-details
+---
+# vue/no-reserved-keys
+> disallow overwriting reserved keys
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index b3863e2db..34c94aee1 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -1,4 +1,8 @@
-# enforce component's data property to be a function (vue/no-shared-component-data)
+---
+pageClass: rule-details
+---
+# vue/no-shared-component-data
+> enforce component's data property to be a function
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"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.
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 0e1ff92da..869c98126 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -1,4 +1,8 @@
-# disallow side effects in computed properties (vue/no-side-effects-in-computed-properties)
+---
+pageClass: rule-details
+---
+# vue/no-side-effects-in-computed-properties
+> disallow side effects in computed properties
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index 99b4a4c22..9deaeedb3 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -1,4 +1,8 @@
-# disallow spaces around equal signs in attribute (vue/no-spaces-around-equal-signs-in-attribute)
+---
+pageClass: rule-details
+---
+# vue/no-spaces-around-equal-signs-in-attribute
+> disallow spaces around equal signs in attribute
 
 - :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.
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index c7ebb5441..4bcf4e7b1 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -1,4 +1,8 @@
-# disallow `key` attribute on `<template>` (vue/no-template-key)
+---
+pageClass: rule-details
+---
+# vue/no-template-key
+> disallow `key` attribute on `<template>`
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-template-shadow.md b/docs/rules/no-template-shadow.md
index 65199789c..f573bd60d 100644
--- a/docs/rules/no-template-shadow.md
+++ b/docs/rules/no-template-shadow.md
@@ -1,4 +1,8 @@
-# disallow variable declarations from shadowing variables declared in the outer scope (vue/no-template-shadow)
+---
+pageClass: rule-details
+---
+# vue/no-template-shadow
+> disallow variable declarations from shadowing variables declared in the outer scope
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 6e93631bc..88c7ac2c8 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -1,4 +1,8 @@
-# disallow mustaches in `<textarea>` (vue/no-textarea-mustache)
+---
+pageClass: rule-details
+---
+# vue/no-textarea-mustache
+> disallow mustaches in `<textarea>`
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index cf8b377ec..64774d0b8 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -1,4 +1,8 @@
-# disallow registering components that are not used inside templates (vue/no-unused-components)
+---
+pageClass: rule-details
+---
+# vue/no-unused-components
+> disallow registering components that are not used inside templates
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index 376e88354..67d45f4f9 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -1,4 +1,8 @@
-# disallow unused variable definitions of v-for directives or scope attributes (vue/no-unused-vars)
+---
+pageClass: rule-details
+---
+# vue/no-unused-vars
+> disallow unused variable definitions of v-for directives or scope attributes
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 794bf0677..96a485496 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -1,4 +1,8 @@
-# disallow use v-if on the same element as v-for (vue/no-use-v-if-with-v-for)
+---
+pageClass: rule-details
+---
+# vue/no-use-v-if-with-v-for
+> disallow use v-if on the same element as v-for
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index 54f412e5d..78678f670 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -1,4 +1,8 @@
-# disallow use of v-html to prevent XSS attack (vue/no-v-html)
+---
+pageClass: rule-details
+---
+# vue/no-v-html
+> disallow use of v-html to prevent XSS attack
 
 - :gear: This rule is included in `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index 466a3cc33..249be5257 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -1,4 +1,8 @@
-# enforce order of properties in components (vue/order-in-components)
+---
+pageClass: rule-details
+---
+# vue/order-in-components
+> enforce order of properties in components
 
 - :gear: This rule is included in `"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.
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index 884a54513..cbcbb209e 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -1,4 +1,8 @@
-# enforce specific casing for the Prop name in Vue components (vue/prop-name-casing)
+---
+pageClass: rule-details
+---
+# vue/prop-name-casing
+> enforce specific casing for the Prop name in Vue components
 
 - :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.
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 29eee438f..1a5440d32 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -1,4 +1,8 @@
-# require `v-bind:is` of `<component>` elements (vue/require-component-is)
+---
+pageClass: rule-details
+---
+# vue/require-component-is
+> require `v-bind:is` of `<component>` elements
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 7c97bfd50..3c542c5b9 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -1,4 +1,8 @@
-# require default value for props (vue/require-default-prop)
+---
+pageClass: rule-details
+---
+# vue/require-default-prop
+> require default value for props
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index f222e0201..950ab9e75 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -1,4 +1,8 @@
-# require prop type to be a constructor (vue/require-prop-type-constructor)
+---
+pageClass: rule-details
+---
+# vue/require-prop-type-constructor
+> require prop type to be a constructor
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"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.
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 67873f061..07941b7f2 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -1,4 +1,8 @@
-# require type definitions in props (vue/require-prop-types)
+---
+pageClass: rule-details
+---
+# vue/require-prop-types
+> require type definitions in props
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index b6eee38d5..a7a996db2 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -1,4 +1,8 @@
-# enforce render function to always return value (vue/require-render-return)
+---
+pageClass: rule-details
+---
+# vue/require-render-return
+> enforce render function to always return value
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index ddce0ca0e..81dccc02e 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -1,4 +1,8 @@
-# require `v-bind:key` with `v-for` directives (vue/require-v-for-key)
+---
+pageClass: rule-details
+---
+# vue/require-v-for-key
+> require `v-bind:key` with `v-for` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index a0c68cdc3..a95cb8c8a 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -1,4 +1,8 @@
-# enforce props default values to be valid (vue/require-valid-default-prop)
+---
+pageClass: rule-details
+---
+# vue/require-valid-default-prop
+> enforce props default values to be valid
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 6f09be343..73103afd5 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -1,4 +1,8 @@
-# enforce that a return statement is present in computed property (vue/return-in-computed-property)
+---
+pageClass: rule-details
+---
+# vue/return-in-computed-property
+> enforce that a return statement is present in computed property
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 83c9c807d..0d1677d87 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -1,4 +1,8 @@
-# enforce consistent indentation in `<script>` (vue/script-indent)
+---
+pageClass: rule-details
+---
+# vue/script-indent
+> enforce consistent indentation in `<script>`
 
 - :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.
 
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index 72f6b2d22..2cb2ac7ab 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -1,4 +1,8 @@
-# require a line break before and after the contents of a singleline element (vue/singleline-html-element-content-newline)
+---
+pageClass: rule-details
+---
+# vue/singleline-html-element-content-newline
+> require a line break before and after the contents of a singleline element
 
 - :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.
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index 05d792def..06b815605 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -1,4 +1,8 @@
-# disallow usage of `this` in template (vue/this-in-template)
+---
+pageClass: rule-details
+---
+# vue/this-in-template
+> disallow usage of `this` in template
 
 - :gear: This rule is included in `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index 1269bae3e..bb657dae1 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -1,4 +1,8 @@
-# enforce usage of `exact` modifier on `v-on` (vue/use-v-on-exact)
+---
+pageClass: rule-details
+---
+# vue/use-v-on-exact
+> enforce usage of `exact` modifier on `v-on`
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 9cb66f809..ccb1edb5b 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -1,4 +1,8 @@
-# enforce `v-bind` directive style (vue/v-bind-style)
+---
+pageClass: rule-details
+---
+# vue/v-bind-style
+> enforce `v-bind` directive style
 
 - :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.
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 0eb9ad558..75fcd60e3 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -1,4 +1,8 @@
-# enforce `v-on` directive style (vue/v-on-style)
+---
+pageClass: rule-details
+---
+# vue/v-on-style
+> enforce `v-on` directive style
 
 - :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.
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 1d3a00598..8d3e1bf76 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -1,4 +1,8 @@
-# enforce valid template root (vue/valid-template-root)
+---
+pageClass: rule-details
+---
+# vue/valid-template-root
+> enforce valid template root
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index 7c0abb174..3c18365fb 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -1,4 +1,8 @@
-# enforce valid `v-bind` directives (vue/valid-v-bind)
+---
+pageClass: rule-details
+---
+# vue/valid-v-bind
+> enforce valid `v-bind` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index d6e426a43..2413f0807 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -1,4 +1,8 @@
-# enforce valid `v-cloak` directives (vue/valid-v-cloak)
+---
+pageClass: rule-details
+---
+# vue/valid-v-cloak
+> enforce valid `v-cloak` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index c96e31b21..c7fb9f9e3 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -1,4 +1,8 @@
-# enforce valid `v-else-if` directives (vue/valid-v-else-if)
+---
+pageClass: rule-details
+---
+# vue/valid-v-else-if
+> enforce valid `v-else-if` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 0ee550fba..c8a2986c1 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -1,4 +1,8 @@
-# enforce valid `v-else` directives (vue/valid-v-else)
+---
+pageClass: rule-details
+---
+# vue/valid-v-else
+> enforce valid `v-else` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 2d154354a..441584efe 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -1,4 +1,8 @@
-# enforce valid `v-for` directives (vue/valid-v-for)
+---
+pageClass: rule-details
+---
+# vue/valid-v-for
+> enforce valid `v-for` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index 659be35cc..780603ba2 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -1,4 +1,8 @@
-# enforce valid `v-html` directives (vue/valid-v-html)
+---
+pageClass: rule-details
+---
+# vue/valid-v-html
+> enforce valid `v-html` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 43d6b272b..dda03bc83 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -1,4 +1,8 @@
-# enforce valid `v-if` directives (vue/valid-v-if)
+---
+pageClass: rule-details
+---
+# vue/valid-v-if
+> enforce valid `v-if` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 59efadd8e..e331a32ef 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -1,4 +1,8 @@
-# enforce valid `v-model` directives (vue/valid-v-model)
+---
+pageClass: rule-details
+---
+# vue/valid-v-model
+> enforce valid `v-model` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index 2b5b440c2..b013f35e6 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -1,4 +1,8 @@
-# enforce valid `v-on` directives (vue/valid-v-on)
+---
+pageClass: rule-details
+---
+# vue/valid-v-on
+> enforce valid `v-on` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index 82dff1631..1253b813a 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -1,4 +1,8 @@
-# enforce valid `v-once` directives (vue/valid-v-once)
+---
+pageClass: rule-details
+---
+# vue/valid-v-once
+> enforce valid `v-once` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index bf28a69f7..d1ba8cfdd 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -1,4 +1,8 @@
-# enforce valid `v-pre` directives (vue/valid-v-pre)
+---
+pageClass: rule-details
+---
+# vue/valid-v-pre
+> enforce valid `v-pre` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index f81d17339..19a8d1a6d 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -1,4 +1,8 @@
-# enforce valid `v-show` directives (vue/valid-v-show)
+---
+pageClass: rule-details
+---
+# vue/valid-v-show
+> enforce valid `v-show` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index def5c6c0e..0baa5464e 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -1,4 +1,8 @@
-# enforce valid `v-text` directives (vue/valid-v-text)
+---
+pageClass: rule-details
+---
+# vue/valid-v-text
+> enforce valid `v-text` directives
 
 - :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 
diff --git a/tools/update-docs.js b/tools/update-docs.js
index 8b92908e7..47f829a45 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -26,6 +26,11 @@ const categories = require('./lib/categories')
 
 const ROOT = path.resolve(__dirname, '../docs/rules')
 
+const fileIntro = `---
+pageClass: rule-details
+---
+`
+
 function formatItems (items) {
   if (items.length <= 2) {
     return items.join(' and ')
@@ -51,7 +56,7 @@ class DocFile {
   updateHeader () {
     const { ruleId, meta } = this.rule
     const categoryIndex = categories.findIndex(category => category.categoryId === meta.docs.category)
-    const title = `# ${meta.docs.description} (${ruleId})`
+    const title = `# ${ruleId}\n> ${meta.docs.description}`
     const notes = []
 
     if (meta.deprecated) {
@@ -74,12 +79,12 @@ class DocFile {
       notes.push('', '')
     }
 
-    const headerPattern = /^#[^\n]*\n+(?:- .+\n)*\n*/
+    const headerPattern = /#.+\n[^\n]*\n+(?:- .+\n)*\n*/
     const header = `${title}\n\n${notes.join('\n')}`
     if (headerPattern.test(this.content)) {
       this.content = this.content.replace(headerPattern, header)
     } else {
-      this.content = `${header}${this.content.trim()}\n`
+      this.content = `${fileIntro}${header}${this.content.trim()}\n`
     }
 
     return this

From 1dce58c9c8a79eff7cb872a1281775d9bd8db0c5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 03:13:03 +0100
Subject: [PATCH 91/99] Flatten sidebar navigation for rules

---
 docs/rules/attribute-hyphenation.md                     | 1 +
 docs/rules/attributes-order.md                          | 1 +
 docs/rules/comment-directive.md                         | 1 +
 docs/rules/component-name-in-template-casing.md         | 1 +
 docs/rules/html-closing-bracket-newline.md              | 1 +
 docs/rules/html-closing-bracket-spacing.md              | 1 +
 docs/rules/html-end-tags.md                             | 1 +
 docs/rules/html-indent.md                               | 1 +
 docs/rules/html-quotes.md                               | 1 +
 docs/rules/html-self-closing.md                         | 1 +
 docs/rules/jsx-uses-vars.md                             | 1 +
 docs/rules/max-attributes-per-line.md                   | 1 +
 docs/rules/multiline-html-element-content-newline.md    | 1 +
 docs/rules/mustache-interpolation-spacing.md            | 1 +
 docs/rules/name-property-casing.md                      | 1 +
 docs/rules/no-async-in-computed-properties.md           | 1 +
 docs/rules/no-confusing-v-for-v-if.md                   | 1 +
 docs/rules/no-dupe-keys.md                              | 1 +
 docs/rules/no-duplicate-attributes.md                   | 1 +
 docs/rules/no-multi-spaces.md                           | 1 +
 docs/rules/no-parsing-error.md                          | 1 +
 docs/rules/no-reserved-keys.md                          | 1 +
 docs/rules/no-shared-component-data.md                  | 1 +
 docs/rules/no-side-effects-in-computed-properties.md    | 1 +
 docs/rules/no-spaces-around-equal-signs-in-attribute.md | 1 +
 docs/rules/no-template-key.md                           | 1 +
 docs/rules/no-template-shadow.md                        | 1 +
 docs/rules/no-textarea-mustache.md                      | 1 +
 docs/rules/no-unused-components.md                      | 1 +
 docs/rules/no-unused-vars.md                            | 1 +
 docs/rules/no-use-v-if-with-v-for.md                    | 1 +
 docs/rules/no-v-html.md                                 | 1 +
 docs/rules/order-in-components.md                       | 1 +
 docs/rules/prop-name-casing.md                          | 1 +
 docs/rules/require-component-is.md                      | 1 +
 docs/rules/require-default-prop.md                      | 1 +
 docs/rules/require-prop-type-constructor.md             | 1 +
 docs/rules/require-prop-types.md                        | 1 +
 docs/rules/require-render-return.md                     | 1 +
 docs/rules/require-v-for-key.md                         | 1 +
 docs/rules/require-valid-default-prop.md                | 1 +
 docs/rules/return-in-computed-property.md               | 1 +
 docs/rules/script-indent.md                             | 1 +
 docs/rules/singleline-html-element-content-newline.md   | 1 +
 docs/rules/this-in-template.md                          | 1 +
 docs/rules/use-v-on-exact.md                            | 1 +
 docs/rules/v-bind-style.md                              | 1 +
 docs/rules/v-on-style.md                                | 1 +
 docs/rules/valid-template-root.md                       | 1 +
 docs/rules/valid-v-bind.md                              | 1 +
 docs/rules/valid-v-cloak.md                             | 1 +
 docs/rules/valid-v-else-if.md                           | 1 +
 docs/rules/valid-v-else.md                              | 1 +
 docs/rules/valid-v-for.md                               | 1 +
 docs/rules/valid-v-html.md                              | 1 +
 docs/rules/valid-v-if.md                                | 1 +
 docs/rules/valid-v-model.md                             | 1 +
 docs/rules/valid-v-on.md                                | 1 +
 docs/rules/valid-v-once.md                              | 1 +
 docs/rules/valid-v-pre.md                               | 1 +
 docs/rules/valid-v-show.md                              | 1 +
 docs/rules/valid-v-text.md                              | 1 +
 tools/update-docs.js                                    | 1 +
 63 files changed, 63 insertions(+)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index c0673fc52..7044b25bf 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/attribute-hyphenation
 > enforce attribute naming style on custom components in template
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 671ef8ee3..32bd2b249 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/attributes-order
 > enforce order of attributes
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index 79b567e6f..98c990e3b 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/comment-directive
 > support comment-directives in `<template>`
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index bcd58bf2c..0872529f9 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/component-name-in-template-casing
 > enforce specific casing for the component naming style in template
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index 4a1dab127..7a270ad45 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/html-closing-bracket-newline
 > require or disallow a line break before tag's closing brackets
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 05a4bc69d..796bfed99 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/html-closing-bracket-spacing
 > require or disallow a space before tag's closing brackets
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index a50ee6bc8..b53a56a5f 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/html-end-tags
 > enforce end tag style
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index aba25901e..365114933 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/html-indent
 > enforce consistent indentation in `<template>`
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index 487062472..0bfc8db6e 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/html-quotes
 > enforce quotes style of HTML attributes
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 015af9df8..3bb0f0a9a 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/html-self-closing
 > enforce self-closing style
diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index 6c4ec3883..fe9c89961 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/jsx-uses-vars
 > prevent variables used in JSX to be marked as unused
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index da4bd7b19..e70effa7b 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/max-attributes-per-line
 > enforce the maximum number of attributes per line
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index 29c093ca6..f26a02aef 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/multiline-html-element-content-newline
 > require a line break before and after the contents of a multiline element
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index 0efd800af..1e61955a0 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/mustache-interpolation-spacing
 > enforce unified spacing in mustache interpolations
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index 25cdc8f62..5f95176d0 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/name-property-casing
 > enforce specific casing for the name property in Vue components
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index 17a70ca94..fa07f4f44 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-async-in-computed-properties
 > disallow asynchronous actions in computed properties
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 7962464a4..ead64847c 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-confusing-v-for-v-if
 > disallow confusing `v-for` and `v-if` on the same element
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 27e09a8b7..54cbf03a1 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-dupe-keys
 > disallow duplication of field names
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index d1b7f6170..cc0c76c27 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-duplicate-attributes
 > disallow duplication of attributes
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index e77a8e321..1ed878860 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-multi-spaces
 > disallow multiple spaces
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index ada15c6fb..7861d18b6 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-parsing-error
 > disallow parsing errors in `<template>`
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index 02bfb1a91..3b2b5f8ff 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-reserved-keys
 > disallow overwriting reserved keys
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index 34c94aee1..5fdc214fb 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-shared-component-data
 > enforce component's data property to be a function
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 869c98126..27b878281 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-side-effects-in-computed-properties
 > disallow side effects in computed properties
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index 9deaeedb3..1dbfbd4fc 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-spaces-around-equal-signs-in-attribute
 > disallow spaces around equal signs in attribute
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index 4bcf4e7b1..03f8902b6 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-template-key
 > disallow `key` attribute on `<template>`
diff --git a/docs/rules/no-template-shadow.md b/docs/rules/no-template-shadow.md
index f573bd60d..1a443ef81 100644
--- a/docs/rules/no-template-shadow.md
+++ b/docs/rules/no-template-shadow.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-template-shadow
 > disallow variable declarations from shadowing variables declared in the outer scope
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 88c7ac2c8..2ddaa44c3 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-textarea-mustache
 > disallow mustaches in `<textarea>`
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index 64774d0b8..ab7660943 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-unused-components
 > disallow registering components that are not used inside templates
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index 67d45f4f9..09f459ed8 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-unused-vars
 > disallow unused variable definitions of v-for directives or scope attributes
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 96a485496..918065162 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-use-v-if-with-v-for
 > disallow use v-if on the same element as v-for
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index 78678f670..e121d85be 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/no-v-html
 > disallow use of v-html to prevent XSS attack
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index 249be5257..afe453497 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/order-in-components
 > enforce order of properties in components
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index cbcbb209e..aacd5f86a 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/prop-name-casing
 > enforce specific casing for the Prop name in Vue components
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 1a5440d32..729f440ad 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/require-component-is
 > require `v-bind:is` of `<component>` elements
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 3c542c5b9..7c5d42c05 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/require-default-prop
 > require default value for props
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index 950ab9e75..6670785c7 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/require-prop-type-constructor
 > require prop type to be a constructor
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 07941b7f2..ee6628977 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/require-prop-types
 > require type definitions in props
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index a7a996db2..6b8ebf386 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/require-render-return
 > enforce render function to always return value
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index 81dccc02e..2104fe49a 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/require-v-for-key
 > require `v-bind:key` with `v-for` directives
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index a95cb8c8a..d8db88d8d 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/require-valid-default-prop
 > enforce props default values to be valid
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 73103afd5..a287c42a7 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/return-in-computed-property
 > enforce that a return statement is present in computed property
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 0d1677d87..4bd8afdd1 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/script-indent
 > enforce consistent indentation in `<script>`
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index 2cb2ac7ab..c834dc288 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/singleline-html-element-content-newline
 > require a line break before and after the contents of a singleline element
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index 06b815605..e05b7b04b 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/this-in-template
 > disallow usage of `this` in template
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index bb657dae1..e9690033a 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/use-v-on-exact
 > enforce usage of `exact` modifier on `v-on`
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index ccb1edb5b..20347ecce 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/v-bind-style
 > enforce `v-bind` directive style
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 75fcd60e3..fdebcd79c 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/v-on-style
 > enforce `v-on` directive style
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 8d3e1bf76..9ffa06a80 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-template-root
 > enforce valid template root
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index 3c18365fb..eab2e6b81 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-bind
 > enforce valid `v-bind` directives
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 2413f0807..289110429 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-cloak
 > enforce valid `v-cloak` directives
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index c7fb9f9e3..6d93882d8 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-else-if
 > enforce valid `v-else-if` directives
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index c8a2986c1..bb74713fa 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-else
 > enforce valid `v-else` directives
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 441584efe..aa695a5b6 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-for
 > enforce valid `v-for` directives
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index 780603ba2..c6c8d4cca 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-html
 > enforce valid `v-html` directives
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index dda03bc83..933be05fe 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-if
 > enforce valid `v-if` directives
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index e331a32ef..ba2e7b420 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-model
 > enforce valid `v-model` directives
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index b013f35e6..1646de315 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-on
 > enforce valid `v-on` directives
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index 1253b813a..30ca3cb5b 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-once
 > enforce valid `v-once` directives
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index d1ba8cfdd..bee5b8e8c 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-pre
 > enforce valid `v-pre` directives
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index 19a8d1a6d..d07da1216 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-show
 > enforce valid `v-show` directives
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index 0baa5464e..4b405968c 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -1,5 +1,6 @@
 ---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 # vue/valid-v-text
 > enforce valid `v-text` directives
diff --git a/tools/update-docs.js b/tools/update-docs.js
index 47f829a45..1f7417116 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -28,6 +28,7 @@ const ROOT = path.resolve(__dirname, '../docs/rules')
 
 const fileIntro = `---
 pageClass: rule-details
+sidebarDepth: 0
 ---
 `
 

From 0fdc3b95fc211d163b9cfa422c6e001dc4b60421 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 12:05:02 +0100
Subject: [PATCH 92/99] Update valid-template-root.md

---
 docs/rules/valid-template-root.md | 66 +++++++++++++++++--------------
 1 file changed, 36 insertions(+), 30 deletions(-)

diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 9ffa06a80..3144b2d02 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -15,39 +15,45 @@ This rule reports the template root in the following cases:
 
 <eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
 ```vue
-<script>
-  // The root is nothing
-  Vue.component('example', {
-    template: ''
-  });
-
-  // The root is text
-  Vue.component('example', {
-    template: 'abc'
-  });
-
-  // The root is multiple elements
-  Vue.component('example', {
-    template: `
-      <div>hello</div>
-      <div>hello</div>
-    `
-  });
-
-  // The root element has `v-for` directives
-  Vue.component('example', {
-    template: '<div v-for="item in items"/>'
-  });
-
-  // The root element is `<template>` or `<slot>`
-  Vue.component('example', {
-    template: '<template>Hello</template>'
-  });
-</script>
+<!-- There is no root element -->
+<template></template>
 ```
 </eslint-code-block>
 
-Same rules apply to `.vue` templates.
+<eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+```vue
+<!-- The root is text -->
+<template>Lorem ipsum</template>
+```
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+```vue
+<!-- There are multiple root elements -->
+<template>
+  <div>hello</div>
+  <div>hello</div>
+</template>
+```
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+```vue
+<!-- The root element has `v-for` directives -->
+<template>
+  <div v-for="item in items"/>
+</template>
+```
+</eslint-code-block>
+
+<eslint-code-block :rules="{'vue/valid-template-root': ['error']}">
+```vue
+<!-- The root element is `<template>` or `<slot>` -->
+<template>
+  <slot />
+</template>
+```
+</eslint-code-block>
 
 ## :wrench: Options
 

From 7a86e6da3e72144862bc07da749629d945189723 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 12:28:45 +0100
Subject: [PATCH 93/99] Update README.md

---
 docs/user-guide/README.md | 42 ++++++++++++++++++++++++++-------------
 1 file changed, 28 insertions(+), 14 deletions(-)

diff --git a/docs/user-guide/README.md b/docs/user-guide/README.md
index 308f16e76..cccbdb37f 100644
--- a/docs/user-guide/README.md
+++ b/docs/user-guide/README.md
@@ -2,13 +2,19 @@
 
 ## :cd: Installation
 
-Use [npm](https://www.npmjs.com/) or [yarn](https://yarnpkg.com/) to install.
+Via `vue-cli` (**Recommended**):
+```bash
+vue add @vue/cli-plugin-eslint
+```
 
+Via [npm](https://www.npmjs.com/):
 ```bash
 npm install --save-dev eslint eslint-plugin-vue@next
 ```
+
+Via [yarn](https://yarnpkg.com/):
 ```bash
-yarn add eslint eslint-plugin-vue@next --dev
+yarn add -D eslint eslint-plugin-vue@next
 ```
 
 ::: tip Requirements
@@ -20,7 +26,7 @@ yarn add eslint eslint-plugin-vue@next --dev
 
 ### Configuration
 
-Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
+Use `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/user-guide/configuring](http://eslint.org/docs/user-guide/configuring).
 
 Example **.eslintrc.js**:
 
@@ -40,6 +46,25 @@ module.exports = {
 
 See [the rule list](../rules/README.md) to get the `extends` &amp; `rules` that this plugin provides.
 
+:::warning Reporting rules
+By default all rules from **base** and **essential** categories report ESLint errors. Other rules - because they're not covering potential bugs in the application report warnings. What does it mean? By default - nothing, but if you want - you can set up a treshold and break the build after a certain amount of warnings, instead of any. More informations [here](https://eslint.org/docs/user-guide/command-line-interface#handling-warnings).
+:::
+
+### Running ESLint from command line
+
+If you want to run `eslint` from command line, make sure you include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default.
+
+Examples:
+
+```bash
+eslint --ext .js,.vue src
+eslint "src/**/*.{js,vue}"
+```
+
+::: tip
+If you installed [@vue/cli-plugin-eslint](https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-eslint) you should have `lint` script added in your `package.json`. That means you can just run `yarn lint` or `npm run lint`.
+:::
+
 #### How to use custom parser?
 
 If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/package/babel-eslint) or [typescript-eslint-parser](https://www.npmjs.com/package/typescript-eslint-parser), you have to use `parserOptions.parser` option instead of `parser` option. Because this plugin requires [vue-eslint-parser](https://www.npmjs.com/package/vue-eslint-parser) to parse `.vue` files, so this plugin doesn't work if you overwrote `parser` option.
@@ -52,17 +77,6 @@ If you want to use custom parsers such as [babel-eslint](https://www.npmjs.com/p
   }
 ```
 
-### Command line
-
-If you want to run `eslint` from command line, make sure you include the `.vue` extension using [the `--ext` option](https://eslint.org/docs/user-guide/configuring#specifying-file-extensions-to-lint) or a glob pattern because ESLint targets only `.js` files by default.
-
-Examples:
-
-```bash
-eslint --ext .js,.vue src
-eslint "src/**/*.{js,vue}"
-```
-
 ### How ESLint detects components?
 
 All component-related rules are being applied to code that passes any of the following checks:

From 84b1238fea8c8a40309fa153fec8003bf3868fd5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 12:55:41 +0100
Subject: [PATCH 94/99] Setup docs deployment

---
 .circleci/config.yml | 27 ++++++++++++++++++++-------
 package.json         |  3 ++-
 tools/deploy.sh      | 12 ++++++++++++
 3 files changed, 34 insertions(+), 8 deletions(-)
 create mode 100755 tools/deploy.sh

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 75833b053..3b87a44b5 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -6,6 +6,12 @@ workflows:
       - node-v8
       - node-v10
       - node-v10-minimal
+      - deploy_docs:
+          requires:
+            - node-v10
+          filters:
+            branches:
+              only: master
 
 version: 2
 jobs:
@@ -20,19 +26,16 @@ jobs:
       - restore_cache:
           keys:
             - v2-npm-lock-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
-            - v2-npm-lock-master-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
-            - v2-npm-cache-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}
-            - v2-npm-cache-master-{{ .Environment.CIRCLE_JOB }}
       - run:
           name: Install dependencies
           command: npm install
-      - run:
-          name: Test
-          command: npm test
       - save_cache:
           key: v2-npm-lock-{{ .Branch }}-{{ .Environment.CIRCLE_JOB }}-{{ checksum "package.json" }}
           paths:
             - node_modules
+      - run:
+          name: Test
+          command: npm test
 
   node-v6:
     <<: *node-base
@@ -46,6 +49,7 @@ jobs:
     <<: *node-base
     docker:
       - image: node:10
+    working_directory: ~/node_10
   node-v10-minimal:
     steps:
       - run:
@@ -73,4 +77,13 @@ jobs:
             - node_modules
     docker:
       - image: node:10
-    
+
+  deploy_docs:
+    docker:
+      - image: node:10
+    steps:
+      - attach_workspace:
+          at: ~/node_10
+      - run:
+          name: Deploy to Github Pages
+          command: npm run docs:deploy
diff --git a/package.json b/package.json
index c18c136fd..e41e0650c 100644
--- a/package.json
+++ b/package.json
@@ -13,7 +13,8 @@
     "version": "npm run lint -- --fix && git add .",
     "update": "node ./tools/update.js",
     "docs:watch": "vuepress dev docs",
-    "docs:build": "vuepress build docs"
+    "docs:build": "vuepress build docs",
+    "docs:deploy": "./tools/deploy.sh"
   },
   "files": [
     "lib"
diff --git a/tools/deploy.sh b/tools/deploy.sh
new file mode 100755
index 000000000..166b0605f
--- /dev/null
+++ b/tools/deploy.sh
@@ -0,0 +1,12 @@
+#!/usr/bin/env sh
+
+set -e
+npm run docs:build
+# cd docs/.vuepress/dist
+
+# git init
+# git add -A
+# git commit -m 'deploy'
+# git push -f git@github.com:vuejs/eslint-plugin-vue.git master:gh-pages
+
+cd -

From ac990c2385288d57eee00502b0cac0b73134cbe1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 26 Nov 2018 15:07:27 +0100
Subject: [PATCH 95/99] Uncomment deploy.sh

---
 tools/deploy.sh | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/tools/deploy.sh b/tools/deploy.sh
index 166b0605f..76b3aa2c0 100755
--- a/tools/deploy.sh
+++ b/tools/deploy.sh
@@ -2,11 +2,11 @@
 
 set -e
 npm run docs:build
-# cd docs/.vuepress/dist
+cd docs/.vuepress/dist
 
-# git init
-# git add -A
-# git commit -m 'deploy'
-# git push -f git@github.com:vuejs/eslint-plugin-vue.git master:gh-pages
+git init
+git add -A
+git commit -m 'deploy'
+git push -f git@github.com:vuejs/eslint-plugin-vue.git master:gh-pages
 
 cd -

From ba5f607208c3f94cb1abc7e0479ad5dcd341df1e Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Mon, 26 Nov 2018 23:29:36 +0100
Subject: [PATCH 96/99] Add description metadata to rule pages & fix updating
 metadata when header is present

---
 docs/rules/attribute-hyphenation.md           |  2 ++
 docs/rules/attributes-order.md                |  2 ++
 docs/rules/comment-directive.md               |  2 ++
 .../component-name-in-template-casing.md      |  2 ++
 docs/rules/html-closing-bracket-newline.md    |  2 ++
 docs/rules/html-closing-bracket-spacing.md    |  2 ++
 docs/rules/html-end-tags.md                   |  2 ++
 docs/rules/html-indent.md                     |  2 ++
 docs/rules/html-quotes.md                     |  2 ++
 docs/rules/html-self-closing.md               |  2 ++
 docs/rules/jsx-uses-vars.md                   |  2 ++
 docs/rules/max-attributes-per-line.md         |  2 ++
 .../multiline-html-element-content-newline.md |  2 ++
 docs/rules/mustache-interpolation-spacing.md  |  2 ++
 docs/rules/name-property-casing.md            |  2 ++
 docs/rules/no-async-in-computed-properties.md |  2 ++
 docs/rules/no-confusing-v-for-v-if.md         |  2 ++
 docs/rules/no-dupe-keys.md                    |  2 ++
 docs/rules/no-duplicate-attributes.md         |  2 ++
 docs/rules/no-multi-spaces.md                 |  2 ++
 docs/rules/no-parsing-error.md                |  2 ++
 docs/rules/no-reserved-keys.md                |  2 ++
 docs/rules/no-shared-component-data.md        |  2 ++
 .../no-side-effects-in-computed-properties.md |  2 ++
 ...-spaces-around-equal-signs-in-attribute.md |  2 ++
 docs/rules/no-template-key.md                 |  2 ++
 docs/rules/no-template-shadow.md              |  2 ++
 docs/rules/no-textarea-mustache.md            |  2 ++
 docs/rules/no-unused-components.md            |  2 ++
 docs/rules/no-unused-vars.md                  |  2 ++
 docs/rules/no-use-v-if-with-v-for.md          |  2 ++
 docs/rules/no-v-html.md                       |  2 ++
 docs/rules/order-in-components.md             |  2 ++
 docs/rules/prop-name-casing.md                |  2 ++
 docs/rules/require-component-is.md            |  2 ++
 docs/rules/require-default-prop.md            |  2 ++
 docs/rules/require-prop-type-constructor.md   |  2 ++
 docs/rules/require-prop-types.md              |  2 ++
 docs/rules/require-render-return.md           |  2 ++
 docs/rules/require-v-for-key.md               |  2 ++
 docs/rules/require-valid-default-prop.md      |  2 ++
 docs/rules/return-in-computed-property.md     |  2 ++
 docs/rules/script-indent.md                   |  2 ++
 ...singleline-html-element-content-newline.md |  2 ++
 docs/rules/this-in-template.md                |  2 ++
 docs/rules/use-v-on-exact.md                  |  2 ++
 docs/rules/v-bind-style.md                    |  2 ++
 docs/rules/v-on-style.md                      |  2 ++
 docs/rules/valid-template-root.md             |  2 ++
 docs/rules/valid-v-bind.md                    |  2 ++
 docs/rules/valid-v-cloak.md                   |  2 ++
 docs/rules/valid-v-else-if.md                 |  2 ++
 docs/rules/valid-v-else.md                    |  2 ++
 docs/rules/valid-v-for.md                     |  2 ++
 docs/rules/valid-v-html.md                    |  2 ++
 docs/rules/valid-v-if.md                      |  2 ++
 docs/rules/valid-v-model.md                   |  2 ++
 docs/rules/valid-v-on.md                      |  2 ++
 docs/rules/valid-v-once.md                    |  2 ++
 docs/rules/valid-v-pre.md                     |  2 ++
 docs/rules/valid-v-show.md                    |  2 ++
 docs/rules/valid-v-text.md                    |  2 ++
 tools/update-docs.js                          | 31 ++++++++++++++-----
 63 files changed, 148 insertions(+), 7 deletions(-)

diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 7044b25bf..53feb9c8a 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/attribute-hyphenation
+description: enforce attribute naming style on custom components in template
 ---
 # vue/attribute-hyphenation
 > enforce attribute naming style on custom components in template
diff --git a/docs/rules/attributes-order.md b/docs/rules/attributes-order.md
index 32bd2b249..d703d7f58 100644
--- a/docs/rules/attributes-order.md
+++ b/docs/rules/attributes-order.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/attributes-order
+description: enforce order of attributes
 ---
 # vue/attributes-order
 > enforce order of attributes
diff --git a/docs/rules/comment-directive.md b/docs/rules/comment-directive.md
index 98c990e3b..7be264cec 100644
--- a/docs/rules/comment-directive.md
+++ b/docs/rules/comment-directive.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/comment-directive
+description: support comment-directives in `<template>`
 ---
 # vue/comment-directive
 > support comment-directives in `<template>`
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index 0872529f9..c7ea7ea84 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/component-name-in-template-casing
+description: enforce specific casing for the component naming style in template
 ---
 # vue/component-name-in-template-casing
 > enforce specific casing for the component naming style in template
diff --git a/docs/rules/html-closing-bracket-newline.md b/docs/rules/html-closing-bracket-newline.md
index 7a270ad45..056905fea 100644
--- a/docs/rules/html-closing-bracket-newline.md
+++ b/docs/rules/html-closing-bracket-newline.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/html-closing-bracket-newline
+description: require or disallow a line break before tag's closing brackets
 ---
 # vue/html-closing-bracket-newline
 > require or disallow a line break before tag's closing brackets
diff --git a/docs/rules/html-closing-bracket-spacing.md b/docs/rules/html-closing-bracket-spacing.md
index 796bfed99..20292810c 100644
--- a/docs/rules/html-closing-bracket-spacing.md
+++ b/docs/rules/html-closing-bracket-spacing.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/html-closing-bracket-spacing
+description: require or disallow a space before tag's closing brackets
 ---
 # vue/html-closing-bracket-spacing
 > require or disallow a space before tag's closing brackets
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index b53a56a5f..fe8b704bb 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/html-end-tags
+description: enforce end tag style
 ---
 # vue/html-end-tags
 > enforce end tag style
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index 91cf8fd0e..fb5aab263 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/html-indent
+description: enforce consistent indentation in `<template>`
 ---
 # vue/html-indent
 > enforce consistent indentation in `<template>`
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index 0bfc8db6e..ef18c94f6 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/html-quotes
+description: enforce quotes style of HTML attributes
 ---
 # vue/html-quotes
 > enforce quotes style of HTML attributes
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 3bb0f0a9a..bf818a016 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/html-self-closing
+description: enforce self-closing style
 ---
 # vue/html-self-closing
 > enforce self-closing style
diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index fe9c89961..f2909b37c 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/jsx-uses-vars
+description: prevent variables used in JSX to be marked as unused
 ---
 # vue/jsx-uses-vars
 > prevent variables used in JSX to be marked as unused
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index e70effa7b..d7c3e2d55 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/max-attributes-per-line
+description: enforce the maximum number of attributes per line
 ---
 # vue/max-attributes-per-line
 > enforce the maximum number of attributes per line
diff --git a/docs/rules/multiline-html-element-content-newline.md b/docs/rules/multiline-html-element-content-newline.md
index f26a02aef..a1fd44dec 100644
--- a/docs/rules/multiline-html-element-content-newline.md
+++ b/docs/rules/multiline-html-element-content-newline.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/multiline-html-element-content-newline
+description: require a line break before and after the contents of a multiline element
 ---
 # vue/multiline-html-element-content-newline
 > require a line break before and after the contents of a multiline element
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index 1e61955a0..f9bea9956 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/mustache-interpolation-spacing
+description: enforce unified spacing in mustache interpolations
 ---
 # vue/mustache-interpolation-spacing
 > enforce unified spacing in mustache interpolations
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index 5f95176d0..b5d307b5b 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/name-property-casing
+description: enforce specific casing for the name property in Vue components
 ---
 # vue/name-property-casing
 > enforce specific casing for the name property in Vue components
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index fa07f4f44..92205af86 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-async-in-computed-properties
+description: disallow asynchronous actions in computed properties
 ---
 # vue/no-async-in-computed-properties
 > disallow asynchronous actions in computed properties
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index ead64847c..9e76e8cd1 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-confusing-v-for-v-if
+description: disallow confusing `v-for` and `v-if` on the same element
 ---
 # vue/no-confusing-v-for-v-if
 > disallow confusing `v-for` and `v-if` on the same element
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 54cbf03a1..70bbf88b2 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-dupe-keys
+description: disallow duplication of field names
 ---
 # vue/no-dupe-keys
 > disallow duplication of field names
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index cc0c76c27..5658370fa 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-duplicate-attributes
+description: disallow duplication of attributes
 ---
 # vue/no-duplicate-attributes
 > disallow duplication of attributes
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index 1ed878860..bc21e0a63 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-multi-spaces
+description: disallow multiple spaces
 ---
 # vue/no-multi-spaces
 > disallow multiple spaces
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index 7861d18b6..b9dd2ee4a 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-parsing-error
+description: disallow parsing errors in `<template>`
 ---
 # vue/no-parsing-error
 > disallow parsing errors in `<template>`
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index 3b2b5f8ff..ec2d99206 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-reserved-keys
+description: disallow overwriting reserved keys
 ---
 # vue/no-reserved-keys
 > disallow overwriting reserved keys
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index 5fdc214fb..5c6d15f3e 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-shared-component-data
+description: enforce component's data property to be a function
 ---
 # vue/no-shared-component-data
 > enforce component's data property to be a function
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 27b878281..485e63663 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-side-effects-in-computed-properties
+description: disallow side effects in computed properties
 ---
 # vue/no-side-effects-in-computed-properties
 > disallow side effects in computed properties
diff --git a/docs/rules/no-spaces-around-equal-signs-in-attribute.md b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
index 1dbfbd4fc..9cf5ea386 100644
--- a/docs/rules/no-spaces-around-equal-signs-in-attribute.md
+++ b/docs/rules/no-spaces-around-equal-signs-in-attribute.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-spaces-around-equal-signs-in-attribute
+description: disallow spaces around equal signs in attribute
 ---
 # vue/no-spaces-around-equal-signs-in-attribute
 > disallow spaces around equal signs in attribute
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index 03f8902b6..1b67596a1 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-template-key
+description: disallow `key` attribute on `<template>`
 ---
 # vue/no-template-key
 > disallow `key` attribute on `<template>`
diff --git a/docs/rules/no-template-shadow.md b/docs/rules/no-template-shadow.md
index 1a443ef81..b6e65593e 100644
--- a/docs/rules/no-template-shadow.md
+++ b/docs/rules/no-template-shadow.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-template-shadow
+description: disallow variable declarations from shadowing variables declared in the outer scope
 ---
 # vue/no-template-shadow
 > disallow variable declarations from shadowing variables declared in the outer scope
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 2ddaa44c3..9cfef08bc 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-textarea-mustache
+description: disallow mustaches in `<textarea>`
 ---
 # vue/no-textarea-mustache
 > disallow mustaches in `<textarea>`
diff --git a/docs/rules/no-unused-components.md b/docs/rules/no-unused-components.md
index ab7660943..9f1045636 100644
--- a/docs/rules/no-unused-components.md
+++ b/docs/rules/no-unused-components.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-unused-components
+description: disallow registering components that are not used inside templates
 ---
 # vue/no-unused-components
 > disallow registering components that are not used inside templates
diff --git a/docs/rules/no-unused-vars.md b/docs/rules/no-unused-vars.md
index 09f459ed8..b78b78f87 100644
--- a/docs/rules/no-unused-vars.md
+++ b/docs/rules/no-unused-vars.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-unused-vars
+description: disallow unused variable definitions of v-for directives or scope attributes
 ---
 # vue/no-unused-vars
 > disallow unused variable definitions of v-for directives or scope attributes
diff --git a/docs/rules/no-use-v-if-with-v-for.md b/docs/rules/no-use-v-if-with-v-for.md
index 918065162..f912b35ea 100644
--- a/docs/rules/no-use-v-if-with-v-for.md
+++ b/docs/rules/no-use-v-if-with-v-for.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-use-v-if-with-v-for
+description: disallow use v-if on the same element as v-for
 ---
 # vue/no-use-v-if-with-v-for
 > disallow use v-if on the same element as v-for
diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index e121d85be..309ab0d1a 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/no-v-html
+description: disallow use of v-html to prevent XSS attack
 ---
 # vue/no-v-html
 > disallow use of v-html to prevent XSS attack
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index afe453497..99c40bc23 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/order-in-components
+description: enforce order of properties in components
 ---
 # vue/order-in-components
 > enforce order of properties in components
diff --git a/docs/rules/prop-name-casing.md b/docs/rules/prop-name-casing.md
index aacd5f86a..ea26d9b96 100644
--- a/docs/rules/prop-name-casing.md
+++ b/docs/rules/prop-name-casing.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/prop-name-casing
+description: enforce specific casing for the Prop name in Vue components
 ---
 # vue/prop-name-casing
 > enforce specific casing for the Prop name in Vue components
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 729f440ad..9e1e03882 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/require-component-is
+description: require `v-bind:is` of `<component>` elements
 ---
 # vue/require-component-is
 > require `v-bind:is` of `<component>` elements
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 7c5d42c05..71bfacb10 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/require-default-prop
+description: require default value for props
 ---
 # vue/require-default-prop
 > require default value for props
diff --git a/docs/rules/require-prop-type-constructor.md b/docs/rules/require-prop-type-constructor.md
index 6670785c7..d08ff1ff4 100644
--- a/docs/rules/require-prop-type-constructor.md
+++ b/docs/rules/require-prop-type-constructor.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/require-prop-type-constructor
+description: require prop type to be a constructor
 ---
 # vue/require-prop-type-constructor
 > require prop type to be a constructor
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index ee6628977..18e5e8c7e 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/require-prop-types
+description: require type definitions in props
 ---
 # vue/require-prop-types
 > require type definitions in props
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index 6b8ebf386..c8d5f20ec 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/require-render-return
+description: enforce render function to always return value
 ---
 # vue/require-render-return
 > enforce render function to always return value
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index 2104fe49a..a88bf94b3 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/require-v-for-key
+description: require `v-bind:key` with `v-for` directives
 ---
 # vue/require-v-for-key
 > require `v-bind:key` with `v-for` directives
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index d8db88d8d..21ca812fc 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/require-valid-default-prop
+description: enforce props default values to be valid
 ---
 # vue/require-valid-default-prop
 > enforce props default values to be valid
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index a287c42a7..e05eb57e7 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/return-in-computed-property
+description: enforce that a return statement is present in computed property
 ---
 # vue/return-in-computed-property
 > enforce that a return statement is present in computed property
diff --git a/docs/rules/script-indent.md b/docs/rules/script-indent.md
index 4bd8afdd1..450f4d725 100644
--- a/docs/rules/script-indent.md
+++ b/docs/rules/script-indent.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/script-indent
+description: enforce consistent indentation in `<script>`
 ---
 # vue/script-indent
 > enforce consistent indentation in `<script>`
diff --git a/docs/rules/singleline-html-element-content-newline.md b/docs/rules/singleline-html-element-content-newline.md
index c834dc288..dcb6de9a8 100644
--- a/docs/rules/singleline-html-element-content-newline.md
+++ b/docs/rules/singleline-html-element-content-newline.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/singleline-html-element-content-newline
+description: require a line break before and after the contents of a singleline element
 ---
 # vue/singleline-html-element-content-newline
 > require a line break before and after the contents of a singleline element
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index e05b7b04b..f3fb07328 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/this-in-template
+description: disallow usage of `this` in template
 ---
 # vue/this-in-template
 > disallow usage of `this` in template
diff --git a/docs/rules/use-v-on-exact.md b/docs/rules/use-v-on-exact.md
index e9690033a..fc0c3303b 100644
--- a/docs/rules/use-v-on-exact.md
+++ b/docs/rules/use-v-on-exact.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/use-v-on-exact
+description: enforce usage of `exact` modifier on `v-on`
 ---
 # vue/use-v-on-exact
 > enforce usage of `exact` modifier on `v-on`
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 20347ecce..788dc5677 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/v-bind-style
+description: enforce `v-bind` directive style
 ---
 # vue/v-bind-style
 > enforce `v-bind` directive style
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index fdebcd79c..6c7caf96e 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/v-on-style
+description: enforce `v-on` directive style
 ---
 # vue/v-on-style
 > enforce `v-on` directive style
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index 3144b2d02..4878c8ea2 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-template-root
+description: enforce valid template root
 ---
 # vue/valid-template-root
 > enforce valid template root
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index eab2e6b81..82392acee 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-bind
+description: enforce valid `v-bind` directives
 ---
 # vue/valid-v-bind
 > enforce valid `v-bind` directives
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index 289110429..64aabba67 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-cloak
+description: enforce valid `v-cloak` directives
 ---
 # vue/valid-v-cloak
 > enforce valid `v-cloak` directives
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index 6d93882d8..dfe7d99de 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-else-if
+description: enforce valid `v-else-if` directives
 ---
 # vue/valid-v-else-if
 > enforce valid `v-else-if` directives
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index bb74713fa..97cd28ae2 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-else
+description: enforce valid `v-else` directives
 ---
 # vue/valid-v-else
 > enforce valid `v-else` directives
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index aa695a5b6..9d4a5c78f 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-for
+description: enforce valid `v-for` directives
 ---
 # vue/valid-v-for
 > enforce valid `v-for` directives
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index c6c8d4cca..31c17efdb 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-html
+description: enforce valid `v-html` directives
 ---
 # vue/valid-v-html
 > enforce valid `v-html` directives
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 933be05fe..914a135d3 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-if
+description: enforce valid `v-if` directives
 ---
 # vue/valid-v-if
 > enforce valid `v-if` directives
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index ba2e7b420..44a146721 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-model
+description: enforce valid `v-model` directives
 ---
 # vue/valid-v-model
 > enforce valid `v-model` directives
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index 1646de315..54778ac33 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-on
+description: enforce valid `v-on` directives
 ---
 # vue/valid-v-on
 > enforce valid `v-on` directives
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index 30ca3cb5b..fbeeb09e4 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-once
+description: enforce valid `v-once` directives
 ---
 # vue/valid-v-once
 > enforce valid `v-once` directives
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index bee5b8e8c..75a21c896 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-pre
+description: enforce valid `v-pre` directives
 ---
 # vue/valid-v-pre
 > enforce valid `v-pre` directives
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index d07da1216..cc295b894 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-show
+description: enforce valid `v-show` directives
 ---
 # vue/valid-v-show
 > enforce valid `v-show` directives
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index 4b405968c..f9b3b5888 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -1,6 +1,8 @@
 ---
 pageClass: rule-details
 sidebarDepth: 0
+title: vue/valid-v-text
+description: enforce valid `v-text` directives
 ---
 # vue/valid-v-text
 > enforce valid `v-text` directives
diff --git a/tools/update-docs.js b/tools/update-docs.js
index 1f7417116..eecebec6e 100644
--- a/tools/update-docs.js
+++ b/tools/update-docs.js
@@ -26,12 +26,6 @@ const categories = require('./lib/categories')
 
 const ROOT = path.resolve(__dirname, '../docs/rules')
 
-const fileIntro = `---
-pageClass: rule-details
-sidebarDepth: 0
----
-`
-
 function formatItems (items) {
   if (items.length <= 2) {
     return items.join(' and ')
@@ -54,6 +48,28 @@ class DocFile {
     fs.writeFileSync(this.filePath, this.content)
   }
 
+  updateFileIntro () {
+    const { ruleId, meta } = this.rule
+
+    const fileIntro = {
+      pageClass: 'rule-details',
+      sidebarDepth: 0,
+      title: ruleId,
+      description: meta.docs.description
+    }
+    const computed = '---\n' + Object.entries(fileIntro).map(item => `${item[0]}: ${item[1]}`).join('\n') + '\n---\n'
+
+    const fileIntroPattern = /^---\n(.*\n)+---\n*/g
+
+    if (fileIntroPattern.test(this.content)) {
+      this.content = this.content.replace(fileIntroPattern, computed)
+    } else {
+      this.content = `${computed}${this.content.trim()}\n`
+    }
+
+    return this
+  }
+
   updateHeader () {
     const { ruleId, meta } = this.rule
     const categoryIndex = categories.findIndex(category => category.categoryId === meta.docs.category)
@@ -85,7 +101,7 @@ class DocFile {
     if (headerPattern.test(this.content)) {
       this.content = this.content.replace(headerPattern, header)
     } else {
-      this.content = `${fileIntro}${header}${this.content.trim()}\n`
+      this.content = `${header}${this.content.trim()}\n`
     }
 
     return this
@@ -125,5 +141,6 @@ for (const rule of rules) {
     .updateHeader()
     .updateFooter()
     .updateCodeBlocks()
+    .updateFileIntro()
     .write()
 }

From 7e8138349fd8a4efbdb833f528f7abc269a19342 Mon Sep 17 00:00:00 2001
From: Armano <armano2@users.noreply.github.com>
Date: Tue, 27 Nov 2018 02:32:54 +0100
Subject: [PATCH 97/99] Indicate `no-parsing-error` warning as Note

---
 docs/rules/no-v-html.md     |  2 --
 docs/rules/valid-v-bind.md  |  6 ++++--
 docs/rules/valid-v-else.md  |  6 +++---
 docs/rules/valid-v-html.md  |  6 ++++--
 docs/rules/valid-v-if.md    | 10 ++++++----
 docs/rules/valid-v-model.md |  6 ++++--
 docs/rules/valid-v-on.md    |  6 ++++--
 docs/rules/valid-v-show.md  |  7 ++++---
 docs/rules/valid-v-text.md  |  6 ++++--
 9 files changed, 33 insertions(+), 22 deletions(-)

diff --git a/docs/rules/no-v-html.md b/docs/rules/no-v-html.md
index 309ab0d1a..45b1bbbe2 100644
--- a/docs/rules/no-v-html.md
+++ b/docs/rules/no-v-html.md
@@ -25,8 +25,6 @@ This rule reports all uses of `v-html` directive in order to reduce the risk of
 ```
 </eslint-code-block>
 
-This rule does not check syntax errors in directives because it's checked by [vue/no-parsing-error](./no-parsing-error.md) rule.
-
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index 82392acee..8078cd7fd 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -20,8 +20,6 @@ This rule reports `v-bind` directives in the following cases:
 
 This rule does not report `v-bind` directives which do not have their argument (E.g. `<div v-bind="aaa"></div>`) because it's valid if the attribute value is an object.
 
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
 <eslint-code-block :rules="{'vue/valid-v-bind': ['error']}">
 ```vue
 <template>
@@ -39,6 +37,10 @@ This rule does not check syntax errors in directives because it's checked by [no
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index 97cd28ae2..7092b3225 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -47,9 +47,9 @@ Nothing.
 - [no-parsing-error]
 
 
-[valid-v-if]:       valid-v-if.md
-[valid-v-else-if]:  valid-v-else-if.md
-[no-parsing-error]:      no-parsing-error.md
+[valid-v-if]: valid-v-if.md
+[valid-v-else-if]: valid-v-else-if.md
+[no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation
 
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index 31c17efdb..37125ab17 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -19,8 +19,6 @@ This rule reports `v-html` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-html.bbb></div>`
 - The directive does not have that attribute value. E.g. `<div v-html></div>`
 
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
 <eslint-code-block :rules="{'vue/valid-v-html': ['error']}">
 ```vue
 <template>
@@ -35,6 +33,10 @@ This rule does not check syntax errors in directives because it's checked by [no
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index 914a135d3..023de85fd 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -20,8 +20,6 @@ This rule reports `v-if` directives in the following cases:
 - The directive does not have that attribute value. E.g. `<div v-if></div>`
 - The directive is on the elements which have `v-else`/`v-else-if` directives. E.g. `<div v-else v-if="foo"></div>`
 
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
 <eslint-code-block :rules="{'vue/valid-v-if': ['error']}">
 ```vue
 <template>
@@ -46,6 +44,10 @@ This rule does not check syntax errors in directives because it's checked by [no
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
 ## :wrench: Options
 
 Nothing.
@@ -57,9 +59,9 @@ Nothing.
 - [no-parsing-error]
 
 
-[valid-v-else]:    valid-v-else.md
+[valid-v-else]: valid-v-else.md
 [valid-v-else-if]: valid-v-else-if.md
-[no-parsing-error]:      no-parsing-error.md
+[no-parsing-error]: no-parsing-error.md
 
 ## :mag: Implementation
 
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 44a146721..7d59a1588 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -23,8 +23,6 @@ This rule reports `v-model` directives in the following cases:
 - The directive is on `<input>` elements which their types are `file`. E.g. `<input type="file" v-model="foo">`
 - The directive's reference is iteration variables. E.g. `<div v-for="x in list"><input type="file" v-model="x"></div>`
 
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
 <eslint-code-block :rules="{'vue/valid-v-model': ['error']}">
 ```vue
 <template>
@@ -50,6 +48,10 @@ This rule does not check syntax errors in directives because it's checked by [no
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index 54778ac33..e9eaa5a86 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -19,8 +19,6 @@ This rule reports `v-on` directives in the following cases:
 - The directive has invalid modifiers. E.g. `<div v-on:click.bbb="foo"></div>`
 - The directive does not have that attribute value and any verb modifiers. E.g. `<div v-on:click></div>`
 
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
 <eslint-code-block :rules="{'vue/valid-v-on': ['error']}">
 ```vue
 <template>
@@ -41,6 +39,10 @@ This rule does not check syntax errors in directives because it's checked by [no
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
 ## :wrench: Options
 
 ```json
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index cc295b894..fe4d09093 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -19,9 +19,6 @@ This rule reports `v-show` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-show.bbb></div>`
 - The directive does not have that attribute value. E.g. `<div v-show></div>`
 
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
-
 <eslint-code-block :rules="{'vue/valid-v-show': ['error']}">
 ```vue
 <template>
@@ -36,6 +33,10 @@ This rule does not check syntax errors in directives because it's checked by [no
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index f9b3b5888..759677c06 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -19,8 +19,6 @@ This rule reports `v-text` directives in the following cases:
 - The directive has that modifier. E.g. `<div v-text.bbb></div>`
 - The directive does not have that attribute value. E.g. `<div v-text></div>`
 
-This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
-
 <eslint-code-block :rules="{'vue/valid-v-text': ['error']}">
 ```vue
 <template>
@@ -35,6 +33,10 @@ This rule does not check syntax errors in directives because it's checked by [no
 ```
 </eslint-code-block>
 
+::: warning Note
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+:::
+
 ## :wrench: Options
 
 Nothing.

From 047c411e1064b0fa18a1010138acf976cb5cc982 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 3 Dec 2018 12:48:06 +0100
Subject: [PATCH 98/99] Ignore gh-pages in CircleCI

---
 .circleci/config.yml | 12 ++++++++++++
 1 file changed, 12 insertions(+)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 3b87a44b5..79ee1d2f1 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -3,9 +3,21 @@ workflows:
   node-multi-build:
     jobs:
       - node-v6
+          filters:
+            branches:
+              ignore: gh-pages
       - node-v8
+          filters:
+            branches:
+              ignore: gh-pages
       - node-v10
+          filters:
+            branches:
+              ignore: gh-pages
       - node-v10-minimal
+          filters:
+            branches:
+              ignore: gh-pages
       - deploy_docs:
           requires:
             - node-v10

From 53d1235f412819de24e3c257df5beb664731e16a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 3 Dec 2018 12:50:48 +0100
Subject: [PATCH 99/99] Fix CircleCI config

---
 .circleci/config.yml | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 79ee1d2f1..f1ad60e66 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -2,19 +2,19 @@ workflows:
   version: 2
   node-multi-build:
     jobs:
-      - node-v6
+      - node-v6:
           filters:
             branches:
               ignore: gh-pages
-      - node-v8
+      - node-v8:
           filters:
             branches:
               ignore: gh-pages
-      - node-v10
+      - node-v10:
           filters:
             branches:
               ignore: gh-pages
-      - node-v10-minimal
+      - node-v10-minimal:
           filters:
             branches:
               ignore: gh-pages