From 5f2fa1203722912ff5a19a4be5ab04eec827f3aa Mon Sep 17 00:00:00 2001
From: ota-meshi <otameshiyo23@gmail.com>
Date: Fri, 22 Jun 2018 19:34:00 +0900
Subject: [PATCH 1/2] =?UTF-8?q?=E2=AD=90=EF=B8=8FNew:=20Add=20`vue/html-el?=
 =?UTF-8?q?ement-name-kebab-casing`?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                                     |   1 +
 docs/rules/html-element-name-kebab-casing.md  |  34 +++
 lib/index.js                                  |   1 +
 lib/rules/html-element-name-kebab-casing.js   |  83 +++++++
 .../rules/html-element-name-kebab-casing.js   | 204 ++++++++++++++++++
 5 files changed, 323 insertions(+)
 create mode 100644 docs/rules/html-element-name-kebab-casing.md
 create mode 100644 lib/rules/html-element-name-kebab-casing.js
 create mode 100644 tests/lib/rules/html-element-name-kebab-casing.js

diff --git a/README.md b/README.md
index 015e2922b..c439efcb6 100644
--- a/README.md
+++ b/README.md
@@ -209,6 +209,7 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 |:---|:--------|:------------|
 | :wrench: | [vue/html-closing-bracket-newline](./docs/rules/html-closing-bracket-newline.md) | require or disallow a line break before tag's closing brackets |
 | :wrench: | [vue/html-closing-bracket-spacing](./docs/rules/html-closing-bracket-spacing.md) | require or disallow a space before tag's closing brackets |
+| :wrench: | [vue/html-element-name-kebab-casing](./docs/rules/html-element-name-kebab-casing.md) | enforce the tag name of the Vue component and HTML element to be `kebab-case` |
 | :wrench: | [vue/prop-name-casing](./docs/rules/prop-name-casing.md) | enforce specific casing for the Prop name in Vue components |
 | :wrench: | [vue/script-indent](./docs/rules/script-indent.md) | enforce consistent indentation in `<script>` |
 
