如何在WebStorm中快速生成自定义的代码片段（Live Templates）？-webstorm-PHP中文网

live templates 是 webstorm 中无需插件、纯编辑器层的高效代码片段功能；通过 file → settings → editor → live templates 设置，可自定义缩写（如 vue）并绑定到指定语言作用域，支持 $end$ 定位光标、$var$ 动态取值及 groovy 表达式上下文变量。

如何在webstorm中快速生成自定义的代码片段（live templates）？

Live Templates 是 WebStorm 里最值得花十分钟配好的功能之一——它不依赖插件、不增加构建负担，纯编辑器层的效率加成。配好后，输入缩写（比如 vue）再按 Tab，就能展开一整段结构化代码。

在哪设置 Live Templates？

路径固定：File → Settings → Editor → Live Templates（macOS 是 WebStorm → Preferences → Editor → Live Templates）。别去 File and Code Templates，那是生成新文件用的，和行内片段无关。

如何新建一个 Vue 初始化模板？

这是典型场景：每次写 demo 都要敲 const app = new Vue({ el: '#app', data: {}, methods: {} })，容易漏括号或逗号。

WebStorm Linux版

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

下载

点击右上角 + → Live Template
Abbreviation 填 vue（触发缩写）
Description 写“Vue 2 instance boilerplate”（仅备注，不影响功能）
Template text 粘贴：
```
const app = new Vue({
  el: '#app',
  data: {
    $END$
  },
  methods: {}
});
```
其中 $END$ 是光标最终停留位置，不是字符串 literal
点下方 Define，勾选 JavaScript（不是 HTML 或 Vue 文件类型——因为这段代码写在 .js 里）

为什么输完 `vue` 按 `Tab` 没反应？

常见卡点就三个：

缩写已存在冲突：比如 for、if 是内置模板，自定义的 vue 如果被其他插件占用了，得删掉冲突项或换名（如 vue2）
作用域没设对：模板必须明确指定适用语言，Everywhere 看似方便，但实际在 JS 文件里不会激活；务必选 JavaScript 或 JavaScript File
未启用自动展开：检查 Settings → Editor → General → Code Completion，确认勾选了 Autopopup code completion，否则要手动按 Ctrl+Space 才能唤出候选

进阶：带变量的模板怎么写？

比如想让 log 模板自动插入当前变量名：console.log('xxx', xxx)。这时要用 $VAR$ 占位符 + 表达式：

Template text 写：
```
console.log('$VAR$', $VAR$);
```
点 Edit variables，给 VAR 设置表达式：groovyScript("def name=''; if (editor != null) { name = editor.getCaretModel().getCurrentCaret().getSelectedText(); }; name")
这样选中 userList 后输入 log + Tab，就会变成 console.log('userList', userList);