在 webstorm 中创建 vue 文件模板需进入 settings → editor → file and code templates → files，点击 + 添加新模板，名称填“vue”，扩展名填“vue”（不含点），内容使用标准 sfc 结构并含 ，保存后右键 new 即出现 vue 选项；若未生效需确认作用域为 ide 级别并重启 ide。
怎么创建 Vue 文件模板，让右键 New 里直接出现 Vue 选项
WebStorm 的 File and Code Templates 不是写完就生效的——它只管“新建文件”时的骨架，和语法高亮、组件识别完全无关。你看到右键菜单里没 Vue File，大概率是因为模板没挂对扩展名，或者根本没选中 Files 类型。
- 打开
Settings/Preferences → Editor → File and Code Templates，切到Files标签页（不是Code） - 点绿色
+→ 选Files→ 模板名填Vue，Extension必须填vue（不能是.vue，也不能留空） - 模板内容建议用标准单文件组件结构，开头加
<!-- @format -->可触发 Prettier 自动格式化：
<!-- @format -->
<template><div></div>
</template><p><script>
export default {
name: '${NAME}',
}
</script></p><p><style scoped>
</style></p>
- 保存后，右键
New → Vue就会出现；如果还是没有，重启 WebStorm（2026.1 版本存在缓存未刷新问题）
Live Templates 和 File Templates 到底该用哪个
很多人混淆这两者：一个管「代码块插入」（比如打 log + Tab 插入 console.log()），另一个管「新建整个文件」（比如新建 App.vue）。用错地方，就会发现模板死活不触发。
-
File and Code Templates（路径里带Code字样）→ 仅影响New → XXX菜单，生成完整新文件 -
Live Templates（在Settings → Editor → Live Templates）→ 影响编辑器内任意位置输入缩写 +Tab，插入代码片段 - 想让
vue缩写生成组件骨架？那是Live Templates，要手动定义 group、设置Applicable in JavaScript files等上下文 - 想统一项目里所有新
.vue文件都带<script setup></script>？必须用File and Code Templates → Files → Vue，Live Templates 做不到全局文件级约束
模板里变量不替换？${NAME} 为啥还是原样
WebStorm 模板变量只有在「新建文件对话框中填写文件名」那一刻才展开。如果你直接新建空文件再粘贴模板，${NAME} 就真变成字面量了——这不是 bug，是设计逻辑。
-
${NAME}对应的是你新建文件时输入的「文件名」（不含扩展名），比如新建HelloWorld.vue，${NAME}就是HelloWorld -
${USER}、${DATE}这类变量每次都会实时计算，但${NAME}只取一次，且依赖新建流程 - 常见错误：复制模板内容进已有文件 → 变量不会渲染；或在
Live Templates里误用${NAME}（它在 Live Templates 中不可用，该用$END$或$SELECTION$） - 调试技巧：新建文件时故意输个测试名（如
Test），看生成结果里是否替换成Test，能快速验证变量是否生效
为什么改了模板，旧项目不生效
WebStorm 的模板分两级：全局默认模板（影响所有项目），和项目级覆盖模板（只对该工程生效）。你在一个项目里改了，其他项目根本看不到——除非你改的是全局设置。
- 检查当前设置作用域：打开
Settings → Editor → File and Code Templates，右上角看是否显示Project或IDE；默认是IDE，即全局 - 如果显示
Project，说明你在该项目下单独配置过，此时修改只影响这个项目；切回IDE才能一劳永逸 - 团队协作时容易踩坑：有人在自己项目里加了
React Component模板，但没同步给其他人 → 新成员新建文件还是空白 - 导出/导入模板：点击右上角齿轮图标 →
Export Settings可备份，避免重装后丢失
真正麻烦的不是设模板，而是搞清它在哪一级生效、变量在哪个环节展开、以及「新建文件」这个动作本身是否被 IDE 正确捕获——漏掉任一环，模板就成摆设。
