Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Prop name casing setting for attribute completion

See original GitHub issue

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.

Issue Analytics

State:
Created 5 years ago
Reactions:15
Comments:9 (3 by maintainers)

Top GitHub Comments

1reaction

octrefcommented, Mar 21, 2019

I see, thanks for the report.

1reaction

rickyruizcommented, Mar 6, 2019

"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?

vetur-attribute-completion

Top Results From Across the Web

vue/prop-name-casing

Rule Details #. This rule enforce proper casing of props in vue components(camelCase).

Is the default rule vue/attribute-hyphenation in conflict with vue ...

I am working on the project using eslint-plugin-vue and I have child and parent components. the child component needs to pass a value...

Attribute selectors - CSS: Cascading Style Sheets | MDN

Represents elements with an attribute name of attr whose value is a whitespace-separated list of words, one of which is exactly value.

Miscellaneous attributes interpreted by the C# compiler

Beginning in C# 9, the SkipLocalsInit attribute prevents the compiler from setting the .locals init flag when emitting to metadata. The ...

7 The global structure of an HTML document - W3C

This attribute identifies a property name. This specification does not list legal values for this attribute. content = cdata [CS]: This attribute specifies...