webstorm的live templates和file templates是两套独立机制：前者控制编辑器内缩写+tab插入的代码块，后者决定右键new生成的文件骨架；配置路径、生效条件及常见问题均不同。
WebStorm 的代码生成模板（Live Templates）和文件模板（File Templates）是两套独立机制，样式表现取决于你配的是哪一类——Live Templates 控制的是「在编辑器里输缩写 + Tab 插入的代码块」，而 File Templates 决定的是「右键 New → 选 Vue/JS 文件时生成的骨架」。两者都影响最终代码的格式，但配置路径、生效条件和常见坑完全不同。
Live Templates 怎么配缩进和空格
Live Templates 本身不直接控制缩进风格（比如用 2 空格还是 tab），它插入的文本会继承当前文件的 Editor → Code Style → [语言] 设置。但你可以手动在模板文本里写空格或制表符，不过不推荐——容易和项目 Prettier/ESLint 冲突。
- 真正起作用的是：
Editor → Code Style → JavaScript（或TypeScript、HTML）里的Tab size和Indent值，建议统一设为2 - 模板中若含多行结构（如 class 或 template），记得每行开头用 $END$ 或 $SELECTION$ 占位，否则光标可能卡在奇怪位置
- 别在 Template text 里硬敲
\t：WebStorm 会按当前文件缩进规则自动换算，手动敲反而导致格式错乱
File Templates 怎么让新建文件符合项目格式
右键 New 出来的文件（比如 Vue、JS）是否带 <!-- @format -->、是否用 export default、是否空行正确，全靠 File Templates 配置。它不读取 Code Style，只管“贴进去什么”。
- 路径必须是
Settings → Editor → File and Code Templates → Files，不是 Live Templates - 新建模板时，
Extension字段填vue（不能带点），否则右键菜单不显示 “Vue File” - 模板正文第一行建议加
<!-- @format -->，这样保存时会触发 Prettier 自动格式化（前提是项目已配好 Prettier） - JS 类模板中，
class ${NAME} {后面换行要手动敲回车，不能依赖 WebStorm 自动补全——它不会帮你缩进函数体
为什么模板写了却没反应
最常卡在这三步，不是设置错了，而是漏了关键动作：
-
Live Templates设完缩写和文本后，必须点Define并勾选对应语言（如JavaScript、HTML），否则输缩写按 Tab 没反应 -
File Templates的模板类型必须选Files，不是Includes或Other；名字可以叫Vue，但Extension必须严格填vue - 改完任一模板，不用重启 IDE，但新建文件/触发 Live Template 前，得确保当前文件后缀匹配（比如在
.ts里输log，就得在 Live Template 的 Define 里勾上TypeScript）
复杂点在于：Live Templates 的变量（如 $METHOD_NAME$）只在特定上下文生效，比如函数体内才取得到方法名；而 File Templates 的 ${NAME} 是新建时手动输入的，和运行时无关。这两套变量系统互不兼容，别试图混用。
