记住这些常用 Emmet 缩写，代码效率提升 200%

Emmet 作为前端快速编码口诀，能极大的提升我们的编码效率。

它不仅能以简短的缩写展开成代码片段，还可以改善我们的编码体验。

我们正常编码是很难做到自上而下、从左到右来书写的，你可能需要来回多次改变光标位置；但有 Emmet 就不同了，通常只需要从左到右书写，然后 Tab 展开即可。

👉 比如：

<div id="page">
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

通过 Emmet 缩写，只需要输入#page>ul#navigation>li*5>a{Item $}然后 Tab 即可。

Emmet 缩写通常用于 HTML 和 CSS，下面分别进行介绍。

🧩 HTML 常用缩写

HTML 的 Emmet 缩写非常简单，只需要记住下面的基本规则就能组合成复杂的代码片段。

基本规则

• >，子元素：ul>li

<ul>
  <li></li>
</ul>

• +，兄弟元素：h1+p

<h1></h1>
<p></p>

• ^，返回上一级：div>p>span^a

<div>
  <p>
    <span></span>
  </p>
  <a></a>
</div>

• *，重复 n 次：li*3

<li></li>
<li></li>
<li></li>

• ()，分组：div>(header+footer)

<div>
  <header></header>
  <footer></footer>
</div>

• .，class：.box

<div class="box"></div>

• #，id：#app

<div id="app"></div>

• {}，文本：a{Hello}

<a>Hello</a>

• []，属性：input[type=text][required]

<input type="text" required>

• $，自动编号：li.item-$*3

<li class="item-1"></li>
<li class="item-2"></li>
<li class="item-3"></li>

固定写法

• ! 或 html:5：生成完整 HTML5 模板
• meta:vp：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

• link:css：

<link rel="stylesheet" href="style.css">

• script:src：

<script src=""></script>

• form:post：

<form action="" method="post"></form>

• label[for=name]{Name}：

<label for="name">Name</label>

• input:text：

<input type="text">

• input:checkbox：

<input type="checkbox">

• button.btn{Submit}：

<button class="btn">Submit</button>

组合示例

• ul>li*5{List $}：

<ul>
  <li>List 1</li>
  <li>List 2</li>
  <li>List 3</li>
  <li>List 4</li>
  <li>List 5</li>
</ul>

• .container>.row.row-$*3>.col.col-${col $}*2：3 行 2 列

<div class="container">
  <div class="row row-1">
    <div class="col col-1">col 1</div>
    <div class="col col-2">col 2</div>
  </div>
  <div class="row row-2">
    <div class="col col-1">col 1</div>
    <div class="col col-2">col 2</div>
  </div>
  <div class="row row-3">
    <div class="col col-1">col 1</div>
    <div class="col col-2">col 2</div>
  </div>
</div>

• #page>div.logo+ul#navigation>li*5>a{Item $}：

<div id="page">
  <div class="logo"></div>
  <ul id="navigation">
    <li><a href="">Item 1</a></li>
    <li><a href="">Item 2</a></li>
    <li><a href="">Item 3</a></li>
    <li><a href="">Item 4</a></li>
    <li><a href="">Item 5</a></li>
  </ul>
</div>

🎨 CSS 常用缩写

“

ℹ️ 说明

不同的开发环境可能存在差异，这里的写法都是以VS Code作为基本参考。

✔️ 建议

通常我们不需要“死记”这些缩写，大多写法都有一定的规律：

1. 单词“首字母”组合：比如，justify-content: center，jcc；text-align: center，tac
2. 发音“首字母”组合：比如，border-bottom: 1px，bdb1；background-size: contain，bgsct
3. 具有“代表性”的字母组合：这个就靠一定的语感和手感了，比如：font-size: 14px，fz14；cursor: pointer，cup
4. 属性与值之间添加分号:（个人不太习惯）：比如，overflow: scroll，ov:s

如果靠单词首字母没有检索出来，则尝试用发音首字母，依次进行尝试。

下面列举一些常用的缩写：

盒模型

缩写	展开
m10	margin: 10px;
p10-20	padding: 10px 20px;
w100p	width: 100%;
h100vh	height: 100vh;
minw200	min-width: 200px;

定位与布局

缩写	展开
psa	position: absolute;
psf	position: fixed;
t0/l0/r0/b0	top/left/right/bottom: 0;
z10	z-index: 10;
df	display: flex;
jcc	justify-content: center;
aic	align-items: center;

文本与字体

缩写	展开
c#333	color: #333;
tac	text-align: center;
fwb	font-weight: bold;
fz14	font-size: 14px;
lh1.5	line-height: 1.5;

背景与边框

缩写	展开
bg#f5f5f5	background: #f5f5f5;
bgc#000	background-color: #000;
bd1-s#ccc	border: 1px solid #ccc;
bdt1-s#ccc	border-top: 1px solid #ccc;
bdrs3	border-radius: 3px;

其他

缩写	展开
ovh	overflow: hidden;
cup	cursor: pointer;
op0.8	opacity: 0.8;
tfr	transform: rotate();
trs	transition

⚙️ 使用

• 在 VS Code 设置中启用：

与html和CSS相关的文件类型默认都支持 Emmet 语法，通常只需要配置vue和jsx即可。

"emmet.includeLanguages": {
  "javascript": "javascriptreact",
  "vue": "html",
  "vue-html": "html",
}

• 使用 Tab 键展开缩写。

总结

HTML 中的 Emmet 缩写都比较统一，很好记忆；CSS 中的写法虽然很多，但常用的也就那些，使用多了以后凭手感也能敲出来，很久都用不到一次的就没必要较劲去记了。