diff --git a/docs/rules/html-element-name-kebab-casing.md b/docs/rules/html-element-name-kebab-casing.md
new file mode 100644
index 000000000..536bf4c4b
--- /dev/null
+++ b/docs/rules/html-element-name-kebab-casing.md
@@ -0,0 +1,34 @@
+# enforce the tag name of the Vue component and HTML element to be `kebab-case` (vue/html-element-name-kebab-casing)
+
+- :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.
+
+This rule enforce the tag name of the Vue component, HTML element, and custom element to be `kebab-case`.
+It does not target elements of MathML or SVG.
+
+
+Do not use this rule if you prefer `PascalCase` to the Vue component name.
+
+## :book: Rule Details
+
+:+1: Examples of **correct** code:
+
+```html
+<template>
+  <div />
+  <vue-component />
+  <custome-element />
+</template>
+```
+
+:-1: Examples of **incorrect** code:
+
+```html
+<template>
+  <Div />
+  <VueComponent />
+  <vueComponent />
+  <Vuecomponent />
+  <Vue-component />
+  <CustomeElement />
+</template>
+```
diff --git a/lib/index.js b/lib/index.js
index d96fd38e0..5a374d868 100644
--- a/lib/index.js
+++ b/lib/index.js
@@ -12,6 +12,7 @@ module.exports = {
     'comment-directive': require('./rules/comment-directive'),
     'html-closing-bracket-newline': require('./rules/html-closing-bracket-newline'),
     'html-closing-bracket-spacing': require('./rules/html-closing-bracket-spacing'),
+    'html-element-name-kebab-casing': require('./rules/html-element-name-kebab-casing'),
     'html-end-tags': require('./rules/html-end-tags'),
     'html-indent': require('./rules/html-indent'),
     'html-quotes': require('./rules/html-quotes'),
diff --git a/lib/rules/html-element-name-kebab-casing.js b/lib/rules/html-element-name-kebab-casing.js
new file mode 100644
index 000000000..166ecc82c
--- /dev/null
+++ b/lib/rules/html-element-name-kebab-casing.js
@@ -0,0 +1,83 @@
+/**
+ * @author Yosuke Ota
+ * issue https://github.com/vuejs/eslint-plugin-vue/issues/499
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+const kebabConverter = casing.getConverter('kebab-case')
+
+module.exports = {
+  meta: {
+    docs: {
+      description: 'enforce the tag name of the Vue component and HTML element to be `kebab-case`',
+      category: undefined,
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.5.0/docs/rules/html-element-name-kebab-casing.md'
+    },
+    fixable: 'code',
+    schema: []
+  },
+
+  create (context) {
+    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.isSvgElementNode(node) || utils.isMathMLElementNode(node)) {
+          return
+        }
+
+        const name = node.rawName
+        const casingName = kebabConverter(name)
+        if (casingName !== name) {
+          const startTag = node.startTag
+          const open = tokens.getFirstToken(startTag)
+
+          context.report({
+            node: open,
+            loc: open.loc,
+            message: 'Element name "{{name}}" is not kebab-case.',
+            data: {
+              name
+            },
+            fix: fixer => {
+              const endTag = node.endTag
+              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(endTagOpen, `</${casingName}`)
+              // ]
+              const code = `<${casingName}${sourceCode.text.slice(open.range[1], endTagOpen.range[0])}</${casingName}`
+              return fixer.replaceTextRange([open.range[0], endTagOpen.range[1]], code)
+            }
+          })
+        }
+      }
+    }, {
+      Program (node) {
+        hasInvalidEOF = utils.hasInvalidEOF(node)
+      }
+    })
+  }
+}
diff --git a/tests/lib/rules/html-element-name-kebab-casing.js b/tests/lib/rules/html-element-name-kebab-casing.js
new file mode 100644
index 000000000..1c3a54ce4
--- /dev/null
+++ b/tests/lib/rules/html-element-name-kebab-casing.js
@@ -0,0 +1,204 @@
+/**
+ * @author Yosuke Ota
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const rule = require('../../../lib/rules/html-element-name-kebab-casing')
+const RuleTester = require('eslint').RuleTester
+
+// ------------------------------------------------------------------------------
+// Tests
+// ------------------------------------------------------------------------------
+
+const tester = new RuleTester({
+  parser: 'vue-eslint-parser'
+})
+
+tester.run('html-element-name-kebab-casing', rule, {
+  valid: [
+    '<template><div/></template>',
+    '<template><img></template>',
+    '<template><the-component/></template>',
+    '<template><svg><path/></svg></template>',
+    '<template><svg><clipPath></clipPath></svg></template>',
+    '<template><math><mspace/></math></template>',
+    '<template><math><MSPACE/></math></template>',
+    '<template><div><slot></slot></div></template>',
+    // Invalid EOF
+    '<template><TheComponent a=">test</TheComponent></template>',
+    '<template><TheComponent><!--test</TheComponent></template>'
+  ],
+  invalid: [
+    {
+      code: `
+<template>
+  <TheComponent id="id">
+    <!-- comment -->
+  </TheComponent>
+</template>
+`,
+      output: `
+<template>
+  <the-component id="id">
+    <!-- comment -->
+  </the-component>
+</template>
+`,
+      errors: ['Element name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent id="id"/>
+</template>
+`,
+      output: `
+<template>
+  <the-component id="id"/>
+</template>
+`,
+      errors: ['Element name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent
+    id="id"/>
+</template>
+`,
+      output: `
+<template>
+  <the-component
+    id="id"/>
+</template>
+`,
+      errors: ['Element name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent/>
+</template>
+`,
+      output: `
+<template>
+  <the-component/>
+</template>
+`,
+      errors: ['Element name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent></TheComponent>
+</template>
+`,
+      output: `
+<template>
+  <the-component></the-component>
+</template>
+`,
+      errors: ['Element name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <theComponent/>
+</template>
+`,
+      output: `
+<template>
+  <the-component/>
+</template>
+`,
+      errors: ['Element name "theComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <The-component/>
+</template>
+`,
+      output: `
+<template>
+  <the-component/>
+</template>
+`,
+      errors: ['Element name "The-component" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <Thecomponent/>
+</template>
+`,
+      output: `
+<template>
+  <thecomponent/>
+</template>
+`,
+      errors: ['Element name "Thecomponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent></TheComponent  >
+</template>
+`,
+      output: `
+<template>
+  <the-component></the-component  >
+</template>
+`,
+      errors: ['Element name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent></TheComponent
+  >
+</template>
+`,
+      output: `
+<template>
+  <the-component></the-component
+  >
+</template>
+`,
+      errors: ['Element name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <TheComponent></TheComponent end-tag-attr="attr" >
+</template>
+`,
+      output: `
+<template>
+  <the-component></the-component end-tag-attr="attr" >
+</template>
+`,
+      errors: ['Element name "TheComponent" is not kebab-case.']
+    },
+    {
+      code: `
+<template>
+  <Div/><INPUT>
+</template>
+`,
+      output: `
+<template>
+  <div/><input>
+</template>
+`,
+      errors: [
+        'Element name "Div" is not kebab-case.',
+        'Element name "INPUT" is not kebab-case.'
+      ]
+    }
+  ]
+})

From cd2bfd99f1f0e3fa62d4e69eabd064485d841012 Mon Sep 17 00:00:00 2001
From: yosuke ota <otameshiyo23@gmail.com>
Date: Thu, 19 Jul 2018 08:21:53 +0900
Subject: [PATCH 2/2] update doc url

---
 lib/rules/html-element-name-kebab-casing.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/lib/rules/html-element-name-kebab-casing.js b/lib/rules/html-element-name-kebab-casing.js
index 166ecc82c..df5ce5901 100644
--- a/lib/rules/html-element-name-kebab-casing.js
+++ b/lib/rules/html-element-name-kebab-casing.js
@@ -22,7 +22,7 @@ module.exports = {
     docs: {
       description: 'enforce the tag name of the Vue component and HTML element to be `kebab-case`',
       category: undefined,
-      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.5.0/docs/rules/html-element-name-kebab-casing.md'
+      url: 'https://github.com/vuejs/eslint-plugin-vue/blob/v4.7.0/docs/rules/html-element-name-kebab-casing.md'
     },
     fixable: 'code',
     schema: []