webstorm默认new→vue component生成vue 2风格空骨架，必须用live templates手动配置vue3缩写模板，支持光标跳转至defineprops/defineemits泛型位置，作用域须限定为vue files。
WebStorm 默认的 New → Vue Component 菜单项生成的是 Vue 2 风格的 Options API 空骨架，完全不适用于 Vue 3 + <script setup></script> 项目。必须用 Live Templates 手动配置，否则每次新建组件都要重写 defineProps、ref、onMounted 等基础结构。
Live Templates 是唯一可靠方式
File and Code Templates（文件模板）只生成静态内容，无法跳转编辑、不支持泛型占位、也不能在 .vue 文件中触发。只有 Live Templates 支持光标自动停入类型定义位置，且能限定作用域为 Vue Files。
- 路径：
Settings → Editor → Live Templates → + → Live Template -
Abbreviation填vue3（敲完按 Tab 就展开） -
Template text必须包含换行和缩进，否则格式错乱：
<template><div></div>
</template><p><script setup lang="ts">
const props = defineProps<{<!-- -->}>()
const emit = defineEmits<{<!-- -->}>()
</script></p><p><style scoped>
</style></p>
- 点击
Define→ 勾选Vue Files（仅勾HTML Files不生效） - 保存后，在任意
.vue文件中输入vue3+Tab，光标会停在第一个<!-- -->处，直接写name: string; avatar?: string，再按Tab跳到第二个泛型处
为什么不能用 Vetur 或默认模型生成
Vetur 已弃用，与 <script setup></script> 的类型推导冲突；WebStorm 内置的 CodeGeeX 免费模型对 Composition API 的理解准确率低于 60%，容易漏掉 ref.value 写法、把 onMounted 写成 mounted() 钩子，或错误引入 import { ref } from 'vue' 却没声明类型。
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 必须关闭
Vetur，启用Volar（状态栏显示 “Vue” 才算识别成功） - 若要用 AI 补全，得手动开启
Enable project context，并选CodeGeeX-1.5-Chat模型 - AI 生成前务必确认当前文件扩展名是
.vue，且光标位于<script setup></script>区域内
常见报错与排查点
defineProps 下划线报红、无类型提示、props.xxx 提示 “Property does not exist” —— 这不是代码问题，而是 IDE 配置断层。
- 检查右下角状态栏是否显示 “Vue”，不显示说明 Volar 未激活或文件未被识别
-
tsconfig.json中必须有"types": ["vue"]，否则defineProps泛型无法解析 - Live Templates 里没勾
Vue Files，或缩写输成了vue（旧版模板）而非vue3 - 组件名含大写字母但
<template></template>里用了 kebab-case，导致<user-profile></user-profile>不渲染（Vue 3 对大小写更敏感）
真正省时间的不是“一键生成”，而是让光标精准落在该填类型的地方——<!-- --> 这个注释不是凑数，是 WebStorm 变量跳转机制唯一稳定可靠的锚点。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
