JSDoc intellisense for Vue 3 setup events and component description

[vincerubinetti]

Discussed in #1473

^{Originally posted by vincerubinetti June 17, 2022}
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]

Due to TypeScript limitation we can't support JSDoc for defineEmits, but for events from defineProps is possible.

interface Props {
  /** test event */
  onTest(): void;
}

const props = defineProps<Props>();

[d8vjork]

@johnsoncodehk will this be a thing for vue-tsc? Or only for IDE support?

[johnsoncodehk]

@d8vjork all TS behavior is affected vue-tsc and IDE support both.

[d8vjork]

I saw the pinned issue about maintaining this project.

Will be very happy to help with this project and this feature in particular, but I've 0 (none) idea about TypeScript's tsc.

[rijenkii]

What changes need to be done to copy the behavior of vue-styleguidist in volar/vue-component-meta?
See vue-styleguidist/vue-styleguidist#1399.

[zernonia]

Due to TypeScript limitation we can't support JSDoc for defineEmits, but for events from defineProps is possible.

interface Props {
  /** test event */
  onTest(): void;
}

const props = defineProps<Props>();

I wonder with the introduction of Named tuple syntax in 3.3+, does it provides a better interface to have description support for EventMeta 🤔

[johnsoncodehk]

Implemented via #4365, for script setup components that need to work with Vue 3.5, for generic components it should work with next Vue langauge tools release.