当前位置:首页-WordPress文章-HTML5/CSS3-正文

前端开发利器Emmet的介绍

前端开发利器Emmet的介绍 - 第1张曾经也为写HTML/CSS代码而烦恼过,不愿再写下去,感觉很烦琐,写那么多的尖括号,用的标签都是在重复写,而且绝大多数标题都需要闭合标签,再多几个无序列表就更头疼。
[related_posts tagid="31"]
如果在编写代码时可以简写这些标签,符号,提高我们在写HTML/CSS代码时的效率,这一定是件幸福的事。而有了Emmet前端开发人员都会比以前更幸福。

Emmet,一个强大的插件,可以为我们解决这些问题,是前端开发人员必备的工具包。可以在许多流行的文本编辑器中安装使用,大大提高了编写HTML和CSS代码的工作效率。

Emmet是用纯JavaScript编写的,是一款跨平台的强大HTML/CSS代码编辑插件,超高速的完成HTML/CSS的开发。

最初知道有这样神奇的插件是寻找Sublime Text插件时,知道Zen Coding,一个可以快速编写HTML/CSS代码的工具,看到演示效果,只有用神奇来表达,现在有了Emmet,而且是在Zen Coding基础上再次开发,功能各方面肯定是更加强大。

下面就在Sublime Text和Notepad++这两款编辑器中安装,一些代码编写还是以Sublime Text为例(推荐大家使用Sublime Text编辑器,用了你肯定会喜欢,而Notepad++是相当好的开源文本编辑器,舍不得删除。)

Emmet的安装:

1、在Sublime Text安装:

没有用过Sublime Text编辑器的朋友可以先到网上搜索一下,有很多相关的教程,个人相当推荐的一款跨平台的编辑器。

在Sublime Text中按“Ctrl+Shift+p”快捷键或在菜单-工具中打开“命令面板”,输入:Install Package (安装扩展)后回车,弹出新的窗口,再查找“Emmet”确定安装:
前端开发利器Emmet的介绍 - 第2张
2、在Notepad++安装:

打开菜单:插件-Plugin Manager-Show Plugin Manager面板,找到“Emmet”勾选后,点击“Install”,中途会弹窗提示需要安装或更新文件,确定就OK。
前端开发利器Emmet的介绍 - 第3张

用Emmet编写时需要再转换成HTML/CSS代码,而Sublime Text和Notepad++的快捷键是不一样,分别是:Tab和Ctrl+Alt+Enter。

Emmet快速编写HTML/CSS:

缩写是Emmet的核心,Emmet中特殊的表达式在运行时解析和转化为结构化代码块,缩写的语法看起来就是CSS选择器和一些特定的HTML代码,所以稍微了解了就能看明白和如果使用。

我们先举个例,在编辑器中输入:

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

再按Tab键你会看到它神奇的效果,得到的HTML代码是:

  1. <div id="page">
  2. <div class="logo"></div>
  3. <ul id="navigation">
  4. <li><a href="">Item 1</a></li>
  5. <li><a href="">Item 2</a></li>
  6. <li><a href="">Item 3</a></li>
  7. <li><a href="">Item 4</a></li>
  8. <li><a href="">Item 5</a></li>
  9. </ul>
  10. </div>

神奇吧,仅需一行简单的代码,就可以生成完美的HTML代码结构,对应的class、id都写好了,如果不用Emmet编写,估计你也会有点头疼。

而编写CSS也一样的让人惊叹,比如:

  1. bdrs6

得到的CSS代码是:

  1. -webkit-border-radius: 6px;
  2. -moz-border-radius: 6px;
  3. border-radius: 6px;

连浏览器兼容性都考虑在其中,让人爱不释手。

其实了解了Emmet的原理,看下插件的js代码,你会更明白,而插件的核心是缩写,所有的HTML/CSS标签缩写都存储在js文件的代码片段中,例如下面的js文件中一段代码:

  1. {
  2. "html": {
  3. "abbreviations": {
  4. "a": "<a href=\"\">",
  5. "link": "<link rel=\"stylesheet\" href=\"\" />"
  6. ...
  7. },
  8. "snippets": {
  9. "cc:ie6": "<!--[if lte IE 6]>\n\t${child}|\n<![endif]-->"
  10. ...
  11. }
  12. },
  13. "css": {
  14. ...
  15. }
  16. }

基本的思路:打开/新建 HTML/CSS 文件,按照基本的语法编写Emmet代码,再按Tab键生成HTML/CSS代码。

按Tab键生成HTML/CSS代码时需要光标停靠在Emmet代码的后面,不能有空格,Emmet代码之前也不能有空格,不然只会生成一个tab制表符。如果光标在Emmet代码内部任意位置,按Tab键只会生成光标前面的代码,而后面的Emmet代码还是原样,跟随在生成的HTML/CSS代码后面。

[musicbox]自从Emmet后,在网站开发效率上有相当大的提高,Emmet很强大,后期还有三篇文章来介绍Emmet。[/musicbox]

本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/emmet-introduce.html