插件分享 | 善用 VSCode 内置的效率神器 Emmet 插件提升前端开发效率
<p>在 VSCode 出现之前，<code>Emmet</code> 插件就在前端领域玩得风生水起，当时的 <code>Sublime Text</code> 装上此插件，前端的编码效率那感觉就如同 2G 网络到 5G 网络的差别一般。</p><p>后来 VSCode 出现时就直接把这插件内置到编辑器中了，无需再去插件市场安装！！嗯。。又省了一点点事儿</p>
<p>熟练掌握此插件的各种简写，在前端编写 HTML + CSS 的时候，就只能听到键盘噼里啪啦的声音，如果不明白个中缘由，都可能把别人的工作状态当做在虐待键盘，嘿嘿...皮一下~~</p>
<h3 id="帮助文档">帮助文档</h3>
<p>Emmet 简写语法可太多了，光是文档就有 <code>24 页</code> 之多，此文档列举了所有 emmet 支持的简写。看一些文档截图：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090703739-712250881.jpg"></p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090711073-1081072513.jpg"></p>
<h4 id="文档获取">文档获取</h4>
<p>关注微信公众号 <code>前端路引</code>，回复 <code>emmet</code> 即可获取帮助文档。</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090720090-165429661.png"></p>
<p>关注后直接回复 <code>emmet</code> 即可获取下载地址：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090740379-477738798.jpg"></p>
<p><strong>注意啊！微信不支持文件下载，所以无法直接在微信中打开下载链接！！！需要将链接复制到系统浏览器中打开。</strong></p>
<p>下载文件是 zip 文档，解压后会获得 <code>emmet.pdf</code> 文件，直接使用对应工具（如 edge/chrome/wps）打开即可。</p>
<h3 id="用法">用法</h3>
<p>Emmet 用法那可是非常简单啊，直接输入简写，再敲一个 <code>tab</code> 就会自动补全对应的 HTML 和 CSS 了。</p>
<h3 id="使用示例">使用示例</h3>
<p>下面看一些 Emmet 的部分简写语法使用示例：</p>
<p><strong>1、生成 HTML 框架</strong>，输入 <code>html:5</code> 再按 <code>tab</code> 键。</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090747820-839602655.gif"></p>
<p><strong>2、生成 HTML 结构。</strong></p>
<pre><code class="language-html">div>(header>ul>li*2)+footer+p
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090751917-1576544252.gif"></p>
<p><strong>3、class 带序号的 HTML 结构。</strong></p>
<pre><code class="language-html">ul>li.item-$*5>a{链接$}
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090759294-1671529771.gif"></p>
<p><strong>4、生成 HTML 属性。</strong></p>
<pre><code class="language-html">h${文本内容 $}*3
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090803428-584627478.gif"></p>
<p><strong>5、class 倒序。</strong></p>
<pre><code class="language-html">ul>li.item$@-*5
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090808529-570093594.gif"></p>
<p><strong>6、设置序号的开始位置。</strong></p>
<pre><code class="language-html">ul>li.item$@3*5
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090812787-979151949.gif"></p>
<p><strong>7、各种 HTML 标签简写。</strong></p>
<pre><code class="language-html">link:css
a:link
img
tarea
sect
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090816406-1743649435.gif"></p>
<p><strong>8、CSS 属性简写。</strong></p>
<pre><code class="language-html">por
fz14
df
jcc
aic
poa
l0
t0
fs
</code></pre>
<p>效果：</p>
<p><img src="https://img2024.cnblogs.com/blog/596097/202506/596097-20250609090821175-305205890.gif"></p>
<h2 id="写在后头">写在后头</h2>
<p><code>Emmet</code> 那可是前端开发者的心头爱，这插件大大的简化了前端的编码复杂度，随便敲几个字母，就能生成开发者想要的 HTML、CSS 代码，开发效率那可是蹭蹭蹭的往上飞。</p>
<p>VSCode 的<strong>代码片段</strong>也能做出各种简写，不过一般多由于较长的代码段简写，HTML 和 CSS 还是使用 Emmet 居多。</p>
<p>熟练掌握各种简写语法，摸鱼的时间才会越来越多~~</p>
</div>
<div id="MySignature" role="contentinfo">
<p> </p>
<p style="font-size: 18px;font-weight: bold;">文章首发于微信公众号【<span style="color:rgb(255, 71, 87)">前端路引</span>】，欢迎 <span style="color:#4ec259">微信扫一扫</span> 查看更多文章。</p>
<p>
<img style="max-width: 320px;" src="https://images.cnblogs.com/cnblogs_com/linx/2447020/o_250228035031_%E5%85%AC%E4%BC%97%E5%8F%B7%E4%BA%8C%E7%BB%B4%E7%A0%81.png"/>
</p>
<p>本文来自博客园，作者：前端路引，转载请注明原文链接：https://www.cnblogs.com/linx/p/18920180</p>
<p> </p><br><br>
来源：https://www.cnblogs.com/linx/p/18920180
頁:
[1]