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?
Please sign in to leave a comment.
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
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?
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