defineProps和defineEmits标红是IDE未正确识别编译宏，需显式声明lang="ts"、配置tsconfig.json含["vue"]、启用Volar服务并清理.idea目录。
为什么 defineProps 和 defineEmits 总是标红？
这不是代码错误，而是 WebStorm 没把 <script setup> 当作 Vue 3 的合法语法上下文处理。常见现象是：代码能正常运行，但 IDE 报 Cannot find name 'defineProps'。
-
lang="ts"必须显式写在<script setup>标签里，不能省略或写成lang="javascript" - 项目根目录必须存在
tsconfig.json，且"types"字段至少包含["vue"]（若用 Vue Router 还要加"vue-router"） - 删掉项目下的
.idea目录，重启 WebStorm——旧索引常导致类型服务卡死，强制重建最有效
如何让 useRouter 和 useRoute 出现完整参数提示？
函数名有补全但悬停无参数说明，说明类型定义加载了，但没被正确推导。关键不在“有没有”，而在“能不能被识别到”。
- 不要直接
import { router } from '@/router'，改用const router = useRouter()—— WebStorm 对组合式 API 的类型推断比对实例导入强得多 - 检查
node_modules/vue-router/dist/vue-router.d.ts是否可读；pnpm 或 monorepo 场景下路径可能解析失败，可临时在shims-vue.d.ts中加一行：/// <reference types="vue-router" /> - 在
src/router/index.ts中导出时加上类型断言：export const router = createRouter({ ... }) as Router
Volar 插件启用后还是没反应？
WebStorm 2024.2+ 已内置 Volar 支持，但默认不启用。它不是“装了就生效”，而是需要手动切换 TypeScript 语言服务。
vue-component-analyzer
下载
递归分析 Vue 项目组件依赖，从入口文件生成组件层级图，支持 Vue 2/3，输出组件名、文件路径和属性。适用于分析组件结构、排查依赖或了解项目架构。
- 进入
Settings → Languages & Frameworks → TypeScript → Vue.js，勾选Use Volar instead of built-in service - 确保 Vue.js 插件已启用（
Settings → Plugins中搜索并启用） - 对任意
.vue文件，在<script setup>区域右键 →Inject language or reference→ 选Vue.js（不是 JavaScript！）
组件内 import 的变量为何没有跳转和重命名支持？
这是 WebStorm 对 script setup 的静态分析局限：它默认不将顶层 import 视为“可导出符号”，导致重构能力弱化。
立即学习“前端免费学习笔记（深入）”；
- 避免在
<script setup>中直接使用export导出变量（语法允许但 IDE 不识别） - 如需跨组件复用逻辑，封装成独立的
composables/useXxx.ts文件，并用export function useXxx()导出 - WebStorm 能精准识别这种显式导出的函数，支持 Ctrl+Click 跳转、安全重命名、引用查找
lang="ts" 显式声明是两个不可跳过的硬性条件；而 .idea 目录清理和 shims-vue.d.ts 补充类型引用，往往是解决“看起来配置都对，但就是不生效”的最后一环。 
