Atom下 Emmet 插件使用的简单指南

上周为了正式开发 HTML5 时能有一个很爽的感觉，所以捣鼓了一通机器。先是从“世界上做好的编辑器”——Vim 开始捣鼓起来，本来想通过 Vim 来开发的，不过 Vim 插件折腾了好久都不见结果，一气之下就改用了 Atom。Atom 果然是“全球最大男性交友社区”——GitHub 创造的产品。插件确实很齐全，就像 Python 的第三方库一样的齐全。Atom 通过插件的方式倒是听简单的，没有多久就安装了好几个插件。最让我感到惊讶的当属： Vim mode和 Emmet。前者让我可以继续用 Vim 的操作方式，后者则是书写 HTML 页面的利器啊。

Emmet 的使用

缘起

在 Emmet 插件的 官网上介绍了 Emmet 插件的使用方式，不过我发现由于系统或者是插件的快捷键的原因，有些快捷键并不能使用。正当我灰心的时候，偶然间的按下了

Ctrl+Alt+Enter

而后神奇的事情就发生。这时候，弹出了一个文本框，在文本框中输入相应的语句，竟然生成了 HTML 页面元素了。所以发现了另类的使用 Emmet 的方法，在此分享给大家。

方法

原来的通过

Tab

或者

Ctrl+e

都不管用，但是使用的方法也很简单，只要将光标移动到要加入 HTML 元素片段处，按下

Ctrl+Alt+Enter

就可以唤出文本框；



而后输入相应的语句，就会生成相应的 HTML 代码：



如图中的语句就生成下面的代码：

<div class="list">
<div class="item"><img src="{{item.s1}}" alt="{{item.a1}}"></div>
<div class="item"><img src="{{item.s2}}" alt="{{item.a2}}"></div>
<div class="item"><img src="{{item.s3}}" alt="{{item.a3}}"></div>
<div class="item"><img src="{{item.s4}}" alt="{{item.a4}}"></div>
<div class="item"><img src="{{item.s5}}" alt="{{item.a5}}"></div>
</div

很简单是不是。其实 Emmet 的语法也很简单，具体可以 Google 或者查看这一篇博客

授之与渔

其实这个方法是在胡乱实验的情况下获得的，不过实验还是看了 Atom 中的按键，Atom 中的按键其实可以看到的，它就在 Settings 页面里。如图：



其按键是按照字母排序的，所以还是比较好查找的。