Emmet缩写技巧，如何高效编写HTML代码？

本文共计941个文字，预计阅读时间需要4分钟。

Emmet在HTML中无需额外安装，但90%的不生效问题都出现在语言模式识别失败或缩写格式错误上。

为什么div.container按Tab没反应？

不是Emmet关了，而是VS Code没把它当HTML处理。右下角状态栏显示的如果不是HTML（比如是Plain Text或JavaScript），缩写直接被忽略。

• 新建文件后先保存为.html后缀，VS Code才会自动切语言模式
• 点右下角语言标识 → 选HTML；或快捷键Ctrl+K M（Win/Linux）/Cmd+K M（macOS）再输html
• div .container（中间有空格）会被解析成两个节点：<div></div>和<div class="container"></div>，必须写成div.container
• 在.vue文件里，只在<template>区域生效；<script>里默认不触发

!、>、+、*这些符号怎么用才不出错？

Emmet不是自然语言，每个符号位置都影响解析结果。写错一个空格，整段缩写就废了。

• !：输入后按Tab生成完整HTML5骨架，等价于html:5，但更快
• >：子元素，必须紧贴前后标签，ul>li*3✅，ul > li*3❌（空格中断父子关系）
• +：同级元素，header+main+footer生成三个并列块；div>(h2+p)用括号分组才能保证h2和p都在div内
• *：重复次数，li.item$*3生成item1~item3；$不能单独用，要跟在class或tag名后面

怎么加属性、文本、占位内容？

属性和文本必须紧贴标签，引号和空格稍有不慎就失效。

立即学习“前端免费学习笔记（深入）”；

• 属性用[]，a[href="#"][target="_blank"]✅；a [href="#"]❌（空格导致解析为两个节点）
• 文本用{}，p{Hello}✅；p {Hello}❌（空格让{}脱离标签）
• lorem只输出英文，lorem20是20词不是20字；中文场景建议用VS Code内置命令：Ctrl+Shift+P → 输入lorem → 选Insert lorem ipsum（支持中文段落）
• img[src="logo.png"]能展开，但img[alt=Logo]里的Logo不加引号也行；含空格的值如alt="My Logo"必须加引号

在.vue或.jsx里怎么让Emmet正常工作？

默认只对.html和<template>生效，其他区域要靠配置，但别乱加旧版key。

• .vue文件确认右下角是Vue（不是Vue HTML），Volar已内置支持，不用额外配
• .jsx或.tsx文件需确保语言模式为JavaScript React或TypeScript React；否则div#app不会展开
• 想强制开启JSX支持，在settings.json里加："emerald.emmet.includeLanguages": { "javascriptreact": "html", "typescriptreact": "html" }
• 删掉过时配置如"emeraldwalk.runonsave"或"vetur.completion.tagCasing"，它们可能劫持Tab或干扰解析

真正卡住人的从来不是语法记不住，而是语言模式、输入法状态、空格位置、触发键这四者同时出问题——调通一次，后面全是条件反射。