Prop name casing setting for attribute completion

[rickyruiz]

• I have searched through existing issues
• I have read through docs
• I have read FAQ

Info

• Platform: Win 10
• Vetur version: 0.16.2
• VS Code version: 1.31.1

Problem

Vue's styleguide for strongly recommended prop name casing establishes the following:

Prop names should always use camelCase during declaration, but kebab-case in templates and JSX.

Could there be an option to set this in settings? Just like we do for PascalCase tag casing with "vetur.completion.tagCasing": "initial".

Something like:

"vetur.completion.attrCasing": "kebab-case"

Reproducible Case

Set a prop using camelCase:

Attribute completion is in camelCase instead of kebab-case.

[octref]

Isn't "vetur.completion.tagCasing": "kebab" what you are asking?

[rickyruiz]

"vetur.completion.tagCasing": "kebab" will complete the <azure-map> tag in kebab-case, but I'm referring to the attribute exampleProp. Could we have an option to suggest example-prop instead of its camelCase version?

I'd like to use the tag completion in PascalCase ("vetur.completion.tagCasing": "initial"), but the attribute completion in kebab-case.

ie.

<AzureMap 
  :example-prop="foo"
/>

This is something that can be fixed on save with eslint. Maybe leaving it to eslint is okay?

[octref]

I see, thanks for the report.

[aryraditya]

is there any progress for this ?

[GGLionCross]

+1

[mishannn]

+1

[noxware]

+1

[Citriik]

+1

[yoyo930021]

Fixed in #3015