Vue Component Props Event Hints

一个为Vue组件提供智能代码补全的VSCode插件，支持属性(props)和事件(events)的自动提示。

功能特性

• 属性补全: 在Vue组件标签中自动提示可用的props
• 事件补全: 输入@时自动提示组件的events
• JSDoc支持: 显示JSDoc注释中的属性和事件描述
• Vue 2/3兼容: 同时支持Vue 2 Options API和Vue 3 Composition API
• TypeScript支持: 支持TypeScript Vue组件
• 智能缓存: 高效的文件解析和缓存机制

支持的Vue语法

属性定义

// Vue 2
props: { name: String }
props: ['name']

// Vue 3  
defineProps({ name: String })
defineProps(['name'])
const props = defineProps({ name: String })

// TypeScript
defineProps<{ name: string }>()

事件定义

// Vue 2
emits: { change: null }
emits: ['change']

// Vue 3
defineEmits({ change: null })
defineEmits(['change']) 
const emits = defineEmits(['change'])

// TypeScript
defineEmits<{ change: [value: string] }>()

使用方法

1. 属性补全: 在组件标签中输入属性名

   <MyComponent :prop-name="value" />
   

2. 事件补全: 在组件标签中输入@

   <MyComponent @event-name="handler" />
   

3. JSDoc文档: 添加JSDoc注释获得更好的提示

   /**
    * @property {String} message - 显示的消息
    * @event {Function} change - 值改变时触发
    */
   

安装

1. 打开Visual Studio Code
2. 进入扩展面板 (Ctrl+Shift+X)
3. 搜索 "Vue Component Props Event Hints"
4. 点击安装

要求

• Visual Studio Code 1.60.0+
• Vue.js项目(.vue文件)

享受Vue开发！ 🚀