Fix 1786

docs/rules/README.md

@@ -317,6 +317,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,80 @@
+---
+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>
+
+## :book: Rule Details
+
+By default, this rule will validate that the imported name matches the name of the components object property identifer. Note that "matches" means that the imported name matches either the PascalCase or kebab-case version of the components object property identifer. If you would like to enforce that it must match only one of PascalCase or kebab-case, use this rule in conjunction with the rule `component-definition-name-casing`.
+
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error']}">
+
+```vue
+<script>
+export default {
+  components: {
+    /* ✓ GOOD */
+    AppButton,
+    AppButton: AppButton,
+
+    /* ✗ BAD */
+    SomeOtherName: AppButton,
+    'app-button': AppButton
+  }
+}
+</script>
+```
+
+</eslint-code-block>
+
+## :wrench: Options
+
+```json
+{
+  "vue/match-component-import-name": [
+    "error",
+    {
+      "prefix": "prefix-"
+    }
+  ]
+}
+```
+
+- `"prefix": ""` ... required prefix for registered component names. Default is set to an empty string (no prefix).
+
+</eslint-code-block>
+
+### `{ prefix: 'Prefix' }`
+
+<eslint-code-block :rules="{'vue/match-component-file-name': ['error', { prefix: 'Prefix' }]}">
+
+```vue
+<script>
+export default {
+  components: {
+    /* ✓ GOOD */
+    PrefixAppButton: AppButton,
+    'Prefix-app-button': AppButton,
+
+    /* ✗ BAD */
+    AppButton,
+    SomeOtherName: AppButton,
+    'app-button': AppButton,
+  }
+}
+</script>
+```
+
+</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,136 @@
+/**
+ * @author Doug Wade <[email protected]>
+ * 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: 'https://eslint.vuejs.org/rules/match-component-import-name.html'
+    },
+    fixable: null,
+    schema: [
+      {
+        type: 'object',
+        properties: {
+          prefix: {
+            type: 'string'
+          }
+        },
+        additionalProperties: false
+      }
+    ],
+    messages: {
+      unexpected:
+        'Component alias {{importedName}} should be one of: {{expectedName}}.',
+      prefix:
+        'Component alias {{propertyName}} should have the prefix {{prefix}}.'
+    }
+  },
+  /**
+   * @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
+    }
+
+    /**
+     * @param {Identifier} identifier
+     * @param {String} prefix
+     * @return {Array<String>}
+     */
+    function getExpectedNames(identifier, prefix) {
+      return [
+        `${prefix}${casing.pascalCase(identifier.name)}`,
+        `${prefix}${casing.kebabCase(identifier.name)}`
+      ]
+    }
+
+    return {
+      ExportDefaultDeclaration(node) {
+        const components = getComponents(node)
+
+        if (!components) {
+          return
+        }
+
+        components.forEach(
+          /** @param {Property} property */
+          (property) => {
+            if (!propertyStartsWithPrefix(property)) {
+              context.report({
+                node: property,
+                messageId: 'prefix',
+                data: {
+                  propertyName: utils.getStaticPropertyName(property) || '',
+                  prefix: options.prefix
+                }
+              })
+            }
+
+            if (property.value.type !== 'Identifier') {
+              return
+            }
+
+            const prefix = options.prefix || ''
+            const importedName = utils.getStaticPropertyName(property) || ''
+            const expectedNames = getExpectedNames(property.value, prefix)
+            if (!expectedNames.includes(importedName)) {
+              context.report({
+                node: property,
+                messageId: 'unexpected',
+                data: {
+                  importedName,
+                  expectedName: expectedNames.join(', ')
+                }
+              })
+            }
+          }
+        )
+      }
+    }
+  }
+}

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

@@ -0,0 +1,117 @@
+/**
+ * @author Doug Wade
+ * See LICENSE file in root directory for full license.
+ */
+'use strict'
+
+const RuleTester = require('eslint').RuleTester
+const rule = require('../../../lib/rules/match-component-import-name')
+
+const tester = new RuleTester({
+  parser: require.resolve('vue-eslint-parser'),
+  parserOptions: {
+    ecmaVersion: 2020,
+    sourceType: 'module'
+  }
+})
+
+tester.run('match-component-import-name', rule, {
+  valid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { ValidImport } } </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'valid-import': ValidImport } } </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { ValidImport, ...SpreadImport } } </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'valid-import': ValidImport, ...SpreadImport } } </script>
+      `
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { PrefixValidImport: ValidImport } } </script>
+      `,
+      options: [{ prefix: 'Prefix' }]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'prefix-valid-import': ValidImport } } </script>
+      `,
+      options: [{ prefix: 'prefix-' }]
+    }
+  ],
+  invalid: [
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { InvalidExport: SomeRandomName } } </script>
+      `,
+      errors: [
+        {
+          message:
+            'Component alias InvalidExport should be one of: SomeRandomName, some-random-name.',
+          line: 2,
+          column: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'invalid-import': InvalidImport } }
+      `,
+      options: [{ prefix: 'prefix-' }],
+      errors: [
+        {
+          message:
+            'Component alias invalid-import should have the prefix prefix-.',
+          line: 2,
+          column: 47
+        },
+        {
+          message:
+            'Component alias invalid-import should be one of: prefix-InvalidImport, prefix-invalid-import.',
+          line: 2,
+          column: 47
+        }
+      ]
+    },
+    {
+      filename: 'test.vue',
+      code: `
+      <script> export default { components: { 'invalid-import': InvalidImport } } </script>
+      `,
+      options: [{ prefix: 'Prefix' }],
+      errors: [
+        {
+          message:
+            'Component alias invalid-import should have the prefix Prefix.',
+          line: 2,
+          column: 47
+        },
+        {
+          message:
+            'Component alias invalid-import should be one of: PrefixInvalidImport, Prefixinvalid-import.',
+          line: 2,
+          column: 47
+        }
+      ]
+    }
+  ]
+})