Fix 1786

docs/rules/README.md

@@ -12,6 +12,7 @@ sidebarDepth: 0
   :bulb: Indicates that some problems reported by the rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
 :::
 
+
 ## Base Rules (Enabling Correct ESLint Parsing)
 
 Enforce all the rules in this category, as well as all higher priority rules, with:
@@ -317,6 +318,7 @@ For example:
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: |
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: |
 | [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  |
+| [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name |  |
 | [vue/new-line-between-multi-line-property](./new-line-between-multi-line-property.md) | enforce new lines between multi-line properties in Vue components | :wrench: |
 | [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: |
 | [vue/no-bare-strings-in-template](./no-bare-strings-in-template.md) | disallow the use of bare strings in `<template>` |  |

docs/rules/match-component-import-name.md

@@ -0,0 +1,109 @@
+---
+pageClass: rule-details
+sidebarDepth: 0
+title: vue/match-component-import-name
+description: require the registered component name to match the imported component name
+---
+
+# vue/match-component-import-name
+
+> require the registered component name to match the imported component name
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+This rule reports if the name of a registered component does not match its imported name.
+
+- :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> **_This rule has not been released yet._** </badge>
+
+## :book: Rule Details
+
+By default, this rule will validate that the imported name is the same casing.
+
+Case can be one of: `"kebab-case"` or `"PascalCase"`
+
+An optional prefix can be provided that must be prepended to all imports.
+
+If you are not registering components, this rule will be ignored.
+
+## :wrench: Options
+
+```json
+{
+  "vue/match-component-import-name": [
+    "error",
+    {
+      "prefix": "prefix-",
+      "case": "kebab-case"
+    }
+  ]
+}
+```
+
+- `"prefix": ""` ... array of file extensions to be verified. Default is set to the empty string.
+- `"case": "PascalCase"` ... one of "kebab-case" or "PascalCase", indicating the casing of the registered name. Default is set to `PascalCase`.
+
+### `{}`
+
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error']}">
+
+```javascript
+/* ✓ GOOD */
+export default { components: { AppButton } }
+
+/* ✗ BAD */
+export default { components: { SomeOtherName: AppButton } }
+export default { components: { 'app-button': AppButton } }
+```
+
+</eslint-code-block>
+
+### `{ case: 'kebab-case' }`
+
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case' }]}">
+
+```javascript
+/* ✓ GOOD */
+export default { components: { 'app-button': AppButton } }
+
+/* ✗ BAD */
+export default { components: { SomeOtherName: AppButton } }
+export default { components: { AppButton } }
+```
+
+</eslint-code-block>
+
+### `{ prefix: 'Prefix' }`
+
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { prefix: 'Prefix' }]}">
+
+```javascript
+/* ✓ GOOD */
+export default { components: { PrefixAppButton: AppButton } }
+
+/* ✗ BAD */
+export default { components: { SomeOtherName: AppButton } }
+export default { components: { 'app-button': AppButton } }
+export default { components: { 'prefix-app-button': PrefixAppButton } }
+```
+
+</eslint-code-block>
+
+### `{ case: 'kebab-case', prefix: 'prefix-' }`
+
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { case: 'kebab-case', prefix: 'prefix-' }]}">
+
+```javascript
+/* ✓ GOOD */
+export default { components: { 'prefix-app-button': AppButton } }
+
+/* ✗ BAD */
+export default { components: { SomeOtherName: AppButton } }
+export default { components: { AppButton } }
+```
+
+</eslint-code-block>
+
+## :mag: Implementation
+
+- [Rule source](https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/rules/match-component-import-name.js)
+- [Test source](https://github.com/vuejs/eslint-plugin-vue/blob/master/tests/lib/rules/match-component-import-name.js)

lib/index.js

@@ -47,6 +47,7 @@ module.exports = {
     'key-spacing': require('./rules/key-spacing'),
     'keyword-spacing': require('./rules/keyword-spacing'),
     'match-component-file-name': require('./rules/match-component-file-name'),
+    'match-component-import-name': require('./rules/match-component-import-name'),
     'max-attributes-per-line': require('./rules/max-attributes-per-line'),
     'max-len': require('./rules/max-len'),
     'multi-word-component-names': require('./rules/multi-word-component-names'),

lib/rules/match-component-import-name.js

@@ -0,0 +1,124 @@
+/**
+ * @author Doug Wade <douglas.b.wade@gmail.com>
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const utils = require('../utils')
+const casing = require('../utils/casing')
+
+module.exports = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description:
+        'require the registered component name to match the imported component name',
+      categories: undefined,
+      url: ''
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          prefix: {
+            type: 'string'
+          },
+          casing: {
+            type: 'string'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      unexpected:
+        'component alias {{importedName}} should match {{expectedName}}'
+    }
+  },
+  /**
+   * @param {RuleContext} context
+   * @returns {RuleListener}
+   */
+  create(context) {
+    const options = context.options[0] || {}
+
+    /**
+     * @param {ExportDefaultDeclaration} node
+     * @return {Array<Property>}
+     */
+    function getComponents(node) {
+      if (node.declaration.type !== 'ObjectExpression') {
+        return []
+      }
+
+      const componentProperty = node.declaration.properties
+        .filter(utils.isProperty)
+        .find((property) => utils.getStaticPropertyName(property) === 'components')
+
+      if (
+        !componentProperty ||
+        componentProperty.value.type !== 'ObjectExpression'
+      ) {
+        return []
+      }
+
+      return componentProperty.value.properties.filter(utils.isProperty)
+    }
+
+    /** @param {Property} property */
+    function propertyStartsWithPrefix(property) {
+      if (!options.prefix) {
+        return true
+      }
+
+      const name = utils.getStaticPropertyName(property)
+      return name ? name.startsWith(options.prefix) : false
+    }
+
+    return {
+      ExportDefaultDeclaration(node) {
+        const components = getComponents(node)
+
+        if (!components) {
+          return
+        }
+
+        components.forEach(
+          /** @param {Property} property */
+          (property) => {
+            if (!propertyStartsWithPrefix(property)) {
+              context.report({
+                node: property,
+                message: `component alias ${utils.getStaticPropertyName(
+                  property
+                )} should have the prefix ${options.prefix}`
+              })
+            }
+
+            if (property.value.type !== 'Identifier') {
+              return
+            }
+
+            const prefix = options.prefix || ''
+            const importedName = utils.getStaticPropertyName(property) || ''
+            const expectedName =
+              options.casing === 'kebab-case'
+                ? prefix + casing.kebabCase(property.value.name)
+                : prefix + casing.pascalCase(property.value.name)
+            if (importedName !== expectedName) {
+              context.report({
+                node: property,
+                messageId: 'unexpected',
+                data: {
+                  importedName,
+                  expectedName
+                }
+              })
+            }
+          }
+        )
+      }
+    }
+  }
+}