feat: fixable match-component-file-name rule

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}`)
+              }
+            }
+          ]
         })
       }
     }