Add vue/component-options-name-casing rule

docs/rules/README.md

@@ -311,6 +311,7 @@ For example:
 | [vue/block-tag-newline](./block-tag-newline.md) | enforce line breaks after opening and before closing block-level tags | :wrench: |
 | [vue/component-api-style](./component-api-style.md) | enforce component API style |  |
 | [vue/component-name-in-template-casing](./component-name-in-template-casing.md) | enforce specific casing for the component naming style in template | :wrench: |
+| [vue/component-options-name-casing](./component-options-name-casing.md) | enforce the casing of component name in `components` options | :wrench: |
 | [vue/custom-event-name-casing](./custom-event-name-casing.md) | enforce specific casing for custom event name |  |
 | [vue/html-button-has-type](./html-button-has-type.md) | disallow usage of button without an explicit type attribute |  |
 | [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: |

docs/rules/component-options-name-casing.md

@@ -0,0 +1,137 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/component-options-name-casing
+description: enforce the casing of component name in `components` options
+---
+# vue/component-options-name-casing
+
+> enforce the casing of component name in `components` options
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
+- :wrench: The `--fix` option on the [command line](https://eslint.org/docs/user-guide/command-line-interface#fixing-problems) can automatically fix some of the problems reported by this rule.
+
+## :book: Rule Details
+
+This rule aims to enforce casing of the component names in `components` options.
+
+## :wrench: Options
+
+```json
+{
+  "vue/component-options-name-casing": ["error", "PascalCase" | "kebab-case" | "camelCase"]
+}
+```
+
+This rule has an option which can be one of these values:
+
+- `"PascalCase"` (default) ... enforce component names to pascal case.
+- `"kebab-case"` ... enforce component names to kebab case.
+- `"camelCase"` ... enforce component names to camel case.
+
+### `"PascalCase"` (default)
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error']}">
+
+```vue
+<script>
+export default {
+  /* ✓ GOOD */
+  components: {
+    AppHeader,
+    AppSidebar
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error']}">
+
+```vue
+<script>
+export default {
+  /* ✗ BAD */
+  components: {
+    appHeader,
+    'app-sidebar': AppSidebar
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+### `"kebab-case"`
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error', 'kebab-case']}">
+
+```vue
+<script>
+export default {
+  /* ✓ GOOD */
+  components: {
+    'app-header': AppHeader,
+    'app-sidebar': appSidebar
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error', 'kebab-case']}">
+
+```vue
+<script>
+export default {
+  /* ✗ BAD */
+  components: {
+    AppHeader,
+    appSidebar
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+### `"camelCase"`
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error', 'camelCase']}">
+
+```vue
+<script>
+export default {
+  /* ✓ GOOD */
+  components: {
+    appHeader,
+    appSidebar
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+<eslint-code-block fix :rules="{'vue/component-definition-name-casing': ['error', 'camelCase']}">
+
+```vue
+<script>
+export default {
+  /* ✗ BAD */
+  components: {
+    AppHeader,
+    'app-sidebar': appSidebar
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/component-options-name-casing.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/component-options-name-casing.js)

lib/index.js

@@ -24,6 +24,7 @@ module.exports = {
     'component-api-style': require('./rules/component-api-style'),
     'component-definition-name-casing': require('./rules/component-definition-name-casing'),
     'component-name-in-template-casing': require('./rules/component-name-in-template-casing'),
+    'component-options-name-casing': require('./rules/component-options-name-casing'),
     'component-tags-order': require('./rules/component-tags-order'),
     'custom-event-name-casing': require('./rules/custom-event-name-casing'),
     'dot-location': require('./rules/dot-location'),

lib/rules/component-options-name-casing.js

@@ -0,0 +1,79 @@
+/**
+ * @author Pig Fang
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+// ------------------------------------------------------------------------------
+// Requirements
+// ------------------------------------------------------------------------------
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+// ------------------------------------------------------------------------------
+// Rule Definition
+// ------------------------------------------------------------------------------
+
+module.exports = {
+  meta: {
+    type: 'suggestion',
+    docs: {
+      description:
+        'enforce the casing of component name in `components` options',
+      categories: undefined,
+      url: 'https://eslint.vuejs.org/rules/component-options-name-casing.html'
+    },
+    fixable: 'code',
+    schema: [{ enum: casing.allowedCaseOptions }],
+    messages: {
+      caseNotMatched: 'Component name "{{component}}" is not {{caseType}}.'
+    }
+  },
+  /** @param {RuleContext} context */
+  create(context) {
+    const caseType = context.options[0] || 'PascalCase'
+
+    const checkCase = casing.getChecker(caseType)
+    const convert = casing.getConverter(caseType)
+
+    return utils.executeOnVue(context, (obj) => {
+      const node = utils.findProperty(obj, 'components')
+      if (!node || node.value.type !== 'ObjectExpression') {
+        return
+      }
+
+      node.value.properties.forEach((property) => {
+        if (
+          property.type === 'Property' &&
+          property.key.type === 'Identifier'
+        ) {
+          const { name } = property.key
+          if (checkCase(name)) {
+            return
+          }
+
+          context.report({
+            node: property.key,
+            messageId: 'caseNotMatched',
+            data: {
+              component: name,
+              caseType
+            },
+            fix: (fixer) => {
+              const converted = convert(name)
+              if (caseType === 'kebab-case') {
+                return property.key.range[0] === property.value.range[0] &&
+                  property.key.range[1] === property.value.range[1]
+                  ? fixer.replaceText(property, `'${converted}': ${name}`)
+                  : fixer.replaceText(property.key, `'${converted}'`)
+              } else {
+                return fixer.replaceText(property.key, converted)
+              }
+            }
+          })
+        }
+      })
+    })
+  }
+}