一、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 |
|
(2)接着按下 tab 键,之前的缩写代码就会自动扩展为完整的 html 代码片断。