Gvim+Emmet.vim 那些事。

转自:http://www.jianshu.com/p/67fa1e2114c5

背景

HTML和CSS的写法相对固定，而且重复的工作特别多，特别是尖括号实在是很烦。使用Emmet至少能帮你节省一半的前期开发工作量，所以花点时间学习Emmet是很值得的。Emmet不是编程语言，而只是编辑器的插件，也可以自定义规则。

安装

Emmet支持多种编辑器，参见列表。由于我使用vim，这里只介绍vim的插件。

下载地址： https://github.com/mattn/emmet-vim
安装方法：上面的页面介绍的很清楚
配置Emmet
- 只在html和css文件中起作用
```
let g:user_emmet_install_global = 0

autocmd FileType html,css EmmetInstal
```
- 修改Emmet的触发键
  let g:user_emmet_leader_key='<C-Z>'
教程：

教程里已经介绍的很清楚，我主要罗列常用写法。

用法

快捷键

注：<c-y>, 指先按ctrl+y，再按,，后面不再说明

快捷键	介绍
`<c-y>,`	emmet触发键，tips:输完命令后最好在后面多写一个空格，如：`html:5_`
`v` `<c-y>,`	先进入可视模式，选择目标文本，按快捷键，状态栏弹出Tags:，输入命令即可
`<c-y>n`	跳转到下一个编辑点
`<c-y>N`	跳转到上一个编辑点
`<c-y>i`	移动到img标签，按快捷键，自动为图片添加大小
`<c-y>m`	合并多行为一行
`<c-y>k`	删除当前tag
`<c-y>/`	切换添加、去除注释
`<c-y>a`	自动将网址转换为链接标签

简写注意事项

简写	编译
.wrap>.content	div.wrap>div.content
em>.info	em>span.info
ul>.item*3	ul>li.item*3
table>#row$*4>[colspan=2]	table>tr#row$*4>td[colspan=2]

基本html用法

! (生成基本html结构，效果同html:5)
示例： !
效果：

  <!DOCTYPE html>

  <html lang="en">

  <head>

      <meta charset="UTF-8">

      <title></title>

  </head>

  <body>

  </body>

  </html>

html:5 (效果同!，另外还有html:xt, html:4s)
# (生成id)
示例： div#main 或者直接写 #main
效果：
```
  <div id="main">

  </div>
```
. (生成class)
示例： div.list
效果：
```
  <div class="list">

  </div>
```

> (生成后代元素)
示例： div.list>ul>li
效果：

  <div class="list">

      <ul>

          <li></li>

      </ul>

  </div>

+ (生成兄弟元素)
示例： h1+h2+p
效果：
```
  <h1></h1>

  <h2></h2>

  <p></p>
```

{} (文本)
示例： a{Click me}+ul>li{item$}*3
效果：

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

  <ul>

      <li>item1</li>

      <li>item2</li>

      <li>item3</li>

  </ul>

示例2：p>{Click }+a{here}+{ to continue}
效果：

  <p>Click <a href="">here</a>to continue</p>

^ (生成上级元素)
示例： div.list>ul>li^span
效果：

  <div class="list">

      <ul>

          <li></li>

      </ul>

      <span></span>

  </div>

* (重复生成元素)
示例： ul>li*5
效果：

  <ul>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

      <li></li>

  </ul>

() (生成分组)
示例： div.list>ul>li
效果：

  <div id="main">

      <div id="header">

          <ul>

              <li></li>

              <li></li>

          </ul>

      </div>

      <div id="footer"></div>

  </div>

示例2：(div>dl>(dt+dd)*3)+footer>p
效果：

 <div>

     <dl>

         <dt></dt>

         <dd></dd>

         <dt></dt>

         <dd></dd>

         <dt></dt>

         <dd></dd>

     </dl>

 </div>

 <footer>

     <p></p>

 </footer>

