VueJS - Improve intellisense
Hi,
first of all I want to say: The vue js integration in rider is awesome, even better than VSCode which makes it very pleasant to work with and the file/live code template makes it even better when working with typescript.
There are only a few points to make the integration godlike which includes intellisense only:
- suggest vue js properties (component parameters)
- suggest vue js component actions ($emit or typescript decorator)
- make css usage globally
Imagine a parent-component wants to pass some propeties to a child-component within the HTML section (:myProperty). Whenever there is a action triggered within the child-component, I'd like to get notified within the parent-component so I need to attach a listener (v-on or @actionName)
It would be awesome to have intellisense for that as of right now I go to the declaration of the child-component to see which properties and actions are defined in there. Then I go back to the parent-component to implement the parameter-passing/action-listening.
For the css-usage, it's working fine if the css is within the same vue component. I can even go to the declaration which is pretty neat! But when I declare a css class globally in my App.vue, then there is no usage inspection and the intellisense provider tells me the class is not used anywhere which can cause unexpected errors when cleaning up the solution.
Is it already possible somehow or are these features missing (if so, do you need help implementing them)?
Please sign in to leave a comment.
Component properties/methods are suggested for me.
Could you share code snippets/files where this doesn't work for you? Also, please could you clarify how the global CSS classes are declared in your code?
"Component properties/methods are suggested for me."
Not for me though. Although for components like Vuetify most of the properties are suggested, but not all. For custom components however, they are not suggested for me (I'm using 2020.2).
"Could you share code snippets/files where this doesn't work for you? Also, please could you clarify how the global CSS classes are declared in your code?"
Sure. In my App.vue component I delcared my css like this
and I use it like this in another component
>For custom components however, they are not suggested for me
It's a basic functionality, and it works fine for me:
Could you share a sample project the issue can be repeated with?
> In my App.vue component I delcared my css like this
Thanks, submitted to developers as https://youtrack.jetbrains.com/issue/WEB-48735, please follow it for updates
Alright, after inspecting the differences between my components and yours I can verify that it's working now as expected.
All I had to so was to import the component I wanted to use within the Component({components}) - tag. It's worth to note that the Component should be imported by "vue-property-decorator" and not "vue-class-component".
>All I had to so was to import the component I wanted to use within the Component({components}) - tag.
yes, if the component is registered globally using
Vue.component, the properties will not show up in code completion, it's a known issue ( WEB-42655), please feel free to upvote it to be notified when it's fixed