JSDoc intellisense for Vue 3 setup events and component description?

[vincerubinetti]

I'm using Vue 3 and the composition API with <script setup>. Just upgraded to the latest version of Vue and and updated my Volar extension.

All of this works great (note the comments):

TestComponent.vue

<script setup lang="ts">
/** fun test component */

interface Props {
  /**  text to show in label */
  text: string;
}

const props = defineProps<Props>();

props.text; // hovering over this shows "text to show in label"

interface Emits {
  /** test event */
  (event: "test"): void;
}

const emit = defineEmits<Emits>();

emit("test"); // hovering over this shows "test event"
</script>

But if I use the component in another template, there are some holes:

<template>
  <TestComponent
    text="test text"
    @test="() => null"
  />
</template>

Hovering over the text attribute shows "text to show in label", but hovering over @test does not show "test event". It would also be cool if hovering over the TestComponent tag showed "fun test component" (and any other JSDoc info I suppose).

I did try different JSDoc tags like @description and @function to see if those would show up, but they didn't.

It'd be cool if Volar could support this. I think there are other tools/plugins that do this, but they all seem to be more on the side of doc generators. I don't need a doc generator because my app is small enough, but I do want/need intellisense for components/props/events because I forget what they are.

Sorry if this is the wrong place for this, I'm not sure if this falls under the scope of Vue/Volar/VS Code/TypeScript/etc.

[johnsoncodehk]

Hi @vincerubinetti, thanks for bringing this up, I'm not sure how can it implement for now but I would like to check, could you create feature request issue from this discussion?

[vincerubinetti]

Sure, transferred it here:
#1894

[d8vjork]

This will be awesome as most React libraries out there already have this

And having this added to my types being generated by vue-tsc will be sweet