[New] Add vue/component-name-in-template-casing

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"]
+```
+

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',

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'),

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)
+      }
+    })
+  }
+}

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.']
+    }
+  ]
+})