<p>Live Templates需点Define并勾选对应语言（如JavaScript/TypeScript），缩写不能含空格或特殊字符，文件后缀须匹配；File Templates须在Files标签页新建，Extension填vue（不带点），首行加<!-- @format -->触发Prettier。</p>
WebStorm 的代码生成模板分两类：Live Templates（编辑器内缩写 + Tab 插入）和 File Templates（右键 New 生成的文件骨架），改错地方或漏关键步骤，模板就完全不生效。
Live Templates 怎么改才让 log / ue 等缩写真正触发
改完缩写或文本却按 Tab 没反应？大概率卡在三处：
- 没点 Define 并勾选对应语言（如 JavaScript、TypeScript、React JSX）——只填
Abbreviation和Template text不够 -
Abbreviation含空格、大写字母或特殊字符（如use-effect），WebStorm 会直接忽略 - 当前文件后缀不匹配：在
.ts文件里输log，但模板只勾了 JavaScript，就不会触发
动态变量如 $METHOD_NAME$ 必须进 Edit variables 配 methodName()，大小写写成 methodname() 就返回 undefined；函数体内用 className() 也为空，得换 fileNameWithoutExtension()。
File Templates 怎么改 Vue / JS 文件的默认结构
右键 New → 没有 Vue 选项？不是插件问题，是模板挂错了位置：
- 必须去 Settings → Editor → File and Code Templates → Files 标签页（不是 “Code” 或 “Includes”）
- 新建模板时，
Extension字段必须填vue（不能带点，不能写.vue） - 模板正文第一行加
<!-- @format -->，才能让 Prettier 在保存时自动格式化（前提是项目已配好 Prettier） -
class ${NAME} {后换行要手动敲回车，WebStorm 不会自动缩进函数体，硬靠自动补全会丢空格
改完模板为什么还是不生效
最常被忽略的两个事实：
- Live Templates 修改后**不用重启 IDE**，但必须确保光标在正确语言上下文中（比如在
.tsx里，模板得同时勾上 TypeScript 和 React JSX） - File Templates 在 2026.1+ 版本存在缓存延迟，**改完建议重启 WebStorm**，否则右键菜单可能仍不显示新模板
- 缩写冲突：你设了
cl，但 WebStorm 自带的cl（class 声明）也在 JS 中启用，就会弹窗让你选——搜一下 Live Templates 列表就能确认
真正麻烦的不是“怎么加”，而是“在哪加、对谁加、加完是否被识别”。Live Templates 和 File Templates 互不感知，改一个不会影响另一个，但两者都依赖你手动绑定作用域和校验扩展名。漏掉 Define、Extension 写错、重启不及时，三个动作任一缺失，模板就等于白配。
