Merge branch 'master' into no-extra-space-between-attributes

Author: armano2

README.md

@@ -31,20 +31,48 @@ Create `.eslintrc.*` file to configure rules. See also: [http://eslint.org/docs/
 
 Example **.eslintrc.js**:
 
-```javascript
+```js
 module.exports = {
   extends: [
     'eslint:recommended',
     'plugin:vue/recommended' // or 'plugin:vue/base'
   ],
   rules: {
     // override/add rules' settings here
-    'vue/no-invalid-v-if': 'error'
+    'vue/valid-v-if': 'error'
   }
 }
 ```
 
-## ⚙ Configs
+### Attention
+
+All component-related rules are being applied to code that passes any of the following checks:
+
+* `Vue.component()` expression
+* `export default {}` in `.vue` or `.jsx` file
+
+If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment `// @vue/component` that marks object in the next line as a Vue component in any file, e.g.:
+
+```js
+// @vue/component
+const CustomComponent = {
+  name: 'custom-component',
+  template: '<div></div>'
+}
+```
+```js
+Vue.component('AsyncComponent', (resolve, reject) => {
+  setTimeout(() => {
+    // @vue/component
+    resolve({
+      name: 'async-component',
+      template: '<div></div>'
+    })
+  }, 500)
+})
+```
+
+## :gear: Configs
 
 This plugin provides two predefined configs:
 - `plugin:vue/base` - contains necessary settings for this plugin to work properly
@@ -58,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. |
@@ -90,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/html-self-closing.md

@@ -0,0 +1,67 @@
+# Enforce self-closing style (html-self-closing)
+
+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)
+
+Self-closing is simple and shorter, but it's not supported in raw HTML.
+This rule helps you to unify the self-closing style.
+
+## Rule Details
+
+This rule has options which specify self-closing style for each context.
+
+```json
+{
+    "html-self-closing": ["error", {
+        "html": {
+            "normal": "never",
+            "void": "never",
+            "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.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.
+
+Every option can be set to one of the following values:
+
+- `"always"` ... Require self-closing at elements which don't have their content.
+- `"never"` ... Disallow self-closing.
+- `"any"` ... Don't enforce self-closing style.
+
+----
+
+:-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>
+```
+
+:+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>
+```

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.