From 98dbf8aeaa4999ee3d09eac133139df6adcc3e29 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Wed, 3 Jan 2018 00:36:02 +0100
Subject: [PATCH 01/17] Add Vue.extend support, add missing info about
 Vue.mixin check in readme

---
 README.md                        | 2 ++
 lib/utils/index.js               | 2 +-
 tests/lib/utils/vue-component.js | 6 ++++++
 3 files changed, 9 insertions(+), 1 deletion(-)

diff --git a/README.md b/README.md
index d6b4d7389..26d89faf6 100644
--- a/README.md
+++ b/README.md
@@ -48,6 +48,8 @@ module.exports = {
 All component-related rules are being applied to code that passes any of the following checks:
 
 * `Vue.component()` expression
+* `Vue.extend()` expression
+* `Vue.mixin()` expression
 * `export default {}` in `.vue` or `.jsx` file
 
 If you however want to take advantage of our rules in any of your custom objects that are Vue components, you might need to use special comment `// @vue/component` that marks object in the next line as a Vue component in any file, e.g.:
diff --git a/lib/utils/index.js b/lib/utils/index.js
index 4667c437d..4f03abd23 100644
--- a/lib/utils/index.js
+++ b/lib/utils/index.js
@@ -384,7 +384,7 @@ module.exports = {
       callee.object.type === 'Identifier' &&
       callee.object.name === 'Vue' &&
       callee.property.type === 'Identifier' &&
-      (callee.property.name === 'component' || callee.property.name === 'mixin') &&
+      ['component', 'mixin', 'extend'].indexOf(callee.property.name) > -1 &&
       node.arguments.length &&
       node.arguments.slice(-1)[0].type === 'ObjectExpression'
 
diff --git a/tests/lib/utils/vue-component.js b/tests/lib/utils/vue-component.js
index 0dd2d0cf3..87b8738af 100644
--- a/tests/lib/utils/vue-component.js
+++ b/tests/lib/utils/vue-component.js
@@ -126,6 +126,12 @@ function invalidTests (ext) {
       parserOptions,
       errors: [makeError(1)]
     },
+    {
+      filename: `test.${ext}`,
+      code: `Vue.extend({})`,
+      parserOptions,
+      errors: [makeError(1)]
+    },
     {
       filename: `test.${ext}`,
       code: `

From 7c4a1d227a481928a9419828c19882d9ba930790 Mon Sep 17 00:00:00 2001
From: Sam Turrell <sam@samturrell.co.uk>
Date: Thu, 1 Feb 2018 09:15:12 +0000
Subject: [PATCH 02/17] Docs: fixes wording in docs (#372)

---
 docs/rules/no-multi-spaces.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/rules/no-multi-spaces.md b/docs/rules/no-multi-spaces.md
index 196bee568..d68fe02bb 100644
--- a/docs/rules/no-multi-spaces.md
+++ b/docs/rules/no-multi-spaces.md
@@ -5,7 +5,7 @@
 
 The `--fix` option on the command line can automatically fix some of the problems reported by this rule.
 
-This rule aims to remove multiple spaces in a row between attributes witch are not used for indentation.
+This rule aims to remove multiple spaces in a row between attributes which are not used for indentation.
 
 ## Rule Details
 

From cd22a28870177732af3b04e27fc575b0b7616f85 Mon Sep 17 00:00:00 2001
From: Toru Nagashima <star.ctor@gmail.com>
Date: Fri, 16 Feb 2018 11:10:44 +0900
Subject: [PATCH 03/17] Fix: fix script-indent to prevent removing <script> tag
 (fixes #367) (#374)

---
 lib/utils/indent-common.js                           | 10 +++++++++-
 tests/fixtures/script-indent/no-linebreak-script.vue |  3 +++
 2 files changed, 12 insertions(+), 1 deletion(-)
 create mode 100644 tests/fixtures/script-indent/no-linebreak-script.vue

diff --git a/lib/utils/indent-common.js b/lib/utils/indent-common.js
index c8719a98a..1b93f2069 100644
--- a/lib/utils/indent-common.js
+++ b/lib/utils/indent-common.js
@@ -631,8 +631,16 @@ module.exports.defineVisitor = function create (context, tokenStore, defaultOpti
    */
   function validateCore (token, expectedIndent, optionalExpectedIndent) {
     const line = token.loc.start.line
-    const actualIndent = token.loc.start.column
     const indentText = getIndentText(token)
+
+    // If there is no line terminator after the `<script>` start tag,
+    // `indentText` contains non-whitespace characters.
+    // In that case, do nothing in order to prevent removing the `<script>` tag.
+    if (indentText.trim() !== '') {
+      return
+    }
+
+    const actualIndent = token.loc.start.column
     const unit = (options.indentChar === '\t' ? 'tab' : 'space')
 
     for (let i = 0; i < indentText.length; ++i) {
diff --git a/tests/fixtures/script-indent/no-linebreak-script.vue b/tests/fixtures/script-indent/no-linebreak-script.vue
new file mode 100644
index 000000000..b8555f2df
--- /dev/null
+++ b/tests/fixtures/script-indent/no-linebreak-script.vue
@@ -0,0 +1,3 @@
+<!--{}-->
+<script>var a
+</script>

From ee5cc0a49f1abe7c2dd83e15e8dd962d26d36791 Mon Sep 17 00:00:00 2001
From: ota <otameshiyo23@gmail.com>
Date: Fri, 16 Feb 2018 11:11:21 +0900
Subject: [PATCH 04/17]  [Update] Make `vue/max-attributes-per-line` fixable
 (#380)

* [Update] Make `vue/max-attributes-per-line` fixable

* [fix] bug and style

* [fix] Switch indent calculation method with node and attribute

* [fix] don't handle indentation

* [add] autofix test max-attributes-per-line.js
---
 lib/rules/max-attributes-per-line.js       |  7 ++--
 tests/lib/rules/max-attributes-per-line.js | 41 ++++++++++++++++++++++
 2 files changed, 45 insertions(+), 3 deletions(-)

diff --git a/lib/rules/max-attributes-per-line.js b/lib/rules/max-attributes-per-line.js
index 9a54fd1e0..0d05f0bea 100644
--- a/lib/rules/max-attributes-per-line.js
+++ b/lib/rules/max-attributes-per-line.js
@@ -16,7 +16,7 @@ module.exports = {
       category: 'strongly-recommended',
       url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.2.2/docs/rules/max-attributes-per-line.md'
     },
-    fixable: null,
+    fixable: 'whitespace', // or "code" or "whitespace"
     schema: [
       {
         type: 'object',
@@ -129,14 +129,15 @@ module.exports = {
     }
 
     function showErrors (attributes, node) {
-      attributes.forEach((prop) => {
+      attributes.forEach((prop, i) => {
         context.report({
           node: prop,
           loc: prop.loc,
           message: 'Attribute "{{propName}}" should be on a new line.',
           data: {
             propName: prop.key.name
-          }
+          },
+          fix: i === 0 ? (fixer) => fixer.insertTextBefore(prop, '\n') : undefined
         })
       })
     }
diff --git a/tests/lib/rules/max-attributes-per-line.js b/tests/lib/rules/max-attributes-per-line.js
index 773f1b661..0e8ab915f 100644
--- a/tests/lib/rules/max-attributes-per-line.js
+++ b/tests/lib/rules/max-attributes-per-line.js
@@ -91,6 +91,8 @@ ruleTester.run('max-attributes-per-line', rule, {
   invalid: [
     {
       code: `<template><component name="John Doe" age="30"></component></template>`,
+      output: `<template><component name="John Doe" 
+age="30"></component></template>`,
       errors: ['Attribute "age" should be on a new line.']
     },
     {
@@ -99,6 +101,12 @@ ruleTester.run('max-attributes-per-line', rule, {
         age="30">
         </component>
       </template>`,
+      output: `<template><component 
+job="Vet"
+        name="John Doe"
+        age="30">
+        </component>
+      </template>`,
       errors: [{
         message: 'Attribute "job" should be on a new line.',
         type: 'VAttribute',
@@ -108,6 +116,8 @@ ruleTester.run('max-attributes-per-line', rule, {
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: { max: 2 }}],
+      output: `<template><component name="John Doe" age="30" 
+job="Vet"></component></template>`,
       errors: [{
         message: 'Attribute "job" should be on a new line.',
         type: 'VAttribute',
@@ -117,6 +127,8 @@ ruleTester.run('max-attributes-per-line', rule, {
     {
       code: `<template><component name="John Doe" age="30" job="Vet"></component></template>`,
       options: [{ singleline: 1, multiline: { max: 1, allowFirstLine: false }}],
+      output: `<template><component name="John Doe" 
+age="30" job="Vet"></component></template>`,
       errors: [{
         message: 'Attribute "age" should be on a new line.',
         type: 'VAttribute',
@@ -133,6 +145,11 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
+      output: `<template><component 
+name="John Doe"
+        age="30">
+        </component>
+      </template>`,
       errors: [{
         message: 'Attribute "name" should be on a new line.',
         type: 'VAttribute',
@@ -146,6 +163,12 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 1, allowFirstLine: false }}],
+      output: `<template><component
+        name="John Doe" 
+age="30"
+        job="Vet">
+        </component>
+      </template>`,
       errors: [{
         message: 'Attribute "age" should be on a new line.',
         type: 'VAttribute',
@@ -159,6 +182,12 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: 1 }],
+      output: `<template><component
+        name="John Doe" 
+age="30"
+        job="Vet">
+        </component>
+      </template>`,
       errors: [{
         message: 'Attribute "age" should be on a new line.',
         type: 'VAttribute',
@@ -172,6 +201,12 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
+      output: `<template><component
+        name="John Doe" age="30"
+        job="Vet" pet="dog" 
+petname="Snoopy">
+        </component>
+      </template>`,
       errors: [{
         message: 'Attribute "petname" should be on a new line.',
         type: 'VAttribute',
@@ -185,6 +220,12 @@ ruleTester.run('max-attributes-per-line', rule, {
         </component>
       </template>`,
       options: [{ singleline: 3, multiline: { max: 2, allowFirstLine: false }}],
+      output: `<template><component
+        name="John Doe" age="30"
+        job="Vet" pet="dog" 
+petname="Snoopy" extra="foo">
+        </component>
+      </template>`,
       errors: [{
         message: 'Attribute "petname" should be on a new line.',
         type: 'VAttribute',

From 6861c818dfac569516d777ecdd34c51895a7c886 Mon Sep 17 00:00:00 2001
From: ota <otameshiyo23@gmail.com>
Date: Sat, 17 Feb 2018 17:49:18 +0900
Subject: [PATCH 05/17] Update: make `vue/order-in-components` fixable (#381)

* [Update] Make `vue/order-in-components` fixable

This Commit makes `vue/order-in-components` fixable.
In case of `The "A" property should be above the "B" property` error, autofix will move A before B

* [fix] fail test at eslint@3.18.0

* [fix] If there is a possibility of a side effect, don't autofix

* [fix] failed test at node v4

* [update] use Traverser

* [fix] failed test eslint@3.18.0

* [fix] I used `output: null` to specify "not fix"
---
 lib/rules/order-in-components.js       | 102 +++++-
 tests/lib/rules/order-in-components.js | 429 +++++++++++++++++++++++++
 2 files changed, 530 insertions(+), 1 deletion(-)

diff --git a/lib/rules/order-in-components.js b/lib/rules/order-in-components.js
index 6bd0fb22a..3d9a21af2 100644
--- a/lib/rules/order-in-components.js
+++ b/lib/rules/order-in-components.js
@@ -5,6 +5,7 @@
 'use strict'
 
 const utils = require('../utils')
+const Traverser = require('eslint/lib/util/traverser')
 
 const defaultOrder = [
   'el',
@@ -56,6 +57,75 @@ function getOrderMap (order) {
   return orderMap
 }
 
+function isComma (node) {
+  return node.type === 'Punctuator' && node.value === ','
+}
+
+const ARITHMETIC_OPERATORS = ['+', '-', '*', '/', '%', '**']
+const BITWISE_OPERATORS = ['&', '|', '^', '~', '<<', '>>', '>>>']
+const COMPARISON_OPERATORS = ['==', '!=', '===', '!==', '>', '>=', '<', '<=']
+const RELATIONAL_OPERATORS = ['in', 'instanceof']
+const ALL_BINARY_OPERATORS = [].concat(
+  ARITHMETIC_OPERATORS,
+  BITWISE_OPERATORS,
+  COMPARISON_OPERATORS,
+  RELATIONAL_OPERATORS
+)
+const LOGICAL_OPERATORS = ['&&', '||']
+
+/*
+ * Result `true` if the node is sure that there are no side effects
+ *
+ * Currently known side effects types
+ *
+ * node.type === 'CallExpression'
+ * node.type === 'NewExpression'
+ * node.type === 'UpdateExpression'
+ * node.type === 'AssignmentExpression'
+ * node.type === 'TaggedTemplateExpression'
+ * node.type === 'UnaryExpression' && node.operator === 'delete'
+ *
+ * @param  {ASTNode} node target node
+ * @param  {Object} visitorKeys sourceCode.visitorKey
+ * @returns {Boolean} no side effects
+ */
+function isNotSideEffectsNode (node, visitorKeys) {
+  let result = true
+  new Traverser().traverse(node, {
+    visitorKeys,
+    enter (node, parent) {
+      if (
+        node.type === 'FunctionExpression' ||
+        node.type === 'Identifier' ||
+        node.type === 'Literal' ||
+        // es2015
+        node.type === 'ArrowFunctionExpression' ||
+        node.type === 'TemplateElement'
+      ) {
+        // no side effects node
+        this.skip()
+      } else if (
+        node.type !== 'Property' &&
+        node.type !== 'ObjectExpression' &&
+        node.type !== 'ArrayExpression' &&
+        (node.type !== 'UnaryExpression' || ['!', '~', '+', '-', 'typeof'].indexOf(node.operator) < 0) &&
+        (node.type !== 'BinaryExpression' || ALL_BINARY_OPERATORS.indexOf(node.operator) < 0) &&
+        (node.type !== 'LogicalExpression' || LOGICAL_OPERATORS.indexOf(node.operator) < 0) &&
+        node.type !== 'MemberExpression' &&
+        node.type !== 'ConditionalExpression' &&
+        // es2015
+        node.type !== 'SpreadElement' &&
+        node.type !== 'TemplateLiteral'
+      ) {
+        // Can not be sure that a node has no side effects
+        result = false
+        this.break()
+      }
+    }
+  })
+  return result
+}
+
 // ------------------------------------------------------------------------------
 // Rule Definition
 // ------------------------------------------------------------------------------
@@ -67,7 +137,7 @@ module.exports = {
       category: 'recommended',
       url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.2.2/docs/rules/order-in-components.md'
     },
-    fixable: null,
+    fixable: 'code', // null or "code" or "whitespace"
     schema: [
       {
         type: 'object',
@@ -86,6 +156,7 @@ module.exports = {
     const order = options.order || defaultOrder
     const extendedOrder = order.map(property => groups[property] || property)
     const orderMap = getOrderMap(extendedOrder)
+    const sourceCode = context.getSourceCode()
 
     function checkOrder (propertiesNodes, orderMap) {
       const properties = propertiesNodes
@@ -109,6 +180,35 @@ module.exports = {
               name: property.name,
               firstUnorderedPropertyName: firstUnorderedProperty.name,
               line
+            },
+            fix (fixer) {
+              const propertyNode = property.parent
+              const firstUnorderedPropertyNode = firstUnorderedProperty.parent
+              const hasSideEffectsPossibility = propertiesNodes
+                .slice(
+                  propertiesNodes.indexOf(firstUnorderedPropertyNode),
+                  propertiesNodes.indexOf(propertyNode) + 1
+                )
+                .some((property) => !isNotSideEffectsNode(property, sourceCode.visitorKeys))
+              if (hasSideEffectsPossibility) {
+                return undefined
+              }
+              const comma = sourceCode.getTokenAfter(propertyNode)
+              const hasAfterComma = isComma(comma)
+
+              const codeStart = sourceCode.getTokenBefore(propertyNode).range[1] // to include comments
+              const codeEnd = hasAfterComma ? comma.range[1] : propertyNode.range[1]
+
+              const propertyCode = sourceCode.text.slice(codeStart, codeEnd) + (hasAfterComma ? '' : ',')
+              const insertTarget = sourceCode.getTokenBefore(firstUnorderedPropertyNode)
+              // If we can upgrade requirements to `eslint@>4.1.0`, this code can be replaced by:
+              // return [
+              //   fixer.removeRange([codeStart, codeEnd]),
+              //   fixer.insertTextAfter(insertTarget, propertyCode)
+              // ]
+              const insertStart = insertTarget.range[1]
+              const newCode = propertyCode + sourceCode.text.slice(insertStart, codeStart)
+              return fixer.replaceTextRange([insertStart, codeEnd], newCode)
             }
           })
         }
diff --git a/tests/lib/rules/order-in-components.js b/tests/lib/rules/order-in-components.js
index 485015411..2eff407ec 100644
--- a/tests/lib/rules/order-in-components.js
+++ b/tests/lib/rules/order-in-components.js
@@ -144,6 +144,19 @@ ruleTester.run('order-in-components', rule, {
         }
       `,
       parserOptions,
+      output: `
+        export default {
+          name: 'app',
+          props: {
+            propA: Number,
+          },
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+        }
+      `,
       errors: [{
         message: 'The "props" property should be above the "data" property on line 4.',
         line: 9
@@ -170,6 +183,24 @@ ruleTester.run('order-in-components', rule, {
         }
       `,
       parserOptions: { ecmaVersion: 6, sourceType: 'module', ecmaFeatures: { jsx: true }},
+      output: `
+        export default {
+          name: 'app',
+          render (h) {
+            return (
+              <span>{ this.msg }</span>
+            )
+          },
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          props: {
+            propA: Number,
+          },
+        }
+      `,
       errors: [{
         message: 'The "name" property should be above the "render" property on line 3.',
         line: 8
@@ -196,6 +227,18 @@ ruleTester.run('order-in-components', rule, {
         })
       `,
       parserOptions: { ecmaVersion: 6 },
+      output: `
+        Vue.component('smart-list', {
+          name: 'app',
+          components: {},
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          template: '<div></div>'
+        })
+      `,
       errors: [{
         message: 'The "components" property should be above the "data" property on line 4.',
         line: 9
@@ -217,6 +260,19 @@ ruleTester.run('order-in-components', rule, {
         })
       `,
       parserOptions: { ecmaVersion: 6 },
+      output: `
+        const { component } = Vue;
+        component('smart-list', {
+          name: 'app',
+          components: {},
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          template: '<div></div>'
+        })
+      `,
       errors: [{
         message: 'The "components" property should be above the "data" property on line 5.',
         line: 10
@@ -238,6 +294,19 @@ ruleTester.run('order-in-components', rule, {
         })
       `,
       parserOptions: { ecmaVersion: 6 },
+      output: `
+        new Vue({
+          el: '#app',
+          name: 'app',
+          data () {
+            return {
+              msg: 'Welcome to Your Vue.js App'
+            }
+          },
+          components: {},
+          template: '<div></div>'
+        })
+      `,
       errors: [{
         message: 'The "el" property should be above the "name" property on line 3.',
         line: 4
@@ -267,6 +336,24 @@ ruleTester.run('order-in-components', rule, {
         };
       `,
       parserOptions,
+      output: `
+        export default {
+          name: 'burger',
+          data() {
+            return {
+              isActive: false,
+            };
+          },
+          methods: {
+            toggleMenu() {
+              this.isActive = !this.isActive;
+            },
+            closeMenu() {
+              this.isActive = false;
+            }
+          },
+        };
+      `,
       errors: [{
         message: 'The "name" property should be above the "data" property on line 3.',
         line: 16
@@ -283,11 +370,353 @@ ruleTester.run('order-in-components', rule, {
         };
       `,
       parserOptions,
+      output: `
+        export default {
+          data() {
+          },
+          test: 'ok',
+          name: 'burger',
+        };
+      `,
       options: [{ order: ['data', 'test', 'name'] }],
       errors: [{
         message: 'The "test" property should be above the "name" property on line 5.',
         line: 6
       }]
+    },
+    {
+      filename: 'example.vue',
+      code: `
+        export default {
+          /** data provider */
+          data() {
+          },
+          /** name of vue component */
+          name: 'burger'
+        };
+      `,
+      parserOptions,
+      output: `
+        export default {
+          /** name of vue component */
+          name: 'burger',
+          /** data provider */
+          data() {
+          },
+        };
+      `,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 4.',
+        line: 7
+      }]
+    },
+    {
+      filename: 'example.vue',
+      code: `export default {data(){},name:'burger'};`,
+      parserOptions,
+      output: `export default {name:'burger',data(){},};`,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 1.',
+        line: 1
+      }]
+    },
+    {
+      // side-effects CallExpression
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: obj.fn(),
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects NewExpression
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: new MyClass(),
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects UpdateExpression
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: i++,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects AssignmentExpression
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: i = 0,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects TaggedTemplateExpression
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: template\`\${foo}\`,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects key
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          [obj.fn()]: 'test',
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects object deep props
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: {test: obj.fn()},
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects array elements
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: [obj.fn(), 1],
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects call at middle
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: obj.fn().prop,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects delete
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: delete obj.prop,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects within BinaryExpression
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: fn() + a + b,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects within ConditionalExpression
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: a ? fn() : null,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // side-effects within TemplateLiteral
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          test: \`test \${fn()} \${a}\`,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: null,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 6
+      }]
+    },
+    {
+      // without side-effects
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          name: 'burger',
+          test: fn(),
+        };
+      `,
+      parserOptions,
+      output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          test: fn(),
+        };
+      `,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 5
+      }]
+    },
+    {
+      // don't side-effects
+      filename: 'example.vue',
+      code: `
+        export default {
+          data() {
+          },
+          testArray: [1, 2, 3, true, false, 'a', 'b', 'c'],
+          testRegExp: /[a-z]*/,
+          testSpreadElement: [...array],
+          testOperator: (!!(a - b + c * d / e % f)) || (a && b),
+          testArrow: (a) => a,
+          testConditional: a ? b : c,
+          testYield: function* () {},
+          testTemplate: \`a:\${a},b:\${b},c:\${c}.\`,
+          name: 'burger',
+        };
+      `,
+      parserOptions,
+      output: `
+        export default {
+          name: 'burger',
+          data() {
+          },
+          testArray: [1, 2, 3, true, false, 'a', 'b', 'c'],
+          testRegExp: /[a-z]*/,
+          testSpreadElement: [...array],
+          testOperator: (!!(a - b + c * d / e % f)) || (a && b),
+          testArrow: (a) => a,
+          testConditional: a ? b : c,
+          testYield: function* () {},
+          testTemplate: \`a:\${a},b:\${b},c:\${c}.\`,
+        };
+      `,
+      errors: [{
+        message: 'The "name" property should be above the "data" property on line 3.',
+        line: 13
+      }]
     }
   ]
 })

From 2b4798b626c69f659f894a18284eebeba47f6bb7 Mon Sep 17 00:00:00 2001
From: ota <otameshiyo23@gmail.com>
Date: Mon, 19 Feb 2018 23:05:39 +0900
Subject: [PATCH 06/17] [New] Add `vue/component-name-in-template-casing`

---
 .../component-name-in-template-casing.md      |  54 ++++
 lib/configs/strongly-recommended.js           |   1 +
 lib/index.js                                  |   1 +
 .../component-name-in-template-casing.js      |  88 +++++++
 .../component-name-in-template-casing.js      | 234 ++++++++++++++++++
 5 files changed, 378 insertions(+)
 create mode 100644 docs/rules/component-name-in-template-casing.md
 create mode 100644 lib/rules/component-name-in-template-casing.js
 create mode 100644 tests/lib/rules/component-name-in-template-casing.js

diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
new file mode 100644
index 000000000..ed1b1b767
--- /dev/null
+++ b/docs/rules/component-name-in-template-casing.md
@@ -0,0 +1,54 @@
+# enforce specific casing for the component name in tamplates (vue/component-name-in-template-casing)
+
+- :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
+- :wrench: 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.
+
+Define a style for the `component name` in tamplates 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`.
+
+```
+"vue/component-name-in-template-casing": ["error", "PascalCase|kebab-case"]
+```
+
diff --git a/lib/configs/strongly-recommended.js b/lib/configs/strongly-recommended.js
index 993c78d31..308860a47 100644
--- a/lib/configs/strongly-recommended.js
+++ b/lib/configs/strongly-recommended.js
@@ -7,6 +7,7 @@ module.exports = {
   extends: require.resolve('./essential'),
   rules: {
     'vue/attribute-hyphenation': 'error',
+    'vue/component-name-in-template-casing': 'error',
     'vue/html-end-tags': 'error',
     'vue/html-indent': 'error',
     'vue/html-self-closing': 'error',
diff --git a/lib/index.js b/lib/index.js
index b2871f547..f16216f39 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -9,6 +9,7 @@ module.exports = {
   rules: {
     'attribute-hyphenation': require('./rules/attribute-hyphenation'),
     'comment-directive': require('./rules/comment-directive'),
+    'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
     'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
     'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),
     'html-end-tags': require('./rules/html-end-tags'),
diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
new file mode 100644
index 000000000..b2fd1718b
--- /dev/null
+++ b/lib/rules/component-name-in-template-casing.js
@@ -0,0 +1,88 @@
+/**
+ * @author Yosuke Ota
+ * issue https://github.com/vuejs/eslint-plugin-vue/issues/250
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+const allowedCaseOptions = ['PascalCase', 'kebab-case']
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'enforce specific casing for the component name in tamplates',
+      category: 'strongly-recommended',
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.2.2/docs/rules/component-name-in-template-casing.md'
+    },
+    fixable: 'code',
+    schema: [
+      {
+        enum: allowedCaseOptions
+      }
+    ]
+  },
+
+  create (context) {
+    const options = context.options[0]
+    const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'
+    const tokens = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
+    const sourceCode = context.getSourceCode()
+
+    let hasInvalidEOF = false
+
+    return utils.defineTemplateBodyVisitor(context, {
+      'VElement' (node) {
+        if (hasInvalidEOF) {
+          return
+        }
+
+        if (!utils.isCustomComponent(node)) {
+          return
+        }
+
+        const name = node.rawName
+        const casingName = casing.getConverter(caseType)(name)
+        if (casingName !== name) {
+          const startTag = node.startTag
+          const open = tokens.getFirstToken(startTag)
+          context.report({
+            node: open,
+            loc: open.loc,
+            message: 'Component name "{{name}}" is not {{caseType}}.',
+            data: {
+              name,
+              caseType: caseType
+            },
+            fix: fixer => {
+              const endTag = node.endTag
+              if (!endTag) {
+                return fixer.replaceText(open, `<${casingName}`)
+              }
+              // If we can upgrade requirements to `eslint@>4.1.0`, this code can be replaced by:
+              // return [
+              //   fixer.replaceText(open, `<${casingName}`),
+              //   fixer.replaceText(endTag, `</${casingName}>`)
+              // ]
+              const code = `<${casingName}${sourceCode.text.slice(open.range[1], endTag.range[0])}</${casingName}>`
+              return fixer.replaceTextRange([open.range[0], endTag.range[1]], code)
+            }
+          })
+        }
+      }
+    }, {
+      Program (node) {
+        hasInvalidEOF = utils.hasInvalidEOF(node)
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
new file mode 100644
index 000000000..107e100f6
--- /dev/null
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -0,0 +1,234 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/component-name-in-template-casing')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: 'vue-eslint-parser'
+})
+
+tester.run('html-self-closing', rule, {
+  valid: [
+    // default
+    '<template><div/></template>',
+    '<template><img></template>',
+    '<template><TheComponent/></template>',
+    '<template><svg><path/></svg></template>',
+    '<template><math><mspace/></math></template>',
+    '<template><div><slot></slot></div></template>',
+
+    // kebab-case
+    {
+      code: '<template><the-component></the-component></template>',
+      output: null,
+      options: ['kebab-case']
+    },
+    {
+      code: '<template><div/></template>',
+      output: null,
+      options: ['kebab-case']
+    },
+    {
+      code: '<template><img></template>',
+      output: null,
+      options: ['kebab-case']
+    },
+    {
+      code: '<template><svg><path/></svg></template>',
+      output: null,
+      options: ['kebab-case']
+    },
+    {
+      code: '<template><math><mspace/></math></template>',
+      output: null,
+      options: ['kebab-case']
+    },
+    // Invalid EOF
+    '<template><the-component a=">test</the-component></template>',
+    '<template><the-component><!--test</the-component></template>'
+  ],
+  invalid: [
+    {
+      code: `
+<template>
+  <the-component id="id">
+    <!-- comment -->
+  </the-component>
+</template>
+`,
+      output: `
+<template>
+  <TheComponent id="id">
+    <!-- comment -->
+  </TheComponent>
+</template>
+`,
+      errors: ['Component name "the-component" is not PascalCase.']
+    },
+    {
+      code: `
+<template>
+  <the-component id="id"/>
+</template>
+`,
+      output: `
+<template>
+  <TheComponent id="id"/>
+</template>
+`,
+      errors: ['Component name "the-component" is not PascalCase.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent id="id">
+    <!-- comment -->
+  </TheComponent>
+</template>
+`,
+      options: ['kebab-case'],
+      output: `
+<template>
+  <the-component id="id">
+    <!-- comment -->
+  </the-component>
+</template>
+`,
+      errors: ['Component name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent id="id"/>
+</template>
+`,
+      options: ['kebab-case'],
+      output: `
+<template>
+  <the-component id="id"/>
+</template>
+`,
+      errors: ['Component name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <the-component
+    id="id"/>
+</template>
+`,
+      output: `
+<template>
+  <TheComponent
+    id="id"/>
+</template>
+`,
+      errors: ['Component name "the-component" is not PascalCase.']
+    },
+    {
+      code: `
+<template>
+  <the-component/>
+</template>
+`,
+      output: `
+<template>
+  <TheComponent/>
+</template>
+`,
+      errors: ['Component name "the-component" is not PascalCase.']
+    },
+    {
+      code: `
+<template>
+  <the-component></the-component>
+</template>
+`,
+      output: `
+<template>
+  <TheComponent></TheComponent>
+</template>
+`,
+      errors: ['Component name "the-component" is not PascalCase.']
+    },
+    {
+      code: `
+<template>
+  <theComponent/>
+</template>
+`,
+      output: `
+<template>
+  <TheComponent/>
+</template>
+`,
+      errors: ['Component name "theComponent" is not PascalCase.']
+    },
+    {
+      code: `
+<template>
+  <theComponent/>
+</template>
+`,
+      options: ['kebab-case'],
+      output: `
+<template>
+  <the-component/>
+</template>
+`,
+      errors: ['Component name "theComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <The-component/>
+</template>
+`,
+      output: `
+<template>
+  <TheComponent/>
+</template>
+`,
+      errors: ['Component name "The-component" is not PascalCase.']
+    },
+    {
+      code: `
+<template>
+  <The-component/>
+</template>
+`,
+      options: ['kebab-case'],
+      output: `
+<template>
+  <the-component/>
+</template>
+`,
+      errors: ['Component name "The-component" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <Thecomponent/>
+</template>
+`,
+      options: ['kebab-case'],
+      output: `
+<template>
+  <thecomponent/>
+</template>
+`,
+      errors: ['Component name "Thecomponent" is not kebab-case.']
+    }
+  ]
+})

From 3f86365d33f379e9278190c25e3ed0b50349e03d Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Mon, 19 Feb 2018 23:17:54 +0900
Subject: [PATCH 07/17] [update] documents

---
 README.md                                       | 1 +
 docs/rules/component-name-in-template-casing.md | 4 ++--
 lib/rules/component-name-in-template-casing.js  | 5 ++---
 3 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/README.md b/README.md
index 26d89faf6..ace0ad11e 100644
--- a/README.md
+++ b/README.md
@@ -171,6 +171,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 |    | Rule ID | Description |
 |:---|:--------|:------------|
 | :wrench: | [vue/attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | enforce attribute naming style in template |
+| :wrench: | [vue/component-name-in-template-casing](./docs/rules/component-name-in-template-casing.md) | enforce specific casing for the component naming style in template |
 | :wrench: | [vue/html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
 | :wrench: | [vue/html-indent](./docs/rules/html-indent.md) | enforce consistent indentation in `<template>` |
 | :wrench: | [vue/html-self-closing](./docs/rules/html-self-closing.md) | enforce self-closing style |
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index ed1b1b767..962c5efd3 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -1,9 +1,9 @@
-# enforce specific casing for the component name in tamplates (vue/component-name-in-template-casing)
+# enforce specific casing for the component naming style in template (vue/component-name-in-template-casing)
 
 - :gear: This rule is included in `"plugin:vue/strongly-recommended"` and `"plugin:vue/recommended"`.
 - :wrench: 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.
 
-Define a style for the `component name` in tamplates casing for consistency purposes.
+Define a style for the component name in template casing for consistency purposes.
 
 ## :book: Rule Details
 
diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index b2fd1718b..854533489 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -20,9 +20,8 @@ const allowedCaseOptions = ['PascalCase', 'kebab-case']
 module.exports = {
   meta: {
     docs: {
-      description: 'enforce specific casing for the component name in tamplates',
-      category: 'strongly-recommended',
-      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.2.2/docs/rules/component-name-in-template-casing.md'
+      description: 'enforce specific casing for the component naming style in template',
+      category: 'strongly-recommended'
     },
     fixable: 'code',
     schema: [

From 3dd203828ba97176f3b086cbdaf1f17af59dd4f3 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Mon, 19 Feb 2018 23:33:21 +0900
Subject: [PATCH 08/17] [fix] require-meta-docs-url

---
 lib/rules/component-name-in-template-casing.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index 854533489..8ff790309 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -21,7 +21,8 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce specific casing for the component naming style in template',
-      category: 'strongly-recommended'
+      category: 'strongly-recommended',
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.2.2/docs/rules/component-name-in-template-casing.md'
     },
     fixable: 'code',
     schema: [

From e35ca6c2e11472f5bc51bd7c2beac0f2c60b1ba1 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Mon, 19 Feb 2018 23:54:36 +0900
Subject: [PATCH 09/17] [fix] failed tests

---
 tests/lib/rules/component-name-in-template-casing.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index 107e100f6..a78fab1cc 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -18,7 +18,7 @@ const tester = new RuleTester({
   parser: 'vue-eslint-parser'
 })
 
-tester.run('html-self-closing', rule, {
+tester.run('component-name-in-template-casing', rule, {
   valid: [
     // default
     '<template><div/></template>',

From 243e61a8a9bcb3d82b459f764b6f3c9ccb4a875b Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Thu, 22 Feb 2018 09:59:59 +0900
Subject: [PATCH 10/17] [fix] review contents

* Default case to constant. and used it. `const defaultCase = 'PascalCase'`
* `'category'` to `undefined`
* Add empty line for clarity
* I used object shorthand. `caseType: caseType` to `caseType`
---
 lib/rules/component-name-in-template-casing.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index 8ff790309..771a3d5a6 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -12,6 +12,7 @@ const utils = require('../utils')
 const casing = require('../utils/casing')
 
 const allowedCaseOptions = ['PascalCase', 'kebab-case']
+const defaultCase = 'PascalCase'
 
 // ------------------------------------------------------------------------------
 // Rule Definition
@@ -21,7 +22,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce specific casing for the component naming style in template',
-      category: 'strongly-recommended',
+      category: undefined,
       url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.2.2/docs/rules/component-name-in-template-casing.md'
     },
     fixable: 'code',
@@ -34,7 +35,7 @@ module.exports = {
 
   create (context) {
     const options = context.options[0]
-    const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : 'PascalCase'
+    const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : defaultCase
     const tokens = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
     const sourceCode = context.getSourceCode()
 
@@ -55,13 +56,14 @@ module.exports = {
         if (casingName !== name) {
           const startTag = node.startTag
           const open = tokens.getFirstToken(startTag)
+
           context.report({
             node: open,
             loc: open.loc,
             message: 'Component name "{{name}}" is not {{caseType}}.',
             data: {
               name,
-              caseType: caseType
+              caseType
             },
             fix: fixer => {
               const endTag = node.endTag

From de29eb8c885a12740f091a9f9ca4bc732f1b3ecb Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Fri, 23 Feb 2018 22:38:28 +0900
Subject: [PATCH 11/17] [fix] No deletes space and attributes of endTag

---
 .../component-name-in-template-casing.js      |  7 +--
 .../component-name-in-template-casing.js      | 44 +++++++++++++++++++
 2 files changed, 48 insertions(+), 3 deletions(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index 771a3d5a6..c6afc4907 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -70,13 +70,14 @@ module.exports = {
               if (!endTag) {
                 return fixer.replaceText(open, `<${casingName}`)
               }
+              const endTagOpen = tokens.getFirstToken(endTag)
               // If we can upgrade requirements to `eslint@>4.1.0`, this code can be replaced by:
               // return [
               //   fixer.replaceText(open, `<${casingName}`),
-              //   fixer.replaceText(endTag, `</${casingName}>`)
+              //   fixer.replaceText(endTagOpen, `</${casingName}`)
               // ]
-              const code = `<${casingName}${sourceCode.text.slice(open.range[1], endTag.range[0])}</${casingName}>`
-              return fixer.replaceTextRange([open.range[0], endTag.range[1]], code)
+              const code = `<${casingName}${sourceCode.text.slice(open.range[1], endTagOpen.range[0])}</${casingName}`
+              return fixer.replaceTextRange([open.range[0], endTagOpen.range[1]], code)
             }
           })
         }
diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index a78fab1cc..20121a169 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -229,6 +229,50 @@ tester.run('component-name-in-template-casing', rule, {
 </template>
 `,
       errors: ['Component name "Thecomponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent></TheComponent  >
+</template>
+`,
+      options: ['kebab-case'],
+      output: `
+<template>
+  <the-component></the-component  >
+</template>
+`,
+      errors: ['Component name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent></TheComponent
+  >
+</template>
+`,
+      options: ['kebab-case'],
+      output: `
+<template>
+  <the-component></the-component
+  >
+</template>
+`,
+      errors: ['Component name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent></TheComponent end-tag-attr="attr" >
+</template>
+`,
+      options: ['kebab-case'],
+      output: `
+<template>
+  <the-component></the-component end-tag-attr="attr" >
+</template>
+`,
+      errors: ['Component name "TheComponent" is not kebab-case.']
     }
   ]
 })

From fea5dfcb6ad93e509b732109c99548b5eab0df8c Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Fri, 23 Feb 2018 22:48:18 +0900
Subject: [PATCH 12/17] [fix] Remove test unnecessary option

---
 .../component-name-in-template-casing.js      | 21 ++++++++-----------
 1 file changed, 9 insertions(+), 12 deletions(-)

diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index 20121a169..584648048 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -233,46 +233,43 @@ tester.run('component-name-in-template-casing', rule, {
     {
       code: `
 <template>
-  <TheComponent></TheComponent  >
+  <the-component></the-component  >
 </template>
 `,
-      options: ['kebab-case'],
       output: `
 <template>
-  <the-component></the-component  >
+  <TheComponent></TheComponent  >
 </template>
 `,
-      errors: ['Component name "TheComponent" is not kebab-case.']
+      errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
 <template>
-  <TheComponent></TheComponent
+  <the-component></the-component
   >
 </template>
 `,
-      options: ['kebab-case'],
       output: `
 <template>
-  <the-component></the-component
+  <TheComponent></TheComponent
   >
 </template>
 `,
-      errors: ['Component name "TheComponent" is not kebab-case.']
+      errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
 <template>
-  <TheComponent></TheComponent end-tag-attr="attr" >
+  <the-component></the-component end-tag-attr="attr" >
 </template>
 `,
-      options: ['kebab-case'],
       output: `
 <template>
-  <the-component></the-component end-tag-attr="attr" >
+  <TheComponent></TheComponent end-tag-attr="attr" >
 </template>
 `,
-      errors: ['Component name "TheComponent" is not kebab-case.']
+      errors: ['Component name "the-component" is not PascalCase.']
     }
   ]
 })

From 2ce184be6a0099cdb6998fdb68270a332e0d69e8 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Sat, 24 Feb 2018 22:10:51 +0900
Subject: [PATCH 13/17] [fix] lint error caused by merging the master for
 conflict resolution

---
 lib/rules/component-name-in-template-casing.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index c6afc4907..e02f446b1 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -23,7 +23,7 @@ module.exports = {
     docs: {
       description: 'enforce specific casing for the component naming style in template',
       category: undefined,
-      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.2.2/docs/rules/component-name-in-template-casing.md'
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.3.0/docs/rules/component-name-in-template-casing.md'
     },
     fixable: 'code',
     schema: [

From 54fb3fb189e6818b21c80da5e6d76b6fe9a9f1b7 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Wed, 18 Jul 2018 18:56:18 +0900
Subject: [PATCH 14/17] Add ignores option.

---
 README.md                                     |  1 +
 .../component-name-in-template-casing.md      | 22 +++++++-
 .../component-name-in-template-casing.js      | 23 ++++++--
 .../component-name-in-template-casing.js      | 52 +++++++++++++++++++
 4 files changed, 94 insertions(+), 4 deletions(-)

diff --git a/README.md b/README.md
index d99f0e857..cbc9387e1 100644
--- a/README.md
+++ b/README.md
@@ -184,6 +184,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 |    | Rule ID | Description |
 |:---|:--------|:------------|
 | :wrench: | [vue/attribute-hyphenation](./docs/rules/attribute-hyphenation.md) | enforce attribute naming style on custom components in template |
+| :wrench: | [vue/component-name-in-template-casing](./docs/rules/component-name-in-template-casing.md) | enforce specific casing for the component naming style in template |
 | :wrench: | [vue/html-end-tags](./docs/rules/html-end-tags.md) | enforce end tag style |
 | :wrench: | [vue/html-indent](./docs/rules/html-indent.md) | enforce consistent indentation in `<template>` |
 | :wrench: | [vue/html-self-closing](./docs/rules/html-self-closing.md) | enforce self-closing style |
diff --git a/docs/rules/component-name-in-template-casing.md b/docs/rules/component-name-in-template-casing.md
index 962c5efd3..68cfa7911 100644
--- a/docs/rules/component-name-in-template-casing.md
+++ b/docs/rules/component-name-in-template-casing.md
@@ -48,7 +48,27 @@ Define a style for the component name in template casing for consistency purpose
 
 Default casing is set to `PascalCase`.
 
+```json
+  "vue/component-name-in-template-casing": ["error",
+    "PascalCase|kebab-case",
+    {
+      "ignores": []
+    }
+  ]
 ```
-"vue/component-name-in-template-casing": ["error", "PascalCase|kebab-case"]
+
+- `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)
diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index e02f446b1..1d7a7c89d 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -23,19 +23,33 @@ module.exports = {
     docs: {
       description: 'enforce specific casing for the component naming style in template',
       category: undefined,
-      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.3.0/docs/rules/component-name-in-template-casing.md'
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.7.0/docs/rules/component-name-in-template-casing.md'
     },
     fixable: 'code',
     schema: [
       {
         enum: allowedCaseOptions
+      },
+      {
+        type: 'object',
+        properties: {
+          'ignores': {
+            type: 'array',
+            items: { type: 'string' },
+            uniqueItems: true,
+            additionalItems: false
+          }
+        },
+        additionalProperties: false
       }
     ]
   },
 
   create (context) {
-    const options = context.options[0]
-    const caseType = allowedCaseOptions.indexOf(options) !== -1 ? options : defaultCase
+    const caseOption = context.options[0]
+    const options = context.options[1] || {}
+    const caseType = allowedCaseOptions.indexOf(caseOption) !== -1 ? caseOption : defaultCase
+    const ignores = options.ignores || []
     const tokens = context.parserServices.getTemplateBodyTokenStore && context.parserServices.getTemplateBodyTokenStore()
     const sourceCode = context.getSourceCode()
 
@@ -52,6 +66,9 @@ module.exports = {
         }
 
         const name = node.rawName
+        if (ignores.indexOf(name) >= 0) {
+          return
+        }
         const casingName = casing.getConverter(caseType)(name)
         if (casingName !== name) {
           const startTag = node.startTag
diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index 584648048..da2b7bb89 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -54,6 +54,17 @@ tester.run('component-name-in-template-casing', rule, {
       output: null,
       options: ['kebab-case']
     },
+    // ignores
+    {
+      code: '<template><custom-element></custom-element></template>',
+      output: null,
+      options: ['PascalCase', { ignores: ['custom-element'] }]
+    },
+    {
+      code: '<template><custom-element><TheComponent/></custom-element></template>',
+      output: null,
+      options: ['PascalCase', { ignores: ['custom-element'] }]
+    },
     // Invalid EOF
     '<template><the-component a=">test</the-component></template>',
     '<template><the-component><!--test</the-component></template>'
@@ -270,6 +281,47 @@ tester.run('component-name-in-template-casing', rule, {
 </template>
 `,
       errors: ['Component name "the-component" is not PascalCase.']
+    },
+
+    // ignores
+    {
+      code: `
+<template>
+  <custom-element>
+    <the-component />
+  </custom-element>
+</template>`,
+      output: `
+<template>
+  <custom-element>
+    <TheComponent />
+  </custom-element>
+</template>`,
+      options: ['PascalCase', { ignores: ['custom-element'] }],
+      errors: ['Component name "the-component" is not PascalCase.']
+    },
+    {
+      code: `
+<template>
+  <custom-element1>
+    <the-component />
+  </custom-element1>
+  <custom-element2 />
+  <the-component />
+</template>`,
+      output: `
+<template>
+  <custom-element1>
+    <TheComponent />
+  </custom-element1>
+  <custom-element2 />
+  <TheComponent />
+</template>`,
+      options: ['PascalCase', { ignores: ['custom-element1', 'custom-element2'] }],
+      errors: [
+        'Component name "the-component" is not PascalCase.',
+        'Component name "the-component" is not PascalCase.'
+      ]
     }
   ]
 })

From e8e0db0e34e5dd864cb3064f802eaad583544ced Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Thu, 19 Jul 2018 22:02:36 +0900
Subject: [PATCH 15/17] Fixed that extra differences.

---
 README.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/README.md b/README.md
index cbc9387e1..3b4eaef65 100644
--- a/README.md
+++ b/README.md
@@ -291,4 +291,4 @@ We're more than happy to see potential contributions, so don't hesitate. If you
 
 ## :lock: License
 
-See the [LICENSE](LICENSE) file for license rights and limitations (MIT).
\ No newline at end of file
+See the [LICENSE](LICENSE) file for license rights and limitations (MIT).

From 4b300dcd316ba64645b4e94365883f16e2b270ed Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Fri, 27 Jul 2018 11:18:59 +0900
Subject: [PATCH 16/17] update docs link

---
 lib/rules/component-name-in-template-casing.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index 1d7a7c89d..f8502f0be 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -23,7 +23,7 @@ module.exports = {
     docs: {
       description: 'enforce specific casing for the component naming style in template',
       category: undefined,
-      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.7.0/docs/rules/component-name-in-template-casing.md'
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.1/docs/rules/component-name-in-template-casing.md'
     },
     fixable: 'code',
     schema: [

From fb3d4331109f193f8f22afe9a7ae9e6164a3f154 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Micha=C5=82=20Sajn=C3=B3g?= <msajnog93@gmail.com>
Date: Mon, 30 Jul 2018 14:02:40 +0200
Subject: [PATCH 17/17] Update formatting

---
 .../component-name-in-template-casing.js      |   4 +-
 .../component-name-in-template-casing.js      | 319 +++++++++---------
 2 files changed, 158 insertions(+), 165 deletions(-)

diff --git a/lib/rules/component-name-in-template-casing.js b/lib/rules/component-name-in-template-casing.js
index f8502f0be..689398a79 100644
--- a/lib/rules/component-name-in-template-casing.js
+++ b/lib/rules/component-name-in-template-casing.js
@@ -22,7 +22,7 @@ module.exports = {
   meta: {
     docs: {
       description: 'enforce specific casing for the component naming style in template',
-      category: undefined,
+      category: undefined, // strongly-recommended
       url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v5.0.0-beta.1/docs/rules/component-name-in-template-casing.md'
     },
     fixable: 'code',
@@ -33,7 +33,7 @@ module.exports = {
       {
         type: 'object',
         properties: {
-          'ignores': {
+          ignores: {
             type: 'array',
             items: { type: 'string' },
             uniqueItems: true,
diff --git a/tests/lib/rules/component-name-in-template-casing.js b/tests/lib/rules/component-name-in-template-casing.js
index da2b7bb89..b2fc98711 100644
--- a/tests/lib/rules/component-name-in-template-casing.js
+++ b/tests/lib/rules/component-name-in-template-casing.js
@@ -31,38 +31,31 @@ tester.run('component-name-in-template-casing', rule, {
     // kebab-case
     {
       code: '<template><the-component></the-component></template>',
-      output: null,
       options: ['kebab-case']
     },
     {
       code: '<template><div/></template>',
-      output: null,
       options: ['kebab-case']
     },
     {
       code: '<template><img></template>',
-      output: null,
       options: ['kebab-case']
     },
     {
       code: '<template><svg><path/></svg></template>',
-      output: null,
       options: ['kebab-case']
     },
     {
       code: '<template><math><mspace/></math></template>',
-      output: null,
       options: ['kebab-case']
     },
     // ignores
     {
       code: '<template><custom-element></custom-element></template>',
-      output: null,
       options: ['PascalCase', { ignores: ['custom-element'] }]
     },
     {
       code: '<template><custom-element><TheComponent/></custom-element></template>',
-      output: null,
       options: ['PascalCase', { ignores: ['custom-element'] }]
     },
     // Invalid EOF
@@ -72,251 +65,251 @@ tester.run('component-name-in-template-casing', rule, {
   invalid: [
     {
       code: `
-<template>
-  <the-component id="id">
-    <!-- comment -->
-  </the-component>
-</template>
-`,
+      <template>
+        <the-component id="id">
+          <!-- comment -->
+        </the-component>
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent id="id">
-    <!-- comment -->
-  </TheComponent>
-</template>
-`,
+      <template>
+        <TheComponent id="id">
+          <!-- comment -->
+        </TheComponent>
+      </template>
+      `,
       errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <the-component id="id"/>
-</template>
-`,
+      <template>
+        <the-component id="id"/>
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent id="id"/>
-</template>
-`,
+      <template>
+        <TheComponent id="id"/>
+      </template>
+      `,
       errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <TheComponent id="id">
-    <!-- comment -->
-  </TheComponent>
-</template>
-`,
+      <template>
+        <TheComponent id="id">
+          <!-- comment -->
+        </TheComponent>
+      </template>
+      `,
       options: ['kebab-case'],
       output: `
-<template>
-  <the-component id="id">
-    <!-- comment -->
-  </the-component>
-</template>
-`,
+      <template>
+        <the-component id="id">
+          <!-- comment -->
+        </the-component>
+      </template>
+      `,
       errors: ['Component name "TheComponent" is not kebab-case.']
     },
     {
       code: `
-<template>
-  <TheComponent id="id"/>
-</template>
-`,
+      <template>
+        <TheComponent id="id"/>
+      </template>
+      `,
       options: ['kebab-case'],
       output: `
-<template>
-  <the-component id="id"/>
-</template>
-`,
+      <template>
+        <the-component id="id"/>
+      </template>
+      `,
       errors: ['Component name "TheComponent" is not kebab-case.']
     },
     {
       code: `
-<template>
-  <the-component
-    id="id"/>
-</template>
-`,
+      <template>
+        <the-component
+          id="id"/>
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent
-    id="id"/>
-</template>
-`,
+      <template>
+        <TheComponent
+          id="id"/>
+      </template>
+      `,
       errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <the-component/>
-</template>
-`,
+      <template>
+        <the-component/>
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent/>
-</template>
-`,
+      <template>
+        <TheComponent/>
+      </template>
+      `,
       errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <the-component></the-component>
-</template>
-`,
+      <template>
+        <the-component></the-component>
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent></TheComponent>
-</template>
-`,
+      <template>
+        <TheComponent></TheComponent>
+      </template>
+      `,
       errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <theComponent/>
-</template>
-`,
+      <template>
+        <theComponent/>
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent/>
-</template>
-`,
+      <template>
+        <TheComponent/>
+      </template>
+      `,
       errors: ['Component name "theComponent" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <theComponent/>
-</template>
-`,
+      <template>
+        <theComponent/>
+      </template>
+      `,
       options: ['kebab-case'],
       output: `
-<template>
-  <the-component/>
-</template>
-`,
+      <template>
+        <the-component/>
+      </template>
+      `,
       errors: ['Component name "theComponent" is not kebab-case.']
     },
     {
       code: `
-<template>
-  <The-component/>
-</template>
-`,
+      <template>
+        <The-component/>
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent/>
-</template>
-`,
+      <template>
+        <TheComponent/>
+      </template>
+      `,
       errors: ['Component name "The-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <The-component/>
-</template>
-`,
+      <template>
+        <The-component/>
+      </template>
+      `,
       options: ['kebab-case'],
       output: `
-<template>
-  <the-component/>
-</template>
-`,
+      <template>
+        <the-component/>
+      </template>
+      `,
       errors: ['Component name "The-component" is not kebab-case.']
     },
     {
       code: `
-<template>
-  <Thecomponent/>
-</template>
-`,
+      <template>
+        <Thecomponent/>
+      </template>
+      `,
       options: ['kebab-case'],
       output: `
-<template>
-  <thecomponent/>
-</template>
-`,
+      <template>
+        <thecomponent/>
+      </template>
+      `,
       errors: ['Component name "Thecomponent" is not kebab-case.']
     },
     {
       code: `
-<template>
-  <the-component></the-component  >
-</template>
-`,
+      <template>
+        <the-component></the-component  >
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent></TheComponent  >
-</template>
-`,
+      <template>
+        <TheComponent></TheComponent  >
+      </template>
+      `,
       errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <the-component></the-component
-  >
-</template>
-`,
+      <template>
+        <the-component></the-component
+        >
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent></TheComponent
-  >
-</template>
-`,
+      <template>
+        <TheComponent></TheComponent
+        >
+      </template>
+      `,
       errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <the-component></the-component end-tag-attr="attr" >
-</template>
-`,
+      <template>
+        <the-component></the-component end-tag-attr="attr" >
+      </template>
+      `,
       output: `
-<template>
-  <TheComponent></TheComponent end-tag-attr="attr" >
-</template>
-`,
+      <template>
+        <TheComponent></TheComponent end-tag-attr="attr" >
+      </template>
+      `,
       errors: ['Component name "the-component" is not PascalCase.']
     },
 
     // ignores
     {
       code: `
-<template>
-  <custom-element>
-    <the-component />
-  </custom-element>
-</template>`,
+      <template>
+        <custom-element>
+          <the-component />
+        </custom-element>
+      </template>`,
       output: `
-<template>
-  <custom-element>
-    <TheComponent />
-  </custom-element>
-</template>`,
+      <template>
+        <custom-element>
+          <TheComponent />
+        </custom-element>
+      </template>`,
       options: ['PascalCase', { ignores: ['custom-element'] }],
       errors: ['Component name "the-component" is not PascalCase.']
     },
     {
       code: `
-<template>
-  <custom-element1>
-    <the-component />
-  </custom-element1>
-  <custom-element2 />
-  <the-component />
-</template>`,
+      <template>
+        <custom-element1>
+          <the-component />
+        </custom-element1>
+        <custom-element2 />
+        <the-component />
+      </template>`,
       output: `
-<template>
-  <custom-element1>
-    <TheComponent />
-  </custom-element1>
-  <custom-element2 />
-  <TheComponent />
-</template>`,
+      <template>
+        <custom-element1>
+          <TheComponent />
+        </custom-element1>
+        <custom-element2 />
+        <TheComponent />
+      </template>`,
       options: ['PascalCase', { ignores: ['custom-element1', 'custom-element2'] }],
       errors: [
         'Component name "the-component" is not PascalCase.',