Repository: vuejs/eslint-plugin-vue
Pull request #205 (2017-10-09 03:25:33)

Style Guide Alignment 
I believe this is [everything that's needed](https://github.com/vuejs/eslint-plugin-vue/issues/77#issuecomment-333954255) to get the plugin to match the style guide. As I worked, I also fixed any minor bugs or inconsistencies I noticed.

chrisvfritz: I'd rather focus on the rules we have for now. I'm mostly holding off on adding new rules to the style guide too, while we refine what we currently have. And we'll be adding references later to note what has a corresponding style guide rule here - and on the style guide, what's enforceable by ESLint.

I figure it's better to have solid set of rules available than nothing, as we wait for every possible rule to be implemented. 🙂
michalsnik: Great work @chrisvfritz! 🚀  I have concerns though, regarding proposed categories and number of configs ☝️ 
chrisvfritz: @michalsnik Thanks for the feedback! 🙂  I responded to your concerns to provide more information. Sorry for not including that context in the PR description. 😅 
chrisvfritz: @michalsnik Just pinging on this. 🙂  I tried to address your concerns above and would love to hear your thoughts.
michalsnik: Yeah, you changed my mind @chrisvfritz :) Since now we have an official style guide and this is also an official plugin for Vue, it makes sense to be more opinionated and to have the rules organised as proposed. However before merging I would love to hear what @mysticatea thinks about it as well :)
chrisvfritz: @michalsnik Agreed. 🙂 👍  Just added a request for his review.
michalsnik: Thanks for the last fix @chrisvfritz, you were right :) Please rebase/merge master now, and @mysticatea can you please take a look at this PR as well?
mysticatea: I apology that I'm inactive during a long time.

Wow, amazing work!
Looks almost good to me.

One point, I have a concern that this PR removed `recommended: true/false` property of all rules.
Because [our semver policy](https://github.com/vuejs/eslint-plugin-vue#anchor-semantic-versioning-policy) is following [ESLint semver policy](https://github.com/eslint/eslint#semantic-versioning-policy), so it's `semver-major` matter if we add a new rule into configs like `vue/recommended`. I think we need the way to add rules without config changes in order to avoid major bump rushes.
chrisvfritz: Yes, thanks for the ping! I agree with you @mysticatea and will update this weekend. And while I think that semver policy makes sense, I also think it might not be too bad to publish major versions relatively often (e.g. as often as monthly?), especially in the beginning as there may be many new rules to add. Do you think that would be OK?
mysticatea: Thank you, @chrisvfritz.

I agree with you. I think that one or two of new `Essential` rules is valuable to make a major release. ESLint itself has a policy they don't make two major releases within six months, but off course, plugins can make major releases more frequency. Monthly or bimonthly looks good to me.

michalsnik: Hey @chrisvfritz would you be so kind and resolve these conflicts? :) I think we should start merging it all together now

Patch:
diff --git a/.eslintignore b/.eslintignore
index 9bb8b51c..e0072d13 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -1,4 +1,4 @@
 node_modules
-lib/recommended-rules.js
+lib/*-rules.js
 coverage
 .nyc_output
diff --git a/.gitignore b/.gitignore
index f5ee9df9..a56cde83 100644
--- a/.gitignore
+++ b/.gitignore
@@ -3,3 +3,4 @@
 /tests/integrations/*/node_modules
 /node_modules
 /test.*
