Feature request: vue/match-component-file-name, allow prefixes/suffixes

[iliubinskii]

What rule do you want to change?

vue/match-component-file-name

How will the change be implemented? (New option, new default behavior, etc.)?

New options:

a.
  "vue/match-component-file-name": ["warn", {
    allowPrefixes: ["prefix1", "prefix2", etc]
  }]

b.
  "vue/match-component-file-name": ["warn", {
    allowSuffixes: ["suffix1", "suffix2", etc]
  }]

c.
  "vue/match-component-file-name": ["warn", {
    allowPrefixes: {
      "folderName1": "prefix1",
      "folderName2": "prefix2"
    }
  }]

d.
  "vue/match-component-file-name": ["warn", {
    allowSuffixes: {
      "folderName1": "suffix1",
      "folderName2": "suffix2"
    }
  }]

e.
  "vue/match-component-file-name": ["warn", {
    requirePrefixes: {
      "folderName1": "prefix1",
      "folderName2": "prefix2"
    }
  }]

f.
  "vue/match-component-file-name": ["warn", {
    requireSuffixes: {
      "folderName1": "suffix1",
      "folderName2": "suffix2"
    }
  }]

Please provide some example code that this change will affect:

Valid with ["warn", { allowSuffixes: { routes: "-route" } }] or ["warn", { requireSuffixes: { routes: "-route" } }]

routes/Home.vue:
export default defineComponent({
  name: "home-route",
}

Invalid with ["warn", { requireSuffixes: { routes: "-route" } }]

routes/Home.vue:
export default defineComponent({
  name: "home",
}

What does the rule currently do for this code?

I have separate "routes" folder that contains only routes. I do not want to add "Route" suffix to every file in this folder. But I want to add "-route" suffix to component names in this folder.

Current rule forces me to use "home" name inside Home.vue route component

What will the rule do after it's changed?

With new options I can enforce "home-route" name for Home.vue inside "routes/" folder.

[FloEdelmann]

Instead of allowPrefixes and allowSuffixes, maybe an ignore option with regexes might be easier?

And I'd refrain from allowing options per folder, as that get complex soon. There is already the native ESLint option to override rule options per glob pattern, which can be used for this purpose: https://eslint.org/docs/user-guide/configuring/configuration-files#configuration-based-on-glob-patterns

In general, I like the idea though.

[iliubinskii]

And I'd refrain from allowing options per folder, as that get complex soon. There is already the native ESLint option to override...

Then how about simpler option:

  ["warn", { requirePrefix: <string> }]
  ["warn", { requireSuffix: <string> }]

? ("allow..." options can be omitted, "require..." is stricter = better).

In combination with ESLint native overrides it will be as flexible as original proposal.

It can be used:

1. In libraries. E.g. Quasar adds "q-" prefix to all components, Vuetify adds "v-" prefix.
2. Inside folders like "routes/", "pages/", "layouts/" that contain components of one particular kind.

[ota-meshi]

If you want to control the rules per PATH, you can use the overrides configuration.

https://eslint.org/docs/user-guide/configuring/configuration-files#how-do-overrides-work

[mat813]

We have a very large Vue app, with hundreds of components, and to keep things tidy and usable, components are organized in subdirectories. To keep things tidy when debugging, components are named with the full path, for example, src/components/Simple/PasswordConfirm.vue is named SimplePasswordConfirm. So having a way to achieve this with this rule would be great. Also, It would be great if this rule had a way to do this automatically, without having to set one prefix for each directory/subdirectory, but if this was the only way we could probably automate it.

[ota-meshi]

I don't think it matters if it's a large app or not. If it depends on path or filename, I think you can use overrides configuration. I doubt the effort to configure them would change. Could you please explain in more detail why the new option is useful?