Fix review comments for multi-word-component-names rule

Author: csordasmarton

docs/rules/README.md

@@ -39,7 +39,6 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
-| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  |
 | [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  |
 | [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
 | [vue/no-deprecated-data-object-declaration](./no-deprecated-data-object-declaration.md) | disallow using deprecated object declaration on data (in Vue.js 3.0.0+) | :wrench: |
@@ -172,7 +171,6 @@ Enforce all the rules in this category, as well as all higher priority rules, wi
 
 | Rule ID | Description |    |
 |:--------|:------------|:---|
-| [vue/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  |
 | [vue/no-arrow-functions-in-watch](./no-arrow-functions-in-watch.md) | disallow using arrow functions to define watcher |  |
 | [vue/no-async-in-computed-properties](./no-async-in-computed-properties.md) | disallow asynchronous actions in computed properties |  |
 | [vue/no-custom-modifiers-on-v-model](./no-custom-modifiers-on-v-model.md) | disallow custom modifiers on v-model used on the component |  |
@@ -298,6 +296,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/multi-word-component-names](./multi-word-component-names.md) | require component names to be always multi-word |  |
 | [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/multi-word-component-names.md

@@ -9,39 +9,65 @@ description: require component names to be always multi-word
 > require component names to be always multi-word
 
 - :exclamation: <badge text="This rule has not been released yet." vertical="middle" type="error"> ***This rule has not been released yet.*** </badge>
-- :gear: This rule is included in all of `"plugin:vue/vue3-essential"`, `"plugin:vue/essential"`, `"plugin:vue/vue3-strongly-recommended"`, `"plugin:vue/strongly-recommended"`, `"plugin:vue/vue3-recommended"` and `"plugin:vue/recommended"`.
 
 ## :book: Rule Details
 
-This rule ....
+This rule require component names to be always multi-word, except for root `App`
+components, and built-in components provided by Vue, such as `<transition>` or
+`<component>`. This prevents conflicts with existing and future HTML elements,
+since all HTML elements are a single word.
 
-<eslint-code-block :rules="{'vue/multi-word-component-names': ['error']}">
+<eslint-code-block filename="src/TodoItem.js" language="javascript" :rules="{'vue/multi-word-component-names': ['error']}">
 
-```vue
-<template>
+```js
 /* ✓ GOOD */
 Vue.component('todo-item', {
   // ...
 })
 
+/* ✗ BAD */
+Vue.component('Todo', {
+  // ...
+})
+```
+</eslint-code-block>
+
+<eslint-code-block filename="src/TodoItem.js" :rules="{'vue/multi-word-component-names': ['error']}">
+
+```vue
+<script>
+/* ✓ GOOD */
 export default {
   name: 'TodoItem',
   // ...
 }
+</script>
+```
+</eslint-code-block>
 
-/* ✗ BAD */
-
-Vue.component('todo', {
-  // ...
-})
+<eslint-code-block filename="src/Todo.vue" :rules="{'vue/multi-word-component-names': ['error']}">
 
+```vue
+<script>
+/* ✗ BAD */
 export default {
   name: 'Todo',
   // ...
 }
-</template>
+</script>
 ```
+</eslint-code-block>
+
+<eslint-code-block filename="src/Todo.vue" :rules="{'vue/multi-word-component-names': ['error']}">
 
+```vue
+<script>
+/* ✗ BAD */
+export default {
+  // ...
+}
+</script>
+```
 </eslint-code-block>
 
 ## :wrench: Options

lib/configs/essential.js

@@ -6,7 +6,6 @@
 module.exports = {
   extends: require.resolve('./base'),
   rules: {
-    'vue/multi-word-component-names': 'error',
     'vue/no-arrow-functions-in-watch': 'error',
     'vue/no-async-in-computed-properties': 'error',
     'vue/no-custom-modifiers-on-v-model': 'error',

lib/configs/vue3-essential.js

@@ -6,7 +6,6 @@
 module.exports = {
   extends: require.resolve('./base'),
   rules: {
-    'vue/multi-word-component-names': 'error',
     'vue/no-arrow-functions-in-watch': 'error',
     'vue/no-async-in-computed-properties': 'error',
     'vue/no-deprecated-data-object-declaration': 'error',

lib/rules/multi-word-component-names.js

@@ -7,7 +7,6 @@
 // ------------------------------------------------------------------------------
 // Requirements
 // ------------------------------------------------------------------------------
-const path = require('path')
 
 const casing = require('../utils/casing')
 const utils = require('../utils')
@@ -39,10 +38,10 @@ function isValidComponentName(name) {
 
 module.exports = {
   meta: {
-    type: 'problem',
+    type: 'suggestion',
     docs: {
       description: 'require component names to be always multi-word',
-      categories: ['vue3-essential', 'essential'],
+      categories: undefined,
       url: 'https://eslint.vuejs.org/rules/multi-word-component-names.html'
     },
     schema: [],
@@ -53,7 +52,7 @@ module.exports = {
   /** @param {RuleContext} context */
   create(context) {
     const fileName = context.getFilename()
-    let componentName = path.parse(fileName).name
+    let componentName = fileName.replace(/\.[^/.]+$/, '')
 
     return utils.compositingVisitors(
       {
@@ -78,12 +77,16 @@ module.exports = {
       utils.executeOnVue(context, (obj) => {
         const node = utils.findProperty(obj, 'name')
 
+        /** @type {SourceLocation | null} */
+        let loc = null
+
         // Check if the component has a name property.
         if (node) {
           const valueNode = node.value
           if (valueNode.type !== 'Literal') return
 
           componentName = `${valueNode.value}`
+          loc = node.loc
         } else if (
           obj.parent.type === 'CallExpression' &&
           obj.parent.arguments.length === 2
@@ -94,6 +97,7 @@ module.exports = {
           if (argument.type !== 'Literal') return
 
           componentName = `${argument.value}`
+          loc = argument.loc
         }
 
         if (!isValidComponentName(componentName)) {
@@ -102,7 +106,7 @@ module.exports = {
             data: {
               value: componentName
             },
-            node: node || obj
+            loc: loc || { line: 1, column: 0 }
           })
         }
       })

tests/lib/rules/multi-word-component-names.js

@@ -232,7 +232,7 @@ tester.run('multi-word-component-names', rule, {
       errors: [
         {
           message: 'Component name "invalid" should always be multi-word.',
-          line: 3
+          line: 1
         }
       ]
     },