怎样在VSCode中使用Emmet？快速编写HTML/CSS-VSCode-PHP中文网

怎样在VSCode中使用Emmet？快速编写HTML/CSS

看不見的法師

发布： 2025-07-07 15:38:02

原创

348人浏览过

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. 进阶功能包含自定义缩写、生成占位文本、父级操作符及编号控制，进一步增强个性化与自动化能力。

怎样在VSCode中使用Emmet？快速编写HTML/CSS

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里有些缩写是真的能让你飞起来。我个人最常用的，也是我觉得最能体现它价值的，主要有这么几类：

AI图像编辑器

使用文本提示编辑、变换和增强照片

查看详情

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的缩写，展开后是<div class="card"><h3 class="card-title"></h3><p class="card-content"></p></div>。这样一来，你的效率又能再上一个台阶。
Lorem Ipsum文本生成： 写原型页面的时候，需要填充一些占位文本，直接敲lorem或者lorem10（生成10个单词的文本），按Tab，就能快速生成随机的拉丁文文本。这个在设计阶段或者填充内容的时候特别方便。
父级操作符 ^： 这个操作符允许你跳出当前层级，回到父级元素继续操作。比如 div>ul>li^a，它会生成一个div，里面有ul和li，然后a标签会和ul是兄弟关系，而不是li的子级。这在构建一些复杂且非线性嵌套的结构时非常有用。
编号 $@N 和 $@-： 默认的$是从1开始递增，$@N可以指定起始数字（比如$@5从5开始），$@-可以指定倒序（比如$@-从大到小）。这在生成有特定编号需求的列表或ID时非常方便。