如何在VS Code中为自定义Vue组件添加Props悬停提示？

要实现自定义Vue组件的Props悬停提示，和Ant Design组件的效果一致，主要依赖VS Code的Vue插件（Vue3用Volar，Vue2用Vetur）配合组件的类型定义或注释，以下是几种可行方案：

方案一：TypeScript类型定义（推荐Vue3+TS项目） #

直接在组件中用defineProps定义带类型和注释的Props，Volar插件会自动识别并展示悬停提示：

<template>
  <div>{{ label }}: {{ value }}</div>
</template>

<script setup lang="ts">
import { defineProps } from 'vue'

const props = defineProps<{
  // 组件左侧显示的标签文本
  label: string
  // 组件右侧展示的内容值
  value: string | number
  // 是否禁用组件交互（默认false）
  disabled?: boolean
}>()
</script>

使用组件时，鼠标悬停在Props上就能看到类型说明和注释。

方案二：JSDoc注释（适用于JavaScript项目） #

如果是纯JS项目，给组件的Props配置添加JSDoc注释，插件同样能识别并生成提示：

<template>
  <div>{{ label }}: {{ value }}</div>
</template>

<script setup>
import { defineProps } from 'vue'

const props = defineProps({
  /**
   * 组件左侧显示的标签文本
   * @type {string}
   */
  label: {
    type: String,
    required: true
  },
  /**
   * 组件右侧展示的内容值
   * @type {string|number}
   */
  value: {
    type: [String, Number],
    required: true
  },
  /**
   * 是否禁用组件交互
   * @type {boolean}
   * @default false
   */
  disabled: {
    type: Boolean,
    default: false
  }
})
</script>

方案三：全局组件类型声明（适用于全局注册的组件） #

如果组件是全局注册的，可在项目根目录创建components.d.ts类型声明文件，统一声明组件Props类型：

import type { ComponentCustomProps } from 'vue'

declare module '@vue/runtime-core' {
  interface GlobalComponents {
    QLabelValuesItem: {
      props: {
        label: string
        value: string | number
        disabled?: boolean
      }
    }
  }
}

export {}

将该文件加入tsconfig.json的include数组，确保VS Code能识别。

注意：无论哪种方案，都需要确保VS Code安装了对应版本的Vue插件（Vue3用Volar，Vue2用Vetur），插件是实现悬停提示的核心支撑。

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