@typescript-eslint/naming-convention workaround for Vue components

Question

We have this rule enabled: https://github.com/typescript-eslint/typescript-eslint/blob/main/packages/eslint-plugin/docs/rules/naming-convention.md#allowed-selectors-modifiers-and-types

default this disallows PascalCase in an object literal, which is an issue for vue components

export default defineComponent({
    name: 'MyComponent',
    components: {
      MyOtherComponent,
    },
  })

creates the following warning

Object Literal Property name MyOtherComponent must match one of the following formats: camelCase

has anybody found a workaround for this? I tried all of the modifications but couldn't find one that solves the issue without allowing Pascal on object literals

Answer 1

the only way I can re-create this is with the rule:

"@typescript-eslint/naming-convention": [
                    "error",
                    {
                        "selector": "class",
                        "format": ["PascalCase"]
                    },

Which isn't default. So I'm guessing you have this in your eslintrc file or are using a default with this set. You should be able to override this to use:

{
    "selector": "class",
    "format": ["camelCase"]
}