软件系统

前端开发工具Emmet的介绍

LensNews

前端开发工具Emmet的介绍曾经也为写HTML/CSS代码而烦恼过,不愿再写下去,感觉很烦琐,写那么多的尖括号,用的标签都是在重复写,而且绝大多数标题都需要闭合标签,再多几个无序列表就更头疼。


如果在编写代码时可以简写这些标签,符号,提高我们在写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 2 - 性感无比的代码编辑器!

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

打开菜单:插件-Plugin Manager-Show Plugin Manager面板,找到“Emmet”勾选后,点击“Install”,中途会弹窗提示需要安装或更新文件,确定就OK。
web开发人员工具包——Emmet

用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 $}  

[slidenormal borderleft="4px solid #ddd" color="#000"]再按Tab键你会看到它神奇的效果,得到的HTML代码是:[/slidenormal]

  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]>nt${child}|n<![endif]-->"  
  10.             ...   
  11.         }   
  12.     },   
  13.   
  14.     "css": {   
  15.         ...   
  16.     }   
  17. }  

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

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

写文章的过程也是学习的过程,萨龙龙是通过Emmet官方网站来学习,你也不妨看看英文原版的教程。
更多内容将在后面的文章讲到!

(1)
Loading收藏(0)

本文由 远方的雪山 作者:萨龙龙 发表,转载请注明来源!

LensNews

热评文章

发表评论

CAPTCHA
*

评论: 6 条评论,访客:0 条,博主:0 条 ,当前引用:6 条

当前外部引用:6 条

  • LKblog
  • Emmet的高级功能与使用技巧 | 远方的雪山
  • Emmet快速编写HTML代码 | 萨龙网络
  • Emmet快速编写CSS样式 | 萨龙网络
  • Emmet快速编写CSS样式 | 远方的雪山
  • Emmet快速编写CSS样式 | Concise主题演示站点