Emmet高效代码补全技巧与实战中的隐藏坑点解析
Dev · 丽敏先看效果，再看代码
最近在重构一个老项目的时候，我又把 Emmet 捡起来了。说真的，这玩意儿简直就是前端开发者的外挂。如果你还没用过，建议直接从现在开始学，亲测有效。
举个例子，想生成一个带类名的 div，你只需要输入：
div.container然后按一下 Tab 键（或者你的编辑器快捷键），立马变成：
<div class="container"></div>是不是很爽？但这只是开胃菜，后面更猛。
这个场景最好用：快速生成嵌套结构
我最常用 Emmet 的地方就是写 HTML 嵌套结构。比如，你想生成一个典型的页面布局：
header>nav>a*3{Link $}^main>section.article*2>p{Content $}^footer>p{Copyright}Tab 一下，结果是这样的：
<header>
<nav>
<a href="">Link 1</a>
<a href="">Link 2</a>
<a href="">Link 3</a>
</nav>
</header>
<main>
<section class="article">
<p>Content 1</p>
</section>
<section class="article">
<p>Content 2</p>
</section>
</main>
<footer>
<p>Copyright</p>
</footer>这里面有几个关键点：
- > 表示子元素。
- * 表示重复次数。
- {} 表示插入文本。
- ^ 表示跳出一层嵌套。
这个功能特别适合用来搭框架，节省了大量时间。不过这里提醒一句：别贪心，嵌套太深容易把自己绕晕。
踩坑提醒：这三点一定注意
虽然 Emmet 很强大，但有些坑我也踩了好几次，分享给你们：
- 快捷键冲突：某些编辑器默认的 Emmet 快捷键可能会和其他插件冲突。比如我之前用 VSCode 的时候，Tab 键被其他插件占用了，Emmet 就不起作用。折腾了半天才发现，解决办法是在设置里手动调整快捷键绑定。
- 不支持动态属性：Emmet 不会自动生成动态属性，比如 Vue 的 v-bind 或 React 的 className。比如你写：
div[class="active"]它不会自动变成：
<div :class="active"></div>你需要自己手动改。这一点挺烦的，但也算是它的局限性吧。
- 缩写不够直观时别硬记：有时候你会遇到一些复杂的缩写，比如
(div>p)*2这种嵌套和重复混用的写法。如果觉得记不住，就别硬记，分步写反而更快。
高级技巧：CSS 也能玩出花
很多人只知道 Emmet 能写 HTML，其实它的 CSS 缩写也相当好用。举几个我常用的例子：
- 想写 margin 和 padding 的简写？直接输入：
m10按 Tab 键后：
margin: 10px;- 想写上下左右不同的值？这样：
m10-20-5-15结果：
margin: 10px 20px 5px 15px;- 想写 border-radius？试试：
br10输出：
border-radius: 10px;另外，CSS 缩写还支持单位转换。比如：
w100p会变成：
width: 100%;这些小技巧平时用起来特别顺手，推荐大家多尝试。
Emmet 在真实项目中的应用
前阵子我在写一个电商网站的静态页面时，Emmet 真的帮了大忙。这个页面有几十个商品卡片，每个卡片的结构差不多：
div.card>img[src="https://jztheme.com/image.jpg"]+h3{Product Name}+p.price{$19.99}+button{Add to Cart}Tab 一下，变成了：
<div class="card">
<img src="https://jztheme.com/image.jpg" alt="">
<h3>Product Name</h3>
<p class="price">$19.99</p>
<button>Add to Cart</button>
</div>
`>
<p>我当时就是复制粘贴这段缩写，稍微改改图片地址和文字内容，几分钟就搞定了所有卡片的基础结构。这种效率提升真的很明显。</p>
<h2>拓展玩法：自定义 Emmet 配置</h2>
<p>如果你觉得默认的 Emmet 规则还不够满足需求，可以自己配置。比如我经常写移动端页面，需要频繁用到 flex 布局，于是我在 VSCode 的 settings.json 里加了一段自定义规则：</p></code></pre>json
"emmet.variables": {
"flex-center": "display: flex; justify-content: center; align-items: center;"
}
`>
之后只要输入 flex-center，就能快速生成对应的样式。当然，这只是冰山一角，Emmet 的拓展用法还有很多。
最后唠叨两句
以上是我个人对 Emmet 的完整讲解，有更优的实现方式欢迎评论区交流。这个工具看似简单，但实际用起来能大大提升开发效率。尤其是刚入行的朋友，强烈建议多练练手。
这个技巧的拓展用法还有很多，后续会继续分享这类博客。希望这篇实战总结对你有帮助！
暂无评论