+yarn.lock
diff --git a/README.md b/README.md
index 62121c2e..1803aff7 100644
--- a/README.md
+++ b/README.md
@@ -75,87 +75,109 @@ Vue.component('AsyncComponent', (resolve, reject) => {
 ## :gear: Configs
 
 This plugin provides two predefined configs:
-- `plugin:vue/base` - contains necessary settings for this plugin to work properly
-- `plugin:vue/recommended` - extends base config with recommended rules (the ones with check mark :white_check_mark: in the table below)
+- `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 category to help you understand their purpose.
+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.
 
-No rules are enabled by `plugin:vue/base` config. The `plugin:vue/recommended` config enables rules that report common problems, which have a check mark :white_check_mark: below.
+<!--RULES_TABLE_START-->
 
-The `--fix` option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
+### Base Rules (Enabling Correct ESLint Parsing)
 
-<!--RULES_TABLE_START-->
+Enforce all the rules in this category, as well as all higher priority rules, with:
 
-### Possible Errors
+``` json
+"extends": "plugin:vue/base"
+```
 
 |    | Rule ID | Description |
 |:---|:--------|:------------|
+|  | [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 |
+|:---|:--------|:------------|
+|  | [no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |
 |  | [no-dupe-keys](./docs/rules/no-dupe-keys.md) | disallow duplication of field names |
-| :white_check_mark: | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>` |
+|  | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplication of attributes |
+|  | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>` |
 |  | [no-reserved-keys](./docs/rules/no-reserved-keys.md) | disallow overwriting reserved keys |
 |  | [no-shared-component-data](./docs/rules/no-shared-component-data.md) | enforce component's data property to be a function |
+|  | [no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
 |  | [no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `<template>` |
+|  | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>` |
 |  | [no-unused-vars](./docs/rules/no-unused-vars.md) | disallow unused variable definitions of v-for directives or scope attributes |
+|  | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements |
 |  | [require-render-return](./docs/rules/require-render-return.md) | enforce render function to always return value |
+|  | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives |
 |  | [require-valid-default-prop](./docs/rules/require-valid-default-prop.md) | enforce props default values to be valid |
 |  | [return-in-computed-property](./docs/rules/return-in-computed-property.md) | enforce that a return statement is present in computed property |
-| :white_check_mark: | [valid-template-root](./docs/rules/valid-template-root.md) | enforce valid template root |
-| :white_check_mark: | [valid-v-bind](./docs/rules/valid-v-bind.md) | enforce valid `v-bind` directives |
-| :white_check_mark: | [valid-v-cloak](./docs/rules/valid-v-cloak.md) | enforce valid `v-cloak` directives |
-| :white_check_mark: | [valid-v-else-if](./docs/rules/valid-v-else-if.md) | enforce valid `v-else-if` directives |
-| :white_check_mark: | [valid-v-else](./docs/rules/valid-v-else.md) | enforce valid `v-else` directives |
-| :white_check_mark: | [valid-v-for](./docs/rules/valid-v-for.md) | enforce valid `v-for` directives |
-| :white_check_mark: | [valid-v-html](./docs/rules/valid-v-html.md) | enforce valid `v-html` directives |
-| :white_check_mark: | [valid-v-if](./docs/rules/valid-v-if.md) | enforce valid `v-if` directives |
-| :white_check_mark: | [valid-v-model](./docs/rules/valid-v-model.md) | enforce valid `v-model` directives |
-| :white_check_mark: | [valid-v-on](./docs/rules/valid-v-on.md) | enforce valid `v-on` directives |
-| :white_check_mark: | [valid-v-once](./docs/rules/valid-v-once.md) | enforce valid `v-once` directives |
-| :white_check_mark: | [valid-v-pre](./docs/rules/valid-v-pre.md) | enforce valid `v-pre` directives |
-| :white_check_mark: | [valid-v-show](./docs/rules/valid-v-show.md) | enforce valid `v-show` directives |
-| :white_check_mark: | [valid-v-text](./docs/rules/valid-v-text.md) | enforce valid `v-text` directives |
-
-
-### Best Practices
-
-|    | Rule ID | Description |
-|:---|:--------|:------------|
-| :wrench: | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
-|  | [no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |
-| :white_check_mark: | [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 |
-|  | [no-duplicate-attributes](./docs/rules/no-duplicate-attributes.md) | disallow duplication of attributes |
-|  | [no-side-effects-in-computed-properties](./docs/rules/no-side-effects-in-computed-properties.md) | disallow side effects in computed properties |
-| :white_check_mark: | [no-textarea-mustache](./docs/rules/no-textarea-mustache.md) | disallow mustaches in `<textarea>` |
-|  | [order-in-components](./docs/rules/order-in-components.md) | enforce order of properties in components |
-| :white_check_mark: | [require-component-is](./docs/rules/require-component-is.md) | require `v-bind:is` of `<component>` elements |
-|  | [require-default-prop](./docs/rules/require-default-prop.md) | require default value for props |
-|  | [require-prop-types](./docs/rules/require-prop-types.md) | require type definitions in props |
-| :white_check_mark: | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives |
-|  | [this-in-template](./docs/rules/this-in-template.md) | enforce usage of `this` in template |
-
-
-### Stylistic Issues
+|  | [valid-template-root](./docs/rules/valid-template-root.md) | enforce valid template root |
+|  | [valid-v-bind](./docs/rules/valid-v-bind.md) | enforce valid `v-bind` directives |
+|  | [valid-v-cloak](./docs/rules/valid-v-cloak.md) | enforce valid `v-cloak` directives |
+|  | [valid-v-else-if](./docs/rules/valid-v-else-if.md) | enforce valid `v-else-if` directives |
+|  | [valid-v-else](./docs/rules/valid-v-else.md) | enforce valid `v-else` directives |
+|  | [valid-v-for](./docs/rules/valid-v-for.md) | enforce valid `v-for` directives |
+|  | [valid-v-html](./docs/rules/valid-v-html.md) | enforce valid `v-html` directives |
+|  | [valid-v-if](./docs/rules/valid-v-if.md) | enforce valid `v-if` directives |
+|  | [valid-v-model](./docs/rules/valid-v-model.md) | enforce valid `v-model` directives |
+|  | [valid-v-on](./docs/rules/valid-v-on.md) | enforce valid `v-on` directives |
+|  | [valid-v-once](./docs/rules/valid-v-once.md) | enforce valid `v-once` directives |
+|  | [valid-v-pre](./docs/rules/valid-v-pre.md) | enforce valid `v-pre` directives |
+|  | [valid-v-show](./docs/rules/valid-v-show.md) | enforce valid `v-show` directives |
+|  | [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: | [attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | enforce attribute naming style in template |
+| :wrench: | [html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
 | :wrench: | [html-indent](./docs/rules/html-indent.md) | enforce consistent indentation in `<template>` |
-|  | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes |
 | :wrench: | [html-self-closing](./docs/rules/html-self-closing.md) | enforce self-closing style |
 |  | [max-attributes-per-line](./docs/rules/max-attributes-per-line.md) | enforce the maximum number of attributes per line |
 | :wrench: | [mustache-interpolation-spacing](./docs/rules/mustache-interpolation-spacing.md) | enforce unified spacing in mustache interpolations |
 | :wrench: | [name-property-casing](./docs/rules/name-property-casing.md) | enforce specific casing for the name property in Vue components |
 | :wrench: | [no-multi-spaces](./docs/rules/no-multi-spaces.md) | disallow multiple spaces |
+|  | [require-default-prop](./docs/rules/require-default-prop.md) | require default value for props |
+|  | [require-prop-types](./docs/rules/require-prop-types.md) | require type definitions in props |
 | :wrench: | [v-bind-style](./docs/rules/v-bind-style.md) | enforce `v-bind` directive style |
 | :wrench: | [v-on-style](./docs/rules/v-on-style.md) | enforce `v-on` directive style |
 
 
-### Variables
+### 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 |
 |:---|:--------|:------------|
-| :white_check_mark: | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | prevent variables used in JSX to be marked as unused |
+|  | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes |
+|  | [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 |
+|  | [order-in-components](./docs/rules/order-in-components.md) | enforce order of properties in components |
+|  | [this-in-template](./docs/rules/this-in-template.md) | enforce usage of `this` in template |
 
 ### Deprecated
 
diff --git a/docs/rules/attribute-hyphenation.md b/docs/rules/attribute-hyphenation.md
index 0028c2a5..7decbece 100644
--- a/docs/rules/attribute-hyphenation.md
+++ b/docs/rules/attribute-hyphenation.md
@@ -15,21 +15,13 @@ Default casing is set to `always`
 :+1: Examples of **correct** code`:
 
 ```html
-<template>
-  <foo my-prop="prop">
-    <a onClick="return false"></a>
-  </foo>
-</template>
+<MyComponent my-prop="prop"/>
 ```
 
 :-1: Examples of **incorrect** code`:
 
 ```html
-<template>
-  <foo myProp="prop">
-    <a onClick="return false"></a>
-  </foo>
-</template>
+<MyComponent myProp="prop"/>
 ```
 
 ### `"never"` - Don't use hyphenated name. (It errors on hyphens except `data-` and `aria-`.)
@@ -37,19 +29,11 @@ Default casing is set to `always`
 :+1: Examples of **correct** code`:
 
 ```html
-<template>
-  <foo myProp="prop">
-    <a onClick="return false"></a>
-  </foo>
-</template>
+<MyComponent myProp="prop"/>
 ```
 
 :-1: Examples of **incorrect** code`:
 
 ```html
-<template>
-  <foo my-prop="prop">
-    <a onClick="return false"></a>
-  </foo>
-</template>
+<MyComponent my-prop="prop"/>
 ```
diff --git a/docs/rules/html-end-tags.md b/docs/rules/html-end-tags.md
index 51acebed..9ecd4d7e 100644
--- a/docs/rules/html-end-tags.md
+++ b/docs/rules/html-end-tags.md
@@ -17,30 +17,21 @@ This rule reports the following elements:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div>
-        <p>
-        <p>
-        <input></input>
-        <br></br>
-    </div>
-</template>
+<div>
+<p>
+<p>
+<input></input>
+<br></br>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div></div>
-        <p></p>
-        <p></p>
-        <div />
-        <input>
-        <br>
-    </div>
-</template>
+<div></div>
+<p></p>
+<p></p>
+<input>
+<br>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/html-indent.md b/docs/rules/html-indent.md
index e65329d8..95de69d9 100644
--- a/docs/rules/html-indent.md
+++ b/docs/rules/html-indent.md
@@ -65,7 +65,7 @@ This rule enforces a consistent indentation style in `<template>`. The default s
 }
 ```
 
-- `type` (`number | "tab"`) ... The type of indentation. Default is `4`. 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.
+- `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.
 - `attribute` (`integer`) ... The multiplier of indentation for attributes. Default is `1`.
 - `closeBracket` (`integer`) ... The multiplier of indentation for right brackets. 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.
diff --git a/docs/rules/html-quotes.md b/docs/rules/html-quotes.md
index 89603e59..be81eca8 100644
--- a/docs/rules/html-quotes.md
+++ b/docs/rules/html-quotes.md
@@ -15,43 +15,27 @@ This rule reports the quotes of attributes if it is different to configured quot
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <img src='./logo.png'>
-        <img src=./logo.png>
-    </div>
-</template>
+<img src='./logo.png'>
+<img src=./logo.png>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <img src="./logo.png">
-    </div>
-</template>
+<img src="./logo.png">
 ```
 
 :-1: Examples of **incorrect** code for this rule with `"single"` option:
 
 ```html
-<template>
-    <div>
-        <img src="./logo.png">
-        <img src=./logo.png>
-    </div>
-</template>
+<img src="./logo.png">
+<img src=./logo.png>
 ```
 
 :+1: Examples of **correct** code for this rule with `"single"` option:
 
 ```html
-<template>
-    <div>
-        <img src='./logo.png'>
-    </div>
-</template>
+<img src='./logo.png'>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/html-self-closing.md b/docs/rules/html-self-closing.md
index 760ebb0b..00fb7b34 100644
--- a/docs/rules/html-self-closing.md
+++ b/docs/rules/html-self-closing.md
@@ -4,8 +4,8 @@
 
 In Vue.js template, we can use either two styles for elements which don't have their content.
 
-1. `<your-component></your-component>`
-2. `<your-component />` (self-closing)
+1. `<YourComponent></YourComponent>`
+2. `<YourComponent/>` (self-closing)
 
 Self-closing is simple and shorter, but it's not supported in raw HTML.
 This rule helps you to unify the self-closing style.
@@ -16,20 +16,20 @@ This rule has options which specify self-closing style for each context.
 
 ```json
 {
-    "html-self-closing": [2, {
-        "html": {
-            "normal": "never",
-            "void": "never",
-            "component": "always"
-        },
-        "svg": "always",
-        "math": "always"
-    }]
+  "html-self-closing": ["error", {
+    "html": {
+      "void": "never",
+      "normal": "always",
+      "component": "always"
+    },
+    "svg": "always",
+    "math": "always"
+  }]
 }
 ```
 
-- `html.normal` (`"never"` by default) ... The style of well-known HTML elements except void elements.
 - `html.void` (`"never"` by default) ... The style of well-known HTML void elements.
+- `html.normal` (`"always"` by default) ... The style of well-known HTML elements except void elements.
 - `html.component` (`"always"` by default) ... The style of Vue.js custom components.
 - `svg`(`"always"` by default) .... The style of well-known SVG elements.
 - `math`(`"always"` by default) .... The style of well-known MathML elements.
@@ -45,25 +45,18 @@ Every option can be set to one of the following values:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-/*eslint html-self-closing: "error"*/
-
-<template>
-    <div />
-    <img />
-    <your-component></your-component>
-    <svg><path d=""></path></svg>
-</template>
+<div></div>
+<img/>
+<img></img>
+<MyComponent/></MyComponent>
+<svg><path d=""></path></svg>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-/*eslint html-self-closing: "error"*/
-
-<template>
-    <div></div>
-    <img>
-    <your-component />
-    <svg><path d="" /></svg>
-</template>
+<div/>
+<img>
+<MyComponent/>
+<svg><path d=""/></svg>
 ```
diff --git a/docs/rules/jsx-uses-vars.md b/docs/rules/jsx-uses-vars.md
index 1d9a4df9..512f386d 100644
--- a/docs/rules/jsx-uses-vars.md
+++ b/docs/rules/jsx-uses-vars.md
@@ -1,7 +1,5 @@
 # prevent variables used in JSX to be marked as unused (jsx-uses-vars)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 Since 0.17.0 the ESLint `no-unused-vars` rule does not detect variables used in JSX ([see details](http://eslint.org/blog/2015/03/eslint-0.17.0-released#changes-to-jsxreact-handling)).
 This rule will find variables used in JSX and mark them as used.
 
@@ -12,12 +10,12 @@ This rule only has an effect when the `no-unused-vars` rule is enabled.
 Without this rule this code triggers warning:
 
 ```js
-import Hello from './Hello';
+import HelloWorld from './HelloWorld';
 
 export default {
   render () {
     return (
-      <Hello msg="world"></Hello>
+      <HelloWorld msg="world"/>
     )
   },
 };
diff --git a/docs/rules/max-attributes-per-line.md b/docs/rules/max-attributes-per-line.md
index 8920a766..827d297a 100644
--- a/docs/rules/max-attributes-per-line.md
+++ b/docs/rules/max-attributes-per-line.md
@@ -14,30 +14,33 @@ There is a configurable number of attributes that are acceptable in one-line cas
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<component lorem="1" ipsum="2" dolor="3" sit="4">
-</component>
+<MyComponent lorem="1" ipsum="2"/>
 
-<component
+<MyComponent
+  lorem="1" ipsum="2"
+/>
+
+<MyComponent
   lorem="1" ipsum="2"
   dolor="3"
-  sit="4"
->
-</component>
+/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<component lorem="1" ipsum="2" dolor="3">
-</component>
+<MyComponent lorem="1"/>
+
+<MyComponent
+  lorem="1"
+  ipsum="2"
+/>
 
-<component
+<MyComponent
   lorem="1"
   ipsum="2"
   dolor="3"
-  sit="4"
->
-</component>
+/>
 ```
 
 ### :wrench:  Options
@@ -55,67 +58,67 @@ There is a configurable number of attributes that are acceptable in one-line cas
 ```
 
 #### `allowFirstLine`
+
 For multi-line declarations, defines if allows attributes to be put in the first line. (Default false)
 
 :-1: Example of **incorrect** code for this setting:
+
 ```html
-// [{ "multiline": { "allowFirstLine": false }}]
-<component foo="John" bar="Smith"
-  foobar={5555555}>
-</component>;
+<!-- [{ "multiline": { "allowFirstLine": false }}] -->
+<MyComponent foo="John"
+  bar="Smith"
+/>
 ```
 
 :+1: Example of **correct** code for this setting:
+
 ```html
-// [{ "multiline": { "allowFirstLine": false }}]
-<component
+<!-- [{ "multiline": { "allowFirstLine": false }}] -->
+<MyComponent
   foo="John"
   bar="Smith"
-  foobar={5555555}
-  >
-</component>;
+/>
 ```
 
-
 #### `singleline`
-Number of maximum attributes per line when the opening tag is in a single line. (Default is 3)
+
+Number of maximum attributes per line when the opening tag is in a single line. (Default is 1)
 
 :-1: Example of **incorrect** code for this setting:
 ```html
-// [{"singleline": 2,}]
-<component foo="John" bar="Smith" foobar={5555555}></component>;
+<!-- [{"singleline": 1}] -->
+<MyComponent foo="John" bar="Smith"/>
 ```
 
 :+1: Example of **correct** code for this setting:
 ```html
-// [{"singleline": 3,}]
-<component foo="John" bar="Smith" foobar={5555555}></component>;
+<!-- [{"singleline": 1}] -->
+<MyComponent foo="John"/>
 ```
 
-
 #### `multiline`
+
 Number of maximum attributes per line when a tag is in multiple lines. (Default is 1)
 
 :-1: Example of **incorrect** code for this setting:
+
 ```html
-// [{"multiline": 1}]
-<component foo="John" bar="Smith"
-  foobar={5555555}>
-</component>;
+<!-- [{"multiline": 1}] -->
+<MyComponent
+  foo="John" bar="Smith"
+/>
 ```
 
 :+1: Example of **correct** code for this setting:
+
 ```html
-// [{"multiline": 1}]
-<component
+<!-- [{"multiline": 1}] -->
+<MyComponent
   foo="John"
   bar="Smith"
-  foobar={5555555}
-  >
-</component>;
+/>
 ```
 
 ## When Not To Use It
 
 If you do not want to check the number of attributes declared per line you can disable this rule.
-
diff --git a/docs/rules/mustache-interpolation-spacing.md b/docs/rules/mustache-interpolation-spacing.md
index fcb38589..1ad2bdc5 100644
--- a/docs/rules/mustache-interpolation-spacing.md
+++ b/docs/rules/mustache-interpolation-spacing.md
@@ -9,17 +9,14 @@ This rule aims to enforce unified spacing in mustache interpolations.
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-  <div>{{   text   }}</div>
-</template>
+<div>{{   text   }}</div>
+<div>{{text}}</div>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-  <div>{{ text }}</div>
-</template>
+<div>{{ text }}</div>
 ```
 
 ## :wrench: Options
@@ -32,36 +29,29 @@ Default spacing is set to `always`
 
 ### `"always"` - Expect one space between expression and curly brackets.
 
-:+1: Examples of **correct** code`:
+:-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-  <div>{{ text }}</div>
-</template>
+<div>{{   text   }}</div>
+<div>{{text}}</div>
 ```
 
-:-1: Examples of **incorrect** code`:
+:+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-  <div>{{text}}</div>
-</template>
+<div>{{ text }}</div>
 ```
 
 ### `"never"` - Expect no spaces between expression and curly brackets.
 
-:+1: Examples of **correct** code`:
+:-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-  <div>{{text}}</div>
-</template>
+<div>{{ text }}</div>
 ```
 
-:-1: Examples of **incorrect** code`:
+:+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-  <div>{{ text }}</div>
-</template>
+<div>{{text}}</div>
 ```
diff --git a/docs/rules/name-property-casing.md b/docs/rules/name-property-casing.md
index 648935b5..1d0e2598 100644
--- a/docs/rules/name-property-casing.md
+++ b/docs/rules/name-property-casing.md
@@ -22,18 +22,10 @@ export default {
 }
 ```
 
-:+1: Examples of **correct** code for `camelCase`:
-
-```js
-export default {
-  name: 'myComponent'
-}
-```
-
 ## :wrench: Options
 
-Default casing is set to `PascalCase`
+Default casing is set to `PascalCase`.
 
 ```
-'vue/name-property-casing': [2, 'camelCase|kebab-case|PascalCase']
+"vue/name-property-casing": ["error", "PascalCase|kebab-case"]
 ```
diff --git a/docs/rules/no-async-in-computed-properties.md b/docs/rules/no-async-in-computed-properties.md
index 4fd8790a..a4b32c5f 100644
--- a/docs/rules/no-async-in-computed-properties.md
+++ b/docs/rules/no-async-in-computed-properties.md
@@ -10,26 +10,24 @@ This rule is aimed at preventing asynchronous methods from being called in compu
 :-1: Examples of **incorrect** code for this rule:
 
 ```js
-export default {
-  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(() => {})
-    }
+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(() => {})
   }
 }
 ```
@@ -37,17 +35,15 @@ export default {
 :+1: Examples of **correct** code for this rule:
 
 ```js
-export default {
-  computed: {
-    foo () {
-      var bar = 0
-      try {
-        bar = bar / this.a
-      } catch (e) {
-        return 0
-      } finally {
-        return bar
-      }
+computed: {
+  foo () {
+    var bar = 0
+    try {
+      bar = bar / this.a
+    } catch (e) {
+      return 0
+    } finally {
+      return bar
     }
   }
 }
@@ -57,4 +53,5 @@ export default {
 
 Nothing.
 
+
 [vue-async-computed]: https://github.com/foxbenjaminfox/vue-async-computed
diff --git a/docs/rules/no-confusing-v-for-v-if.md b/docs/rules/no-confusing-v-for-v-if.md
index 929b1b44..55ab658e 100644
--- a/docs/rules/no-confusing-v-for-v-if.md
+++ b/docs/rules/no-confusing-v-for-v-if.md
@@ -1,7 +1,5 @@
 # disallow confusing `v-for` and `v-if` on the same element (no-confusing-v-for-v-if)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this 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
@@ -19,35 +17,30 @@ In that case, the `v-if` should be written on the wrapper element.
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <ol>
-            <li v-if="shown" v-for="item in items">{{item.message}}</li>
-        </ol>
-    </div>
-</template>
+<TodoItem
+  v-if="complete"
+  v-for="todo in todos"
+  :todo="todo"
+/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <ol>
-            <li v-for="item in items" v-if="item.shown">{{item.message}}</li>
-        </ol>
-    </div>
-</template>
+<TodoItem
+  v-for="todo in todos"
+  v-if="todo.shown"
+  :todo="todo"
+/>
 ```
 
 ```html
-<template>
-    <div>
-        <ol v-if="shown">
-            <li v-for="item in items">{{item.message}}</li>
-        </ol>
-    </div>
-</template>
+<ul v-if="shown">
+  <TodoItem
+    v-for="todo in todos"
+    :todo="todo"
+  />
+</ul>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-dupe-keys.md b/docs/rules/no-dupe-keys.md
index 6f3bb547..e2d839eb 100644
--- a/docs/rules/no-dupe-keys.md
+++ b/docs/rules/no-dupe-keys.md
@@ -15,16 +15,14 @@ export default {
   },
   computed: {
     foo: {
-      get () {
-      }
+      get () {}
     }
   },
   data: {
     foo: null
   },
   methods: {
-    foo () {
-    }
+    foo () {}
   }
 }
 ```
@@ -35,17 +33,15 @@ export default {
 export default {
   props: ['foo'],
   computed: {
-    bar () {
-    }
+    bar () {}
   },
   data () {
     return {
-      dat: null
+      baz: null
     }
   },
   methods: {
-    test () {
-    }
+    boo () {}
   }
 }
 ```
@@ -58,12 +54,10 @@ This rule has an object option:
 
 ### Example:
 
-```json
-{
-  "vue/no-dupe-keys": [2, {
-    "groups": ["asyncComputed"]
-  }]
-}
+``` json
+"vue/no-dupe-keys": [2, {
+  groups: ["firebase"]
+}]
 ```
 
 :-1: Examples of **incorrect** code for this configuration
@@ -73,7 +67,7 @@ export default {
   computed: {
     foo () {}
   },
-  asyncComputed: {
+  firebase: {
     foo () {}
   }
 }
diff --git a/docs/rules/no-duplicate-attributes.md b/docs/rules/no-duplicate-attributes.md
index c5c929d1..989bbe7a 100644
--- a/docs/rules/no-duplicate-attributes.md
+++ b/docs/rules/no-duplicate-attributes.md
@@ -11,18 +11,20 @@ This rule reports duplicate attributes.
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div foo="abc" :foo="def"></div>
-</template>
+<MyComponent
+  :foo="def"
+  foo="abc"
+/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div foo="abc"></div>
-    <div :foo="def"></div>
-</template>
+<MyComponent :foo="abc"/>
+```
+
+```html
+<MyComponent foo="abc"/>
 ```
 
 ## :wrench: Options
@@ -42,5 +44,6 @@ This rule reports duplicate attributes.
 `parse5` remove duplicate attributes on the tokenization phase.
 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
diff --git a/docs/rules/no-invalid-template-root.md b/docs/rules/no-invalid-template-root.md
index d154097e..1e6bf84d 100644
--- a/docs/rules/no-invalid-template-root.md
+++ b/docs/rules/no-invalid-template-root.md
@@ -16,48 +16,82 @@ This rule reports the template root in the following cases:
 
 :-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>
+  <div>hello</div>
+  <div>hello</div>
 </template>
 ```
 
+```js
+template: 'abc'
+```
+
 ```html
 <template>
-    abc
+  abc
 </template>
 ```
 
+```js
+template: '<div v-for="item in items"/>'
+```
+
 ```html
 <template>
-    <div v-for="x in list"></div>
+  <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>
+  <div>abc</div>
 </template>
 ```
 
+```js
+template: '<div v-if="foo">abc</div>'
+```
+
 ```html
 <template>
-    <div v-if="foo"></div>
+  <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>
+  <div v-if="foo">abc</div>
+  <div v-else>def</div>
 </template>
 ```
 
diff --git a/docs/rules/no-invalid-v-bind.md b/docs/rules/no-invalid-v-bind.md
index c820e14f..4908424f 100644
--- a/docs/rules/no-invalid-v-bind.md
+++ b/docs/rules/no-invalid-v-bind.md
@@ -18,26 +18,18 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-bind></div>
-        <div :aaa></div>
-        <div v-bind:aaa.bbb="foo"></div>
-    </div>
-</template>
+<div v-bind/>
+<div :aaa/>
+<div v-bind:aaa.bbb="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-bind="foo"></div>
-        <div v-bind:aaa="foo"></div>
-        <div :aaa="foo"></div>
-        <div :aaa.prop="foo"></div>
-    </div>
-</template>
+<div v-bind="foo"/>
+<div v-bind:aaa="foo"/>
+<div :aaa="foo"/>
+<div :aaa.prop="foo"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-invalid-v-cloak.md b/docs/rules/no-invalid-v-cloak.md
index 931b8eee..3f5dc813 100644
--- a/docs/rules/no-invalid-v-cloak.md
+++ b/docs/rules/no-invalid-v-cloak.md
@@ -15,23 +15,15 @@ This rule reports `v-cloak` directives in the following cases:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-cloak:aaa></div>
-        <div v-cloak.bbb></div>
-        <div v-cloak="ccc"></div>
-    </div>
-</template>
+<div v-cloak:aaa/>
+<div v-cloak.bbb/>
+<div v-cloak="ccc"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-cloak></div>
-    </div>
-</template>
+<div v-cloak/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-invalid-v-else-if.md b/docs/rules/no-invalid-v-else-if.md
index e724f7fe..085fed94 100644
--- a/docs/rules/no-invalid-v-else-if.md
+++ b/docs/rules/no-invalid-v-else-if.md
@@ -19,24 +19,16 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-else-if></div>
-        <div v-else-if:aaa="foo"></div>
-        <div v-else-if.bbb="foo"></div>
-    </div>
-</template>
+<div v-else-if/>
+<div v-else-if:aaa="foo"/>
+<div v-else-if.bbb="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-if="foo"></div>
-        <div v-else-if="bar"></div>
-    </div>
-</template>
+<div v-if="foo"/>
+<div v-else-if="bar"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-invalid-v-else.md b/docs/rules/no-invalid-v-else.md
index 82c2cc17..bdafa603 100644
--- a/docs/rules/no-invalid-v-else.md
+++ b/docs/rules/no-invalid-v-else.md
@@ -17,24 +17,16 @@ This rule reports `v-else` directives in the following cases:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-else="foo"></div>
-        <div v-else:aaa></div>
-        <div v-else.bbb></div>
-    </div>
-</template>
+<div v-else="foo"/>
+<div v-else:aaa/>
+<div v-else.bbb/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-if="foo"></div>
-        <div v-else></div>
-    </div>
-</template>
+<div v-if="foo"/>
+<div v-else/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-invalid-v-for.md b/docs/rules/no-invalid-v-for.md
index 4953d3b3..d9840931 100644
--- a/docs/rules/no-invalid-v-for.md
+++ b/docs/rules/no-invalid-v-for.md
@@ -25,28 +25,33 @@ The following cases are syntax errors:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div v-for="x in list">
-        <div v-for></div>
-        <div v-for:aaa="x in list"></div>
-        <div v-for.bbb="x in list"></div>
-        <your-component v-for="x in list"></your-component>
-        <div is="your-component" v-for="x in list"></div>
-        <your-component  v-for="x in list" :key="foo"></your-component>
-    </div>
-</template>
+<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:
 
 ```html
-<template>
-    <div>
-        <div v-for="x in list"></div>
-        <your-component v-for="x in list" :key="x.id"></your-component>
-        <div is="your-component" v-for="x in list" :key="x.id"></div>
-    </div>
-</template>
+<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"
+/>
 ```
 
 ## :wrench: Options
@@ -60,4 +65,4 @@ Nothing.
 
 
 [require-v-for-key]: require-v-for-key.md
-[no-parsing-error]: no-parsing-error.md
\ No newline at end of file
+[no-parsing-error]: no-parsing-error.md
diff --git a/docs/rules/no-invalid-v-html.md b/docs/rules/no-invalid-v-html.md
index 370ad818..30a459cf 100644
--- a/docs/rules/no-invalid-v-html.md
+++ b/docs/rules/no-invalid-v-html.md
@@ -17,23 +17,15 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-html></div>
-        <div v-html:aaa="foo"></div>
-        <div v-html.bbb="foo"></div>
-    </div>
-</template>
+<div v-html/>
+<div v-html:aaa="foo"/>
+<div v-html.bbb="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-html="foo"></div>
-    </div>
-</template>
+<div v-html="foo"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-invalid-v-if.md b/docs/rules/no-invalid-v-if.md
index 99cabc5a..443a8897 100644
--- a/docs/rules/no-invalid-v-if.md
+++ b/docs/rules/no-invalid-v-if.md
@@ -18,27 +18,25 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div v-if="foo">
-        <div v-if></div>
-        <div v-if:aaa="foo"></div>
-        <div v-if.bbb="foo"></div>
-        <div v-if="foo" v-else></div>
-        <div v-if="foo" v-else-if="bar"></div>
-    </div>
-</template>
+<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:
 
 ```html
-<template>
-    <div>
-        <div v-if="foo"></div>
-        <div v-else-if="bar"></div>
-        <div v-else></div>
-    </div>
-</template>
+<div v-if="foo"/>
+<div v-else-if="bar"/>
+<div v-else/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-invalid-v-model.md b/docs/rules/no-invalid-v-model.md
index 281cdfaf..38d306e8 100644
--- a/docs/rules/no-invalid-v-model.md
+++ b/docs/rules/no-invalid-v-model.md
@@ -22,34 +22,26 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <input v-model>
-        <input v-model:aaa="foo">
-        <input v-model.bbb="foo">
-        <input v-model="foo + bar">
-        <div v-model="foo"></div>
-        <div v-for="x in list">
-            <input v-model="x">
-        </div>
-    </div>
-</template>
+<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:
 
 ```html
-<template>
-    <div>
-        <input v-model="foo">
-        <input v-model.lazy="foo">
-        <textarea v-model="foo"></textarea>
-        <your-component v-model="foo"></your-component>
-        <div v-for="x in list">
-            <input v-model="x.name">
-        </div>
-    </div>
-</template>
+<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>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-invalid-v-on.md b/docs/rules/no-invalid-v-on.md
index 85aff4d0..c961bf76 100644
--- a/docs/rules/no-invalid-v-on.md
+++ b/docs/rules/no-invalid-v-on.md
@@ -17,27 +17,21 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-on="foo"></div>
-        <div v-on:click="foo"></div>
-        <div v-on:click.bbb="foo"></div>
-    </div>
-</template>
+<div v-on/>
+<div v-on:click/>
+<div v-on:click.aaa="foo"/>
+<div @click/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-on:click="foo"></div>
-        <div @click="foo"></div>
-        <div @click.left="foo"></div>
-        <div @click.prevent></div>
-        <div @click.stop></div>
-    </div>
-</template>
+<div v-on="foo"/>
+<div v-on:click="foo"/>
+<div @click="foo"/>
+<div @click.left="foo"/>
+<div @click.prevent/>
+<div @click.stop/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index c098248d..30ba8e14 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -11,21 +11,17 @@ This rule aims to remove multiple spaces in a row between attributes witch are n
 Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-  <div class="foo"      :style="foo"
-    :foo="bar"         >
-  </div>
-</template>
+<div     class="foo"
+      :style="bar"         />
 ```
 
 Examples of **correct** code for this rule:
 
 ```html
-<template>
-  <div class="foo"
-    :style="foo">
-  </div>
-</template>
+<div
+  class="foo"
+  :style="bar"
+/>
 ```
 
 ### Options
diff --git a/docs/rules/no-parsing-error.md b/docs/rules/no-parsing-error.md
index ab6e7d02..0315af50 100644
--- a/docs/rules/no-parsing-error.md
+++ b/docs/rules/no-parsing-error.md
@@ -1,7 +1,5 @@
 # disallow parsing errors in `<template>` (no-parsing-error)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule reports syntax errors in `<template>`. For example:
 
 - Syntax errors of scripts in directives.
@@ -20,61 +18,59 @@ Then reports syntax errors if exist.
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>{{message.}}</div>
-</template>
+{{ . }}
+{{ foo. }}
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>{{message}}</div>
-</template>
+{{ foo }}
+{{ foo.bar }}
 ```
 
 ## :wrench: Options
 
 ```json
 {
-    "vue/no-parsing-error": [2, {
-        "abrupt-closing-of-empty-comment": false,
-        "absence-of-digits-in-numeric-character-reference": false,
-        "cdata-in-html-content": false,
-        "character-reference-outside-unicode-range": false,
-        "control-character-in-input-stream": false,
-        "control-character-reference": false,
-        "eof-before-tag-name": false,
-        "eof-in-cdata": false,
-        "eof-in-comment": false,
-        "eof-in-tag": false,
-        "incorrectly-closed-comment": false,
-        "incorrectly-opened-comment": false,
-        "invalid-first-character-of-tag-name": false,
-        "missing-attribute-value": false,
-        "missing-end-tag-name": false,
-        "missing-semicolon-after-character-reference": false,
-        "missing-whitespace-between-attributes": false,
-        "nested-comment": false,
-        "noncharacter-character-reference": false,
-        "noncharacter-in-input-stream": false,
-        "null-character-reference": false,
-        "surrogate-character-reference": false,
-        "surrogate-in-input-stream": false,
-        "unexpected-character-in-attribute-name": false,
-        "unexpected-character-in-unquoted-attribute-value": false,
-        "unexpected-equals-sign-before-attribute-name": false,
-        "unexpected-null-character": false,
-        "unexpected-question-mark-instead-of-tag-name": false,
-        "unexpected-solidus-in-tag": false,
-        "unknown-named-character-reference": false,
-        "end-tag-with-attributes": false,
-        "duplicate-attribute": false,
-        "end-tag-with-trailing-solidus": false,
-        "non-void-html-element-start-tag-with-trailing-solidus": false,
-        "x-invalid-end-tag": false,
-        "x-invalid-namespace": false
-    }]
+  "vue/no-parsing-error": [2, {
+    "abrupt-closing-of-empty-comment": false,
+    "absence-of-digits-in-numeric-character-reference": false,
+    "cdata-in-html-content": false,
+    "character-reference-outside-unicode-range": false,
+    "control-character-in-input-stream": false,
+    "control-character-reference": false,
+    "eof-before-tag-name": false,
+    "eof-in-cdata": false,
+    "eof-in-comment": false,
+    "eof-in-tag": false,
+    "incorrectly-closed-comment": false,
+    "incorrectly-opened-comment": false,
+    "invalid-first-character-of-tag-name": false,
+    "missing-attribute-value": false,
+    "missing-end-tag-name": false,
+    "missing-semicolon-after-character-reference": false,
+    "missing-whitespace-between-attributes": false,
+    "nested-comment": false,
+    "noncharacter-character-reference": false,
+    "noncharacter-in-input-stream": false,
+    "null-character-reference": false,
+    "surrogate-character-reference": false,
+    "surrogate-in-input-stream": false,
+    "unexpected-character-in-attribute-name": false,
+    "unexpected-character-in-unquoted-attribute-value": false,
+    "unexpected-equals-sign-before-attribute-name": false,
+    "unexpected-null-character": false,
+    "unexpected-question-mark-instead-of-tag-name": false,
+    "unexpected-solidus-in-tag": false,
+    "unknown-named-character-reference": false,
+    "end-tag-with-attributes": false,
+    "duplicate-attribute": false,
+    "end-tag-with-trailing-solidus": false,
+    "non-void-html-element-start-tag-with-trailing-solidus": false,
+    "x-invalid-end-tag": false,
+    "x-invalid-namespace": false
+  }]
 }
 ```
 
diff --git a/docs/rules/no-reserved-keys.md b/docs/rules/no-reserved-keys.md
index 6bf480c1..f6aefd7c 100644
--- a/docs/rules/no-reserved-keys.md
+++ b/docs/rules/no-reserved-keys.md
@@ -13,16 +13,14 @@ export default {
   },
   computed: {
     $on: {
-      get () {
-      }
+      get () {}
     }
   },
   data: {
     _foo: null
   },
   methods: {
-    $nextTick () {
-    }
+    $nextTick () {}
   }
 }
 ```
@@ -37,24 +35,22 @@ This rule has an object option:
 
 ### Example:
 
-```json
-{
-  "vue/no-reserved-keys": [2, {
-    "reserved": ["foo", "foo2"],
-    "groups": ["asyncComputed"]
-  }]
-}
+``` json
+"vue/no-reserved-keys": [2, {
+  reserved: ['foo', 'foo2'],
+  groups: ['firebase']
+}]
 ```
 
 :-1: Examples of **incorrect** code for this configuration
 
 ```js
 export default {
-  asyncComputed: {
-    foo2 () {}
-  },
   computed: {
     foo () {}
+  },
+  firebase: {
+    foo2 () {}
   }
 }
 ```
diff --git a/docs/rules/no-shared-component-data.md b/docs/rules/no-shared-component-data.md
index 836eea10..7b023f1e 100644
--- a/docs/rules/no-shared-component-data.md
+++ b/docs/rules/no-shared-component-data.md
@@ -16,6 +16,14 @@ Vue.component('some-comp', {
 })
 ```
 
+```js
+export default {
+  data: {
+    foo: 'bar'
+  }
+})
+```
+
 :+1: Examples of **correct** code for this rule:
 
 ```js
@@ -28,6 +36,16 @@ Vue.component('some-comp', {
 })
 ```
 
+```js
+export default {
+  data () {
+    return {
+      foo: 'bar'
+    }
+  }
+}
+```
+
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/no-side-effects-in-computed-properties.md b/docs/rules/no-side-effects-in-computed-properties.md
index 5a7ff8ae..954e8d46 100644
--- a/docs/rules/no-side-effects-in-computed-properties.md
+++ b/docs/rules/no-side-effects-in-computed-properties.md
@@ -8,34 +8,26 @@ It is considered a very bad practice to introduce side effects inside computed p
 Examples of **incorrect** code for this rule:
 
 ```js
-
-export default {
-  computed: {
-    fullName() {
-      this.firstName = 'lorem' // <- side effect
-      return `${this.firstName} ${this.lastName}`
-    },
-    somethingReversed() {
-      return this.something.reverse() // <- side effect
-    }
+computed: {
+  fullName () {
+    this.firstName = 'lorem' // <- side effect
+    return `${this.firstName} ${this.lastName}`
+  },
+  reversedArray () {
+    return this.array.reverse() // <- side effect
   }
 }
-
 ```
 
 Examples of **correct** code for this rule:
 
 ```js
-
-export default {
-  computed: {
-    fullName() {
-      return `${this.firstName} ${this.lastName}`
-    },
-    somethingReversed() {
-      return this.something.slice(0).reverse()
-    }
+computed: {
+  fullName () {
+    return `${this.firstName} ${this.lastName}`
+  },
+  reversedArray () {
+    return this.array.slice(0).reverse()
   }
 }
-
 ```
diff --git a/docs/rules/no-template-key.md b/docs/rules/no-template-key.md
index d0d1eca8..217efbc6 100644
--- a/docs/rules/no-template-key.md
+++ b/docs/rules/no-template-key.md
@@ -9,24 +9,16 @@ This rule reports the `<template>` elements which have `key` attribute.
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <template key="x"></template>
-        <template v-bind:key="y"></template>
-        <template :key="z"></template>
-    </div>
-</template>
+<template key="foo"> ... </template>
+<template v-bind:key="bar"> ... </template>
+<template :key="baz"> ... </template>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div key="x"></div>
-        <template></template>
-    </div>
-</template>
+<div key="foo"> ... </div>
+<template> ... </template>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/no-textarea-mustache.md b/docs/rules/no-textarea-mustache.md
index 14a2ee54..d204c1fd 100644
--- a/docs/rules/no-textarea-mustache.md
+++ b/docs/rules/no-textarea-mustache.md
@@ -1,7 +1,5 @@
 # disallow mustaches in `<textarea>` (no-textarea-mustache)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 > Interpolation on textareas (`<textarea>{{text}}</textarea>`) won't work. Use `v-model` instead.
 >
 > https://vuejs.org/v2/guide/forms.html#Multiline-text
@@ -13,17 +11,13 @@ This rule reports mustaches in `<textarea>`.
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <textarea>{{message}}</textarea>
-</template>
+<textarea>{{ message }}</textarea>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <textarea v-model="message"></textarea>
-</template>
+<textarea v-model="message"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/order-in-components.md b/docs/rules/order-in-components.md
index 97032823..674140d7 100644
--- a/docs/rules/order-in-components.md
+++ b/docs/rules/order-in-components.md
@@ -4,41 +4,20 @@ This rule makes sure you keep declared order of properties in components.
 
 ## :book: Rule Details
 
-Recommended order of properties is as follows:
-
-1. Options / Misc (`name`, `delimiters`, `functional`, `model`)
-2. Options / Assets (`components`, `directives`, `filters`)
-3. Options / Composition (`parent`, `mixins`, `extends`, `provide`, `inject`)
-4. `el`
-5. `template`
-6. `props`
-7. `propsData`
-8. `data`
-9. `computed`
-10. `watch`
-11. `lifecycleHooks`
-12. `methods`
-13. `render`
-14. `renderError`
-
-Note that `lifecycleHooks` is not a regular property - it indicates the group of all lifecycle hooks just to simplify the configuration.
+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
-
-export default {
-  name: 'app',
-  data () {
-    return {
-      msg: 'Welcome to Your Vue.js App'
-    }
-  },
-  props: {
-    propA: Number,
-  },
+name: 'app',
+data () {
+  return {
+    msg: 'Welcome to Your Vue.js App'
+  }
+},
+props: {
+  propA: Number,
 }
-
 ```
 
 Examples of **correct** code for this rule:
@@ -63,27 +42,29 @@ export default {
 
 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": [2, {
-    "order": [
-      ["name", "delimiters", "functional", "model"],
-      ["components", "directives", "filters"],
-      ["parent", "mixins", "extends", "provide", "inject"],
-      "el",
-      "template",
-      "props",
-      "propsData",
-      "data",
-      "computed",
-      "watch",
-      "LIFECYCLE_HOOKS",
-      "methods",
-      "render",
-      "renderError"
-    ]
-  }]
-}
+``` 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 `name`, `delimiters`, `funcitonal` and `model`.
+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`.
diff --git a/docs/rules/require-component-is.md b/docs/rules/require-component-is.md
index 41fe9b23..0d929676 100644
--- a/docs/rules/require-component-is.md
+++ b/docs/rules/require-component-is.md
@@ -1,7 +1,5 @@
 # require `v-bind:is` of `<component>` elements (require-component-is)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 > 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
@@ -13,17 +11,15 @@ This rule reports the `<component>` elements which do not have `v-bind:is` attri
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <component></component>
-</template>
+<component/>
+<component is="type"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <component :is="type"></component>
-</template>
+<component :is="type"/>
+<component v-bind:is="type"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/require-default-prop.md b/docs/rules/require-default-prop.md
index 08fb9db0..1071d4f9 100644
--- a/docs/rules/require-default-prop.md
+++ b/docs/rules/require-default-prop.md
@@ -7,17 +7,15 @@ This rule requires default value to be set for each props that are not marked as
 Examples of **incorrect** code for this rule:
 
 ```js
-export default {
-  props: {
-    a: Number,
-    b: [Number, String],
-    c: {
-      type: Number
-    },
-    d: {
-      type: Number,
-      required: false
-    }
+props: {
+  a: Number,
+  b: [Number, String],
+  c: {
+    type: Number
+  },
+  d: {
+    type: Number,
+    required: false
   }
 }
 ```
@@ -25,21 +23,19 @@ export default {
 Examples of **correct** code for this rule:
 
 ```js
-export default {
-  props: {
-    a: {
-      type: Number,
-      required: true
-    },
-    b: {
-      type: Number,
-      default: 0
-    },
-    c: {
-      type: Number,
-      default: 0,
-      required: false
-    }
+props: {
+  a: {
+    type: Number,
+    required: true
+  },
+  b: {
+    type: Number,
+    default: 0
+  },
+  c: {
+    type: Number,
+    default: 0,
+    required: false
   }
 }
 ```
diff --git a/docs/rules/require-prop-types.md b/docs/rules/require-prop-types.md
index 3236d74a..a1b396e1 100644
--- a/docs/rules/require-prop-types.md
+++ b/docs/rules/require-prop-types.md
@@ -9,34 +9,29 @@ This rule enforces that a `props` statement contains type definition.
 :-1: Examples of **incorrect** code for this rule:
 
 ```js
-export default {
-  props: ['status']
-}
+props: ['status']
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```js
-export default {
-  props: {
-    status: String
-  }
+props: {
+  status: String
 }
 ```
 
 ```js
-export default {
-  props: {
-    status: {
-      type: String,
-      required: true,
-      validate: function (value) {
-        return ['syncing', 'synced', 'version-conflict', 'error'].indexOf(value) !== -1
-      }
+props: {
+  status: {
+    type: String,
+    required: true,
+    validate: function (value) {
+      return ['syncing', 'synced', 'version-conflict', 'error'].indexOf(value) !== -1
     }
   }
 }
 ```
+
 ## :wrench: Options
 
 Nothing.
diff --git a/docs/rules/require-render-return.md b/docs/rules/require-render-return.md
index ffbb374d..b4780b17 100644
--- a/docs/rules/require-render-return.md
+++ b/docs/rules/require-render-return.md
@@ -8,15 +8,15 @@ This rule aims to enforce render function to always return value
 
 ```js
 export default {
-  render () {
-  }
+  render () {}
 }
 ```
+
 ```js
 export default {
   render (h) {
     if (foo) {
-      return
+      return h('div', 'hello')
     }
   }
 }
@@ -27,7 +27,7 @@ export default {
 ```js
 export default {
   render (h) {
-    return
+    return h('div', 'hello')
   }
 }
 ```
diff --git a/docs/rules/require-v-for-key.md b/docs/rules/require-v-for-key.md
index 9db96c33..c48f5ea9 100644
--- a/docs/rules/require-v-for-key.md
+++ b/docs/rules/require-v-for-key.md
@@ -1,7 +1,5 @@
 # require `v-bind:key` with `v-for` directives (require-v-for-key)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 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.
 
@@ -15,21 +13,16 @@ It will be reported by [no-invalid-v-for] rule.
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-for="x in list"></div>
-    </div>
-</template>
+<div v-for="todo in todos"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-for="x in list" :key="x.id"></div>
-    </div>
-</template>
+<div
+  v-for="todo in todos"
+  :key="todo.id"
+/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/require-valid-default-prop.md b/docs/rules/require-valid-default-prop.md
index 81b3aac8..fad89c09 100644
--- a/docs/rules/require-valid-default-prop.md
+++ b/docs/rules/require-valid-default-prop.md
@@ -7,55 +7,51 @@ This rule checks whether the default value of each prop is valid for the given t
 :-1: Examples of **incorrect** code for this rule:
 
 ```js
-Vue.component('example', {
-  props: {
-    propA: {
-      type: String,
-      default: {}
-    },
-    propB: {
-      type: String,
-      default: []
-    },
-    propC: {
-      type: Object,
-      default: []
-    },
-    propD: {
-      type: Array,
-      default: []
-    },
-    propE: {
-      type: Object,
-      default: { message: 'hello' }
-    }
+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:
 
 ```js
-Vue.component('example', {
-  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: function () {
-        return { message: 'hello' }
-      }
+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: function () {
+      return { message: 'hello' }
     }
   }
-})
+}
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/return-in-computed-property.md b/docs/rules/return-in-computed-property.md
index 83c1adae..87fdb26f 100644
--- a/docs/rules/return-in-computed-property.md
+++ b/docs/rules/return-in-computed-property.md
@@ -9,10 +9,8 @@ This rule enforces that a `return` statement is present in `computed` properties
 ```js
 export default {
   computed: {
-    foo () {
-    },
-    bar: function () {
-    }
+    foo () {},
+    bar: function () {}
   }
 }
 ```
diff --git a/docs/rules/this-in-template.md b/docs/rules/this-in-template.md
index 037bbe0e..270f9389 100644
--- a/docs/rules/this-in-template.md
+++ b/docs/rules/this-in-template.md
@@ -5,17 +5,17 @@
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-     <a :href="this.link">{{this.text}}</a>
-</template>
+<a :href="this.url">
+  {{ this.text }}
+</a>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-     <a :href="link">{{text}}</a>
-</template>
+<a :href="url">
+  {{ text }}
+</a>
 ```
 
 ## :wrench: Options
@@ -26,46 +26,38 @@ Default is set to `never`.
 'vue/this-in-template': [2, 'always'|'never']
 ```
 
-### `"always"` - Always use `this` while accessing properties from vue
+### `"always"` - Always use `this` while accessing properties from Vue
 
-:+1: Examples of **correct** code`:
+:-1: Examples of **incorrect** code:
 
 ```html
-<template>
-  <div :class="{'show': this.showFoo}">
-    {{ this.foo }}
-  </div>
-</template>
+<a :href="url">
+  {{ text }}
+</a>
 ```
 
-:-1: Examples of **incorrect** code:
+:+1: Examples of **correct** code`:
 
 ```html
-<template>
-  <div :class="{'show': showFoo}">
-    {{ foo }}
-  </div>
-</template>
+<a :href="this.url">
+  {{ this.text }}
+</a>
 ```
 
-### `"never"` - Never use expresions that contain `this` keyword in expressions
+### `"never"` - Never use `this` keyword in expressions
 
-:+1: Examples of **correct** code:
+:-1: Examples of **incorrect** code:
 
 ```html
-<template>
-  <div :class="{'show': showFoo}">
-    {{ foo }}
-  </div>
-</template>
+<a :href="this.url">
+  {{ this.text }}
+</a>
 ```
 
-:-1: Examples of **incorrect** code:
+:+1: Examples of **correct** code:
 
 ```html
-<template>
-  <div :class="{'show': this.showFoo}">
-    {{ this.foo }}
-  </div>
-</template>
+<a :href="url">
+  {{ text }}
+</a>
 ```
diff --git a/docs/rules/v-bind-style.md b/docs/rules/v-bind-style.md
index 1375306b..351c7e4b 100644
--- a/docs/rules/v-bind-style.md
+++ b/docs/rules/v-bind-style.md
@@ -9,41 +9,25 @@ This rule enforces `v-bind` directive style which you should use shorthand or lo
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-bind:foo="foo"></div>
-    </div>
-</template>
+<div v-bind:foo="bar"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div :foo="foo"></div>
-    </div>
-</template>
+<div :foo="bar"/>
 ```
 
 :-1: Examples of **incorrect** code for this rule with `"longform"` option:
 
 ```html
-<template>
-    <div>
-        <div :foo="foo"></div>
-    </div>
-</template>
+<div :foo="bar"/>
 ```
 
 :+1: Examples of **correct** code for this rule with `"longform"` option:
 
 ```html
-<template>
-    <div>
-        <div v-bind:foo="foo"></div>
-    </div>
-</template>
+<div v-bind:foo="bar"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/v-on-style.md b/docs/rules/v-on-style.md
index 144ee12b..4dab8bc4 100644
--- a/docs/rules/v-on-style.md
+++ b/docs/rules/v-on-style.md
@@ -9,41 +9,25 @@ This rule enforces `v-on` directive style which you should use shorthand or long
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-on:click="foo"></div>
-    </div>
-</template>
+<div v-on:click="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div @click="foo"></div>
-    </div>
-</template>
+<div @click="foo"/>
 ```
 
 :-1: Examples of **incorrect** code for this rule with `"longform"` option:
 
 ```html
-<template>
-    <div>
-        <div @click="foo"></div>
-    </div>
-</template>
+<div @click="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule with `"longform"` option:
 
 ```html
-<template>
-    <div>
-        <div v-on:click="foo"></div>
-    </div>
-</template>
+<div v-on:click="foo"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-template-root.md b/docs/rules/valid-template-root.md
index bde86b40..271ea935 100644
--- a/docs/rules/valid-template-root.md
+++ b/docs/rules/valid-template-root.md
@@ -1,7 +1,5 @@
 # enforce valid template root (valid-template-root)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every template root is valid.
 
 ## :book: Rule Details
@@ -16,48 +14,84 @@ This rule reports the template root in the following cases:
 
 :-1: Examples of **incorrect** code for this rule:
 
+:-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>
+  <div>hello</div>
+  <div>hello</div>
 </template>
 ```
 
+```js
+template: 'abc'
+```
+
 ```html
 <template>
-    abc
+  abc
 </template>
 ```
 
+```js
+template: '<div v-for="item in items"/>'
+```
+
 ```html
 <template>
-    <div v-for="x in list"></div>
+  <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>
+  <div>abc</div>
 </template>
 ```
 
+```js
+template: '<div v-if="foo">abc</div>'
+```
+
 ```html
 <template>
-    <div v-if="foo"></div>
+  <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>
+  <div v-if="foo">abc</div>
+  <div v-else>def</div>
 </template>
 ```
 
diff --git a/docs/rules/valid-v-bind.md b/docs/rules/valid-v-bind.md
index bcb01ed2..0d944504 100644
--- a/docs/rules/valid-v-bind.md
+++ b/docs/rules/valid-v-bind.md
@@ -1,7 +1,5 @@
 # enforce valid `v-bind` directives (valid-v-bind)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-bind` directive is valid.
 
 ## :book: Rule Details
@@ -15,29 +13,19 @@ 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.
 
-:-1: Examples of **incorrect** code for this rule:
-
 ```html
-<template>
-    <div>
-        <div v-bind></div>
-        <div :aaa></div>
-        <div v-bind:aaa.bbb="foo"></div>
-    </div>
-</template>
+<div v-bind/>
+<div :aaa/>
+<div v-bind:aaa.bbb="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-bind="foo"></div>
-        <div v-bind:aaa="foo"></div>
-        <div :aaa="foo"></div>
-        <div :aaa.prop="foo"></div>
-    </div>
-</template>
+<div v-bind="foo"/>
+<div v-bind:aaa="foo"/>
+<div :aaa="foo"/>
+<div :aaa.prop="foo"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-cloak.md b/docs/rules/valid-v-cloak.md
index b0905c3d..175067f8 100644
--- a/docs/rules/valid-v-cloak.md
+++ b/docs/rules/valid-v-cloak.md
@@ -1,7 +1,5 @@
 # enforce valid `v-cloak` directives (valid-v-cloak)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-cloak` directive is valid.
 
 ## :book: Rule Details
@@ -14,24 +12,18 @@ This rule reports `v-cloak` directives in the following cases:
 
 :-1: Examples of **incorrect** code for this rule:
 
+:-1: Examples of **incorrect** code for this rule:
+
 ```html
-<template>
-    <div>
-        <div v-cloak:aaa></div>
-        <div v-cloak.bbb></div>
-        <div v-cloak="ccc"></div>
-    </div>
-</template>
+<div v-cloak:aaa/>
+<div v-cloak.bbb/>
+<div v-cloak="ccc"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-cloak></div>
-    </div>
-</template>
+<div v-cloak/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-else-if.md b/docs/rules/valid-v-else-if.md
index 83916b7b..a04347a7 100644
--- a/docs/rules/valid-v-else-if.md
+++ b/docs/rules/valid-v-else-if.md
@@ -1,7 +1,5 @@
 # enforce valid `v-else-if` directives (valid-v-else-if)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-else-if` directive is valid.
 
 ## :book: Rule Details
@@ -19,24 +17,16 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-else-if></div>
-        <div v-else-if:aaa="foo"></div>
-        <div v-else-if.bbb="foo"></div>
-    </div>
-</template>
+<div v-else-if/>
+<div v-else-if:aaa="foo"/>
+<div v-else-if.bbb="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-if="foo"></div>
-        <div v-else-if="bar"></div>
-    </div>
-</template>
+<div v-if="foo"/>
+<div v-else-if="bar"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-else.md b/docs/rules/valid-v-else.md
index f9e849a9..25f39f78 100644
--- a/docs/rules/valid-v-else.md
+++ b/docs/rules/valid-v-else.md
@@ -1,7 +1,5 @@
 # enforce valid `v-else` directives (valid-v-else)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-else` directive is valid.
 
 ## :book: Rule Details
@@ -17,24 +15,16 @@ This rule reports `v-else` directives in the following cases:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-else="foo"></div>
-        <div v-else:aaa></div>
-        <div v-else.bbb></div>
-    </div>
-</template>
+<div v-else="foo"/>
+<div v-else:aaa/>
+<div v-else.bbb/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-if="foo"></div>
-        <div v-else></div>
-    </div>
-</template>
+<div v-if="foo"/>
+<div v-else/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-for.md b/docs/rules/valid-v-for.md
index 59d05bda..f799c804 100644
--- a/docs/rules/valid-v-for.md
+++ b/docs/rules/valid-v-for.md
@@ -1,7 +1,5 @@
 # enforce valid `v-for` directives (valid-v-for)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-for` directive is valid.
 
 ## :book: Rule Details
@@ -25,28 +23,33 @@ The following cases are syntax errors:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div v-for="x in list">
-        <div v-for></div>
-        <div v-for:aaa="x in list"></div>
-        <div v-for.bbb="x in list"></div>
-        <your-component v-for="x in list"></your-component>
-        <div is="your-component" v-for="x in list"></div>
-        <your-component  v-for="x in list" :key="foo"></your-component>
-    </div>
-</template>
+<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:
 
 ```html
-<template>
-    <div>
-        <div v-for="x in list"></div>
-        <your-component v-for="x in list" :key="x.id"></your-component>
-        <div is="your-component" v-for="x in list" :key="x.id"></div>
-    </div>
-</template>
+<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"
+/>
 ```
 
 ## :wrench: Options
@@ -60,4 +63,4 @@ Nothing.
 
 
 [require-v-for-key]: require-v-for-key.md
-[no-parsing-error]: no-parsing-error.md
\ No newline at end of file
+[no-parsing-error]: no-parsing-error.md
diff --git a/docs/rules/valid-v-html.md b/docs/rules/valid-v-html.md
index 1967bbe7..3c46bcbe 100644
--- a/docs/rules/valid-v-html.md
+++ b/docs/rules/valid-v-html.md
@@ -1,7 +1,5 @@
 # enforce valid `v-html` directives (valid-v-html)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-html` directive is valid.
 
 ## :book: Rule Details
@@ -17,23 +15,15 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-html></div>
-        <div v-html:aaa="foo"></div>
-        <div v-html.bbb="foo"></div>
-    </div>
-</template>
+<div v-html/>
+<div v-html:aaa="foo"/>
+<div v-html.bbb="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-html="foo"></div>
-    </div>
-</template>
+<div v-html="foo"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-if.md b/docs/rules/valid-v-if.md
index bee8ab63..e57f022d 100644
--- a/docs/rules/valid-v-if.md
+++ b/docs/rules/valid-v-if.md
@@ -1,7 +1,5 @@
 # enforce valid `v-if` directives (valid-v-if)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-if` directive is valid.
 
 ## :book: Rule Details
@@ -17,28 +15,28 @@ This rule does not check syntax errors in directives because it's checked by [no
 
 :-1: Examples of **incorrect** code for this rule:
 
+:-1: Examples of **incorrect** code for this rule:
+
 ```html
-<template>
-    <div v-if="foo">
-        <div v-if></div>
-        <div v-if:aaa="foo"></div>
-        <div v-if.bbb="foo"></div>
-        <div v-if="foo" v-else></div>
-        <div v-if="foo" v-else-if="bar"></div>
-    </div>
-</template>
+<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:
 
 ```html
-<template>
-    <div>
-        <div v-if="foo"></div>
-        <div v-else-if="bar"></div>
-        <div v-else></div>
-    </div>
-</template>
+<div v-if="foo"/>
+<div v-else-if="bar"/>
+<div v-else/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-model.md b/docs/rules/valid-v-model.md
index 1c71de3a..62f3e454 100644
--- a/docs/rules/valid-v-model.md
+++ b/docs/rules/valid-v-model.md
@@ -1,7 +1,5 @@
 # enforce valid `v-model` directives (valid-v-model)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-model` directive is valid.
 
 ## :book: Rule Details
@@ -22,34 +20,26 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <input v-model>
-        <input v-model:aaa="foo">
-        <input v-model.bbb="foo">
-        <input v-model="foo + bar">
-        <div v-model="foo"></div>
-        <div v-for="x in list">
-            <input v-model="x">
-        </div>
-    </div>
-</template>
+<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:
 
 ```html
-<template>
-    <div>
-        <input v-model="foo">
-        <input v-model.lazy="foo">
-        <textarea v-model="foo"></textarea>
-        <your-component v-model="foo"></your-component>
-        <div v-for="x in list">
-            <input v-model="x.name">
-        </div>
-    </div>
-</template>
+<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>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-on.md b/docs/rules/valid-v-on.md
index df955444..20ab1184 100644
--- a/docs/rules/valid-v-on.md
+++ b/docs/rules/valid-v-on.md
@@ -1,7 +1,5 @@
 # enforce valid `v-on` directives (valid-v-on)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-on` directive is valid.
 
 ## :book: Rule Details
@@ -16,28 +14,24 @@ This rule does not check syntax errors in directives because it's checked by [no
 
 :-1: Examples of **incorrect** code for this rule:
 
+:-1: Examples of **incorrect** code for this rule:
+
 ```html
-<template>
-    <div>
-        <div v-on="foo"></div>
-        <div v-on:click="foo"></div>
-        <div v-on:click.bbb="foo"></div>
-    </div>
-</template>
+<div v-on/>
+<div v-on:click/>
+<div v-on:click.aaa="foo"/>
+<div @click/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-on:click="foo"></div>
-        <div @click="foo"></div>
-        <div @click.left="foo"></div>
-        <div @click.prevent></div>
-        <div @click.stop></div>
-    </div>
-</template>
+<div v-on="foo"/>
+<div v-on:click="foo"/>
+<div @click="foo"/>
+<div @click.left="foo"/>
+<div @click.prevent/>
+<div @click.stop/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-once.md b/docs/rules/valid-v-once.md
index 40972e39..168af299 100644
--- a/docs/rules/valid-v-once.md
+++ b/docs/rules/valid-v-once.md
@@ -1,7 +1,5 @@
 # enforce valid `v-once` directives (valid-v-once)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-once` directive is valid.
 
 ## :book: Rule Details
@@ -15,23 +13,15 @@ This rule reports `v-once` directives in the following cases:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-once:aaa></div>
-        <div v-once.bbb></div>
-        <div v-once="ccc"></div>
-    </div>
-</template>
+<div v-once:aaa/>
+<div v-once.bbb/>
+<div v-once="ccc"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-once></div>
-    </div>
-</template>
+<div v-once/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-pre.md b/docs/rules/valid-v-pre.md
index 26692301..4d177682 100644
--- a/docs/rules/valid-v-pre.md
+++ b/docs/rules/valid-v-pre.md
@@ -1,7 +1,5 @@
 # enforce valid `v-pre` directives (valid-v-pre)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-pre` directive is valid.
 
 ## :book: Rule Details
@@ -15,23 +13,15 @@ This rule reports `v-pre` directives in the following cases:
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-pre:aaa></div>
-        <div v-pre.bbb></div>
-        <div v-pre="ccc"></div>
-    </div>
-</template>
+<div v-pre:aaa/>
+<div v-pre.bbb/>
+<div v-pre="ccc"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-pre></div>
-    </div>
-</template>
+<div v-pre/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-show.md b/docs/rules/valid-v-show.md
index 4a758904..7fb00cfd 100644
--- a/docs/rules/valid-v-show.md
+++ b/docs/rules/valid-v-show.md
@@ -1,7 +1,5 @@
 # enforce valid `v-show` directives (valid-v-show)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-show` directive is valid.
 
 ## :book: Rule Details
@@ -17,23 +15,15 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-show></div>
-        <div v-show:aaa="foo"></div>
-        <div v-show.bbb="foo"></div>
-    </div>
-</template>
+<div v-show/>
+<div v-show:aaa="foo"/>
+<div v-show.bbb="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-show="foo"></div>
-    </div>
-</template>
+<div v-show="foo"/>
 ```
 
 ## :wrench: Options
diff --git a/docs/rules/valid-v-text.md b/docs/rules/valid-v-text.md
index b447705c..8fbf42a2 100644
--- a/docs/rules/valid-v-text.md
+++ b/docs/rules/valid-v-text.md
@@ -1,7 +1,5 @@
 # enforce valid `v-text` directives (valid-v-text)
 
-- :white_check_mark: The `"extends": "plugin:vue/recommended"` property in a configuration file enables this rule.
-
 This rule checks whether every `v-text` directive is valid.
 
 ## :book: Rule Details
@@ -17,23 +15,15 @@ This rule does not check syntax errors in directives because it's checked by [no
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-text></div>
-        <div v-text:aaa="foo"></div>
-        <div v-text.bbb="foo"></div>
-    </div>
-</template>
+<div v-text/>
+<div v-text:aaa="foo"/>
+<div v-text.bbb="foo"/>
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-<template>
-    <div>
-        <div v-text="foo"></div>
-    </div>
-</template>
+<div v-text="foo"/>
 ```
 
 ## :wrench: Options
diff --git a/eslint-internal-rules/consistent-docs-description.js b/eslint-internal-rules/consistent-docs-description.js
index dc30a569..acc4cdfb 100644
--- a/eslint-internal-rules/consistent-docs-description.js
+++ b/eslint-internal-rules/consistent-docs-description.js
@@ -115,8 +115,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce correct conventions of `meta.docs.description` property in core rules',
-      category: 'Internal',
-      recommended: false
+      category: 'Internal'
     },
     fixable: 'code',
     schema: []
diff --git a/eslint-internal-rules/no-invalid-meta.js b/eslint-internal-rules/no-invalid-meta.js
index 1550d619..af4afd8e 100644
--- a/eslint-internal-rules/no-invalid-meta.js
+++ b/eslint-internal-rules/no-invalid-meta.js
@@ -72,18 +72,6 @@ function hasMetaDocsCategory (metaPropertyNode) {
   return metaDocs && getPropertyFromObject('category', metaDocs.value)
 }
 
-/**
- * Whether this `meta` ObjectExpression has a `docs.recommended` property defined or not.
- *
- * @param {ASTNode} metaPropertyNode The `meta` ObjectExpression for this rule.
- * @returns {boolean} `true` if a `docs.recommended` property exists.
- */
-function hasMetaDocsRecommended (metaPropertyNode) {
-  const metaDocs = getPropertyFromObject('docs', metaPropertyNode.value)
-
-  return metaDocs && getPropertyFromObject('recommended', metaDocs.value)
-}
-
 /**
  * Whether this `meta` ObjectExpression has a `schema` property defined or not.
  *
@@ -125,11 +113,6 @@ function checkMetaValidity (context, exportsNode) {
     return
   }
 
-  if (!hasMetaDocsRecommended(metaProperty)) {
-    context.report(metaProperty, 'Rule is missing a meta.docs.recommended property.')
-    return
-  }
-
   if (!hasMetaSchema(metaProperty)) {
     context.report(metaProperty, 'Rule is missing a meta.schema property.')
   }
@@ -153,8 +136,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce correct use of `meta` property in core rules',
-      category: 'Internal',
-      recommended: false
+      category: 'Internal'
     },
 
     schema: []
diff --git a/lib/base-rules.js b/lib/base-rules.js
new file mode 100644
index 00000000..338b9c97
--- /dev/null
+++ b/lib/base-rules.js
@@ -0,0 +1,8 @@
+/*
+* IMPORTANT!
+* This file has been automatically generated,
+* in order to update it's content execute "npm run update"
+*/
+module.exports = {
+  "vue/jsx-uses-vars": "error"
+}
\ No newline at end of file
diff --git a/lib/config/base.js b/lib/config/base.js
index fb9f2ad7..2039b801 100644
--- a/lib/config/base.js
+++ b/lib/config/base.js
@@ -19,5 +19,7 @@ module.exports = {
 
   plugins: [
     'vue'
-  ]
+  ],
+
+  rules: require('../base-rules.js')
 }
diff --git a/lib/config/essential.js b/lib/config/essential.js
new file mode 100644
index 00000000..47493152
--- /dev/null
+++ b/lib/config/essential.js
@@ -0,0 +1,4 @@
+module.exports = {
+  extends: require.resolve('./base.js'),
+  rules: require('../essential-rules.js')
+}
diff --git a/lib/config/strongly-recommended.js b/lib/config/strongly-recommended.js
new file mode 100644
index 00000000..af0045aa
--- /dev/null
+++ b/lib/config/strongly-recommended.js
@@ -0,0 +1,4 @@
+module.exports = {
+  extends: require.resolve('./base.js'),
+  rules: require('../strongly-recommended-rules.js')
+}
diff --git a/lib/essential-rules.js b/lib/essential-rules.js
new file mode 100644
index 00000000..e918cb36
--- /dev/null
+++ b/lib/essential-rules.js
@@ -0,0 +1,37 @@
+/*
+* IMPORTANT!
+* This file has been automatically generated,
+* in order to update it's content execute "npm run update"
+*/
+module.exports = {
+  "vue/jsx-uses-vars": "error",
+  "vue/no-async-in-computed-properties": "error",
+  "vue/no-dupe-keys": "error",
+  "vue/no-duplicate-attributes": "error",
+  "vue/no-parsing-error": "error",
+  "vue/no-reserved-keys": "error",
+  "vue/no-shared-component-data": "error",
+  "vue/no-side-effects-in-computed-properties": "error",
+  "vue/no-template-key": "error",
+  "vue/no-textarea-mustache": "error",
+  "vue/no-unused-vars": "error",
+  "vue/require-component-is": "error",
+  "vue/require-render-return": "error",
+  "vue/require-v-for-key": "error",
+  "vue/require-valid-default-prop": "error",
+  "vue/return-in-computed-property": "error",
+  "vue/valid-template-root": "error",
+  "vue/valid-v-bind": "error",
+  "vue/valid-v-cloak": "error",
+  "vue/valid-v-else-if": "error",
+  "vue/valid-v-else": "error",
+  "vue/valid-v-for": "error",
+  "vue/valid-v-html": "error",
+  "vue/valid-v-if": "error",
+  "vue/valid-v-model": "error",
+  "vue/valid-v-on": "error",
+  "vue/valid-v-once": "error",
+  "vue/valid-v-pre": "error",
+  "vue/valid-v-show": "error",
+  "vue/valid-v-text": "error"
+}
\ No newline at end of file
diff --git a/lib/recommended-rules.js b/lib/recommended-rules.js
index 64b59f93..b11f218a 100644
--- a/lib/recommended-rules.js
+++ b/lib/recommended-rules.js
@@ -1,57 +1,41 @@
 /*
- * IMPORTANT!
- * This file has been automatically generated,
- * in order to update its content execute "npm run update"
- */
+* IMPORTANT!
+* This file has been automatically generated,
+* in order to update it's content execute "npm run update"
+*/
 module.exports = {
-  "vue/attribute-hyphenation": "off",
-  "vue/html-end-tags": "off",
-  "vue/html-indent": "off",
-  "vue/html-no-self-closing": "off",
-  "vue/html-quotes": "off",
-  "vue/html-self-closing": "off",
+  "vue/attribute-hyphenation": "error",
+  "vue/html-end-tags": "error",
+  "vue/html-indent": "error",
+  "vue/html-quotes": "error",
+  "vue/html-self-closing": "error",
   "vue/jsx-uses-vars": "error",
-  "vue/max-attributes-per-line": "off",
-  "vue/mustache-interpolation-spacing": "off",
-  "vue/name-property-casing": "off",
-  "vue/no-async-in-computed-properties": "off",
+  "vue/max-attributes-per-line": "error",
+  "vue/mustache-interpolation-spacing": "error",
+  "vue/name-property-casing": "error",
+  "vue/no-async-in-computed-properties": "error",
   "vue/no-confusing-v-for-v-if": "error",
-  "vue/no-dupe-keys": "off",
-  "vue/no-duplicate-attributes": "off",
-  "vue/no-invalid-template-root": "off",
-  "vue/no-invalid-v-bind": "off",
-  "vue/no-invalid-v-cloak": "off",
-  "vue/no-invalid-v-else-if": "off",
-  "vue/no-invalid-v-else": "off",
-  "vue/no-invalid-v-for": "off",
-  "vue/no-invalid-v-html": "off",
-  "vue/no-invalid-v-if": "off",
-  "vue/no-invalid-v-model": "off",
-  "vue/no-invalid-v-on": "off",
-  "vue/no-invalid-v-once": "off",
-  "vue/no-invalid-v-pre": "off",
-  "vue/no-invalid-v-show": "off",
-  "vue/no-invalid-v-text": "off",
-  "vue/no-multi-spaces": "off",
+  "vue/no-dupe-keys": "error",
+  "vue/no-duplicate-attributes": "error",
+  "vue/no-multi-spaces": "error",
   "vue/no-parsing-error": "error",
-  "vue/no-reserved-keys": "off",
-  "vue/no-reservered-keys": "off",
-  "vue/no-shared-component-data": "off",
-  "vue/no-side-effects-in-computed-properties": "off",
-  "vue/no-template-key": "off",
+  "vue/no-reserved-keys": "error",
+  "vue/no-shared-component-data": "error",
+  "vue/no-side-effects-in-computed-properties": "error",
+  "vue/no-template-key": "error",
   "vue/no-textarea-mustache": "error",
-  "vue/no-unused-vars": "off",
-  "vue/order-in-components": "off",
+  "vue/no-unused-vars": "error",
+  "vue/order-in-components": "error",
   "vue/require-component-is": "error",
-  "vue/require-default-prop": "off",
-  "vue/require-prop-types": "off",
-  "vue/require-render-return": "off",
+  "vue/require-default-prop": "error",
+  "vue/require-prop-types": "error",
+  "vue/require-render-return": "error",
   "vue/require-v-for-key": "error",
-  "vue/require-valid-default-prop": "off",
-  "vue/return-in-computed-property": "off",
-  "vue/this-in-template": "off",
-  "vue/v-bind-style": "off",
-  "vue/v-on-style": "off",
+  "vue/require-valid-default-prop": "error",
+  "vue/return-in-computed-property": "error",
+  "vue/this-in-template": "error",
+  "vue/v-bind-style": "error",
+  "vue/v-on-style": "error",
   "vue/valid-template-root": "error",
   "vue/valid-v-bind": "error",
   "vue/valid-v-cloak": "error",
diff --git a/lib/rules/attribute-hyphenation.js b/lib/rules/attribute-hyphenation.js
index 5637f8f8..94ddf2f2 100644
--- a/lib/rules/attribute-hyphenation.js
+++ b/lib/rules/attribute-hyphenation.js
@@ -59,8 +59,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce attribute naming style in template',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'code',
     schema: [
diff --git a/lib/rules/html-end-tags.js b/lib/rules/html-end-tags.js
index 05ba6464..a4c05eec 100644
--- a/lib/rules/html-end-tags.js
+++ b/lib/rules/html-end-tags.js
@@ -26,8 +26,8 @@ function create (context) {
     VElement (node) {
       const name = node.name
       const isVoid = utils.isHtmlVoidElementName(name)
-      const hasEndTag = node.endTag != null
       const isSelfClosing = node.startTag.selfClosing
+      const hasEndTag = node.endTag != null
 
       if (isVoid && hasEndTag) {
         context.report({
@@ -38,7 +38,7 @@ function create (context) {
           fix: (fixer) => fixer.remove(node.endTag)
         })
       }
-      if (!isVoid && !(hasEndTag || isSelfClosing)) {
+      if (!isVoid && !hasEndTag && !isSelfClosing) {
         context.report({
           node: node.startTag,
           loc: node.startTag.loc,
@@ -60,8 +60,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce end tag style',
-      category: 'Best Practices',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'code',
     schema: []
diff --git a/lib/rules/html-indent.js b/lib/rules/html-indent.js
index 16bcf42b..b4a41d57 100644
--- a/lib/rules/html-indent.js
+++ b/lib/rules/html-indent.js
@@ -30,7 +30,7 @@ const BLOCK_COMMENT_PREFIX = /^\s*\*/
 function parseOptions (type, options) {
   const ret = {
     indentChar: ' ',
-    indentSize: 4,
+    indentSize: 2,
     attribute: 1,
     closeBracket: 0,
     switchCase: 0,
@@ -1191,8 +1191,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce consistent indentation in `<template>`',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'whitespace',
     schema: [
diff --git a/lib/rules/html-no-self-closing.js b/lib/rules/html-no-self-closing.js
index 30673c82..974b9c3c 100644
--- a/lib/rules/html-no-self-closing.js
+++ b/lib/rules/html-no-self-closing.js
@@ -53,8 +53,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow self-closing elements',
-      category: 'Best Practices',
-      recommended: false,
+      category: 'strongly-recommended',
       replacedBy: ['html-self-closing']
     },
     deprecated: true,
diff --git a/lib/rules/html-quotes.js b/lib/rules/html-quotes.js
index b6739f90..9326420b 100644
--- a/lib/rules/html-quotes.js
+++ b/lib/rules/html-quotes.js
@@ -52,12 +52,11 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce quotes style of HTML attributes',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'recommended'
     },
     fixable: false,
     schema: [
-            { enum: ['double', 'single'] }
+      { enum: ['double', 'single'] }
     ]
   }
 }
diff --git a/lib/rules/html-self-closing.js b/lib/rules/html-self-closing.js
index 5618df69..f311a63f 100644
--- a/lib/rules/html-self-closing.js
+++ b/lib/rules/html-self-closing.js
@@ -33,7 +33,7 @@ const ELEMENT_TYPE = Object.freeze({
  */
 function parseOptions (options) {
   return {
-    [ELEMENT_TYPE.NORMAL]: (options && options.html && options.html.normal) || 'never',
+    [ELEMENT_TYPE.NORMAL]: (options && options.html && options.html.normal) || 'always',
     [ELEMENT_TYPE.VOID]: (options && options.html && options.html.void) || 'never',
     [ELEMENT_TYPE.COMPONENT]: (options && options.html && options.html.component) || 'always',
     [ELEMENT_TYPE.SVG]: (options && options.svg) || 'always',
@@ -143,8 +143,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce self-closing style',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'code',
     schema: {
diff --git a/lib/rules/jsx-uses-vars.js b/lib/rules/jsx-uses-vars.js
index cc1fe70e..d64a436d 100644
--- a/lib/rules/jsx-uses-vars.js
+++ b/lib/rules/jsx-uses-vars.js
@@ -38,8 +38,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'prevent variables used in JSX to be marked as unused', // eslint-disable-line consistent-docs-description
-      category: 'Variables',
-      recommended: true
+      category: 'base'
     },
     schema: []
   },
diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 76f09341..375dcbf7 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -13,8 +13,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce the maximum number of attributes per line',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: null,
     schema: [
@@ -98,7 +97,7 @@ module.exports = {
     // ----------------------------------------------------------------------
     function parseOptions (options) {
       const defaults = {
-        singleline: 3,
+        singleline: 1,
         multiline: 1,
         allowFirstLine: false
       }
diff --git a/lib/rules/mustache-interpolation-spacing.js b/lib/rules/mustache-interpolation-spacing.js
index 0be368d8..87d758d9 100644
--- a/lib/rules/mustache-interpolation-spacing.js
+++ b/lib/rules/mustache-interpolation-spacing.js
@@ -18,8 +18,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce unified spacing in mustache interpolations',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'whitespace',
     schema: [
diff --git a/lib/rules/name-property-casing.js b/lib/rules/name-property-casing.js
index 2bf2ca6a..2d85484e 100644
--- a/lib/rules/name-property-casing.js
+++ b/lib/rules/name-property-casing.js
@@ -6,6 +6,7 @@
 
 const utils = require('../utils')
 const casing = require('../utils/casing')
+const allowedCaseOptions = ['PascalCase', 'kebab-case']
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -13,7 +14,7 @@ const casing = require('../utils/casing')
 
 function create (context) {
   const options = context.options[0]
-  const caseType = casing.allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'
+  const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'
 
   // ----------------------------------------------------------------------
   // Public
@@ -48,13 +49,12 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce specific casing for the name property in Vue components',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'code',  // or "code" or "whitespace"
     schema: [
       {
-        enum: casing.allowedCaseOptions
+        enum: allowedCaseOptions
       }
     ]
   },
diff --git a/lib/rules/no-async-in-computed-properties.js b/lib/rules/no-async-in-computed-properties.js
index e1aef33e..2a3a17d5 100644
--- a/lib/rules/no-async-in-computed-properties.js
+++ b/lib/rules/no-async-in-computed-properties.js
@@ -148,8 +148,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow asynchronous actions in computed properties',
-      category: 'Best Practices',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,
     schema: []
diff --git a/lib/rules/no-confusing-v-for-v-if.js b/lib/rules/no-confusing-v-for-v-if.js
index 26a8d868..1e00158f 100644
--- a/lib/rules/no-confusing-v-for-v-if.js
+++ b/lib/rules/no-confusing-v-for-v-if.js
@@ -61,8 +61,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow confusing `v-for` and `v-if` on the same element',
-      category: 'Best Practices',
-      recommended: true
+      category: 'recommended'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/no-dupe-keys.js b/lib/rules/no-dupe-keys.js
index 4ae9766d..52260e76 100644
--- a/lib/rules/no-dupe-keys.js
+++ b/lib/rules/no-dupe-keys.js
@@ -47,8 +47,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow duplication of field names',
-      category: 'Possible Errors',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,  // or "code" or "whitespace"
     schema: [
diff --git a/lib/rules/no-duplicate-attributes.js b/lib/rules/no-duplicate-attributes.js
index 92fce05d..704858f6 100644
--- a/lib/rules/no-duplicate-attributes.js
+++ b/lib/rules/no-duplicate-attributes.js
@@ -89,8 +89,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow duplication of attributes',
-      category: 'Best Practices',
-      recommended: false
+      category: 'essential'
     },
     fixable: false,
 
diff --git a/lib/rules/no-invalid-template-root.js b/lib/rules/no-invalid-template-root.js
index 1dda8b80..1d461244 100644
--- a/lib/rules/no-invalid-template-root.js
+++ b/lib/rules/no-invalid-template-root.js
@@ -113,8 +113,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid template root',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-template-root']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-bind.js b/lib/rules/no-invalid-v-bind.js
index 05aa8e0f..ab405ba6 100644
--- a/lib/rules/no-invalid-v-bind.js
+++ b/lib/rules/no-invalid-v-bind.js
@@ -57,8 +57,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-bind` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-bind']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-cloak.js b/lib/rules/no-invalid-v-cloak.js
index 73ecabf2..561f2e36 100644
--- a/lib/rules/no-invalid-v-cloak.js
+++ b/lib/rules/no-invalid-v-cloak.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-cloak` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-cloak']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-else-if.js b/lib/rules/no-invalid-v-else-if.js
index 69cd0ffa..d8f5724c 100644
--- a/lib/rules/no-invalid-v-else-if.js
+++ b/lib/rules/no-invalid-v-else-if.js
@@ -81,8 +81,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-else-if` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-else-if']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-else.js b/lib/rules/no-invalid-v-else.js
index f06e9e12..d6261e53 100644
--- a/lib/rules/no-invalid-v-else.js
+++ b/lib/rules/no-invalid-v-else.js
@@ -81,8 +81,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-else` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-else']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-for.js b/lib/rules/no-invalid-v-for.js
index 66cd7e69..6cc773e6 100644
--- a/lib/rules/no-invalid-v-for.js
+++ b/lib/rules/no-invalid-v-for.js
@@ -162,8 +162,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-for` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-for']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-html.js b/lib/rules/no-invalid-v-html.js
index 2bd6ef3a..56c3fd2e 100644
--- a/lib/rules/no-invalid-v-html.js
+++ b/lib/rules/no-invalid-v-html.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-html` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-html']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-if.js b/lib/rules/no-invalid-v-if.js
index e24b2b6d..a4854252 100644
--- a/lib/rules/no-invalid-v-if.js
+++ b/lib/rules/no-invalid-v-if.js
@@ -74,8 +74,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-if` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-if']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-model.js b/lib/rules/no-invalid-v-model.js
index 8c243afc..25b58e76 100644
--- a/lib/rules/no-invalid-v-model.js
+++ b/lib/rules/no-invalid-v-model.js
@@ -175,8 +175,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-model` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-model']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-on.js b/lib/rules/no-invalid-v-on.js
index 6a7577be..5906132f 100644
--- a/lib/rules/no-invalid-v-on.js
+++ b/lib/rules/no-invalid-v-on.js
@@ -63,8 +63,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-on` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-on']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-once.js b/lib/rules/no-invalid-v-once.js
index aa6c75d5..d21013bd 100644
--- a/lib/rules/no-invalid-v-once.js
+++ b/lib/rules/no-invalid-v-once.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-once` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-once']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-pre.js b/lib/rules/no-invalid-v-pre.js
index 3770107f..30ec2c19 100644
--- a/lib/rules/no-invalid-v-pre.js
+++ b/lib/rules/no-invalid-v-pre.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-pre` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-pre']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-show.js b/lib/rules/no-invalid-v-show.js
index e98e271f..17867a38 100644
--- a/lib/rules/no-invalid-v-show.js
+++ b/lib/rules/no-invalid-v-show.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-show` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-show']
     },
     deprecated: true,
diff --git a/lib/rules/no-invalid-v-text.js b/lib/rules/no-invalid-v-text.js
index e7716f24..c2104262 100644
--- a/lib/rules/no-invalid-v-text.js
+++ b/lib/rules/no-invalid-v-text.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow invalid `v-text` directives',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['valid-v-text']
     },
     deprecated: true,
diff --git a/lib/rules/no-multi-spaces.js b/lib/rules/no-multi-spaces.js
index 844cdbc6..e26558a8 100644
--- a/lib/rules/no-multi-spaces.js
+++ b/lib/rules/no-multi-spaces.js
@@ -12,8 +12,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow multiple spaces',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'whitespace',  // or "code" or "whitespace"
     schema: []
diff --git a/lib/rules/no-parsing-error.js b/lib/rules/no-parsing-error.js
index 8d48b547..60dcf47d 100644
--- a/lib/rules/no-parsing-error.js
+++ b/lib/rules/no-parsing-error.js
@@ -95,8 +95,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow parsing errors in `<template>`',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: [
diff --git a/lib/rules/no-reserved-keys.js b/lib/rules/no-reserved-keys.js
index 2489e4fe..cf3452e3 100644
--- a/lib/rules/no-reserved-keys.js
+++ b/lib/rules/no-reserved-keys.js
@@ -50,8 +50,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow overwriting reserved keys',
-      category: 'Possible Errors',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,
     schema: [
diff --git a/lib/rules/no-reservered-keys.js b/lib/rules/no-reservered-keys.js
index 5528b424..dfe3df37 100644
--- a/lib/rules/no-reservered-keys.js
+++ b/lib/rules/no-reservered-keys.js
@@ -50,8 +50,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow overwriting reserved keys',
-      category: 'Possible Errors',
-      recommended: false,
+      category: 'essential',
       replacedBy: ['no-reserved-keys']
     },
     deprecated: true,
diff --git a/lib/rules/no-shared-component-data.js b/lib/rules/no-shared-component-data.js
index cf942ef1..85d97b9d 100644
--- a/lib/rules/no-shared-component-data.js
+++ b/lib/rules/no-shared-component-data.js
@@ -38,8 +38,7 @@ module.exports = {
   meta: {
     docs: {
       description: "enforce component's data property to be a function",
-      category: 'Possible Errors',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,  // or "code" or "whitespace"
     schema: []
diff --git a/lib/rules/no-side-effects-in-computed-properties.js b/lib/rules/no-side-effects-in-computed-properties.js
index 9ac247d1..8bda3d60 100644
--- a/lib/rules/no-side-effects-in-computed-properties.js
+++ b/lib/rules/no-side-effects-in-computed-properties.js
@@ -63,8 +63,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow side effects in computed properties',
-      category: 'Best Practices',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,
     schema: []
diff --git a/lib/rules/no-template-key.js b/lib/rules/no-template-key.js
index 41e4b8fd..1ed2647b 100644
--- a/lib/rules/no-template-key.js
+++ b/lib/rules/no-template-key.js
@@ -44,8 +44,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow `key` attribute on `<template>`',
-      category: 'Possible Errors',
-      recommended: false
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/no-textarea-mustache.js b/lib/rules/no-textarea-mustache.js
index 9e4d0cbb..e6eb28e0 100644
--- a/lib/rules/no-textarea-mustache.js
+++ b/lib/rules/no-textarea-mustache.js
@@ -46,8 +46,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow mustaches in `<textarea>`',
-      category: 'Best Practices',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/no-unused-vars.js b/lib/rules/no-unused-vars.js
index 8aadc0a2..061cd77a 100644
--- a/lib/rules/no-unused-vars.js
+++ b/lib/rules/no-unused-vars.js
@@ -38,8 +38,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'disallow unused variable definitions of v-for directives or scope attributes',
-      category: 'Possible Errors',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,
     schema: []
diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js
index 3ea35050..34edc1ff 100644
--- a/lib/rules/order-in-components.js
+++ b/lib/rules/order-in-components.js
@@ -7,19 +7,23 @@
 const utils = require('../utils')
 
 const defaultOrder = [
-  ['name', 'delimiters', 'functional', 'model'],
-  ['components', 'directives', 'filters'],
-  ['parent', 'mixins', 'extends', 'provide', 'inject'],
   'el',
-  'template',
-  'props',
-  'propsData',
+  'name',
+  'parent',
+  'functional',
+  ['delimiters', 'comments'],
+  ['components', 'directives', 'filters'],
+  'extends',
+  'mixins',
+  'inheritAttrs',
+  'model',
+  ['props', 'propsData'],
   'data',
   'computed',
   'watch',
   'LIFECYCLE_HOOKS',
   'methods',
-  'render',
+  ['template', 'render'],
   'renderError'
 ]
 
@@ -96,8 +100,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce order of properties in components',
-      category: 'Best Practices',
-      recommended: false
+      category: 'recommended'
     },
     fixable: null,
     schema: [
diff --git a/lib/rules/require-component-is.js b/lib/rules/require-component-is.js
index e51727e3..71819c04 100644
--- a/lib/rules/require-component-is.js
+++ b/lib/rules/require-component-is.js
@@ -44,8 +44,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'require `v-bind:is` of `<component>` elements',
-      category: 'Best Practices',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/require-default-prop.js b/lib/rules/require-default-prop.js
index 1dbd266e..a36e64db 100644
--- a/lib/rules/require-default-prop.js
+++ b/lib/rules/require-default-prop.js
@@ -14,8 +14,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'require default value for props',
-      category: 'Best Practices',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: null,  // or "code" or "whitespace"
     schema: []
diff --git a/lib/rules/require-prop-types.js b/lib/rules/require-prop-types.js
index 16382aa6..a4826f57 100644
--- a/lib/rules/require-prop-types.js
+++ b/lib/rules/require-prop-types.js
@@ -81,8 +81,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'require type definitions in props',
-      category: 'Best Practices',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: null,  // or "code" or "whitespace"
     schema: [
diff --git a/lib/rules/require-render-return.js b/lib/rules/require-render-return.js
index 9ff268a9..6d35e65c 100644
--- a/lib/rules/require-render-return.js
+++ b/lib/rules/require-render-return.js
@@ -44,8 +44,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce render function to always return value',
-      category: 'Possible Errors',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,  // or "code" or "whitespace"
     schema: []
diff --git a/lib/rules/require-v-for-key.js b/lib/rules/require-v-for-key.js
index d0bf59a9..2b438bb2 100644
--- a/lib/rules/require-v-for-key.js
+++ b/lib/rules/require-v-for-key.js
@@ -59,8 +59,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'require `v-bind:key` with `v-for` directives',
-      category: 'Best Practices',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/require-valid-default-prop.js b/lib/rules/require-valid-default-prop.js
index d4c8ddca..db4140bc 100644
--- a/lib/rules/require-valid-default-prop.js
+++ b/lib/rules/require-valid-default-prop.js
@@ -23,8 +23,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce props default values to be valid',
-      category: 'Possible Errors',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,
     schema: []
diff --git a/lib/rules/return-in-computed-property.js b/lib/rules/return-in-computed-property.js
index a3a7858d..a372e1ec 100644
--- a/lib/rules/return-in-computed-property.js
+++ b/lib/rules/return-in-computed-property.js
@@ -48,8 +48,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce that a return statement is present in computed property',
-      category: 'Possible Errors',
-      recommended: false
+      category: 'essential'
     },
     fixable: null,  // or "code" or "whitespace"
     schema: [
diff --git a/lib/rules/this-in-template.js b/lib/rules/this-in-template.js
index 9095988a..669ce765 100644
--- a/lib/rules/this-in-template.js
+++ b/lib/rules/this-in-template.js
@@ -19,8 +19,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce usage of `this` in template',
-      category: 'Best Practices',
-      recommended: false
+      category: 'recommended'
     },
     fixable: null,
     schema: [
diff --git a/lib/rules/v-bind-style.js b/lib/rules/v-bind-style.js
index 701be354..16748bd4 100644
--- a/lib/rules/v-bind-style.js
+++ b/lib/rules/v-bind-style.js
@@ -53,12 +53,11 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce `v-bind` directive style',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'code',
     schema: [
-            { enum: ['shorthand', 'longform'] }
+      { enum: ['shorthand', 'longform'] }
     ]
   }
 }
diff --git a/lib/rules/v-on-style.js b/lib/rules/v-on-style.js
index e7b1b71a..6ee91df0 100644
--- a/lib/rules/v-on-style.js
+++ b/lib/rules/v-on-style.js
@@ -54,12 +54,11 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce `v-on` directive style',
-      category: 'Stylistic Issues',
-      recommended: false
+      category: 'strongly-recommended'
     },
     fixable: 'code',
     schema: [
-            { enum: ['shorthand', 'longform'] }
+      { enum: ['shorthand', 'longform'] }
     ]
   }
 }
diff --git a/lib/rules/valid-template-root.js b/lib/rules/valid-template-root.js
index 989c6963..016938df 100644
--- a/lib/rules/valid-template-root.js
+++ b/lib/rules/valid-template-root.js
@@ -113,8 +113,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid template root',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-bind.js b/lib/rules/valid-v-bind.js
index 8d37a455..350d1c83 100644
--- a/lib/rules/valid-v-bind.js
+++ b/lib/rules/valid-v-bind.js
@@ -57,8 +57,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-bind` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-cloak.js b/lib/rules/valid-v-cloak.js
index 4aa2e891..cc2f730e 100644
--- a/lib/rules/valid-v-cloak.js
+++ b/lib/rules/valid-v-cloak.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-cloak` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-else-if.js b/lib/rules/valid-v-else-if.js
index 6aee2a89..01d7f488 100644
--- a/lib/rules/valid-v-else-if.js
+++ b/lib/rules/valid-v-else-if.js
@@ -81,8 +81,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-else-if` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-else.js b/lib/rules/valid-v-else.js
index 0733cd0a..444a2afe 100644
--- a/lib/rules/valid-v-else.js
+++ b/lib/rules/valid-v-else.js
@@ -81,8 +81,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-else` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-for.js b/lib/rules/valid-v-for.js
index a3c303cb..8e084bf9 100644
--- a/lib/rules/valid-v-for.js
+++ b/lib/rules/valid-v-for.js
@@ -189,8 +189,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-for` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-html.js b/lib/rules/valid-v-html.js
index 88a65f70..c4d09393 100644
--- a/lib/rules/valid-v-html.js
+++ b/lib/rules/valid-v-html.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-html` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-if.js b/lib/rules/valid-v-if.js
index 4c3880fa..e0607ed0 100644
--- a/lib/rules/valid-v-if.js
+++ b/lib/rules/valid-v-if.js
@@ -74,8 +74,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-if` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-model.js b/lib/rules/valid-v-model.js
index 7ec83489..a0620ecd 100644
--- a/lib/rules/valid-v-model.js
+++ b/lib/rules/valid-v-model.js
@@ -175,8 +175,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-model` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-on.js b/lib/rules/valid-v-on.js
index 156e3669..b9c4f9ca 100644
--- a/lib/rules/valid-v-on.js
+++ b/lib/rules/valid-v-on.js
@@ -63,8 +63,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-on` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-once.js b/lib/rules/valid-v-once.js
index 522778c5..58fcc130 100644
--- a/lib/rules/valid-v-once.js
+++ b/lib/rules/valid-v-once.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-once` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-pre.js b/lib/rules/valid-v-pre.js
index b1577825..713ef432 100644
--- a/lib/rules/valid-v-pre.js
+++ b/lib/rules/valid-v-pre.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-pre` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-show.js b/lib/rules/valid-v-show.js
index e8ecce1c..0ad65937 100644
--- a/lib/rules/valid-v-show.js
+++ b/lib/rules/valid-v-show.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-show` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/rules/valid-v-text.js b/lib/rules/valid-v-text.js
index d319b701..7c193d82 100644
--- a/lib/rules/valid-v-text.js
+++ b/lib/rules/valid-v-text.js
@@ -58,8 +58,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce valid `v-text` directives',
-      category: 'Possible Errors',
-      recommended: true
+      category: 'essential'
     },
     fixable: false,
     schema: []
diff --git a/lib/strongly-recommended-rules.js b/lib/strongly-recommended-rules.js
new file mode 100644
index 00000000..881814f6
--- /dev/null
+++ b/lib/strongly-recommended-rules.js
@@ -0,0 +1,49 @@
+/*
+* IMPORTANT!
+* This file has been automatically generated,
+* in order to update it's content execute "npm run update"
+*/
+module.exports = {
+  "vue/attribute-hyphenation": "error",
+  "vue/html-end-tags": "error",
+  "vue/html-indent": "error",
+  "vue/html-self-closing": "error",
+  "vue/jsx-uses-vars": "error",
+  "vue/max-attributes-per-line": "error",
+  "vue/mustache-interpolation-spacing": "error",
+  "vue/name-property-casing": "error",
+  "vue/no-async-in-computed-properties": "error",
+  "vue/no-dupe-keys": "error",
+  "vue/no-duplicate-attributes": "error",
+  "vue/no-multi-spaces": "error",
+  "vue/no-parsing-error": "error",
+  "vue/no-reserved-keys": "error",
+  "vue/no-shared-component-data": "error",
+  "vue/no-side-effects-in-computed-properties": "error",
+  "vue/no-template-key": "error",
+  "vue/no-textarea-mustache": "error",
+  "vue/no-unused-vars": "error",
+  "vue/require-component-is": "error",
+  "vue/require-default-prop": "error",
+  "vue/require-prop-types": "error",
+  "vue/require-render-return": "error",
+  "vue/require-v-for-key": "error",
+  "vue/require-valid-default-prop": "error",
+  "vue/return-in-computed-property": "error",
+  "vue/v-bind-style": "error",
+  "vue/v-on-style": "error",
+  "vue/valid-template-root": "error",
+  "vue/valid-v-bind": "error",
+  "vue/valid-v-cloak": "error",
+  "vue/valid-v-else-if": "error",
+  "vue/valid-v-else": "error",
+  "vue/valid-v-for": "error",
+  "vue/valid-v-html": "error",
+  "vue/valid-v-if": "error",
+  "vue/valid-v-model": "error",
+  "vue/valid-v-on": "error",
+  "vue/valid-v-once": "error",
+  "vue/valid-v-pre": "error",
+  "vue/valid-v-show": "error",
+  "vue/valid-v-text": "error"
+}
\ No newline at end of file
diff --git a/lib/utils/casing.js b/lib/utils/casing.js
index 4069216f..2baca235 100644
--- a/lib/utils/casing.js
+++ b/lib/utils/casing.js
@@ -21,8 +21,9 @@ function kebabCase (str) {
  */
 function camelCase (str) {
   return str
-    .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => (
-      index === 0 ? letter.toLowerCase() : letter.toUpperCase())
+    .replace(/_/g, (_, index) => index === 0 ? _ : '-')
+    .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) =>
+      index === 0 ? letter.toLowerCase() : letter.toUpperCase()
     )
     .replace(invalidChars, '')
 }
@@ -34,6 +35,7 @@ function camelCase (str) {
  */
 function pascalCase (str) {
   return str
+    .replace(/_/g, (_, index) => index === 0 ? _ : '-')
     .replace(/(?:^\w|[A-Z]|\b\w)/g, (letter, index) => letter.toUpperCase())
     .replace(invalidChars, '')
 }
diff --git a/tools/update-rules.js b/tools/update-rules.js
index 4980d6c0..67affeed 100644
--- a/tools/update-rules.js
+++ b/tools/update-rules.js
@@ -18,11 +18,9 @@ const path = require('path')
 
 const root = path.resolve(__dirname, '../lib/rules')
 const readmeFile = path.resolve(__dirname, '../README.md')
-const recommendedRulesFile = path.resolve(__dirname, '../lib/recommended-rules.js')
 const tablePlaceholder = /<!--RULES_TABLE_START-->[\s\S]*<!--RULES_TABLE_END-->/
 const readmeContent = fs.readFileSync(readmeFile, 'utf8')
 
-const STAR = ':white_check_mark:'
 const PEN = ':wrench:'
 const WARN = ':warning:'
 
@@ -34,27 +32,76 @@ const rules = fs.readdirSync(root)
     require(path.join(root, fileName))
   ])
 
-const categories = rules
-  .map(entry => entry[1].meta.docs.category)
-  .reduce((arr, category) => {
-    if (!arr.includes(category)) {
-      arr.push(category)
+// In order of priority
+const categories = [
+  'base',
+  'essential',
+  'strongly-recommended',
+  'recommended'
+// Only include categories with existing rules
+].filter(category =>
+  rules.some(entry =>
+    !entry[1].meta.deprecated &&
+    entry[1].meta.docs.category === category
+  )
+  )
+
+// Throw if an invalid category has been used
+for (const entry of rules) {
+  const category = entry[1].meta.docs.category
+  if (!categories.includes(category)) {
+    categories.push('uncategorized')
+    if (category) {
+      throw new Error(`Rule category ${category} from ${entry[0]} is invalid`)
     }
-    return arr
-  }, ['Possible Errors', 'Best Practices', 'Stylistic Issues'])
+  }
+}
+
+const categoryTitles = {
+  base: 'Base Rules (Enabling Correct ESLint Parsing)',
+  essential: 'Priority A: Essential (Error Prevention)',
+  'strongly-recommended': 'Priority B: Strongly Recommended (Improving Readability)',
+  recommended: 'Priority C: Recommended (Minimizing Arbitrary Choices and Cognitive Overhead)',
+  'use-with-caution': 'Priority D: Use with Caution (Potentially Dangerous Patterns)',
+  uncategorized: 'Uncategorized'
+}
+
+// Throw if no title is defined for a category
+for (const category of categories) {
+  if (!categoryTitles[category]) {
+    throw new Error(`Category "${category}" does not have a title defined.`)
+  }
+}
 
 const rulesTableContent = categories.map(category => `
-### ${category}
+### ${categoryTitles[category]}
+${
+category === 'uncategorized' ? '' : `
+Enforce all the rules in this category, as well as all higher priority rules, with:
 
+\`\`\` json
+"extends": "plugin:vue/${category}"
+\`\`\`
+`
+}
 |    | Rule ID | Description |
 |:---|:--------|:------------|
 ${
   rules
-    .filter(entry => entry[1].meta.docs.category === category && !entry[1].meta.deprecated)
+    .filter(entry =>
+      (
+        category === 'uncategorized' &&
+        !entry[1].meta.docs.category
+      ) ||
+      (
+        entry[1].meta.docs.category === category &&
+        !entry[1].meta.deprecated
+      )
+    )
     .map(entry => {
       const name = entry[0]
       const meta = entry[1].meta
-      const mark = `${meta.docs.recommended ? STAR : ''}${meta.fixable ? PEN : ''}${meta.deprecated ? WARN : ''}`
+      const mark = `${meta.fixable ? PEN : ''}${meta.deprecated ? WARN : ''}`
       const link = `[${name}](./docs/rules/${name}.md)`
       const description = meta.docs.description || '(no description)'
       return `| ${mark} | ${link} | ${description} |`
@@ -80,59 +127,67 @@ ${
       return `| ${link} | ${replacedBy} |`
     })
     .join('\n')
-}
+  }
 `
 
-const recommendedRules = rules.reduce((obj, entry) => {
-  const name = `vue/${entry[0]}`
-  const recommended = entry[1].meta.docs.recommended
-  const status = recommended ? 'error' : 'off'
-  obj[name] = status
-  return obj
-}, {})
-
-const recommendedRulesContent = `/*
- * IMPORTANT!
- * This file has been automatically generated,
- * in order to update its content execute "npm run update"
- */
-module.exports = ${JSON.stringify(recommendedRules, null, 2)}`
+categories.forEach((category, categoryIndex) => {
+  if (category === 'uncategorized') return
+  createRulesFile(category, categories.slice(0, categoryIndex + 1))
+})
+
+function createRulesFile (rulesGroupName, categories) {
+  const enabledRules = rules.filter(entry =>
+    !entry[1].meta.deprecated &&
+    categories.includes(entry[1].meta.docs.category)
+  ).reduce((obj, entry) => {
+    obj[`vue/${entry[0]}`] = 'error'
+    return obj
+  }, {})
+
+  const enabledRulesContent = `/*
+* IMPORTANT!
+* This file has been automatically generated,
+* in order to update it's content execute "npm run update"
+*/
+module.exports = ${JSON.stringify(enabledRules, null, 2)}`
 
-fs.writeFileSync(
-  readmeFile,
-  readmeContent.replace(
-    tablePlaceholder,
-    `<!--RULES_TABLE_START-->\n${rulesTableContent}\n<!--RULES_TABLE_END-->`
+  fs.writeFileSync(
+    readmeFile,
+    readmeContent.replace(
+      tablePlaceholder,
+      `<!--RULES_TABLE_START-->\n${rulesTableContent}\n<!--RULES_TABLE_END-->`
+    )
   )
-)
 
-fs.writeFileSync(
-  recommendedRulesFile,
-  recommendedRulesContent
-)
+  const enabledRulesFile = path.resolve(__dirname, `../lib/${rulesGroupName}-rules.js`)
+
+  fs.writeFileSync(
+    enabledRulesFile,
+    enabledRulesContent
+  )
+}
 
 /*
- * The pattern to match document header.
- * The header is one title line and zero or more unordered list items.
- * E.g.
- *
- * # description
- * - a note. (there are 3 kinds of notes: recommended, deprecated, and autofixable)
- * - another note.
- *
- */
+  * The pattern to match document header.
+  * The header is one title line and zero or more unordered list items.
+  * E.g.
+  *
+  * # description
+  * - a note. (there are 3 kinds of notes: recommended, deprecated, and autofixable)
+  * - another note.
+  *
+  */
 const headerPattern = /^#[^\n]*\n+(?:- .+\n)*\n*/
 
 // Update the header of rule documents.
 const docsRoot = path.resolve(__dirname, '../docs/rules')
-for (const rule of rules) {
-  const ruleId = rule[0]
-  const meta = rule[1].meta
+for (const entry of rules) {
+  const ruleId = entry[0]
+  const meta = entry[1].meta
   const filePath = path.join(docsRoot, `${ruleId}.md`)
-  const recommended = meta.docs.recommended ? `- ${STAR} The \`"extends": "plugin:vue/recommended"\` property in a configuration file enables this rule.\n` : ''
   const deprecated = meta.deprecated ? `- ${WARN} This rule was **deprecated** and replaced by ${meta.docs.replacedBy.map(id => `[${id}](${id}.md) rule`).join(', ')}.\n` : ''
   const autofix = meta.fixable ? `- ${PEN} The \`--fix\` option on the [command line](http://eslint.org/docs/user-guide/command-line-interface#fix) can automatically fix some of the problems reported by this rule.\n` : ''
-  const header = `# ${meta.docs.description} (${ruleId})\n${recommended || deprecated || autofix ? '\n' : ''}${recommended}${deprecated}${autofix}\n`
+  const header = `# ${meta.docs.description} (${ruleId})\n${deprecated || autofix ? '\n' : ''}${deprecated}${autofix}\n`
 
   fs.writeFileSync(
     filePath,


Test patch:
diff --git a/tests/lib/rules/html-end-tags.js b/tests/lib/rules/html-end-tags.js
index 3884290d..16cb8fe2 100644
--- a/tests/lib/rules/html-end-tags.js
+++ b/tests/lib/rules/html-end-tags.js
@@ -49,7 +49,11 @@ tester.run('html-end-tags', rule, {
     },
     {
       filename: 'test.vue',
-      code: '<template><div><div /></div></template>'
+      code: '<template><div><self-closing-custom-element/></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div><div/></div></template>'
     }
   ],
   invalid: [
diff --git a/tests/lib/rules/html-indent.js b/tests/lib/rules/html-indent.js
index c5bff0c2..a426dbf9 100644
--- a/tests/lib/rules/html-indent.js
+++ b/tests/lib/rules/html-indent.js
@@ -49,1069 +49,1069 @@ tester.run('html-indent', rule, {
     // Examples in docs.
     unIndent`
       <template>
-          <div class="foo">
-              Hello.
-          </div>
-          <div
-              id="a"
-              class="b"
-              :other-attr="{
-                  aaa: 1,
-                  bbb: 2
-              }"
-              @other-attr2="
-                  foo();
-                  bar();
-              "
-          >
-              {{
-                  displayMessage
-              }}
-          </div>
+        <div class="foo">
+          Hello.
+        </div>
+        <div
+          id="a"
+          class="b"
+          :other-attr="{
+            aaa: 1,
+            bbb: 2
+          }"
+          @other-attr2="
+            foo()
+            bar()
+          "
+        >
+          {{
+            displayMessage
+          }}
+        </div>
       </template>
     `,
 
     // VAttribute
     unIndent`
       <template>
-          <div
-              a="a"
-              b="b"
-              c=
-                  "c"
-              d
-                  ="d"
-              e
-              f
-                  =
-          ></div>
+        <div
+          a="a"
+          b="b"
+          c=
+            "c"
+          d
+            ="d"
+          e
+          f
+            =
+        ></div>
       </template>
     `,
     unIndent`
       <template>
-          <div a="a"
-               b="b"
-               c=
-                   "c"
-               d
-                   ="d"
-               e
-               f
-                   =
-          ></div>
+        <div a="a"
+             b="b"
+             c=
+               "c"
+             d
+               ="d"
+             e
+             f
+               =
+        ></div>
       </template>
     `,
     unIndent`
       <template>
-          <div a="
-          a" b="b"></div>
+        <div a="
+        a" b="b"></div>
       </template>
     `,
 
     // VExpressionContainer
     unIndent`
       <template>
-          <div
-              :foo="
-                  value
-              "
-          ></div>
+        <div
+          :foo="
+            value
+          "
+        ></div>
       </template>
     `,
 
     // VForExpression
     unIndent`
       <template>
-          <div
-              v-for="
-                  x
-                      in
-                          xs
-              "
-          ></div>
-          <div
-              v-for="
-                  (
-                      x
-                      ,
-                      y
-                      ,
-                      z
-                  )
-                      of
-                          xs
-              "
-          ></div>
+        <div
+          v-for="
+            x
+              in
+                xs
+          "
+        ></div>
+        <div
+          v-for="
+            (
+              x
+              ,
+              y
+              ,
+              z
+            )
+              of
+                xs
+          "
+        ></div>
       </template>
     `,
 
     // VOnExpression
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  foo(); bar();
-              "
-              v-on:b="
-                  foo()
-                  bar()
-              "
-              v-on:c="foo()
-                      bar()"
-          ></div>
+        <div
+          v-on:a="
+            foo(); bar();
+          "
+          v-on:b="
+            foo()
+            bar()
+          "
+          v-on:c="foo()
+                  bar()"
+        ></div>
       </template>
     `,
 
     // VStartTag
     unIndent`
       <template>
-          <div
-              aaa
-              bbb
+        <div
+          aaa
+          bbb
     `,
 
     // VText
     unIndent`
       <template>
-          aaa
-          bbb
-          ccc
+        aaa
+        bbb
+        ccc
       </template>
     `,
 
     // ArrayExpression
     unIndent`
       <template>
-          <div v-on:a="
-              [
-                  1
-                  ,
-                  2
-                  ,
-                  [
-                      3
-                  ],
-                  [ 4,
-                    5 ]
-              ]
-          "></div>
+        <div v-on:a="
+          [
+            1
+            ,
+            2
+            ,
+            [
+              3
+            ],
+            [ 4,
+              5 ]
+          ]
+        "></div>
       </template>
     `,
 
     // ArrowFunctionExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  (
-                  ) =>
-                      1
-              "
-              v-bind:b="
-                  a =>
-                      1
-              "
-              v-bind:c="
-                  (
-                      a
-                  ) =>
-                      1
-              "
-              v-bind:d="
-                  (
-                      a
-                      ,
-                      b
-                  ) =>
-                      1
-              "
-              v-bind:e="
-                  a =>
-                  {
-                      a
-                  }
-              "
-          ></div>
+        <div
+          v-bind:a="
+            (
+            ) =>
+              1
+          "
+          v-bind:b="
+            a =>
+              1
+          "
+          v-bind:c="
+            (
+              a
+            ) =>
+              1
+          "
+          v-bind:d="
+            (
+              a
+              ,
+              b
+            ) =>
+              1
+          "
+          v-bind:e="
+            a =>
+            {
+              a
+            }
+          "
+        ></div>
       </template>
     `,
 
     // AssignmentExpression / BinaryExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  a
-                      +
-                      b
-              "
-              v-bind:b="
-                  a
-                      +
-                      b
-                      +
-                      c
-              "
-              v-bind:c="
-                  a
-                      =
-                      b
-                          +
-                          c
-                          +
-                          d
-              "
-          ></div>
+        <div
+          v-bind:a="
+            a
+              +
+              b
+          "
+          v-bind:b="
+            a
+              +
+              b
+              +
+              c
+          "
+          v-bind:c="
+            a
+              =
+              b
+                +
+                c
+                +
+                d
+          "
+        ></div>
       </template>
     `,
 
     // AwaitExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  async () =>
-                      await
-                          1
-              "
-          ></div>
+        <div
+          v-bind:a="
+            async () =>
+              await
+                1
+          "
+        ></div>
       </template>
     `,
 
     // BreakStatement, LabeledStatement
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  while(1)
-                      break
-                      ;
-              "
-              v-on:b="
-                  A
-                      :
-                      break A
-                      ;
-              "
-          ></div>
+        <div
+          v-on:a="
+            while(1)
+              break
+              ;
+          "
+          v-on:b="
+            A
+              :
+              break A
+              ;
+          "
+        ></div>
       </template>
     `,
 
     // CallExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  foo(
-                  )
-              "
-              v-bind:b="
-                  foo(
-                      1
-                  )
-              "
-              v-bind:c="
-                  foo(
-                      1
-                      ,
-                      2
-                      ,
-                      bar(
-                          3
-                      )
-                  )
-              "
-              v-bind:d="
-                  f(1, 2,
-                    3, 4)
-              "
-          ></div>
+        <div
+          v-bind:a="
+            foo(
+            )
+          "
+          v-bind:b="
+            foo(
+              1
+            )
+          "
+          v-bind:c="
+            foo(
+              1
+              ,
+              2
+              ,
+              bar(
+                3
+              )
+            )
+          "
+          v-bind:d="
+            f(1, 2,
+              3, 4)
+          "
+        ></div>
       </template>
     `,
 
     // ClassExpression / ClassDeclaration
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  class
-                      A
-                  {
-                      foo(){}
-                      bar(){}
-                  }
-              "
-              v-on:b="
-                  class
-                      A
-                      extends
-                          B
-                  {
-                      ;
-                      foo(){}
-                      ;
-                      bar(){}
-                      ;
-                  }
-              "
-              v-on:b="
-                  !class
-                      extends
-                          B
-                  {
-                      ;
-                      foo(){}
-                      ;
-                      bar(){}
-                      ;
-                  }
-              "
-          ></div>
+        <div
+          v-on:a="
+            class
+              A
+            {
+              foo(){}
+              bar(){}
+            }
+          "
+          v-on:b="
+            class
+              A
+              extends
+                B
+            {
+              ;
+              foo(){}
+              ;
+              bar(){}
+              ;
+            }
+          "
+          v-on:b="
+            !class
+              extends
+                B
+            {
+              ;
+              foo(){}
+              ;
+              bar(){}
+              ;
+            }
+          "
+        ></div>
       </template>
     `,
 
     // ConditionalExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  a
-                      ? b
-                      : c
-              "
-              v-bind:b="
-                  a ?
-                      b :
-                      c
-              "
-              v-bind:c="
-                  a
-                      ?
-                          b
-                      :
-                          c
-              "
-              v-bind:d="
-                  a
-                      ? b
-                      : c
-                          ? d
-                          : e
-              "
-              v-bind:e="
-                  a ? 1 :
-                  b ? 2 :
-                  /*else*/ 3
-              "
-          ></div>
+        <div
+          v-bind:a="
+            a
+              ? b
+              : c
+          "
+          v-bind:b="
+            a ?
+              b :
+              c
+          "
+          v-bind:c="
+            a
+              ?
+                b
+              :
+                c
+          "
+          v-bind:d="
+            a
+              ? b
+              : c
+                ? d
+                : e
+          "
+          v-bind:e="
+            a ? 1 :
+            b ? 2 :
+            /*else*/ 3
+          "
+        ></div>
       </template>
     `,
 
     // DoWhileStatement
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  do
-                      ;
-                  while
-                      (
-                          a
-                      )
-              "
-              v-on:b="
-                  do
-                  {
-                      ;
-                  }
-                  while
-                      (
-                          a
-                      )
-              "
-              v-on:c="
-                  do {
-                      ;
-                  } while (
-                      a
-                  )
-              "
-          ></div>
+        <div
+          v-on:a="
+            do
+              ;
+            while
+              (
+                a
+              )
+          "
+          v-on:b="
+            do
+            {
+              ;
+            }
+            while
+              (
+                a
+              )
+          "
+          v-on:c="
+            do {
+              ;
+            } while (
+              a
+            )
+          "
+        ></div>
       </template>
     `,
 
     // ForInStatement, ForOfStatement
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  for
-                      (
-                          a
-                              in
-                              b
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:b="
-                  for (
-                      a
-                          of
-                          b
-                  )
-                  {
-                      ;
-                  }
-              "
-              v-on:c="
-                  for (
-                      a
-                          in
-                          b
-                  ) {
-                      ;
-                  }
-              "
-          ></div>
+        <div
+          v-on:a="
+            for
+              (
+                a
+                  in
+                  b
+              )
+            {
+              ;
+            }
+          "
+          v-on:b="
+            for (
+              a
+                of
+                b
+            )
+            {
+              ;
+            }
+          "
+          v-on:c="
+            for (
+              a
+                in
+                b
+            ) {
+              ;
+            }
+          "
+        ></div>
       </template>
     `,
 
     // ForStatement
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  for
-                      (
-                          a
-                          ;
-                          b
-                          ;
-                          c
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:b="
-                  for
-                      (
-                          ;
-                          b
-                          ;
-                          c
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:c="
-                  for
-                      (
-                          a
-                          ;
-                          ;
-                          c
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:d="
-                  for
-                      (
-                          a
-                          ;
-                          d
-                          ;
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:e="
-                  for
-                      (
-                          ;
-                          ;
-                      )
-                  {
-                      ;
-                  }
-              "
-          ></div>
+        <div
+          v-on:a="
+            for
+              (
+                a
+                ;
+                b
+                ;
+                c
+              )
+            {
+              ;
+            }
+          "
+          v-on:b="
+            for
+              (
+                ;
+                b
+                ;
+                c
+              )
+            {
+              ;
+            }
+          "
+          v-on:c="
+            for
+              (
+                a
+                ;
+                ;
+                c
+              )
+            {
+              ;
+            }
+          "
+          v-on:d="
+            for
+              (
+                a
+                ;
+                d
+                ;
+              )
+            {
+              ;
+            }
+          "
+          v-on:e="
+            for
+              (
+                ;
+                ;
+              )
+            {
+              ;
+            }
+          "
+        ></div>
       </template>
     `,
 
     // FunctionDeclaration, FunctionExpression
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  function
-                      foo
-                      (
-                          a
-                          ,
-                          b
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:b="
-                  !function
-                      (
-                          a
-                          ,
-                          b
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:c="
-                  function
-                      *
-                      foo
-                      (
-                          a
-                          ,
-                          b
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:d="
-                  !function
-                      *
-                      (
-                          a
-                          ,
-                          b
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:e="
-                  async function
-                      foo
-                      (
-                          a
-                          ,
-                          b
-                      )
-                  {
-                      ;
-                  }
-              "
-          ></div>
+        <div
+          v-on:a="
+            function
+              foo
+              (
+                a
+                ,
+                b
+              )
+            {
+              ;
+            }
+          "
+          v-on:b="
+            !function
+              (
+                a
+                ,
+                b
+              )
+            {
+              ;
+            }
+          "
+          v-on:c="
+            function
+              *
+              foo
+              (
+                a
+                ,
+                b
+              )
+            {
+              ;
+            }
+          "
+          v-on:d="
+            !function
+              *
+              (
+                a
+                ,
+                b
+              )
+            {
+              ;
+            }
+          "
+          v-on:e="
+            async function
+              foo
+              (
+                a
+                ,
+                b
+              )
+            {
+              ;
+            }
+          "
+        ></div>
       </template>
     `,
 
     // IfStatement
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  if
-                      (
-                          a
-                      )
-                  {
-                      ;
-                  }
-              "
-              v-on:b="
-                  if
-                      (
-                          a
-                      )
-                  {
-                      ;
-                  }
-                  else
-                  {
-                      ;
-                  }
-              "
-              v-on:c="
-                  if (a)
-                      ;
-                  else if (b)
-                      ;
-                  else
-                      ;
-              "
-          ></div>
+        <div
+          v-on:a="
+            if
+              (
+                a
+              )
+            {
+              ;
+            }
+          "
+          v-on:b="
+            if
+              (
+                a
+              )
+            {
+              ;
+            }
+            else
+            {
+              ;
+            }
+          "
+          v-on:c="
+            if (a)
+              ;
+            else if (b)
+              ;
+            else
+              ;
+          "
+        ></div>
       </template>
     `,
 
     // MemberExpression, MetaProperty
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  obj
-                      .aaa
-                      .bbb
-                      .ccc
-              "
-              v-bind:b="
-                  obj.
-                      aaa.
-                      bbb.
-                      ccc
-              "
-              v-bind:c="
-                  obj
-                      [
-                          0
-                      ]
-                      [
-                          1
-                      ]
-                      [
-                          2
-                      ]
-              "
-              v-bind:d="
-                  function wrap() {
-                      new
-                          .
-                          target
-                  }
-              "
-          ></div>
+        <div
+          v-bind:a="
+            obj
+              .aaa
+              .bbb
+              .ccc
+          "
+          v-bind:b="
+            obj.
+              aaa.
+              bbb.
+              ccc
+          "
+          v-bind:c="
+            obj
+              [
+                0
+              ]
+              [
+                1
+              ]
+              [
+                2
+              ]
+          "
+          v-bind:d="
+            function wrap() {
+              new
+                .
+                target
+            }
+          "
+        ></div>
       </template>
     `,
 
     // MethodDefinition, Property
     unIndent`
       <template>
-          <div
-              v-bind:a="{
-                  aaa
-                      :
-                      1
-                  ,
-                  bbb
-                      (
-                          a
-                          ,
-                          b
-                      )
-                  {
-                      ;
-                  }
-                  ,
-                  get
-                  ccc
-                      (
-                      )
-                  {
-                      ;
-                  },
-                  [
-                      d
-                  ]
-                      :
-                      1,
-                  get
-                  [
-                      e
-                  ]
-                      (
-                      )
-                  {
-                      ;
-                  }
-              }"
-              v-bind:b="class {
-                  bbb
-                      (
-                          a
-                          ,
-                          b
-                      )
-                  {
-                      ;
-                  }
-                  static
-                  get
-                  ccc
-                      (
-                      )
-                  {
-                      ;
-                  }
-                  [
-                      d
-                  ]
-                      (
-                      )
-                  {
-                      ;
-                  }
-                  get
-                  [
-                      e
-                  ]
-                      (
-                      )
-                  {
-                      ;
-                  }
-              }"
-          ></div>
+        <div
+          v-bind:a="{
+            aaa
+              :
+              1
+            ,
+            bbb
+              (
+                a
+                ,
+                b
+              )
+            {
+              ;
+            }
+            ,
+            get
+            ccc
+              (
+              )
+            {
+              ;
+            },
+            [
+              d
+            ]
+              :
+              1,
+            get
+            [
+              e
+            ]
+              (
+              )
+            {
+              ;
+            }
+          }"
+          v-bind:b="class {
+            bbb
+              (
+                a
+                ,
+                b
+              )
+            {
+              ;
+            }
+            static
+            get
+            ccc
+              (
+              )
+            {
+              ;
+            }
+            [
+              d
+            ]
+              (
+              )
+            {
+              ;
+            }
+            get
+            [
+              e
+            ]
+              (
+              )
+            {
+              ;
+            }
+          }"
+        ></div>
       </template>
     `,
 
     // NewExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  new
-                      foo
-                          (
-                              a,
-                              b
-                          )
-              "
-              v-bind:b="
-                  new (
-                      foo
-                  )
-              "
-              v-bind:c="
-                  new (
-                      foo
-                  )(
-                      a
-                  )
-              "
-              v-bind:d="
-                  new foo(
-                      a
-                  )
-              "
-              v-bind:d="
-                  new foo(a,
-                          b)
-              "
-          ></div>
+        <div
+          v-bind:a="
+            new
+              foo
+                (
+                  a,
+                  b
+                )
+          "
+          v-bind:b="
+            new (
+              foo
+            )
+          "
+          v-bind:c="
+            new (
+              foo
+            )(
+              a
+            )
+          "
+          v-bind:d="
+            new foo(
+              a
+            )
+          "
+          v-bind:d="
+            new foo(a,
+                    b)
+          "
+        ></div>
       </template>
     `,
 
     // ObjectExpression
     unIndent`
       <template>
-          <div v-bind:a="
-              {
-                  a: 1
-                  ,
-                  b: 2
-                  ,
-                  c: {
-                      ca: 3
-                  },
-                  d: { da: 4,
-                       db: 5 }
-              }
-          "></div>
+        <div v-bind:a="
+          {
+            a: 1
+            ,
+            b: 2
+            ,
+            c: {
+              ca: 3
+            },
+            d: { da: 4,
+                 db: 5 }
+          }
+        "></div>
       </template>
     `,
 
     // RestElement / SpreadElement
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  [
-                      a,
-                      ...
-                          b
-                  ] = [
-                      a,
-                      ...
-                          b
-                  ]
-              "
-          ></div>
+        <div
+          v-bind:a="
+            [
+              a,
+              ...
+                b
+            ] = [
+              a,
+              ...
+                b
+            ]
+          "
+        ></div>
       </template>
     `,
 
     // SequenceExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  1
-                  ,
-                  2
-                  ,
-                  3
-              "
-              v-bind:b="
-                  1,
-                  2,
-                  3
-              "
-              v-bind:c="
-                  a +
-                      b,
-                  2
-              "
-          ></div>
+        <div
+          v-bind:a="
+            1
+            ,
+            2
+            ,
+            3
+          "
+          v-bind:b="
+            1,
+            2,
+            3
+          "
+          v-bind:c="
+            a +
+              b,
+            2
+          "
+        ></div>
       </template>
     `,
     unIndent`
       <template>
-          {{
-              a,
-              b,
-              c
-          }}
+        {{
+          a,
+          b,
+          c
+        }}
       </template>
     `,
 
     // SwitchStatement, SwitchCase
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  switch
-                      (
-                          a
-                      )
-                  {
-                  case
-                      1
-                      :
-                      foo;
-                  case (
-                      2
-                  ):
-                      foo;
-                  case 3:
-                      foo;
-                  case 4:
-                  {
-                      foo;
-                  }
-                  default
-                      :
-                      foo;
-                  }
-              "
-              v-on:b="
-                  switch (a) {
-                  case 1:
-                      foo;
-                  }
-              "
-          ></div>
+        <div
+          v-on:a="
+            switch
+              (
+                a
+              )
+            {
+            case
+              1
+              :
+              foo;
+            case (
+              2
+            ):
+              foo;
+            case 3:
+              foo;
+            case 4:
+            {
+              foo;
+            }
+            default
+              :
+              foo;
+            }
+          "
+          v-on:b="
+            switch (a) {
+            case 1:
+              foo;
+            }
+          "
+        ></div>
       </template>
     `,
 
     // TaggedTemplateExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  foo\`test\`
-              "
-              v-bind:b="
-                  foo
-                      \`test\`
-              "
-              v-bind:c="
-                  (
-                      foo
-                  )
-                      \`test\`
-              "
-          ></div>
+        <div
+          v-bind:a="
+            foo\`test\`
+          "
+          v-bind:b="
+            foo
+              \`test\`
+          "
+          v-bind:c="
+            (
+              foo
+            )
+              \`test\`
+          "
+        ></div>
       </template>
     `,
 
     // TemplateLiteral
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  \`hello, \${
-                      aaa
-                  }, \${
-                      (
-                          bbb
-                      )
-                  }\`
-              "
-              v-bind:b="
-                  \`
-                  test
-                test
-                    test
-                  \`
-              "
-          ></div>
-      </template>
-    `,
-
-    // ReturnStatement
-    unIndent`
-      <template>
-          <div
-              v-on:a="
-                  return
-                  ;
-              "
-              v-on:b="
-                  return a
-                  ;
-              "
-          ></div>
+        <div
+          v-bind:a="
+            \`hello, \${
+              aaa
+            }, \${
+              (
+                bbb
+              )
+            }\`
+          "
+          v-bind:b="
+            \`
+            test
+          test
+            test
+            \`
+          "
+        ></div>
       </template>
-    `,
-
-    // TryStatement / CatchClause
-    unIndent`
-      <template>
-          <div
-              v-on:a="
-                  try
-                  {
-                  }
-                  catch
-                      (
-                          err
-                      )
-                  {
-                  }
-              "
-              v-on:b="
-                  try
-                  {
-                  }
-                  finally
-                  {
-                  }
-              "
-              v-on:c="
-                  try
-                  {
-                  }
-                  catch
-                      (
-                          err
-                      )
-                  {
-                  }
-                  finally
-                  {
-                  }
-              "
-          ></div>
+    `,
+
+    // ReturnStatement
+    unIndent`
+      <template>
+        <div
+          v-on:a="
+            return
+            ;
+          "
+          v-on:b="
+            return a
+            ;
+          "
+        ></div>
+      </template>
+    `,
+
+    // TryStatement / CatchClause
+    unIndent`
+      <template>
+        <div
+          v-on:a="
+            try
+            {
+            }
+            catch
+              (
+                err
+              )
+            {
+            }
+          "
+          v-on:b="
+            try
+            {
+            }
+            finally
+            {
+            }
+          "
+          v-on:c="
+            try
+            {
+            }
+            catch
+              (
+                err
+              )
+            {
+            }
+            finally
+            {
+            }
+          "
+        ></div>
       </template>
     `,
 
     // UnaryExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  +
-                      a
-              "
-          ></div>
+        <div
+          v-bind:a="
+            +
+              a
+          "
+        ></div>
       </template>
     `,
 
     // UpdateExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  ++
-                      a
-              "
-          ></div>
+        <div
+          v-bind:a="
+            ++
+              a
+          "
+        ></div>
       </template>
     `,
 
     // VariableDeclaration, VariableDeclarator
     unIndent`
       <template>
-          <div
-              v-on:a="
-                  var aaa
-                  var bbb = 1,
-                      ccc = 2
-                  const ddd = 3,
-                        eee = 4
-              "
-              v-on:b="
-                  var aaa
-                          =
-                          1,
-                      ccc
-                          =
-                          2
-                  const ddd 
-                            =
-                            3,
-                        eee
-                            =
-                            4
-              "
-              v-on:c="
-                  var aaa = {
-                      test: 1
+        <div
+          v-on:a="
+            var aaa
+            var bbb = 1,
+                ccc = 2
+            const ddd = 3,
+                  eee = 4
+          "
+          v-on:b="
+            var aaa
+                  =
+                  1,
+                ccc
+                  =
+                  2
+            const ddd
+                    =
+                    3,
+                  eee
+                    =
+                    4
+          "
+          v-on:c="
+            var aaa = {
+              test: 1
+            }
+            var bbb = {
+                  test: 1
+                },
+                ccc = {
+                  test: 1
+                }
+            const ddd = {
+                    test: 1
+                  },
+                  eee = (a) => {
+                    foo(a)
                   }
-                  var bbb = {
-                          test: 1
-                      },
-                      ccc = {
-                          test: 1
-                      }
-                  const ddd = {
-                            test: 1
-                        },
-                        eee = (a) => {
-                            foo(a)
-                        }
-              "
-          ></div>
+          "
+        ></div>
       </template>
     `,
 
     // YieldExpression
     unIndent`
       <template>
-          <div
-              v-bind:a="
-                  function*(){
-                      yield
-                  }
-              "
-              v-bind:b="
-                  function*(){
-                      yield
-                      a
-                  }
-              "
-              v-bind:c="
-                  function*(){
-                      yield*
-                          a
-                  }
-              "
-          ></div>
+        <div
+          v-bind:a="
+            function*(){
+              yield
+            }
+          "
+          v-bind:b="
+            function*(){
+              yield
+              a
+            }
+          "
+          v-bind:c="
+            function*(){
+              yield*
+                a
+            }
+          "
+        ></div>
       </template>
     `,
 
@@ -1272,22 +1272,22 @@ tester.run('html-indent', rule, {
     // Comments
     unIndent`
       <template>
-          <!-- comment -->
-          {{
-              // comment
-              // comment
-              message
-          }}
+        <!-- comment -->
+        {{
+          // comment
+          // comment
+          message
+        }}
       </template>
     `,
     unIndent`
       <template>
-          {{
-              /*
-               * comment
-               */
-              message
-          }}
+        {{
+          /*
+           * comment
+           */
+          message
+        }}
       </template>
     `,
 
@@ -1347,6 +1347,7 @@ tester.run('html-indent', rule, {
             </div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 8 spaces but found 6 spaces.', line: 3 },
         { message: 'Expected indentation of 8 spaces but found 6 spaces.', line: 4 },
@@ -1411,6 +1412,7 @@ tester.run('html-indent', rule, {
             </div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 8 spaces but found 6 spaces.', line: 5 },
@@ -1471,6 +1473,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -1519,6 +1522,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 7 },
@@ -1543,6 +1547,7 @@ tester.run('html-indent', rule, {
             ccc
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 2 },
         { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 3 }
@@ -1568,6 +1573,7 @@ tester.run('html-indent', rule, {
             }}
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 2 },
         { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 3 },
@@ -1613,6 +1619,7 @@ tester.run('html-indent', rule, {
             "></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 8 spaces but found 6 spaces.', line: 3 },
         { message: 'Expected indentation of 12 spaces but found 6 spaces.', line: 4 },
@@ -1700,6 +1707,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 5 },
@@ -1779,6 +1787,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -1822,6 +1831,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 16 spaces but found 14 spaces.', line: 5 },
         { message: 'Expected indentation of 20 spaces but found 14 spaces.', line: 6 }
@@ -1864,6 +1874,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 6 },
@@ -1936,6 +1947,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 5 },
@@ -2036,6 +2048,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -2139,6 +2152,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -2226,6 +2240,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -2323,6 +2338,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -2483,6 +2499,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -2670,6 +2687,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -2798,6 +2816,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -2902,6 +2921,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -3087,6 +3107,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -3238,6 +3259,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -3298,6 +3320,7 @@ tester.run('html-indent', rule, {
             "></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 8 spaces but found 6 spaces.', line: 3 },
         { message: 'Expected indentation of 12 spaces but found 6 spaces.', line: 4 },
@@ -3361,6 +3384,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 5 },
@@ -3378,26 +3402,26 @@ tester.run('html-indent', rule, {
     {
       code: unIndent`
         <template>
-            {{
-            a,
-            b,
-            c
-            }}
+          {{
+          a,
+          b,
+          c
+          }}
         </template>
       `,
       output: unIndent`
         <template>
-            {{
-                a,
-                b,
-                c
-            }}
+          {{
+            a,
+            b,
+            c
+          }}
         </template>
       `,
       errors: [
-        { message: 'Expected indentation of 8 spaces but found 4 spaces.', line: 3 },
-        { message: 'Expected indentation of 8 spaces but found 4 spaces.', line: 4 },
-        { message: 'Expected indentation of 8 spaces but found 4 spaces.', line: 5 }
+        { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 3 },
+        { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 4 },
+        { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 5 }
       ]
     },
 
@@ -3477,6 +3501,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -3548,6 +3573,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 7 },
@@ -3605,6 +3631,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 },
@@ -3653,6 +3680,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 16 spaces but found 14 spaces.', line: 6 },
         { message: 'Expected indentation of 20 spaces but found 14 spaces.', line: 7 },
@@ -3691,6 +3719,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 5 },
@@ -3705,37 +3734,37 @@ tester.run('html-indent', rule, {
         <template>
             <div
                 v-on:a="
-                  try
-                  {
-                  }
-                  catch
-                  (
-                  err
-                  )
-                  {
-                  }
+                try
+                {
+                }
+                catch
+                (
+                err
+                )
+                {
+                }
                 "
                 v-on:b="
-                  try
-                  {
-                  }
-                  finally
-                  {
-                  }
+                try
+                {
+                }
+                finally
+                {
+                }
                 "
                 v-on:c="
-                  try
-                  {
-                  }
-                  catch
-                  (
-                  err
-                  )
-                  {
-                  }
-                  finally
-                  {
-                  }
+                try
+                {
+                }
+                catch
+                (
+                err
+                )
+                {
+                }
+                finally
+                {
+                }
                 "
             ></div>
         </template>
@@ -3779,34 +3808,35 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 5 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 6 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 7 },
-        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 8 },
-        { message: 'Expected indentation of 20 spaces but found 10 spaces.', line: 9 },
-        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 10 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 11 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 12 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 15 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 16 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 17 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 18 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 19 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 20 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 23 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 24 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 25 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 26 },
-        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 27 },
-        { message: 'Expected indentation of 20 spaces but found 10 spaces.', line: 28 },
-        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 29 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 30 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 31 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 32 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 33 },
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 34 }
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 4 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 5 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 6 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 7 },
+        { message: 'Expected indentation of 16 spaces but found 8 spaces.', line: 8 },
+        { message: 'Expected indentation of 20 spaces but found 8 spaces.', line: 9 },
+        { message: 'Expected indentation of 16 spaces but found 8 spaces.', line: 10 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 11 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 12 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 15 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 16 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 17 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 18 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 19 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 20 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 23 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 24 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 25 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 26 },
+        { message: 'Expected indentation of 16 spaces but found 8 spaces.', line: 27 },
+        { message: 'Expected indentation of 20 spaces but found 8 spaces.', line: 28 },
+        { message: 'Expected indentation of 16 spaces but found 8 spaces.', line: 29 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 30 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 31 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 32 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 33 },
+        { message: 'Expected indentation of 12 spaces but found 8 spaces.', line: 34 }
       ]
     },
 
@@ -3814,27 +3844,27 @@ tester.run('html-indent', rule, {
     {
       code: unIndent`
         <template>
-            <div
-                v-bind:a="
-                  +
-                  a
-                "
-            ></div>
+          <div
+            v-bind:a="
+                +
+              a
+            "
+          ></div>
         </template>
       `,
       output: unIndent`
         <template>
-            <div
-                v-bind:a="
-                    +
-                        a
-                "
-            ></div>
+          <div
+            v-bind:a="
+              +
+                a
+            "
+          ></div>
         </template>
       `,
       errors: [
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
-        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 }
+        { message: 'Expected indentation of 6 spaces but found 8 spaces.', line: 4 },
+        { message: 'Expected indentation of 8 spaces but found 6 spaces.', line: 5 }
       ]
     },
 
@@ -3842,27 +3872,27 @@ tester.run('html-indent', rule, {
     {
       code: unIndent`
         <template>
-            <div
-                v-bind:a="
-                  ++
-                  a
-                "
-            ></div>
+          <div
+            v-bind:a="
+                ++
+              a
+            "
+          ></div>
         </template>
       `,
       output: unIndent`
         <template>
-            <div
-                v-bind:a="
-                    ++
-                        a
-                "
-            ></div>
+          <div
+            v-bind:a="
+              ++
+                a
+            "
+          ></div>
         </template>
       `,
       errors: [
-        { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
-        { message: 'Expected indentation of 16 spaces but found 10 spaces.', line: 5 }
+        { message: 'Expected indentation of 6 spaces but found 8 spaces.', line: 4 },
+        { message: 'Expected indentation of 8 spaces but found 6 spaces.', line: 5 }
       ]
     },
 
@@ -3885,7 +3915,7 @@ tester.run('html-indent', rule, {
                   ccc
                   =
                   2
-                  const ddd 
+                  const ddd
                   =
                   3,
                   eee
@@ -3929,7 +3959,7 @@ tester.run('html-indent', rule, {
                         ccc
                             =
                             2
-                    const ddd 
+                    const ddd
                               =
                               3,
                           eee
@@ -3956,6 +3986,7 @@ tester.run('html-indent', rule, {
             ></div>
         </template>
       `,
+      options: [4],
       errors: [
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 4 },
         { message: 'Expected indentation of 12 spaces but found 10 spaces.', line: 5 },
@@ -3996,56 +4027,56 @@ tester.run('html-indent', rule, {
     {
       code: unIndent`
         <template>
-            <div
-                v-bind:a="
-                    function*(){
-                      yield
-                    }
-                "
-                v-bind:b="
-                    function*(){
-                      yield
-                      a
-                    }
-                "
-                v-bind:c="
-                    function*(){
-                      yield*
+          <div
+            v-bind:a="
+              function*(){
+                  yield
+              }
+            "
+            v-bind:b="
+              function*(){
+                  yield
+                  a
+              }
+            "
+            v-bind:c="
+              function*(){
+                  yield*
                       a
-                    }
-                "
-            ></div>
+              }
+            "
+          ></div>
         </template>
       `,
       output: unIndent`
         <template>
-            <div
-                v-bind:a="
-                    function*(){
-                        yield
-                    }
-                "
-                v-bind:b="
-                    function*(){
-                        yield
-                        a
-                    }
-                "
-                v-bind:c="
-                    function*(){
-                        yield*
-                            a
-                    }
-                "
-            ></div>
+          <div
+            v-bind:a="
+              function*(){
+                yield
+              }
+            "
+            v-bind:b="
+              function*(){
+                yield
+                a
+              }
+            "
+            v-bind:c="
+              function*(){
+                yield*
+                  a
+              }
+            "
+          ></div>
         </template>
       `,
       errors: [
-        { message: 'Expected indentation of 16 spaces but found 14 spaces.', line: 5 },
-        { message: 'Expected indentation of 16 spaces but found 14 spaces.', line: 10 },
-        { message: 'Expected indentation of 16 spaces but found 14 spaces.', line: 11 },
-        { message: 'Expected indentation of 16 spaces but found 14 spaces.', line: 16 },
-        { message: 'Expected indentation of 20 spaces but found 14 spaces.', line: 17 }
+        { message: 'Expected indentation of 8 spaces but found 10 spaces.', line: 5 },
+        { message: 'Expected indentation of 8 spaces but found 10 spaces.', line: 10 },
+        { message: 'Expected indentation of 8 spaces but found 10 spaces.', line: 11 },
+        { message: 'Expected indentation of 8 spaces but found 10 spaces.', line: 16 },
+        { message: 'Expected indentation of 10 spaces but found 14 spaces.', line: 17 }
       ]
     },
 
@@ -4121,16 +4152,16 @@ tester.run('html-indent', rule, {
     {
       code: unIndent`
         <template>
-            <div>
-            \tHello
-            </div>
+          <div>
+          \tHello
+          </div>
         </template>
       `,
       output: unIndent`
         <template>
-            <div>
-                Hello
-            </div>
+          <div>
+            Hello
+          </div>
         </template>
       `,
       errors: [
@@ -4172,47 +4203,47 @@ tester.run('html-indent', rule, {
       `,
       output: unIndent`
         <template>
-            <!-- comment -->
-            {{
-                // comment
-                // comment
-                message
-            }}
+          <!-- comment -->
+          {{
+            // comment
+            // comment
+            message
+          }}
         </template>
       `,
       errors: [
-        { message: 'Expected indentation of 4 spaces but found 0 spaces.', line: 2 },
-        { message: 'Expected indentation of 4 spaces but found 0 spaces.', line: 3 },
-        { message: 'Expected indentation of 8 spaces but found 0 spaces.', line: 4 },
-        { message: 'Expected indentation of 8 spaces but found 0 spaces.', line: 5 },
-        { message: 'Expected indentation of 8 spaces but found 0 spaces.', line: 6 },
-        { message: 'Expected indentation of 4 spaces but found 0 spaces.', line: 7 }
+        { message: 'Expected indentation of 2 spaces but found 0 spaces.', line: 2 },
+        { message: 'Expected indentation of 2 spaces but found 0 spaces.', line: 3 },
+        { message: 'Expected indentation of 4 spaces but found 0 spaces.', line: 4 },
+        { message: 'Expected indentation of 4 spaces but found 0 spaces.', line: 5 },
+        { message: 'Expected indentation of 4 spaces but found 0 spaces.', line: 6 },
+        { message: 'Expected indentation of 2 spaces but found 0 spaces.', line: 7 }
       ]
     },
     {
       code: unIndent`
         <template>
-            {{
-            /*
-             * comment
-             */
-            message
-            }}
+          {{
+          /*
+           * comment
+           */
+          message
+          }}
         </template>
       `,
       output: unIndent`
         <template>
-            {{
-                /*
-                 * comment
-                 */
-                message
-            }}
+          {{
+            /*
+             * comment
+             */
+            message
+          }}
         </template>
       `,
       errors: [
-        { message: 'Expected indentation of 8 spaces but found 4 spaces.', line: 3 },
-        { message: 'Expected indentation of 8 spaces but found 4 spaces.', line: 6 }
+        { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 3 },
+        { message: 'Expected indentation of 4 spaces but found 2 spaces.', line: 6 }
       ]
     },
 
diff --git a/tests/lib/rules/html-self-closing.js b/tests/lib/rules/html-self-closing.js
index 49ee3c43..3623745c 100644
--- a/tests/lib/rules/html-self-closing.js
+++ b/tests/lib/rules/html-self-closing.js
@@ -54,7 +54,7 @@ const anyWith = (opts) => Object.assign(
 tester.run('html-self-closing', rule, {
   valid: [
     // default
-    '<template><div></div></template>',
+    '<template><div/></template>',
     '<template><img></template>',
     '<template><x-test/></template>',
     '<template><svg><path/></svg></template>',
@@ -72,9 +72,9 @@ tester.run('html-self-closing', rule, {
   invalid: [
     // default
     {
-      code: '<template><div/></template>',
-      output: '<template><div></div></template>',
-      errors: ['Disallow self-closing on HTML elements (<div/>).']
+      code: '<template><div></div></template>',
+      output: '<template><div/></template>',
+      errors: ['Require self-closing on HTML elements (<div>).']
     },
     {
       code: '<template><img/></template>',
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 07d24197..773f1b66 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -26,24 +26,32 @@ ruleTester.run('max-attributes-per-line', rule, {
       code: `<template><component></component></template>`
     },
     {
-      code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`
+      code: `<template><component
+        name="John Doe"
+        age="30"
+        job="Vet"
+      ></component></template>`
     },
     {
-      code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
+      code: `<template><component
+        name="John Doe"
+        age="30"
+        job="Vet"
+      ></component></template>`,
       options: [{ multiline: { allowFirstLine: true }}]
     },
     {
       code: `<template><component
         name="John Doe"
-        age="30">
-        </component>
-      </template>`
+        age="30"
+      >
+      </component></template>`
     },
     {
       code: `<template><component
         name="John Doe"
         age="30">
-        </component>
+      </component>
       </template>`,
       options: [{ singleline: 1 }]
     },
@@ -82,8 +90,8 @@ ruleTester.run('max-attributes-per-line', rule, {
 
   invalid: [
     {
-      code: `<template><component name="John Doe" age="30" job="Vet" petname="Snoopy"></component></template>`,
-      errors: ['Attribute "petname" should be on a new line.']
+      code: `<template><component name="John Doe" age="30"></component></template>`,
+      errors: ['Attribute "age" should be on a new line.']
     },
     {
       code: `<template><component job="Vet"
@@ -98,10 +106,10 @@ ruleTester.run('max-attributes-per-line', rule, {
       }]
     },
     {
-      code: `<template><component name="John Doe" age="30"></component></template>`,
-      options: [{ singleline: { max: 1 }}],
+      code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
+      options: [{ singleline: { max: 2 }}],
       errors: [{
-        message: 'Attribute "age" should be on a new line.',
+        message: 'Attribute "job" should be on a new line.',
         type: 'VAttribute',
         line: 1
       }]
diff --git a/tests/lib/rules/name-property-casing.js b/tests/lib/rules/name-property-casing.js
index 3c09f23f..d5d83335 100644
--- a/tests/lib/rules/name-property-casing.js
+++ b/tests/lib/rules/name-property-casing.js
@@ -31,7 +31,6 @@ ruleTester.run('name-property-casing', rule, {
         export default {
         }
       `,
-      options: ['camelCase'],
       parserOptions
     },
     {
@@ -41,17 +40,15 @@ ruleTester.run('name-property-casing', rule, {
           ...name
         }
       `,
-      options: ['camelCase'],
       parserOptions
     },
     {
       filename: 'test.vue',
       code: `
         export default {
-          name: 'fooBar'
+          name: 'FooBar'
         }
       `,
-      options: ['camelCase'],
       parserOptions
     },
     {
@@ -86,13 +83,12 @@ ruleTester.run('name-property-casing', rule, {
       `,
       output: `
         export default {
-          name: 'fooBar'
+          name: 'FooBar'
         }
       `,
-      options: ['camelCase'],
       parserOptions,
       errors: [{
-        message: 'Property name "foo-bar" is not camelCase.',
+        message: 'Property name "foo-bar" is not PascalCase.',
         type: 'Literal',
         line: 3
       }]
@@ -125,13 +121,12 @@ ruleTester.run('name-property-casing', rule, {
       `,
       output: `
         export default {
-          name: 'fooBar'
+          name: 'FooBar'
         }
       `,
-      options: ['camelCase'],
       parserOptions,
       errors: [{
-        message: 'Property name "foo!bar" is not camelCase.',
+        message: 'Property name "foo!bar" is not PascalCase.',
         type: 'Literal',
         line: 3
       }]
@@ -145,13 +140,12 @@ ruleTester.run('name-property-casing', rule, {
       `,
       output: `
         new Vue({
-          name: 'fooBar'
+          name: 'FooBar'
         })
       `,
-      options: ['camelCase'],
       parserOptions: { ecmaVersion: 6 },
       errors: [{
-        message: 'Property name "foo!bar" is not camelCase.',
+        message: 'Property name "foo!bar" is not PascalCase.',
         type: 'Literal',
         line: 3
       }]
@@ -165,13 +159,12 @@ ruleTester.run('name-property-casing', rule, {
       `,
       output: `
         export default {
-          name: 'foobar'
+          name: 'FooBar'
         }
       `,
-      options: ['camelCase'],
       parserOptions,
       errors: [{
-        message: 'Property name "foo_bar" is not camelCase.',
+        message: 'Property name "foo_bar" is not PascalCase.',
         type: 'Literal',
         line: 3
       }]
@@ -185,7 +178,7 @@ ruleTester.run('name-property-casing', rule, {
       `,
       output: `
         export default {
-          name: 'Foobar'
+          name: 'FooBar'
         }
       `,
       options: ['PascalCase'],
diff --git a/tests/lib/rules/no-invalid-v-on.js b/tests/lib/rules/no-invalid-v-on.js
index 06ba18b4..45594645 100644
--- a/tests/lib/rules/no-invalid-v-on.js
+++ b/tests/lib/rules/no-invalid-v-on.js
@@ -27,6 +27,14 @@ tester.run('no-invalid-v-on', rule, {
       filename: 'test.vue',
       code: ''
     },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-on="foo"></div></template>'
+    },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-on="{ click: foo }"></div></template>'
+    },
     {
       filename: 'test.vue',
       code: '<template><div v-on:click="foo"></div></template>'
@@ -66,6 +74,11 @@ tester.run('no-invalid-v-on', rule, {
       code: '<template><div v-on:click.aaa="foo"></div></template>',
       errors: ["'v-on' directives don't support the modifier 'aaa'."]
     },
+    {
+      filename: 'test.vue',
+      code: '<template><div v-on></div></template>',
+      errors: ["'v-on' directives require that attribute value or verb modifiers."]
+    },
     {
       filename: 'test.vue',
       code: '<template><div v-on:click></div></template>',
diff --git a/tests/lib/rules/order-in-components.js b/tests/lib/rules/order-in-components.js
index 4886e88b..48501541 100644
--- a/tests/lib/rules/order-in-components.js
+++ b/tests/lib/rules/order-in-components.js
@@ -106,9 +106,9 @@ ruleTester.run('order-in-components', rule, {
       filename: 'test.js',
       code: `
         new Vue({
+          el: '#app',
           name: 'app',
           components: {},
-          el: '#app',
           data () {
             return {
               msg: 'Welcome to Your Vue.js App'
@@ -199,9 +199,6 @@ ruleTester.run('order-in-components', rule, {
       errors: [{
         message: 'The "components" property should be above the "data" property on line 4.',
         line: 9
-      }, {
-        message: 'The "template" property should be above the "data" property on line 4.',
-        line: 10
       }]
     },
     {
@@ -223,17 +220,14 @@ ruleTester.run('order-in-components', rule, {
       errors: [{
         message: 'The "components" property should be above the "data" property on line 5.',
         line: 10
-      }, {
-        message: 'The "template" property should be above the "data" property on line 5.',
-        line: 11
       }]
     },
     {
       filename: 'test.js',
       code: `
         new Vue({
-          el: '#app',
           name: 'app',
+          el: '#app',
           data () {
             return {
               msg: 'Welcome to Your Vue.js App'
@@ -245,14 +239,11 @@ ruleTester.run('order-in-components', rule, {
       `,
       parserOptions: { ecmaVersion: 6 },
       errors: [{
-        message: 'The "name" property should be above the "el" property on line 3.',
+        message: 'The "el" property should be above the "name" property on line 3.',
         line: 4
       }, {
-        message: 'The "components" property should be above the "el" property on line 3.',
+        message: 'The "components" property should be above the "data" property on line 5.',
         line: 10
-      }, {
-        message: 'The "template" property should be above the "data" property on line 5.',
-        line: 11
       }]
     },
     {