Merge remote-tracking branch 'origin/master' into vuepress

# Conflicts:
#	README.md

Author: mysticatea

README.md

@@ -32,6 +32,30 @@ Contributing is welcome!
 
 See https://vuejs.github.io/eslint-plugin-vue/developer-guide/
 
+### Working with rules
+
+Before you start writing new rule, please read the [official ESLint guide](https://eslint.org/docs/developer-guide/working-with-rules).
+
+Next in order to get an idea how does the AST of the code that you want to check looks like, you can use one of the following applications:
+- [astexplorer.net](http://astexplorer.net/) - best tool to inspect ASTs, but it doesn't support Vue templates yet
+- [ast.js.org](https://ast.js.org/) - not fully featured, but supports Vue templates syntax
+
+Since single file components in Vue are not plain JavaScript, we can't use the default parser, and we had to introduce additional one: `vue-eslint-parser`, that generates enhanced AST with nodes that represent specific parts of the template syntax, as well as what's inside the `<script>` tag.
+
+To know more about certain nodes in produced ASTs, go here:
+- [ESTree docs](https://github.com/estree/estree)
+- [vue-eslint-parser AST docs](https://github.com/mysticatea/vue-eslint-parser/blob/master/docs/ast.md)
+
+The `vue-eslint-parser` provides few useful parser services, to help traverse the produced AST and access tokens of the template:
+- `context.parserServices.defineTemplateBodyVisitor(visitor, scriptVisitor)`
+- `context.parserServices.getTemplateBodyTokenStore()`
+
+Check out an [example rule](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/mustache-interpolation-spacing.js) to get a better understanding of how these work.
+
+Please be aware that regarding what kind of code examples you'll write in tests, you'll have to accordingly setup the parser in `RuleTester` (you can do it on per test case basis though). [See an example here](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/attribute-hyphenation.js#L19)
+
+If you'll stuck, remember there are plenty of rules you can learn from already, and if you can't find the right solution - don't hesitate to reach out in issues. We're happy to help!
+
 ## :lock: License
 
 See the [LICENSE](LICENSE) file for license rights and limitations (MIT).

docs/rules/attributes-order.md

@@ -90,7 +90,16 @@ Specify custom order of attribute groups
 :+1: Examples of **correct** code with custom order`:
 
 ```html
-<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'TWO_WAY_BINDING', 'OTHER_DIRECTIVES', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
+<!-- 'vue/attributes-order': [2, { order: ['DEFINITION', 'LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', ['BINDING', 'OTHER_ATTR'], 'EVENTS', 'CONTENT'] }] -->
+<div
+  is="header"
+  prop-one="prop"
+  :prop-two="prop">
+</div>
+```
+
+```html
+<!-- 'vue/attributes-order': [2, { order: ['LIST_RENDERING', 'CONDITIONALS', 'RENDER_MODIFIERS', 'GLOBAL', 'UNIQUE', 'BINDING', 'OTHER_ATTR', 'EVENTS', 'CONTENT', 'DEFINITION'] }] -->
 <div
   prop-one="prop"
   prop-two="prop"

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

@@ -0,0 +1,73 @@
+# enforce specific casing for the component naming style in template (vue/component-name-in-template-casing)
+
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+Define a style for the component name in template casing for consistency purposes.
+
+## :book: Rule Details
+
+:+1: Examples of **correct** code for `PascalCase`:
+
+```html
+<template>
+  <TheComponent />
+</template>
+```
+
+:-1: Examples of **incorrect** code for `PascalCase`:
+
+```html
+<template>
+  <the-component />
+  <theComponent />
+  <The-component />
+</template>
+```
+
+:+1: Examples of **correct** code for `kebab-case`:
+
+```html
+<template>
+  <the-component />
+</template>
+```
+
+:-1: Examples of **incorrect** code for `kebab-case`:
+
+```html
+<template>
+  <TheComponent />
+  <theComponent />
+  <Thecomponent />
+  <The-component />
+</template>
+```
+
+## :wrench: Options
+
+Default casing is set to `PascalCase`.
+
+```json
+  "vue/component-name-in-template-casing": ["error",
+    "PascalCase|kebab-case",
+    {
+      "ignores": []
+    }
+  ]
+```
+
+- `ignores` (`string[]`) ... The element name to ignore. Sets the element name to allow. For example, a custom element or a non-Vue component.
+
+
+:+1: Examples of **correct** code for `{ignores: ["custom-element"]}`:
+
+```html
+<template>
+  <custom-element></custom-element>
+  <TheComponent/>
+</template>
+```
+
+## Related links
+
+- [Style guide - Component name casing in templates](https://vuejs.org/v2/style-guide/#Component-name-casing-in-templates-strongly-recommended)

docs/rules/html-closing-bracket-newline.md

@@ -1,5 +1,6 @@
 # require or disallow a line break before tag's closing brackets (vue/html-closing-bracket-newline)
 
+- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 People have own preference about the ___location of closing brackets.
@@ -24,7 +25,7 @@ This rule enforces a line break (or no line break) before tag's closing brackets
 {
     "vue/html-closing-bracket-newline": ["error", {
         "singleline": "never",
-        "multiline": "never"
+        "multiline": "always"
     }]
 }
 ```
@@ -33,65 +34,55 @@ This rule enforces a line break (or no line break) before tag's closing brackets
     - `"never"` ... disallow line breaks before the closing bracket. This is the default.
     - `"always"` ... require one line break before the closing bracket.
 - `multiline` ... the configuration for multiline elements. It's a multiline element if the last attribute is not on the same line of the opening bracket.
-    - `"never"` ... disallow line breaks before the closing bracket. This is the default.
-    - `"always"` ... require one line break before the closing bracket.
+    - `"never"` ... disallow line breaks before the closing bracket.
+    - `"always"` ... require one line break before the closing bracket. This is the default.
 
 Plus, you can use [`vue/html-indent`](./html-indent.md) rule to enforce indent-level of the closing brackets.
 
 :-1: Examples of **incorrect** code for this rule:
 
 ```html
-/*eslint html-closing-bracket-newline: "error"*/
+<!-- eslint html-closing-bracket-newline: "error" -->
 
 <div id="foo" class="bar"
 >
+
 <div
     id="foo"
-    class="bar"
->
-<div
-    id="foo"
-    class="bar"
-    >
+    class="bar">
 ```
 
 :+1: Examples of **correct** code for this rule:
 
 ```html
-/*eslint html-closing-bracket-newline: "error"*/
+<!-- eslint html-closing-bracket-newline: "error" -->
 
 <div id="foo" class="bar">
 <div
     id="foo"
-    class="bar">
+    class="bar"
+>
 ```
 
-:-1: Examples of **incorrect** code for `{ "multiline": "always" }`:
+:-1: Examples of **incorrect** code for `{ "multiline": "never" }`:
 
 ```html
-/*eslint html-closing-bracket-newline: ["error", { multiline: always }]*/
+<!-- eslint html-closing-bracket-newline: ["error", { multiline: never }] -->
 
-<div id="foo" class="bar"
->
 <div
     id="foo"
-    class="bar">
+    class="bar"
+>
 ```
 
-:+1: Examples of **correct** code for `{ "multiline": "always" }`:
+:+1: Examples of **correct** code for `{ "multiline": "never" }`:
 
 ```html
-/*eslint html-closing-bracket-newline: ["error", { multiline: always }]*/
+<!-- html-closing-bracket-newline: ["error", { multiline: never }] -->
 
-<div id="foo" class="bar">
 <div
     id="foo"
-    class="bar"
->
-<div
-    id="foo"
-    class="bar"
-    >
+    class="bar">
 ```
 
 ## :mag: Implementation

docs/rules/html-closing-bracket-spacing.md

@@ -1,5 +1,6 @@
 # require or disallow a space before tag's closing brackets (vue/html-closing-bracket-spacing)
 
+- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 This rule enforces consistent spacing style before closing brackets `>` of tags.

docs/rules/no-confusing-v-for-v-if.md

@@ -1,6 +1,7 @@
 # disallow confusing `v-for` and `v-if` on the same element (vue/no-confusing-v-for-v-if)
 
 - :gear: This rule is included in `"plugin:vue/recommended"`.
+- :warning: This rule was **deprecated** and replaced by [vue/no-use-v-if-with-v-for](no-use-v-if-with-v-for.md) rule.
 
 > When they exist on the same node, `v-for` has a higher priority than `v-if`. That means the `v-if` will be run on each iteration of the loop separately.
 >

docs/rules/no-template-shadow.md

@@ -0,0 +1,58 @@
+# disallow variable declarations from shadowing variables declared in the outer scope (vue/no-template-shadow)
+
+- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+
+`no-template-shadow` should report variable definitions of v-for directives or scope attributes if those shadows the variables in parent scopes.
+
+## :book: Rule Details
+
+This rule aims to eliminate shadowed variable declarations of v-for directives or scope attributes.
+
+:-1: Examples of **incorrect** code for this rule:
+
+```html
+<template>
+   <div>
+     <div v-for="i in 5">
+       <div v-for="i in 10"></div>
+     </div>
+   </div>
+ </template>
+ ```
+
+ ```html
+<template>
+   <div>
+     <div v-for="i in 5"></div>
+   </div>
+ </template>
+<script>
+  export default {
+    data () {
+      return {
+        i: 10
+      }
+    }
+  }
+</script>
+ ```
+
+:+1: Examples of **correct** code for this rule:
+
+```html
+<template>
+  <div v-for="i in 5"></div>
+  <div v-for="i in 5"></div>
+</template>
+<script>
+  export default {
+    computed: {
+      f () { }
+    }
+  }
+</script>
+```
+
+## :wrench: Options
+
+Nothing.

docs/rules/no-use-v-if-with-v-for.md

@@ -1,5 +1,7 @@
 # disallow use v-if on the same element as v-for (vue/no-use-v-if-with-v-for)
 
+- :gear: This rule is included in all of `"plugin:vue/essential"`, `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+
 > Never use `v-if` on the same element as `v-for`.
 >
 > There are two common cases where this can be tempting:

docs/rules/no-v-html.md

@@ -1,5 +1,7 @@
 # disallow use of v-html to prevent XSS attack (vue/no-v-html)
 
+- :gear: This rule is included in `"plugin:vue/recommended"`.
+
 This rule reports use of `v-html` directive in order to reduce the risk of injecting potentially unsafe / unescaped html into the browser leading to Cross Side Scripting (XSS) attacks.
 
 ## :book: Rule Details

docs/rules/prop-name-casing.md

@@ -1,5 +1,6 @@
 # enforce specific casing for the Prop name in Vue components (vue/prop-name-casing)
 
+- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 - :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
 
 This rule would enforce proper casing of props in vue components(camelCase).