vue/component-name-in-template-casing is not ignoring some built-in components

[valentinoli]

Checklist

• I have tried restarting my IDE and the issue persists.
• I have read the FAQ and my problem is not listed.

Tell us about your environment

• ESLint version: 7.32.0
• eslint-plugin-vue version: 7.17.0
• Node version: 14.17.6
• Operating System: Windows 10

Please show your full configuration:

module.exports = {
  root: true,
  env: {
    browser: true,
    node: true
  },
  parserOptions: {
    parser: '@babel/eslint-parser',
    requireConfigFile: false
  },
  extends: [
    '@nuxtjs',
    'plugin:prettier/recommended',
    'plugin:nuxt/recommended'
  ],
  plugins: ['prettier'],
  // add your custom rules here
  rules: {
    'no-console': [
      'warn',
      {
        allow: ['info', 'warn', 'error']
      }
    ],
    'vue/valid-v-slot': [
      'error',
      {
        allowModifiers: true
      }
    ],
    'vue/no-unregistered-components': ['off', {}],
    'vue/component-name-in-template-casing': [
      'error',
      'PascalCase',
      {
        registeredComponentsOnly: false
      }
    ]
  }
}

What did you do?

<template>
  <component :is="someComponent"></component>
</template>

What did you expect to happen?
As the docs explain in the note, I expected the vue/component-name-in-template-casing rule to ignore the built-in <component>

What actually happened?

Raw output from ESLint

Component name "component" is not PascalCase. eslint(vue/component-name-in-template-casing)

Note: Same story for <client-only> and <keep-alive> built-ins. However, <slot> and <template> are ignored.

Repository to reproduce this issue

https://github.com/hestiaAI/hestialabs-experiences/

I added the following configuration to .eslintrc.js to fix the issue temporarily:

ignores: ['/^component|client-only|keep-alive$/']

[FloEdelmann]

Can't you use <Component>, <ClientOnly> and <KeepAlive>?

However, the docs clearly don't match the behavior, so either of them needs to be adjusted.

[valentinoli]

I think that would be inconsistent with our preference of having built-in components kebab-cased, and also these built-ins are always kebab cased in Vue docs

[valentinoli]

I noticed this file, but it is not imported anywhere ... except in the vue3 builtin file which is in turn not imported anywhere. Not sure if that is connected with this bug

https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue2-builtin-components.js

[FloEdelmann]

our preference of having built-in components kebab-cased

I think this rule is the only one where we enforce the casing of built-in components, isn't it? In the Vue docs, they are kebab-case, but so are custom components: https://v3.vuejs.org/guide/component-basics.html

However, in the relevant style guide section, built-in components are not explicitly mentioned: https://v3.vuejs.org/style-guide/#component-name-casing-in-templates-strongly-recommended

So I think it's a matter of taste. IMO, they should not be excluded, but the docs should be adjusted to explicitly mention that they are included. Users who want to exclude them can use the ignores option like you did.

this file, but it is not imported anywhere

I don't know whether/how this file is/was used. @ota-meshi Can you help here?

[ota-meshi]

So I think it's a matter of taste.

I agree with you.
If we change the rule, I think it should be an option to ignore the built-in components.

I don't know whether/how this file is/was used. @ota-meshi Can you help here?

Used it here:
https://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue3-builtin-components.js

[FloEdelmann]

@valentinoli I just noticed that the note you linked to is in the docs of another rule: vue/no-unregistered-components, not vue/component-name-in-template-casing.

So I think there is nothing that needs to be done here.

• Built-in components are not reported if registeredComponentsOnly is true (default).
• They are reported if registeredComponentsOnly is set to false.
• They can be excluded with the ignores option.
• So they are not handled differently than custom components. The docs don't imply anything different.

Since the behavior is expected, I added test cases to document this in #1737.

[FloEdelmann]

@valentinoli Note that you should adapt your ignores option:

Your regex /^component|client-only|keep-alive$/ matches everything that starts with component, anything that contains client-only and anything that ends with keep-alive.

Either add parentheses to the regex:

- ignores: ['/^component|client-only|keep-alive$/']
+ ignores: ['/^(component|client-only|keep-alive)$/']

Or (even better) use separate strings:

- ignores: ['/^component|client-only|keep-alive$/']
+ ignores: ['component', 'client-only', 'keep-alive']

[valentinoli]

I just noticed that the note you linked to is in the docs of another rule: vue/no-unregistered-components, not vue/component-name-in-template-casing

My bad! Sorry about that.

[valentinoli]

Note that you should adapt your ignores option

Much appreciated tip, thank you!

[valentinoli]

Used it here:\nhttps://github.com/vuejs/eslint-plugin-vue/blob/master/lib/utils/vue3-builtin-components.js

@ota-meshi
Yes, but where is that file used?

[ota-meshi]

You can use the search.
https://github.com/vuejs/eslint-plugin-vue/search?q=vue3-builtin-components

[valentinoli]

Ok, I thought I already did that. Sorry and thanks!