Update: deprecate no-invalid-* rules and add valid-* rules (fixes #103) (#132)

* Update: deprecate `no-invalid-*` rules and add `valid-*` rules (fixes #103)

* Docs: update docs about deprecated rules

* update for review

Author: mysticatea

README.md

@@ -39,7 +39,7 @@ module.exports = {
   ],
   rules: {
     // override/add rules' settings here
-    'vue/no-invalid-v-if': 'error'
+    'vue/valid-v-if': 'error'
   }
 }
 ```
@@ -86,27 +86,41 @@ No rules are enabled by `plugin:vue/base` config. The `plugin:vue/recommended` c
 
 The `--fix` option on the command line automatically fixes problems reported by rules which have a wrench :wrench: below.
 
-Deprecated rules witch should be used with caution and only enabled when you know what you are doing have a warning :warning: icon.
-
 <!--RULES_TABLE_START-->
 
-### Stylistic Issues
+### Possible Errors
 
 |    | Rule ID | Description |
 |:---|:--------|:------------|
-| :wrench: | [attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | Define a style for the props casing in templates. |
-|  | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes. |
-| :wrench: | [name-property-casing](./docs/rules/name-property-casing.md) | Requires specific casing for the name property in Vue components |
-| :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. |
+|  | [no-dupe-keys](./docs/rules/no-dupe-keys.md) | Prevents duplication of field names. |
+| :white_check_mark: | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>`. |
+|  | [no-reservered-keys](./docs/rules/no-reservered-keys.md) | Prevent overwrite reserved keys. |
+|  | [no-shared-component-data](./docs/rules/no-shared-component-data.md) | Enforces component's data property to be a function. |
+|  | [no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `<template>`. |
+|  | [require-render-return](./docs/rules/require-render-return.md) | Enforces render function to always return value. |
+|  | [require-valid-default-prop](./docs/rules/require-valid-default-prop.md) | Enforces props default values to be valid. |
+|  | [return-in-computed-property](./docs/rules/return-in-computed-property.md) | Enforces 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. |
-| :wrench::warning: | [html-no-self-closing](./docs/rules/html-no-self-closing.md) | disallow self-closing elements. - (deprecated) |
 |  | [no-async-in-computed-properties](./docs/rules/no-async-in-computed-properties.md) | Check if there are no asynchronous actions inside 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 duplicate attributes. |
@@ -118,38 +132,45 @@ Deprecated rules witch should be used with caution and only enabled when you kno
 | :white_check_mark: | [require-v-for-key](./docs/rules/require-v-for-key.md) | require `v-bind:key` with `v-for` directives. |
 
 
-### Variables
+### Stylistic Issues
 
 |    | 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 |
+| :wrench: | [attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | Define a style for the props casing in templates. |
+|  | [html-quotes](./docs/rules/html-quotes.md) | enforce quotes style of HTML attributes. |
+| :wrench: | [name-property-casing](./docs/rules/name-property-casing.md) | Requires specific casing for the name property in Vue components |
+| :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. |
 
 
-### Possible Errors
+### Variables
 
 |    | Rule ID | Description |
 |:---|:--------|:------------|
-|  | [no-dupe-keys](./docs/rules/no-dupe-keys.md) | Prevents duplication of field names. |
-| :white_check_mark: | [no-invalid-template-root](./docs/rules/no-invalid-template-root.md) | disallow invalid template root. |
-| :white_check_mark: | [no-invalid-v-bind](./docs/rules/no-invalid-v-bind.md) | disallow invalid `v-bind` directives. |
-| :white_check_mark: | [no-invalid-v-cloak](./docs/rules/no-invalid-v-cloak.md) | disallow invalid `v-cloak` directives. |
-| :white_check_mark: | [no-invalid-v-else-if](./docs/rules/no-invalid-v-else-if.md) | disallow invalid `v-else-if` directives. |
-| :white_check_mark: | [no-invalid-v-else](./docs/rules/no-invalid-v-else.md) | disallow invalid `v-else` directives. |
-| :white_check_mark: | [no-invalid-v-for](./docs/rules/no-invalid-v-for.md) | disallow invalid `v-for` directives. |
-| :white_check_mark: | [no-invalid-v-html](./docs/rules/no-invalid-v-html.md) | disallow invalid `v-html` directives. |
-| :white_check_mark: | [no-invalid-v-if](./docs/rules/no-invalid-v-if.md) | disallow invalid `v-if` directives. |
-| :white_check_mark: | [no-invalid-v-model](./docs/rules/no-invalid-v-model.md) | disallow invalid `v-model` directives. |
-| :white_check_mark: | [no-invalid-v-on](./docs/rules/no-invalid-v-on.md) | disallow invalid `v-on` directives. |
-| :white_check_mark: | [no-invalid-v-once](./docs/rules/no-invalid-v-once.md) | disallow invalid `v-once` directives. |
-| :white_check_mark: | [no-invalid-v-pre](./docs/rules/no-invalid-v-pre.md) | disallow invalid `v-pre` directives. |
-| :white_check_mark: | [no-invalid-v-show](./docs/rules/no-invalid-v-show.md) | disallow invalid `v-show` directives. |
-| :white_check_mark: | [no-invalid-v-text](./docs/rules/no-invalid-v-text.md) | disallow invalid `v-text` directives. |
-| :white_check_mark: | [no-parsing-error](./docs/rules/no-parsing-error.md) | disallow parsing errors in `<template>`. |
-|  | [no-reservered-keys](./docs/rules/no-reservered-keys.md) | Prevent overwrite reserved keys. |
-|  | [no-shared-component-data](./docs/rules/no-shared-component-data.md) | Enforces component's data property to be a function. |
-|  | [no-template-key](./docs/rules/no-template-key.md) | disallow `key` attribute on `<template>`. |
-|  | [require-render-return](./docs/rules/require-render-return.md) | Enforces render function to always return value. |
-|  | [return-in-computed-property](./docs/rules/return-in-computed-property.md) | Enforces that a return statement is present in computed property. |
+| :white_check_mark: | [jsx-uses-vars](./docs/rules/jsx-uses-vars.md) | Prevent variables used in JSX to be marked as unused |
+
+### Deprecated
+
+> - :warning: We're going to remove deprecated rules in the next major release. Please migrate to successor/new rules.
+> - :innocent: We don't fix bugs which are in deprecated rules since we don't have enough resources.
+
+| Rule ID | Replaced by |
+|:--------|:------------|
+| [html-no-self-closing](./rules/html-no-self-closing.md) | (no replacement) |
+| [no-invalid-template-root](./rules/no-invalid-template-root.md) | [valid-template-root](./rules/valid-template-root.md) |
+| [no-invalid-v-bind](./rules/no-invalid-v-bind.md) | [valid-v-bind](./rules/valid-v-bind.md) |
+| [no-invalid-v-cloak](./rules/no-invalid-v-cloak.md) | [valid-v-cloak](./rules/valid-v-cloak.md) |
+| [no-invalid-v-else-if](./rules/no-invalid-v-else-if.md) | [valid-v-else-if](./rules/valid-v-else-if.md) |
+| [no-invalid-v-else](./rules/no-invalid-v-else.md) | [valid-v-else](./rules/valid-v-else.md) |
+| [no-invalid-v-for](./rules/no-invalid-v-for.md) | [valid-v-for](./rules/valid-v-for.md) |
+| [no-invalid-v-html](./rules/no-invalid-v-html.md) | [valid-v-html](./rules/valid-v-html.md) |
+| [no-invalid-v-if](./rules/no-invalid-v-if.md) | [valid-v-if](./rules/valid-v-if.md) |
+| [no-invalid-v-model](./rules/no-invalid-v-model.md) | [valid-v-model](./rules/valid-v-model.md) |
+| [no-invalid-v-on](./rules/no-invalid-v-on.md) | [valid-v-on](./rules/valid-v-on.md) |
+| [no-invalid-v-once](./rules/no-invalid-v-once.md) | [valid-v-once](./rules/valid-v-once.md) |
+| [no-invalid-v-pre](./rules/no-invalid-v-pre.md) | [valid-v-pre](./rules/valid-v-pre.md) |
+| [no-invalid-v-show](./rules/no-invalid-v-show.md) | [valid-v-show](./rules/valid-v-show.md) |
+| [no-invalid-v-text](./rules/no-invalid-v-text.md) | [valid-v-text](./rules/valid-v-text.md) |
 
 <!--RULES_TABLE_END-->
 

docs/rules/valid-template-root.md

@@ -0,0 +1,64 @@
+# Enforce valid template root (valid-root-element)
+
+This rule checks whether every template root is valid.
+
+## :book: Rule Details
+
+This rule reports the template root in the following cases:
+
+- The root is nothing. E.g. `<template></template>`.
+- The root is text. E.g. `<template>hello</template>`.
+- The root is multiple elements. E.g. `<template><div>one</div><div>two</div></template>`.
+- The root element has `v-for` directives. E.g. `<template><div v-for="x in list">{{x}}</div></template>`.
+- The root element is `<template>` or `<slot>` elements. E.g. `<template><template>hello</template></template>`.
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<template>
+</template>
+```
+
+```html
+<template>
+    <div>hello</div>
+    <div>hello</div>
+</template>
+```
+
+```html
+<template>
+    abc
+</template>
+```
+
+```html
+<template>
+    <div v-for="x in list"></div>
+</template>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template>
+    <div>abc</div>
+</template>
+```
+
+```html
+<template>
+    <div v-if="foo"></div>
+</template>
+```
+
+```html
+<template>
+    <div v-if="foo">abc</div>
+    <div v-else>def</div>
+</template>
+```
+
+## :wrench: Options
+
+Nothing.

docs/rules/valid-v-bind.md

@@ -0,0 +1,50 @@
+# Enforce valid `v-bind` directives (valid-v-bind)
+
+This rule checks whether every `v-bind` directive is valid.
+
+## :book: Rule Details
+
+This rule reports `v-bind` directives in the following cases:
+
+- The directive does not have that attribute value. E.g. `<div v-bind:aaa></div>`
+- The directive has invalid modifiers. E.g. `<div v-bind:aaa.bbb="ccc"></div>`
+
+This rule does not report `v-bind` directives which do not have their argument (E.g. `<div v-bind="aaa"></div>`) because it's valid if the attribute value is an object.
+
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+
+:-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>
+```
+
+:+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>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related rules
+
+- [no-parsing-error]
+
+
+[no-parsing-error]: no-parsing-error.md

docs/rules/valid-v-cloak.md

@@ -0,0 +1,37 @@
+# Enforce valid `v-cloak` directives (valid-v-cloak)
+
+This rule checks whether every `v-cloak` directive is valid.
+
+## :book: Rule Details
+
+This rule reports `v-cloak` directives in the following cases:
+
+- The directive has that argument. E.g. `<div v-cloak:aaa></div>`
+- The directive has that modifier. E.g. `<div v-cloak.bbb></div>`
+- The directive has that attribute value. E.g. `<div v-cloak="ccc"></div>`
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<template>
+    <div>
+        <div v-cloak:aaa></div>
+        <div v-cloak.bbb></div>
+        <div v-cloak="ccc"></div>
+    </div>
+</template>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template>
+    <div>
+        <div v-cloak></div>
+    </div>
+</template>
+```
+
+## :wrench: Options
+
+Nothing.

docs/rules/valid-v-else-if.md

@@ -0,0 +1,53 @@
+# Enforce valid `v-else-if` directives (valid-v-else-if)
+
+This rule checks whether every `v-else-if` directive is valid.
+
+## :book: Rule Details
+
+This rule reports `v-else-if` directives in the following cases:
+
+- The directive has that argument. E.g. `<div v-if="foo"></div><div v-else-if:aaa="bar"></div>`
+- The directive has that modifier. E.g. `<div v-if="foo"></div><div v-else-if.bbb="bar"></div>`
+- The directive does not have that attribute value. E.g. `<div v-if="foo"></div><div v-else-if></div>`
+- The directive is on the elements that the previous element don't have `v-if`/`v-else-if` directives. E.g. `<div v-else-if="bar"></div>`
+- The directive is on the elements which have `v-if`/`v-else` directives. E.g. `<div v-if="foo" v-else-if="bar"></div>`
+
+This rule does not check syntax errors in directives because it's checked by [no-parsing-error] rule.
+
+:-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>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template>
+    <div>
+        <div v-if="foo"></div>
+        <div v-else-if="bar"></div>
+    </div>
+</template>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related rules
+
+- [valid-v-if]
+- [valid-v-else]
+- [no-parsing-error]
+
+
+[valid-v-if]:   valid-v-if.md
+[valid-v-else]: valid-v-else.md
+[no-parsing-error]:   no-parsing-error.md

docs/rules/valid-v-else.md

@@ -0,0 +1,51 @@
+# Enforce valid `v-else` directives (valid-v-else)
+
+This rule checks whether every `v-else` directive is valid.
+
+## :book: Rule Details
+
+This rule reports `v-else` directives in the following cases:
+
+- The directive has that argument. E.g. `<div v-if="foo"></div><div v-else:aaa></div>`
+- The directive has that modifier. E.g. `<div v-if="foo"></div><div v-else.bbb></div>`
+- The directive has that attribute value. E.g. `<div v-if="foo"></div><div v-else="bar"></div>`
+- The directive is on the elements that the previous element don't have `v-if`/`v-if-else` directives. E.g. `<div v-else></div>`
+- The directive is on the elements which have `v-if`/`v-if-else` directives. E.g. `<div v-if="foo" v-else></div>`
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<template>
+    <div>
+        <div v-else="foo"></div>
+        <div v-else:aaa></div>
+        <div v-else.bbb></div>
+    </div>
+</template>
+```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template>
+    <div>
+        <div v-if="foo"></div>
+        <div v-else></div>
+    </div>
+</template>
+```
+
+## :wrench: Options
+
+Nothing.
+
+## :couple: Related rules
+
+- [valid-v-if]
+- [valid-v-else-if]
+- [no-parsing-error]
+
+
+[valid-v-if]:       valid-v-if.md
+[valid-v-else-if]:  valid-v-else-if.md
+[no-parsing-error]:      no-parsing-error.md