emmet在vscode中通过简短缩写快速生成html和css代码，极大提升前端开发效率。1. 使用时只需输入缩写后按tab键即可展开，如!生成html5模板、div#header生成带id的div；2. 支持嵌套结构如ul>li*3>a生成带链接的列表项；3. css中如d:f变为display: flex；4. 常用缩写包括盒模型、flexbox布局、定位等；5. 若未生效需检查文件类型、光标位置、设置冲突及语法错误；6. 进阶功能包含自定义缩写、生成占位文本、父级操作符及编号控制，进一步增强个性化与自动化能力。
Emmet在vscode里几乎是内置的，它就是那种你一旦用了就离不开的工具，能让写HTML和CSS的速度提升好几个档次，简直是写前端代码的利器。核心就是通过简短的缩写，按一下Tab键，就能快速展开成完整的代码结构。
解决方案
说实话，用Emmet上手非常快。你只需要在HTML或CSS文件里，敲入你想要的缩写，然后按下Tab键，它就会自动展开。
比如，在HTML文件里：
立即学习“前端免费学习笔记（深入）”；
- 想写一个最基本的HTML骨架，直接敲一个感叹号 !，然后按Tab，一个完整的HTML5模板就出来了。
- 如果想快速生成一个带有特定ID或class的div，你可以敲 div#header 或 div.container，再按Tab。甚至连div都可以省略，直接敲 #header 或 .container 也能得到同样的效果。
- 嵌套结构也超方便，比如 ul>li*3>a，它会帮你生成一个无序列表，里面有3个列表项，每个列表项里又包含一个链接。这种链式操作，效率一下子就上来了。
- 兄弟元素也很简单，h1+p 就会生成一个H1标题后面跟着一个段落。
- 带属性的标签，比如 a[href=””][target=”_blank”]，会生成一个带空链接和新窗口打开属性的a标签。
在CSS文件里：
- 缩写同样强大。比如想写 margin-bottom: 10px;，你只需要敲 mb10。
- d:f 变成 display: flex;。
- pos:a 变成 position: absolute;。
- 甚至可以写 p10-20 变成 padding: 10px 20px;。
还有个特别实用的功能是“Emmet: Wrap with Abbreviation”。选中一段代码，按下 Ctrl+Shift+P (macos是 Cmd+Shift+P)，输入“Emmet: Wrap with Abbreviation”，然后输入你想包裹的标签，比如 div.wrapper，选中的代码就会被这个div包裹起来。这个功能在重构或者调整结构的时候特别好用。
Emmet有哪些常用缩写，能真正提高效率？
聊到效率，Emmet里有些缩写是真的能让你飞起来。我个人最常用的，也是我觉得最能体现它价值的，主要有这么几类：
HTML部分：
- ! 或 html:5： 快速生成HTML5标准模板。这是每次新建文件必用的。
- . 和 # 的隐式标签： 比如直接敲 .container 而不是 div.container。这种节省下来的敲击次数，积累起来就很可观。
- > (子元素) 和 + (兄弟元素)： 比如 header+main>section*2+aside+footer，一下子就能搭好页面基本框架。
- *`(重复)：**li5这种，快速生成多个重复元素。结合$(编号) 更是神器，li.item$5会生成li.item1,li.item2`…
- [] (属性)： a[href=””][target=”_blank”] 这种带属性的，特别适合图片、链接等。
- {} (文本内容)： p{Hello World} 直接在标签里填充文本。
CSS部分：
- 盒模型相关： m (margin), p (padding), w (width), h (height)。加上数值和方向，比如 mt10 (margin-top: 10px;), px20 (padding: 0 20px;)。
- Flexbox布局： d:f (display: flex;), jc:sb (justify-content: space-between;), ai:c (align-items: center;)。这些缩写简直是Flexbox的福音，写起来太快了。
- 定位： pos:a (position: absolute;), t0l0 (top: 0; left: 0;)。
- 字体： fz16 (font-size: 16px;), fwb (font-weight: bold;)。
- 背景： bgc#f00 (background-color: #f00;)。
这些缩写，尤其是组合起来用的时候，那种流畅感真的会上瘾。它不是简单地帮你打字，而是让你以更抽象的思维去构建结构，然后Emmet帮你补全细节。
为什么我的Emmet没有生效？常见问题排查
我刚开始用Emmet的时候，也遇到过它突然“罢工”的情况，那感觉可太糟心了。通常来说，Emmet不生效，问题往往出在几个地方：
- 文件类型不对： Emmet默认只在HTML、CSS、xml等文件类型中激活。如果你在一个JS文件里敲HTML缩写，那肯定没反应。VSCode底部状态栏会显示当前文件的语言模式，检查一下是不是HTML或CSS。如果是在React的JSX或vue的SFC里写HTML，需要确保VSCode的设置里有对应的语言关联，比如在settings.json中添加”emmet.includeLanguages”: {“JavaScript”: “html”, “vue“: “html”}。
- 光标位置不对： Emmet展开需要光标在一个有效的缩写后面。如果你缩写敲到一半，或者光标在缩写中间，它可能就识别不了。确保你敲完缩写后，光标紧跟着缩写末尾。
- VSCode设置冲突或禁用： 极少数情况下，可能是Emmet功能被不小心禁用了，或者有其他扩展与Emmet冲突。你可以检查VSCode的设置（Ctrl+, 或 Cmd+,），搜索“Emmet”，确保emmet.showSuggestionsAsSnippets和emmet.triggerCharacters等选项是开启的。
- 缩写语法错误： 有时候是我们自己敲错了缩写，比如多了一个空格，或者括号没闭合。Emmet对语法还是有一定要求的，一个小错误就可能导致无法识别。
- 外部扩展影响： 虽然不常见，但某些前端相关的VSCode扩展可能会与Emmet的默认行为产生冲突。如果上述方法都无效，可以尝试禁用一些最近安装的扩展，看看问题是否解决。
排查的时候，通常从最简单的文件类型和光标位置开始看，大部分问题都能很快解决。
Emmet还能做些什么？进阶用法与个性化配置
Emmet除了基础的缩写展开，还有一些更高级的玩法和个性化配置，能让它更贴合你的工作流。
- 自定义缩写 (Snippets)： 这是我觉得Emmet最“有意思”的地方之一。如果你经常写一些重复性高但Emmet没有内置的复杂结构，比如某个特定组件的HTML模板，你可以自己定义缩写。在VSCode的settings.json里，你可以通过”emmet.extensionsPath”指向一个文件夹，这个文件夹里可以放一个snippets.json文件。在这个文件里，你可以定义自己的缩写和它们展开后的内容。比如，我可能经常写一个带标题和内容的卡片组件，就可以定义一个card的缩写，展开后是
。这样一来，你的效率又能再上一个台阶。
- Lorem Ipsum文本生成： 写原型页面的时候，需要填充一些占位文本，直接敲lorem或者lorem10（生成10个单词的文本），按Tab，就能快速生成随机的拉丁文文本。这个在设计阶段或者填充内容的时候特别方便。
- 父级操作符 ^： 这个操作符允许你跳出当前层级，回到父级元素继续操作。比如 div>ul>li^a，它会生成一个div，里面有ul和li，然后a标签会和ul是兄弟关系，而不是li的子级。这在构建一些复杂且非线性嵌套的结构时非常有用。
- 编号 $@N 和 $@-： 默认的$是从1开始递增，$@N可以指定起始数字（比如$@5从5开始），$@-可以指定倒序（比如$@-从大到小）。这在生成有特定编号需求的列表或ID时非常方便。
掌握这些进阶用法和个性化配置，Emmet就不仅仅是一个简单的代码展开工具了，它更像是一个可定制的、能帮你把重复劳动自动化的小助手。探索这些功能，你会发现它能做的事情远比你想象的要多。
