前端开发利器 Emmet 介绍与基础语法教程

在前端开发的过程中,编写 HTML、CSS 代码始终占据了很大的工作比例。特别是手动编写 HTML 代码,效率特别低下,因为需要敲打各种“尖括号”、闭合标签等。而现在 Emmet 就是为了提高代码编写的效率而诞生的,它提供了一种非常简练的语法规则,然后立刻生成对应的 HTML 结构或者 CSS 代码,同时还有多种实用的功能帮助进行前端开发。

你可能听说过一款强大的功能相似的工具:Zen Coding,那个比较老了,而现在的 Emmet 则是 Zen Coding 的升级版,由 Zen Coding 的原作者进行开发等。

Emmet 严格意义上来说,并不是一款软件或者工具,它是一款编辑器插件,必须要基于某个编辑器使用。目前它支持如下编辑器:

Sublime Text 2

TextMate 1.x

Eclipse/Aptana

Coda 1.6 and 2.x

Espresso

Chocolat (可以通过 “Install Mixin” 对话框安装)

Komodo Edit/IDE ( Tools Add-ons)

Notepad++

PSPad

CodeMirror2/3

Brackets

在上面列表点击你目前使用的编辑器,就可以获得对应的插件文件,安装之后就可以使用 Emmet 的相关功能了。由于 Sublime text 2 是目前最好最强大的前端开发代码编辑器,所以本文就以 Sublime text 2 为例,讲解 Emmet 的安装、基础语法。

在 Sublime text 2 中安装 Emmet

Sbulime text 2 安装插件肯定要通过 Package Control 这个插件了,如果你还没有安装这个插件,抓紧先去安装一下吧。安装完成之后,我们摁下“shift + ctrl + p”呼出面板,输入“pci”即可锁定“Package Control:Install Package”这个功能,回车之后就可以看到一个列表,我们继续输入“emmet”即可找到这个插件,回车之后等待一会就安装完成了。

开始使用 Emmet

Emmet 可以快速的编写 HTML 和 CSS 以及实现其他的功能。它根据当前文件的“语言”来判断要使用 HTML 语法还是 CSS 语法来解析。例如当前文件的后缀为 .html 那 Sublime text 2 就会用 HTML 的方式来解析高亮这个文件,Emmet 也会根据 HTML 的语法把你输入的指令编译成 HTML 结构。如果是在一个 .c 的 C语言 文件中,你根据 Emmet 的语法编写出来的指令,是不会被编译的。

此外,在没有后缀的文件中,你可以摁下“shift + ctrl + p”呼出面板,输入“seth”就可以选择当前文档是使用 HTML 的模式还是其他编程语言的模式来解释。下面就是一条 Emmet 的指令:

#page>div.logo+ul#navigation>li*5>a

我们把它复制到 Sublime text 2 中已经打开的 HTML 文件中,这时候敲击一下 TAB 键,你就会发现这行指令变成了下面的 HTML 结构:

Item 1Item 2Item 3Item 4Item 5

怎么样?很神奇吧,仅仅写一行代码,就可以生成这么一个复杂的 HTML 结构,而且还可以声称对应的 class 、id 和内容。这行指令你现在可能还看不懂,下面会详细讲解语法,你现在只需要知道 Emmet 的工作流程:打开 HTML 或 CSS 文件->按语法编写指令->摁下 TAB 键->生成!

Emmet 生成 HTML 结构基础语法

生成 HTML 文档初始结构

HTML 文档的初始结构,就是包括 doctype、html、head、body 以及 meta 等内容。你只需要输入一个 “!” 就可

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181019A1FPB700?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券