如何利用 VSCode 的 Emmet 缩写功能加速 HTML/CSS 编写？

技术教程
2025-09-20 22:55:01

VSCode的Emmet缩写功能通过简短语法规则快速生成HTML/CSS代码，如div#id.class生成带ID和类的div，m10展开为margin:10px；支持嵌套、重复、自定义缩写，并可通过settings.json扩展，大幅提升前端开发效率。

如何利用 vscode 的 emmet 缩写功能加速 html/css 编写？

VSCode 的 Emmet 缩写功能，说白了，就是把那些又长又重复的 HTML/CSS 代码，用几个字符的“魔法咒语”瞬间变出来。它能让你在编写前端代码时，双手几乎不用离开键盘，大大减少敲击次数和上下文切换的烦恼，效率提升肉眼可见。对我而言，它不是一个可选项，而是编写前端代码的标配。

解决方案

利用 VSCode 的 Emmet 缩写功能，其实就是学习一套简短的语法规则，然后键入这些规则，再按下

Tab

键（或

Enter

，取决于上下文和设置），Emmet 就会自动展开成完整的代码结构。这套规则涵盖了 HTML 标签、ID、类名、属性，以及 CSS 属性和值。比如，想创建一个带有 ID 和类的 div，你只需要敲

div#myId.myClass

，然后

Tab

，瞬间就成了

<div id="myId" class="myClass"></div>

。CSS 方面，输入

m10

展开成

margin: 10px;

，

p20-30

变成

padding: 20px 30px;

，这种即时反馈和代码补全的快感，一旦习惯了，就真的回不去了。它内置在 VSCode 里，通常开箱即用，无需额外安装插件。

VSCode Emmet 缩写有哪些常用的 HTML 技巧？

在 HTML 编写上，Emmet 的强大之处在于它能让你像搭积木一样快速构建页面结构。这不仅仅是少敲几个字那么简单，它更像是一种思维模式的转变，从“我要写一个 div”变成“我要一个 div 里面有 ul，ul 里有 3 个 li，每个 li 里再放一个链接”。

比如，最基础的：

```
!
```
或
```
html:5
```
：生成一个完整的 HTML5 页面骨架。这是我新开一个 HTML 文件时，第一个会敲的。
```
div
```
：展开成
```
<div></div>
```
。
```
p
```
：展开成
```
<p></p>
```
。
```
a
```
：展开成
```
<a href=""></a>
```
。

更进一步，结合 ID 和 Class：

```
div#header
```
：
```
<div id="header"></div>
```

div.container

：

<div class="container"></div>

div#main.wrapper

：

<div id="main" class="wrapper"></div>

嵌套与兄弟元素：

```
ul>li
```
：
```
<ul><li></li></ul>
```
```
div+p
```
：
```
<div></div><p></p>
```

header+main+footer

：

<header></header><main></main><footer></footer>

重复元素：

```
ul>li*5
```
：生成一个
```
ul
```
里面包含 5 个
```
li
```
。
```
div.item*3
```
：生成 3 个带有
```
item
```
类的
```
div
```
。

带文本内容的元素：

```
p{Hello World}
```
：
```
<p>Hello World</p>
```

a[href="https://example.com"]{Visit Us}

：

<a href="https://example.com">Visit Us</a>

结合起来，你可以这样：

div.wrapper>header+main>section.content>article*2>h2{Title $}+p{Paragraph $}

这个缩写会生成一个

wrapper

类的大 div，里面有

header

和

main

。

main

里有一个

content

类别的

section

，

section

里有两个

article

，每个

article

都包含一个

h2

标题（带序号）和一个

段落（带序号）。这种复杂的结构，手动敲得人头皮发麻，Emmet 几秒钟搞定。

如何高效利用 Emmet 缩写编写 CSS 样式？

Emmet 在 CSS 领域的表现同样出色，它将常用的 CSS 属性和值简化到了极致，让你在样式文件中飞速穿梭。很多时候，你甚至不需要记住完整的属性名，几个字母就能搞定。

一些高频使用的缩写：

Studio Global

Studio Global AI 是一个内容生成工具，帮助用户客制化生成风格和内容，以合理价格提供无限生成，希望将 AI 带给全世界所有人。

405 查看详情 Studio Global

```
m
```
：
```
margin: ;
```
```
p
```
：
```
padding: ;
```
```
d
```
：
```
display: ;
```
```
pos
```
：
```
position: ;
```
```
bgc
```
：
```
background-color: ;
```
```
bd
```
：
```
border: ;
```
```
fl
```
：
```
float: ;
```
```
fz
```
：
```
font-size: ;
```
```
lh
```
：
```
line-height: ;
```
```
w
```
：
```
width: ;
```
```
h
```
：
```
height: ;
```

结合数值和单位： Emmet 智能识别数字和常见的单位。

