Emmet入门


简介

Emmet — the essential toolkit for web-developers

Emmet is a web-developer’s toolkit for boosting HTML & CSS code writing.

With Emmet, you can type expressions (abbreviations) similar to CSS selectors and convert them into code fragment with a single keystroke.

Emmet(以前名为Zen Coding是一套面向文本编辑器插件,它允许通过内容辅助高速度的编写和编辑HTMLXMLXSL和其他结构化的代码格式。此项目2008年由Vadim Makeev发起,并由Sergey Chikuyonok和其他Emmet用户基于Zen Coding 2.0的概念继续积极开发。这套工具已经被一些高端的文本编辑器采纳,以及存在于Emmet团队开发或其他人独立实现的插件中。不过,Emmet独立于任何文本编辑器,它的引擎可以直接处理文本,而无需与任何特定软件相关。

Emmet以MIT许可证开源。

Emmet使用特定的语法来展开小段代码,它类似CSS选择器,使其成为完整的HTML代码。

简单说一下用法:

假如你需要写这样一段代码:

<ul>    
   <li class="item001"></li>    
   <li class="item002"></li>    
   <li class="item003"></li>    
   <li class="item004"></li>    
   <li class="item005"></li>
</ul>

如果纯手工敲键盘的话你需要从头敲到尾,或许一些老司机会复制li那一行复制一下。但是对于使用Emmet的玩家来说,只需要在键盘上敲出以下几个字符:

ul>li.item$$$*5

敲完之后按一下组合键Ctrl+e(热键可修改),即可得到和上面一样的代码了。

这种字符及其规则,就是Emmet语法,可以参考下面的 github 网址查看文档,下面也提供了一份 Emmet Cheat Sheet 以供学习。

github地址:

https://docs.emmet.io/cheat-sheet/

https://github.com/emmetio

This entry was posted in 默认分类. Bookmark the permalink.