feat: fixable match-component-file-name rule (#1874)

* Add typing 'Literal#raw' property

vue-eslint-parser's ESLintLiteralBase Node has 'raw' property.
ref: https://github.com/vuejs/vue-eslint-parser/blob/160f4efc4eaf363662b464a4a26a4c9e514deb5d/src/ast/nodes.ts#L395

It was necessary to identify quotes in the match-component-file-name's fixer.

* feat: add suggestion match-component-file-name rule

improve #1816

For the following reasons why name option changed.
If change file name, alto need to change import statement.

Also, this rule not auto-fixed, because the file name may be incorrect.

docs/rules/README.md

@@ -210,7 +210,7 @@ For example:
 | [vue/html-comment-content-newline](./html-comment-content-newline.md) | enforce unified line brake in HTML comments | :wrench: | :lipstick: |
 | [vue/html-comment-content-spacing](./html-comment-content-spacing.md) | enforce unified spacing in HTML comments | :wrench: | :lipstick: |
 | [vue/html-comment-indent](./html-comment-indent.md) | enforce consistent indentation in HTML comments | :wrench: | :lipstick: |
-| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name |  | :hammer: |
+| [vue/match-component-file-name](./match-component-file-name.md) | require component name property to match its file name | :bulb: | :hammer: |
 | [vue/match-component-import-name](./match-component-import-name.md) | require the registered component name to match the imported component name |  | :warning: |
 | [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: | :lipstick: |
 | [vue/next-tick-style](./next-tick-style.md) | enforce Promise or callback style in `nextTick` | :wrench: | :hammer: |

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

@@ -9,6 +9,8 @@ since: v5.2.0
 
 > require component name property to match its file name
 
+- :bulb: Some problems reported by this rule are manually fixable by editor [suggestions](https://eslint.org/docs/developer-guide/working-with-rules#providing-suggestions).
+
 This rule reports if a component `name` property does not match its file name.
 
 You can define an array of file extensions this rule should verify for the component's name.

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

@@ -31,6 +31,8 @@ function canVerify(node) {
 
 module.exports = {
   meta: {
+    // eslint-disable-next-line eslint-plugin/require-meta-has-suggestions
+    hasSuggestions: true,
     type: 'suggestion',
     docs: {
       description: 'require component name property to match its file name',
@@ -114,7 +116,17 @@ module.exports = {
           node,
           message:
             'Component name `{{name}}` should match file name `{{filename}}`.',
-          data: { filename, name }
+          data: { filename, name },
+          suggest: [
+            {
+              desc: 'Rename component to match file name.',
+              fix(fixer) {
+                const quote =
+                  node.type === 'TemplateLiteral' ? '`' : node.raw[0]
+                return fixer.replaceText(node, `${quote}${filename}${quote}`)
+              }
+            }
+          ]
         })
       }
     }