Atom - Emmet插件的使用详解

一、Emmet的安装与介绍

Emmet (前身为 Zen Coding) 是一个能大幅度提高前端开发效率的工具，能够实现 HTML、CSS 的快速编写。

• 官网地址：http://emmet.io/
• 官方文档：http://docs.emmet.io/cheat-sheet/
• Atom的emmet介绍页面：https://atom.io/packages/emmet

 

1，使用Emmet的好处

• 通常大多数的文本编辑器都会允许我们存储和重用一些代码块，我们称之为“片段”。虽然片段能很好地推动我们的生产力，但大多数的实现都有这样一个缺点：我们必须先定义代码片段，并且不能再运行时进行拓展。
• 而 Emmet 把片段这个概念提高到了一个新的层次：我们可以设置 CSS 形式的能够动态被解析的表达式，然后根据输入的缩写来得到相应的内容。Emmet 很成熟的并且非常适用于编写 HTML/XML 和 CSS 代码的前端开发人员，但也可以用于编程语言。

 

2，安装Emmet

Emmet 为大部分流行的编辑器都提供了安装插件，本文演示如何在 Atom 中使用 Emmet 插件。

（1）点击 Atom 的“Preferences”菜单选项（Windows 下是“Settings”菜单选项）

（2）进入到 Install 页面。

（3）搜索“Emmet”包，点击 Install 按钮即可安装。

 

3，简单的使用样例

（1）我们在编辑器中输入如下代码：

1

ul>li*6

（2）接着按下 tab 键，之前的缩写代码就会自动扩展为完整的 html 代码片断。

 

全文： http://www.hangge.com/blog/cache/detail_1537.html

官方文档：https://docs.emmet.io/