vue生命周期钩子补全失效主因是文件类型识别错误或语言注入缺失，需手动设为vue.js并注入js/ts；选项式api补全created等key，组合式补全onmounted等函数；启用add lifecycle hook意图及自定义live template可提升效率。

Vue生命周期钩子补全不生效，先看文件类型和语言注入

WebStorm 对 created、mounted 等钩子的补全，只在明确识别为 Vue SFC（即 .vue 文件）且 <script></script> 区域被正确解析为 JavaScript/TypeScript 时才触发。常见失效原因是：.vue 文件被识别为 Plain Text 或 HTML，或 <script></script> 块未绑定语言上下文。

检查右下角状态栏的文件类型标识，如果不是 Vue.js，右键编辑器 → Override file type → 选 Vue.js；若仍无效，把光标放在 <script></script> 标签内，右键 → Inject language or reference → 选 JavaScript 或 TypeScript。

• 手动设置后需重启 WebStorm 才能生效（尤其首次配置 Vue 插件后）
• 如果项目是纯 JS（无 jsconfig.json），补全会退化为字符串匹配，beforeUnmount 这类新钩子可能不会出现
• TS 项目中，若用了 defineComponent 或 setup 语法，补全依赖类型推导，确保已启用 TypeScript Language Service

Vue 2 和 Vue 3 钩子补全行为不同，别混用写法

WebStorm 的钩子补全不是“统一列表”，而是按当前脚本块的语法上下文动态提供。你在 export default { ... } 对象里输入 crea 按 Ctrl+Space，会出 created；但在 setup() 函数里输同样内容，补全列表里只有 onBeforeMount、onMounted 这类 Composition API 钩子。

• Vue 2 选项式 API：补全基于对象 key，支持 beforeCreate、activated、errorCaptured 等全部旧钩子
• Vue 3 组合式 API：补全基于 onXXX 函数名，onRenderTracked 这类仅在开发模式可用的钩子默认不显示，除非启用了 Vue.js → Show advanced lifecycle hooks 意图
• 混用写法（比如在 setup 里写 mounted() {}）会导致补全错乱，IDE 不会主动报错，但钩子实际不执行

Alt+Enter 无法生成钩子？检查 Vue 意图是否启用

Alt+Enter 在光标停在组件定义内部时，可快速插入生命周期钩子——但这功能默认关闭。很多人以为它“坏了”，其实是没开开关。

Ainative Vue Sdk

使用 `@ainative/vue-sdk` 为 Vue 3 应用添加 AI 聊天功能。适用于以下场景：(1) 安装 `@ainative/vue-sdk`，(2) 在 Vue 组件中使用 `useChat` 组合式函数，(3) 提供……

下载

进 Settings | Editor | Intentions，展开 Vue.js 子项，必须勾选：Add lifecycle hook。这个意图只在以下场景激活：

• 光标位于 export default { 大括号内部（选项式）
• 光标位于 setup() { 函数体内部（组合式）
• 光标不能落在注释、空行或字符串字面量中
• 若用 defineComponent 包裹，需确保其返回值被正确识别为组件定义（否则意图不触发）

自定义 Live Template 补全钩子，比等 IDE 更快

依赖 IDE 补全有时慢半拍，尤其团队统一用某几个钩子（比如总要写 onMounted(() => {...})）。直接建 Live Template 更稳。

路径：Settings | Editor | Live Templates → 选 Vue → + → Live Template：

• Abbreviation 填 onm，Template text 填 onMounted(() => {$END$});
• 点击 Define → 勾选 Vue.js（不是 JavaScript！）
• 用时在 setup 里输 onm + Tab，立刻生成带光标定位的代码
• 同理可建 onu 补全 onUnmounted，crea 补全 created: () => {}（用于选项式）

注意：Live Template 的变量名如 $END$ 决定 Tab 后光标落点，少一个符号就卡住；Vue 意图和 Live Template 可共存，但优先级上 Live Template 更高。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！