SublimeText插件Emmet技巧

工具

SublimeText插件Emmet技巧

上次介绍过 Sublime 常用的一些插件，其中 Emmet 插件是对写前端代码最实用的一个插件了。相比对 DW 那种生成代码的方式，如果你能掌握 Emmet 的一些用法的话，会比使用它更快。

补全功能特别的强大，总结下我在使用 Emmet 中常用的一些方式。大部分技巧只需要输入关键字，然后按 Tab 键即可。

我平时使用的都是比较简单的，没有去使用一些特别复杂的结构。 Emmet 有些语法可以生成很复杂的页面结构，这个可以去官网仔细学习。

快速生成 H5 结构

输入 ! 然后按 Tab 键就可以快速生成一个基本的 HTML5 文档结构，如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title></title>
</head>
<body>
	
</body>
</html>

快速添加 class 以及 id

比如你要生成一个用户名的输入框，通常你会给它取个 id 或者 class 用于获取数据或者是样式控制等。那么只可以直接写 input#username 。

<input type="text" id="username">

或者是写 input.username

<input type="text" class="username">

前面的 input 标签你也可以换成其他标签，如 p 等。

生成平级的兄弟元素

比如你要写一个 div ，然后 div 后再有一个 div，那么你就可以写 div+div 。平级的元素使用符号 + 。

<div></div>
<div></div>

当然你也可以自己进行任意组合，比如 div+p 、div+p+div 等。

生成后代元素

父子级别生成使用符号 > 。比如你要写一个 div 嵌套一个 p 标签，那么就可以使用 div>p ，

<div>
	<p></p>
</div>

分组

分组就是组合多种写法，比如上面的生成平级兄弟元素跟生成父子元素可以组合起来使用，用 () 包裹起来。

输入 (div+div)+(div>p) 按 Tab 键后生成：

<div></div>
<div></div>
<div>
	<p></p>
</div>

生成重复元素

比如我们要生成多个元素，那么直接使用 *x 即可， x就是一个数值。

比如要生成 5 个无序列表，那么就可以使用 ul>li*5 生成如下代码：

<ul>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
	<li></li>
</ul>

生成递增的编号

比如上面的无序列表需要加 class ，然后 class 编号是 1-5 ，那么可以这么写 ul>li.item$*5。

<ul>
	<li class="item1"></li>
	<li class="item2"></li>
	<li class="item3"></li>
	<li class="item4"></li>
	<li class="item5"></li>
</ul>

其中 $ 用来生成自增的编号。

上面这些基本上就是我平时使用的比较多的几个技巧，更多的写法可以参考官网的文档。