html:5+tab不生成代码是因为它属于emmet缩写，需在支持emmet的文件类型（如.html、.vue）中触发，且必须启用emmet、光标位于行首、按tab键而非enter，并确保settings→editor→emmet中已勾选enable emmet for html。
WebStorm 里不用手敲 HTML、Vue、React 模板，靠的是 Live Templates 和预置的缩写（Abbreviation），但很多人输完 html:5 或 vue 按 Tab 没反应——不是功能失效，而是模板没启用或作用域不对。
为什么 html:5 + Tab 不生成代码？
这个缩写属于 Emmet，不是 Live Template，必须在支持 Emmet 的文件类型里才能触发。常见错误包括：
- 当前文件后缀不是
.html、.htm或.vue（比如误开成.js文件） - Emmet 被手动禁用：进入
Settings → Editor → Emmet，确认Enable Emmet for HTML已勾选 - 输入后按的是
Enter而不是Tab—— Emmet 只响应Tab - 光标不在行首或空行：某些版本对上下文敏感，建议在新行开头输入
vue 或 react 模板不生效？检查 Live Templates 作用域
自定义模板（如输入 vue 生成 new Vue({})）依赖 Live Templates 的作用域设置。默认情况下，它可能只对 JavaScript 生效，但你在 .vue 单文件组件的 <script></script> 区域写时，实际语言模式是 JavaScript (Vue) 或 Vue.js，不是纯 JavaScript。
- 打开
Settings → Editor → Live Templates - 找到你的
vue模板 → 点击右下角Define - 勾选
JavaScript和Vue.js（如果列表里有），不要只选Everywhere—— 它在 Vue 文件中不一定被识别为 “everywhere” - 同理，React 模板（如
rcc）需确保勾选JavaScript和React JSX
如何快速添加一个自己的 HTML 初始化模板？
比起改默认 Emmet，直接建一个 Live Template 更可控，尤其适合带 jQuery、特定 CDN 或项目结构的定制化初始化。
- 进
Settings → Editor → Live Templates→ 点+→Template Group（比如叫my-html） - 再点
+→Live Template，缩写填jq5，模板正文粘贴完整 HTML 结构（含<script src="..."></script>） - 点
Define，只勾选HTML—— 避免在 JS 文件里误触发 - 关键一步：在模板正文末尾加
$END$，否则光标不会停在里，而卡在最后一行 - 用的时候：输入
jq5+Tab，光标自动跳到内部
生成后缩进错乱？别硬调，用格式化救场
Live Template 里手动敲空格/Tab 做缩进，常因编辑器缩进设置（4空格 vs 2空格、Tab 字符 vs 空格）导致生成后错位。与其反复试，不如：
- 模板里统一用空格缩进（避免混用 Tab），并关闭
Settings → Editor → Code Style → HTML → Use tab character - 生成后立刻按
Ctrl + Alt + L（Windows/Linux）或Cmd + Option + L（macOS）自动格式化整文件 - 若只想格式化选中部分，先选中再格式化，避免影响全局结构
Live Templates 的变量（如 $NAME$）和上下文感知能力有限，复杂逻辑别硬塞进去；真需要动态内容，用插件或外部脚本更稳。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
