Jade Dungeon

Emmet-vim

安装

解压到.vim目录即可。

一般只对html文档起作为，但可以配置对其他的文件也生效：

# cat >> ~/.vimrc
let g:user_emmet_settings = {
  \  'xml' : { 'extends' : 'html', },
  \  'css' : { 'filters' : 'fc', },
  \  'jsp' : { 'extends' : 'html', 'filters' : 'html,c', },
  \  'php' : { 'extends' : 'html', 'filters' : 'c', },
  \}

对于vim的不同模式,可以在.vimrc有不同配置:

let g:user_emmet_mode='n'    "only enable normal mode functions.
let g:user_emmet_mode='inv'  "enable all functions, which is equal to
let g:user_emmet_mode='a'    "enable all function in all mode.

生成HTML

在文本中输入：

html:5

光标位于上面这一行，插入模式下<c-y>,就会扩展为：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title></title>
</head>
<body>
	
</body>
</html>

基本操作

E 代表HTML标签
E#id 代表标签E有id属性
E.class 代表E有class属性
E[attr=foo] 代表某个特定属性
E{info} 代表标签E包含的内容是info
E>N 代表N是E的子元素
E+N 代表N是E的同级元素
E^N 代表N是E的上级元素

后代：`>`

div>ul>li

转变为：	

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

同级：`+`

div+p+bq

转变为：	

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

上级：`^`

div+div>p>span+em^bq

转变为：	

<div></div>
<div>
    <p><span></span><em></em></p>
    <blockquote></blockquote>
</div>

乘法：*

ul>li*5

转变为：	

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

自增符号：`$`

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>

改变自增基数和方向：`@`

ul>li.item$@-*5 ? 

转变为：	

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

ul>li.item$@3*5  ? 

转变为：	

<ul>
    <li class="item3"></li>
    <li class="item4"></li>
    <li class="item5"></li>
    <li class="item6"></li>
    <li class="item7"></li>
</ul>

分组：`()`

div>(header>ul>li*2>a)+footer>p

转变为：	

<div>
    <header>
        <ul>
            <li><a href=""></a></li>
            <li><a href=""></a></li>
        </ul>
    </header>
    <footer>
        <p></p>
    </footer>
</div>

ID 和 CLASS

div#header+div.page+div#footer.class1.class2.class3

转变为：	

<div id="header"></div>
<div class="page"></div>
<div id="footer" class="class1 class2 class3"></div>

文本：`{}`

a[#]{Click me}

转变为：	

<a href="#">Click me</a>

Lorem Ipsum(乱数假文)：lorem

只要五个字母一个tap家可以生成这么大一段站位文字：

lorem 

转变为：	

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique impedit quaeiure quos itaque, deserunt dolore in consequatur veniam cumque, est voluptatibus minima, velit culpa, reprehenderit aspernatur iste facilis. Rerum!

Emmet的css支持

css属性

m转为margin:
fz转为font-size:

其实这些属性简写都不需要特意去记，你只组要按着你的思路来猜这个属性的简写就好了。

属性值

m10转为margin: 10px;
mt10转为margin-top: 10px;

多个属性值

对于有多个属性值的CSS属性，在编写时只需在属性值之间添加-：

m4-6转为margin: 4px 6px;

Emmet默认单位为px，如果你想使用其他单位就继续看下面吧

单位

在Emmet中每一个单位都有其缩写形式。记不住也没关系，直接按全就好。

p转为：%
e转为：em
r转为：rem
x转为：ex

例：

w100p转为：width: 100%
m10p30e5x转为：margin: 10% 30em 5ex

基本操作

扩展缩写

div>p#foo$*3>a

插入模式下<c-y>,：

	<div>
		<p id="foo1"><a href=""></a></p>
		<p id="foo2"><a href=""></a></p>
		<p id="foo3"><a href=""></a></p>
	</div>

包围缩写

  test1
  test2
  test3

普通模式<c-v>选中这三行再<c-y>,，回显Tag:提示输入用什么标签包围，输入ul>li* ：

	<ul>
		<li>test1</li>
		<li>test2</li>
		<li>test3</li>
	</ul>

如果不用*而是整个包起来的像是blockquote这种标签，就是这样：

	<blockquote>
		test1
		test2
		test3
	</blockquote>

选中整个标签

插入模式下<c-y>d

选中整个标签内容

插入模式下<c-y>D

下一个编辑点

插入模式下<c-y>n

上一个编辑点

插入模式下<c-y>N

更改大小

Move cursor to the img tag.

<img src="foo.png" />

Type <c-y>i on img tag。注意只能取得本地图片的大小：

<img src="foo.png" width="32" height="48" />

合并多行

select the lines, which include <li>

<ul>
	<li class="list1"></li>
	<li class="list2"></li>
	<li class="list3"></li>
</ul>

and then type <c-y>m

<ul>
	<li class="list1"></li><li class="list2"></li><li class="list3"></li>
</ul>

删除标签

Move cursor in block

<div class="foo">
	<a>cursor is here</a>
</div>

Type <c-y>k in insert mode.

<div class="foo">

</div>

And type <c-y>k in there again.外部标签也被删除了：

Split/Join Tag

Move the cursor inside block

<div class="foo">
	cursor is here
</div>

Type <c-y>j in insert mode.

<div class="foo"/>

And then type <c-y>j in there again.

<div class="foo">
</div>

切换注释

Move cursor inside the block

<div>
	hello world
</div>

Type <c-y>/ in insert mode.

<!-- <div>
	hello world
</div> -->

Type <c-y>/ in there again.

<div>
	hello world
</div>

从URL生成锚点

Move cursor to URL

http://www.google.com/

Type <c-y>a

<a href="http://www.google.com/">Google</a>

从URL生成引用文本

Move cursor to the URL

http://github.com/

Type <c-y>A

<blockquote class="quote">
	<a href="http://github.com/">Secure source code hosting and collaborative development - GitHub</a><br />
	<p>How does it work? Get up and running in seconds by forking a project, pushing an existing repository...</p>
	<cite>http://github.com/</cite>
</blockquote>

Jade Dungeon

Emmet-vim

安装

生成HTML

基本操作

标签

后代：>

同级：+

上级：^

乘法：*

自增符号：$

改变自增基数和方向：@

分组：()

ID 和 CLASS

文本：{}

Lorem Ipsum(乱数假文)：lorem

Emmet的css支持

css属性

属性值

多个属性值

单位

基本操作

扩展缩写

包围缩写

选中整个标签

选中整个标签内容

下一个编辑点

上一个编辑点

更改大小

合并多行

删除标签

Split/Join Tag

切换注释

从URL生成锚点

从URL生成引用文本

后代：`>`

同级：`+`

上级：`^`

自增符号：`$`

改变自增基数和方向：`@`

分组：`()`

文本：`{}`