【雏鹰计划】前端开发工具--Sublime Text3和Emmet-优快云博客

本文链接：https://blog.youkuaiyun.com/cromma/article/details/53046133

本文介绍如何在SublimeText3中安装Emmet插件，并详细讲解Emmet的使用方法，包括子代、兄弟、重复等语法，帮助前端开发者提高工作效率。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、Sublime Text3的安装

安装完Sublime Text3之后，得到的仅仅是一个不错的通用的编辑环境，如果想根据特定的开发语言进行定制，就要安装一些插件。

Sublime Text3提供了一个package control来管理插件。具体的操作方法地址：https://packagecontrol.io/installation#st3。

等待安装完package control和v8引擎之后，重新启动Sublime Text3。这样就可以在Sublime Text3上再安装其他的插件了。

二、Emmet插件安装和使用

1. Emmet的安装

在Sublime中【Preference】-->【package control】-->【install package】，打开搜索框。在搜索框中输入Emmet，然后点击就可以了。
安装完成之后，可以在Sublime中查看安装的插件的列表，【Preference】-->【package control】-->【list packages】

安装好了之后，【tab】键不能自动的补全，于是卸载，重新安装了之后可以了。

2. Emmet的语法

1. 子代：

输入：

div>ul>li

得到：

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

2. 兄弟

输入：

div+p+bq

得到：

<div></div>
<p></p>
<blockquote></blockquote>

3. 父代

输入：

div+div>p>span+em^bq

得到：

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

4. 重复

输入：

url>li*5

得到：

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

5. 成组

输入：

(div>dl>(dt+dd)*3)+footer>p

得到：

<div>
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>
</div>
<footer>
    <p></p>
</footer>

6. `ID:#` 和`CLASS：.`

输入：

div#header+div.page+div#footer.class1.class2.class3

得到：

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

7. 属性：[]

输入：

td[title="hello world!" colspan=3]

得到：

<td title="hello world!" colspan="3"></td>