不依赖第三方包，如何编写Vue3 Composition API单文件组件的IDE可识别文档？

在不依赖第三方包的情况下，让IntelliJ IDEA在hover使用<script setup>的Vue3组件时显示文档弹窗，正确的做法是在组件的特定位置添加标准JSDoc注释，具体如下：

正确的注释位置与格式 #

方式1：组件最顶部（<template>标签上方） #

直接在组件的<template>前添加JSDoc注释，IDE会自动关联到组件本身：

/**
 * 自定义操作按钮组件
 * 提供带状态的按钮交互，支持禁用状态与自定义文本
 * @property {string} label - 按钮显示的文本内容（必填）
 * @property {boolean} disabled - 是否禁用按钮，默认false
 * @fires click - 按钮被点击时触发，无额外参数
 */
<template>
  <button :disabled="disabled" @click="$emit('click')" class="custom-btn">
    {{ label }}
  </button>
</template>

<script setup>
defineProps({
  label: {
    type: String,
    required: true
  },
  disabled: {
    type: Boolean,
    default: false
  }
})

defineEmits(['click'])
</script>

方式2：<script setup>块的第一行（导入语句前） #

如果习惯把注释写在脚本内，可放在<script setup>的最开头、导入语句之前：

<script setup>
/**
 * 卡片展示组件
 * 用于结构化展示标题与内容信息
 * @props {string} title - 卡片的标题文本
 * @props {string} content - 卡片的主体内容
 */
import { ref } from 'vue'

const props = defineProps(['title', 'content'])
</script>

<template>
  <div class="card-container">
    <h2>{{ title }}</h2>
    <p>{{ content }}</p>
  </div>
</template>

关键注意事项 #

• 注释必须用/** ... */包裹，单行//或普通多行/* ... */无法被IDE识别为组件文档
• 描述props可使用@property或@props标签，事件用@fires或@emits标签，IDE会解析这些标签并在hover时展示对应信息
• 确保你的IntelliJ IDEA Vue插件是最新版本，旧版本对<script setup>的注释支持可能不完善

内容的提问来源于stack exchange，提问作者KaptajnKold