提高效率 Emmet.vim
转载请注明出处 : http://blog.csdn.net/hpu_zyh/article/details/48069159
Emmet — the essential toolkit for web-developers
Emmet配上强大的Vim, 简直不能再美了.
听说 Emment和 Vim 更配哦 (哈哈, 这个越对是)
也可以用于 Sublime Text (默认已经下载了), 官网
下载
下载地址: emmet-vim.zip
解压到 ~/.vim
# cd ~/.vim
# unzip emmet-vim.zip打开vim就可以使用了
使用
主要是使用缩写来生成代码块
示例:
+-------------------------------------
| html:5_
+------------------------------------- _ 代表光标位置
<c-y> 代表 Ctrl + y
<c-y>, 代表 Ctrl + y再加逗号
1 html:5 生成HTML5的 DOCTYPE 基本结构
先输入html:5 ,再使用命令 <c-y>, 实际上输入 ! 效果等同于 html:5
——————–扩展——————–
! ,等同于
html:5,生成 HTML5 doctypehtml:xt, 生成 XHTML transitional doctype
html:4s, 生成 HTML4 strict doctype
2 .header 生成 class = "header"的div
先输入.header ,再使用命令 <c-y>, header可以是任意名字
3 #wrapper 生成 id = "wrapper"的div
先输入#wrapper ,再使用命令 <c-y>,
——————–扩展——————–
组合, 输入 p.clazz#pid， 生成：
<p id="pid" class="clazz"></p>
4 h1{foo}， 生成： <h1>foo</h1>
——————–扩展——————–
输入
a, 生成<a href=""></a>输入
a:link, 生成<a href="http://"></a>输入
img,生成<img src="" >输入
link,生成<link rel="stylesheet" href="">输入
link:css,生成<link rel="stylesheet" href="style.css">
5 h1+h2 生成 <h1></h1><h2></h2>
6 > 生成嵌套的标签
先输入header>div ,再使用命令 <c-y>,
7 *生成几倍的标签
8 $变量,生成不同的值
div>p#test$*3>a : div标签内插入3个子标签,每个子标签内容为 p标签id= "test1"内嵌a标签
9 切换注释
<div>
hello world
</div>光标移到div, 插入模式中按 <c-y>/
<!-- <div>
hello world
</div> -->生成一个HTML5页面结构
参考:
http://www.vim.org/scripts/script.php?script_id=2981
https://raw.githubusercontent.com/mattn/emmet-vim/master/TUTORIAL
版权声明：本文为博主原创文章，未经博主允许不得转载。 转载请标明出处 http://blog.csdn.net/hpu_zyh