$[N] (生成编号，单个编号默认从1开始，也支持多位编号，需要几位就写几个，默认从0开始,N为起始编号)
示例： div>(ul>li.item$*2)+(ul>li.item$$@5*2)
效果：

  <div>

      <ul>

          <li class="item1"></li>

          <li class="item2"></li>

      </ul>

      <ul>

          <li class="item05"></li>

          <li class="item06"></li>

      </ul>

  </div>

$@[-][N] (编号排序-为倒序，N为起始编号)
示例： ul>li.item$$@-*2
效果：

  <ul>

      <li class="item02"></li>

      <li class="item01"></li>

  </ul>

示例： ul>li.item$$@5*3
效果：

  <ul>

      <li class="item05"></li>

      <li class="item06"></li>

  </ul>

lorem[N] (生成随机内容，N为单词数量)
示例： lorem
效果：

  Elit neque iste aspernatur repellat ducimus alias incidunt nam nemo ducimus, id consequatur illo blanditiis! Necessitatibus minima repellat dignissimos eaque quo obcaecati quasi. Voluptatum nostrum harum corporis optio molestias nihil.

示例： h2*3>lorem5 或者 (h2>lorem5)*3
效果：

  <h2>

      Consectetur esse recusandae sapiente magnam.

  </h2>

  <h2>

      Lorem odio unde magni molestias!

  </h2>

  <h2>

      Amet perferendis praesentium facilis maxime.

  </h2>

实用html组合

生成一个基本网站框架
示例： #main_page>(div.header>div.logo+div.menu)+div.context+div.footer
效果：

  <div id="main_page">

      <div class="header">

          <div class="logo"></div>

          <div class="menu"></div>

      </div>

      <div class="context"></div>

      <div class="footer"></div>

  </div>

生成内容
示例：.context>((span.title>lorem2)+(span.text>lorem10))*3
效果：

   <div class="context">

      <span class="title">Elit quod?</span>

      <span class="text">Amet cumque perferendis a quasi dolor voluptatem repellat nihil lorem.</span>

      <span class="title">Adipisicing atque.</span>

      <span class="text">Consectetur deleniti quasi ea iste atque dolores rem nihil. Dolor.</span>

      <span class="title">Adipisicing laborum?</span>

      <span class="text">Sit nam sapiente eius dolorem accusamus, beatae impedit molestias expedita?</span>

  </div>

生成菜单
示例： div.menu>ul#navigation>li*5>a{Item $}
效果：

  <div class="menu">

      <ul id="navigation">

          <li><a href="">Item 1</a></li>

          <li><a href="">Item 2</a></li>

          <li><a href="">Item 3</a></li>

          <li><a href="">Item 4</a></li>

          <li><a href="">Item 5</a></li>

      </ul>

  </div>

可视化模式下生成菜单
示例文本：

首页

新闻

方案

关于

按v进入可视模式，选中文本，再按<c-y>,，输入：
nav>ul.nav>li.page$*>a
效果：

<nav>

  <ul class="nav">

      <li class="page1"><a href="">首页</a></li>

      <li class="page2"><a href="">新闻</a></li>

      <li class="page3"><a href="">方案</a></li>

      <li class="page4"><a href="">关于</a></li>

  </ul>

</nav>

再进一步，取消上面的操作：输入：
ul.nav>li.page$*>img[alt=$#]+a[href='#']
效果

<ul class="nav">

  <li class="page1">

      <img src="" alt="首页">

      <a href="#">首页</a>

  </li>

  <li class="page2">

      <img src="" alt="新闻">

      <a href="#">新闻</a>

  </li>

  <li class="page3">

      <img src="" alt="方案">

      <a href="#">方案</a>

  </li>

  <li class="page4">

      <img src="" alt="关于">

      <a href="#">关于 </a>

  </li>

</ul>

自动添加图片尺寸
<img src="test.jpg" alt="首页">
光标移动到img标签内，按<c-y>i再按Enter即可
效果：
<img src="test.jpg" alt="首页" width="500" height="375">