WebStorm配置自定义代码生成模板的详细流程-webstorm-PHP中文网

webstorm自定义代码生成分两类：file and code templates用于新建文件（如右键new→vue），live templates用于编辑器内缩写+tab插入代码块（如log→console.log()）；变量语法与作用域互不兼容，混用将静默失败。

webstorm配置自定义代码生成模板的详细流程

WebStorm 的「自定义代码生成模板」分两类，用错地方就永远不生效：File and Code Templates 管新建整个文件（比如右键 New → Vue），Live Templates 管编辑器内打缩写 + Tab 插入代码块（比如输入 log + Tab 插入 console.log()）。必须先明确你要的是哪一种。

怎么让右键 New 里出现自定义文件类型（如 Component Folder）

这是 File and Code Templates → Files 标签页的事，不是 Live Templates。主模板必须用 $name/$name 写路径，否则子模板不会落到同名目录下。

进 Settings/Preferences → Editor → File and Code Templates → Files 标签页
点 + → 选 Files，名称填 React Component Folder，Extension 留空（或填 js），文件名字段必须写 $name/$name

主模板正文可写基础组件结构，例如：

export default function $name() {
  return <div><h1>$name</h1></div>;
}

选中该主模板，点工具栏 + → 子模板，新建 Test File，Extension 填 test.js，文件名填 $name.test，正文写测试骨架
所有子模板共享 $name 变量，但变量值只在新建文件对话框输入文件名时展开——直接粘贴模板不会触发替换

为什么新建文件后 ${NAME} 还是原样没替换

因为 WebStorm 模板变量只在「新建文件对话框中填写文件名」那一刻求值。${NAME} 对应的是你输的文件名（不含扩展名），比如建 Button.vue，${NAME} 就是 Button；但如果跳过对话框、直接新建空文件再贴模板，${NAME} 就真成字面量了。

WebStorm Linux版

WebStorm 2026.2 Linux tar.gz 安装包，适合在 Linux 桌面环境中搭建现代前端开发与调试工作流。

下载

确保你在 New → 你的模板后弹出的对话框里填了文件名（如 Header），而不是新建完再改名
不要把模板内容复制进已有文件——那只是普通文本粘贴，不走模板引擎
Vue 模板要生效，Extension 必须填 vue（不能带点，不能留空），且必须放在 Files 下，不是 Code 下

怎么创建编辑器内打缩写就展开的代码片段（如 clg → console.log）

这是 Live Templates 的事，在 Settings/Preferences → Editor → Live Templates 里配置，和新建文件无关。

进 Editor → Live Templates，选组（如 JavaScript 或新建 User 组）
点 + → Live Template，Abbreviation 填 clg，Description 写说明，Template text 填：
```
console.log($END$);
```
点 Edit variables，把 END 的 Expression 设为 none，勾选 Skip if defined
点 Define，设置适用上下文，比如勾选 JavaScript 和 TypeScript
输入 clg 后按 Tab，光标会停在 console.log(|) 的括号里