```
m10
```
：
```
margin: 10px;
```
```
p20-30
```
：
```
padding: 20px 30px;
```
(上下20px，左右30px)
```
w100p
```
：
```
width: 100%;
```
```
h50v
```
：
```
height: 50vh;
```
```
fz16
```
：
```
font-size: 16px;
```
```
lh1.5
```
：
```
line-height: 1.5;
```
```
c#f00
```
：
```
color: #f00;
```
```
bg#eee
```
：
```
background: #eee;
```

特殊的缩写，比如定位：

```
posa
```
：
```
position: absolute;
```
```
posr
```
：
```
position: relative;
```
```
t0
```
：
```
top: 0;
```
```
l0
```
：
```
left: 0;
```

一些复合属性的缩写：

```
bd1s#ccc
```
：
```
border: 1px solid #ccc;
```
```
bsd
```
：
```
box-shadow: ;
```

使用 Emmet 编写 CSS 时的关键在于，你不需要先打属性名再打冒号，直接打缩写然后

Tab

，Emmet 会自动补全冒号和分号，并将光标定位到值的位置，大大减少了来回切换的动作。例如，当你需要给一个元素设置样式：

.card {
    dfl // display: flex;
    jcfs // justify-content: flex-start;
    aic // align-items: center;
    m10 // margin: 10px;
    p15 // padding: 15px;
    bgc#f9f9f9 // background-color: #f9f9f9;
    bd1s#ddd // border: 1px solid #ddd;
    br5 // border-radius: 5px;
}

这种编写方式，熟练之后，你会发现写 CSS 简直像在打字游戏。

Emmet 缩写在 VSCode 中如何自定义和扩展？

Emmet 虽然强大，但它也不是万能的，总有些时候，默认的缩写不符合你的习惯，或者你需要一些特定的、项目相关的缩写。VSCode 提供了很好的自定义和扩展机制。

主要通过修改 VSCode 的

settings.json

文件来实现。你可以在这里添加自定义的 Emmet 规则。打开命令面板（

Ctrl+Shift+P

或

Cmd+Shift+P

），输入

Preferences: Open User Settings (JSON)

。

在

settings.json

中，你可以找到或添加

emmet.syntaxProfiles

和

emmet.preferences

等配置项，但最常用的自定义方式是

emmet.extensionsPath

和

emmet.snippets

。

emmet.snippets

：直接在
settings.json
中定义少量自定义缩写这个配置项允许你为特定的语言模式（比如

html

或

css

）添加自定义的缩写。

{
    "emmet.snippets": {
        "html": {
            "defs": "<dl><dt>${1}</dt><dd>${2}</dd></dl>",
            "btn": "<button class="btn btn-${1|primary,secondary,success,danger,warning,info,light,dark|}">${2:Button}</button>"
        },
        "css": {
            "dflex": "display: flex; justify-content: center; align-items: center;",
            "fsz": "font-size: ${1:16}px;"
        }
    }
}

这里我定义了

defs

来快速生成定义列表，

btn

来生成一个带有 Bootstrap 风格的按钮，并提供了几种类名选项。CSS 中则定义了

dflex

来快速生成一个居中的 flex 容器，

fsz

来快速设置字体大小。

符号用于定义光标停止的位置，

$1

是第一个停止点，

${1:默认值}

可以提供默认值。

|option1,option2|

则是一个下拉选项列表。

emmet.extensionsPath

：通过外部文件扩展 Emmet 如果你有大量自定义缩写，或者想在多个项目之间共享，将它们放到外部文件中是更好的选择。首先，创建一个文件夹，比如

~/.emmet

（macOS/Linux）或

C:UsersYourUser.emmet

（Windows）。然后，在

settings.json

中指向这个路径：

{
    "emmet.extensionsPath": [
        "C:\Users\YourUser\.emmet" // Windows 示例
        // 或者 "/Users/youruser/.emmet" // macOS 示例
    ]
}

在这个文件夹里，你可以创建

snippets.json

文件，结构和

emmet.snippets

类似：

// snippets.json
{
    "html": {
        "mycard": "<div class="card"><div class="card-header">${1:Header}</div><div class="card-body">${2:Body}</div></div>"
    },
    "css": {
        "gridc": "display: grid; grid-template-columns: repeat(${1:2}, 1fr); gap: ${2:10}px;"
    }
}

这样，Emmet 就会加载这些自定义的缩写了。

emmet.includeLanguages

：在非标准文件类型中启用 Emmet 有时候，你可能在 Vue 的

<template>

块或者 React 的 JSX 文件中也想使用 Emmet。默认情况下，Emmet 可能不会在这些语言模式下工作。你可以在

settings.json

中添加：

{
    "emmet.includeLanguages": {
        "vue-html": "html",
        "j*ascriptreact": "html",
        "typescriptreact": "html",
        "blade": "html" // Lar*el Blade 模板
    }
}

这告诉 VSCode，在