必须禁用Vetur、启用Volar，否则defineProps和ref会报红；需配置tsconfig.json含"jsx":"preserve"和"types":["vue"]，启用CodeGeeX项目上下文，并设置vue3 Live Template。

必须禁用 Vetur、启用 Volar，否则 defineProps 和 ref 会报红

WebStorm 默认识别 Vue 文件时依赖 Vetur，但它只适配 Vue 2 和 Options API，对 Vue 3 的 script setup、defineProps、defineEmits 等语法完全无感知。你看到的“defineProps is not defined”或类型推导失效，90% 是这个原因。

• 进 Settings → Plugins → 搜索 Vetur → 点击 Disable（不是卸载，避免影响旧项目）
• 搜索 Volar → 安装并重启 WebStorm
• 重启后，打开任意 .vue 文件，右下角状态栏应显示 “Volar: TS” 或 “Volar: Vue”；若显示 “Vetur”，说明没生效
• 额外检查：Settings → Languages & Frameworks → TypeScript → 取消勾选 “Use configured TypeScript version for Vue files”，改由 Volar 全权接管类型服务

开启项目上下文感知，不然 CodeGeeX 生成的代码全是 Vue 2 风格

CodeGeeX 插件默认只看当前文件，不知道你用的是 Vue 3 + TypeScript，容易输出 export default { data() { ... } } 这种 Options API 代码。必须让它读取项目真实配置。

• Settings → Tools → CodeGeeX → Language Model → 选 CodeGeeX-1.5-Chat（免费版对 Composition API 支持极差）
• 关键一步：勾选 Enable project context，然后点 Refresh Project Structure
• 确保项目根目录有 tsconfig.json 和 vite.config.ts，且 node_modules/vue 已安装（Volar 会从中提取类型定义）
• 验证方式：在 .vue 文件里写 defineProps，看是否能自动补全参数类型提示；不能则说明上下文未加载成功

Live Templates 要绑定 script setup lang="ts"，别用 Options API 模板

新建组件时如果还用老模板，一上来就是 export default { data() { ... } }，后续迁移成本远高于直接起步正确。

vue-component-analyzer

递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。

下载

• Settings → Editor → Live Templates → 点击 + → Live Template
• Abbreviation 填 vue3，Description 写 “Vue 3 Composition API component”
• Template text 粘贴以下内容（注意保留 $ 符号占位）：

  <template>
    <div></div>
  </template>
  
  <script setup lang="ts">
  defineProps<{ $PROP_NAME$: $PROP_TYPE$ }>()
  const $EMIT_NAME$ = defineEmits<['$EVENT_NAME$']>()
  $END$
  </script>
  
  <style scoped>
  </style>

• Apply 后，在 .vue 文件中输入 vue3 + Tab，即可生成带 script setup 的骨架

tsconfig.json 必须包含 "jsx": "preserve" 和 "types": ["vue"]

缺这两项，WebStorm 无法识别 <template> 中的 JSX-like 语法，也不懂 defineComponent 的返回类型，导致 ref 类型丢失、事件参数推导失败。

立即学习“前端免费学习笔记（深入）”；

• 确认 tsconfig.json 的 compilerOptions 包含：

  "jsx": "preserve",
  "types": ["vue", "vite/client"]

• 如果用了 Vite，vite/client 提供了全局类型如 import.meta.env；漏掉它，import.meta.env.VUE_APP_API 会标红
• 不要手动添加 /// <reference types="vue" /> 到每个 .vue 文件——这是旧方案，Volar 已自动注入
• 改完 tsconfig 后，WebStorm 右上角会弹出 “TypeScript config changed”，点 Reload 即可生效

Volar 的类型服务和项目上下文感知是硬性前提，其他设置都建立在这两块之上。一旦 defineProps 不报错、ref 能正确推导类型、CodeGeeX 输出的代码能直接跑通，才算真正就绪。