WebStorm 写 Vue 代码快的关键在于正确配置：启用 Volar 替代旧插件以支持 Composition API 类型推断；设置 Live Templates 快速生成 setup 结构；排除 node_modules 防卡顿；集成 Prettier 与 ESLint 自动修复且避免冲突。
WebStorm 写 Vue 代码快不快，不取决于你敲得多猛，而在于它能不能“猜中你要写什么”——这10个配置里，有7个是让 IDE 主动理解你、提前补全、少写半行；剩下3个是防止它突然卡住、跳错、或把 defineProps 当成普通变量报红。
启用 Volar 而不是旧版 Vue.js 插件
WebStorm 自带的 Vue.js 插件（Settings > Languages & Frameworks > JavaScript > Vue.js）只支持 Options API，对 <script setup></script> 的类型推断弱、defineProps 和 defineEmits 常标红、模板里无法跳转到 ref 定义处。
- 必须卸载内置 Vue.js 插件，从 Marketplace 安装官方
Volar（注意：不是Vue.js，也不是Vetur） - Volar 需要配合
Vue Language Features (Volar)子插件启用，二者缺一不可 - 重启 WebStorm 后，检查状态栏右下角是否显示
Volar（不是Vue），且defineProps()能正确推导类型 - 若仍报红，确认项目根目录有
tsconfig.json且包含"compilerOptions": { "types": ["vue"] }
Live Templates 快速生成 <script setup> 结构</script>
手敲 <script setup lang="ts"></script> + defineProps + defineEmits 每次都重复，但 WebStorm 的 Live Templates 可以一键展开、光标自动跳转、支持 TypeScript 类型占位。
- Settings > Editor > Live Templates > 点击
+> Live Template - Abbreviation 填
v3ts，Description 写 “Vue3 + TS + setup” - Template text 粘贴以下内容（注意保留 $ 符号）：
<script setup lang="ts">
defineProps<{ $PROP_NAME$: $PROP_TYPE$ }>()
const $EMIT_NAME$ = defineEmits(['$EVENT_NAME$'])
$END$
</script>
- 点击
Edit variables，为$PROP_NAME$设默认值props，$PROP_TYPE$设为any，勾选Skip if defined - Apply 后，在 .vue 文件中输入
v3ts+Tab，光标会依次停在$PROP_NAME$→$PROP_TYPE$→$EMIT_NAME$→$EVENT_NAME$
关闭 node_modules 索引避免卡顿
Vue 项目里 node_modules 动辄上万文件，WebStorm 默认全量索引会导致：Ctrl+Click 跳转延迟、Find Usages 卡死、输入时 CPU 突增到 80%+。
使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……
立即学习“前端免费学习笔记（深入）”；
- 右键项目根目录下的
node_modules文件夹 →Mark Directory as→Excluded - 别信“自动排除”，必须手动标记；否则即使开了
Exclude from project，IDE 仍可能扫描 - 标记后，
import { ref } from 'vue'的跳转会变快，但node_modules里的类型定义（如vue.d.ts）依然可用——因为 TypeScript Server 会单独加载 - 顺手在 Settings > Appearance & Behavior > System Settings > Project Opening 中勾掉
Load project on startup，改用Open Project in New Window避免启动即卡
启用 Prettier + ESLint 自动修复保存时
Vue 项目里格式混乱、分号缺失、引号不统一，靠人眼 review 效率低；但 WebStorm 的保存钩子能全自动处理，前提是配置不冲突。
- Settings > Languages & Frameworks > JavaScript > Code Quality Tools > Prettier：设置
Prettier package路径（指向项目内node_modules/prettier），勾选Run on save - 同页面切换到 ESLint：启用
ESLint package（指向node_modules/eslint），勾选Run automatically和Fix problems on save - 关键：在
.eslintrc.js或eslint.config.js中显式配置rules: { 'prettier/prettier': 'off' }，否则 Prettier 和 ESLint 会互相覆盖报错 - 验证方式：改一行代码，保存后观察右下角是否弹出
Formatting with Prettier和Fixing with ESLint提示
真正卡住 Vue 开发的，往往不是功能不会用，而是 Volar 没启、node_modules 在后台狂扫、或者保存时两个代码检查工具打架。这些点调不对，再多快捷键也白搭。
