PhpStorm默认已内置Emmet支持，无需安装插件；关键前提是文件类型识别为HTML（右下角显示HTML而非Plain Text），光标位于标签起始处，且按Tab键触发缩写展开。
PhpStorm 默认已支持 Emmet，无需额外安装
PhpStorm 从 2017.1 版本起就内置了 Emmet 支持，只要文件类型识别正确（.html 或 .htm），直接输入缩写 + Tab 就能展开。不需要手动装插件、也不用改设置开关——除非你之前关过或误删过配置。
常见错误现象：输入 div 按 Tab 没反应，或只插入空格。大概率是当前文件没被识别为 HTML（比如后缀是 .txt 或编码格式异常），或者光标不在编辑区（比如在注释里、属性值内）。
- 检查右下角状态栏：确认显示的是
HTML，不是Plain Text或XML - 右键文件 →
Override File Type→ 选HTML - 确保光标在标签开始位置（比如
div前不能有空格或引号）
常用 HTML 缩写必须记牢的几个核心模式
别背全部语法，先掌握高频组合。这些在 PhpStorm 中实测有效，且兼容最新版（2026 年 6 月稳定版）：
-
!或html:5+Tab→ 生成完整 HTML5 文档结构（含<meta charset="UTF-8">和<viewport>） -
ul>li*5+Tab→ 生成带 5 个<li>的无序列表，*后面数字可任意改 -
div.container>h2{标题}+p{段落}+Tab→ 自动嵌套并填入文本，{}内容原样输出 -
a[href=#]{点击}+Tab→ 生成<a href="#">点击</a>，属性和内容一次到位 -
.item$*3+Tab→ 生成<div class="item1"></div><div class="item2"></div><div class="item3"></div>，$触发自增
类名、ID、属性混写时的优先级和顺序
PhpStorm 的 Emmet 解析器对符号顺序很敏感，错一位就可能生成意外结构：
立即学习“PHP免费学习笔记（深入）”；
- 写法必须是：
元素.类#ID[属性]，比如input.text#search[type=text] - 如果漏掉元素名（如只写
.btn），默认生成<div class="btn"></div>；但在<ul>内写.item，会生成<li class="item"></li>（上下文感知） -
#header单独用 →<div id="header"></div>；但p#header→<p id="header"></p>，元素名不能省略 - 属性值含空格或特殊字符时，必须用引号包裹：
img[src="logo.png" alt="logo"]
为什么 CSS 缩写在 HTML 文件里不生效？
Emmet 在 HTML 文件中只响应 HTML 缩写；CSS 缩写（如 w200 → width: 200px;）只在 .css、.scss 或 <style> 标签内部生效。这是 PhpStorm 的硬性作用域限制，不是 bug。
容易踩的坑：
- 在
<style>标签里写.box{w200}，按Tab只会展开.box，不会处理w200—— 因为{}内部属于“文本内容”，不是 CSS 属性上下文 - 想在
<style>中用 CSS 缩写，得把光标放在<style>标签内部空白行，单独输入w200再按Tab - HTML 文件中写
style="w200"不会触发任何补全，Emmet 不解析内联 style 属性值
最常被忽略的一点：Emmet 的 HTML/CSS 行为完全由文件类型和光标所处语法层级决定，不是全局开关能统一控制的。调试时优先看状态栏和光标位置，而不是翻设置。
