提高效率 Emmet.vim

提高效率 Emmet.vim

转载请注明出处 : http://blog.csdn.net/hpu_zyh/article/details/48069159
博客主页 | | 知乎 | 微博 | github

Emmet — the essential toolkit for web-developers
Emmet配上强大的Vim, 简直不能再美了.
听说 Emment和 Vim 更配哦 (哈哈, 这个越对是)

也可以用于 Sublime Text (默认已经下载了), [官网]

logo

下载

下载地址: emmet-vim.zip
解压到 ~/.vim

# cd ~/.vim
# unzip emmet-vim.zip

打开vim就可以使用了

---

使用

主要是使用缩写来生成代码块
示例:

   +-------------------------------------
   | html:5_
   +-------------------------------------   

_ 代表光标位置
代表 Ctrl + y
, 代表 Ctrl + y再加逗号

1 html:5 生成HTML5的 DOCTYPE 基本结构

先输入html:5 ,再使用命令 , 实际上输入 ! 效果等同于 html:5

--------------------扩展--------------------

! ,等同于 html:5 ,生成 HTML5 doctype
html:xt, 生成 XHTML transitional doctype
html:4s, 生成 HTML4 strict doctype

html:5.gif

)

2 .header 生成 class = "header"的div

先输入.header ,再使用命令 , header可以是任意名字

9.gif

3 #wrapper 生成 id = "wrapper"的div

先输入#wrapper ,再使用命令 ,

28.gif

--------------------扩展--------------------

组合, 输入 p.clazz#pid， 生成：

4 h1{foo}， 生成：

foo

15.gif

--------------------扩展--------------------

输入 a , 生成
输入 a:link , 生成
输入img,生成
输入link,生成
输入link:css,生成

更多自动填充标签属性

5 h1+h2 生成

16.gif

6 > 生成下级的标签

先输入header>div ,再使用命令 ,

11.gif

--------------------扩展--------------------
header^div生成上级标签
header+div 生成同级标签

7 *生成几倍的标签

12.gif

8 $变量,生成不同的值

div>p#test$*3>a : div标签内插入3个子标签,每个子标签内容为 p标签id= "test1"内嵌a标签

13.gif

9 切换注释

    hello world

光标移到div, 插入模式中按 /

生成一个HTML5页面结构

18.gif