camelCase auto-complete for custom Vue components in HTML template

Let's say I've imported a custom component pFancyButton from a component library:

<template></template>

<script>

import { pFancyButton } from '@coolLib/components'

export default Vue.extends({

    components: { pFancyButton },

});

</script>

 

Now when I go and type 'p' in the template, autocomplete shows up 'p-fancy-button' instead of 'pFancyButton'. I know both work, but having different casing for custom components can help distinguish them from the default ones as officially advised here. Is there any setting I can look into to change this behavior?

3 comments
Comment actions Permalink

The IDE suggests both CamelCase and camel-case if completion in case-insensitive.

For case-sensitive completion (Match case enabled in Settings | Editor | General | Code Completion), the suggested variant depends on the case of a character you have entered. Note that pFancyButton is still a bad style according to style guides, the component name should start with upper case

1
Comment actions Permalink

Thanks for the reply!

Unfortunately, the lowercase-starting naming convention for component tags is an in-house styling rule that I have no control over. Is there any way I can configure so WebStorm would suggest autocomplete as-is based on what I define in the components under Vue options? If not, is it possible with a plugin that can be made within reasonable effort?

0
Comment actions Permalink

The answer is 'no' to both questions, sorry. Note that Vue plugin is open source, the sources are available at https://github.com/JetBrains/intellij-plugins/tree/master/vuejs, but I doubt that extending it with a custom plugin is a reasonable effort unless you have experience with developing plugins for JetBrains IDEs

0

Please sign in to leave a comment.