Vim 使用Emmet.vim 快速编辑html

Intro

Emmet一官方tutorial,和一些使用方法

1. 元素展开

键入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>

2. visual下展开元素

原始文本

    test1
    test2
    test3

visual选中虚拟块键入<c-y>,. 在Tag: 输入ul>li*.

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

如果在Tag: 中输入bq.

  <blockquote>
      test1
      test2
      test3
  </blockquote>

3. 指向上/下一个编辑点

<c-y>n/ <c-y>N

4. 合并同级行

选中所有同级li

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

然后输入<c-y>m

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

5. 移除Tag

移动光标到div内的a标签

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

键入<c-y>k

  <div class="foo">

  </div>

再键入一次<c-y>k

    空了

6. 效果是这样，叫什么我也不知道，唉

移动光标到div的内容　

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

键入<c-y>j

  <div class="foo"/>

再次键入<c-y>j

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

7. 快速注释

移到光标到div内

  <div>
    hello world
  </div>

键入　<c-y>/

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

再一次键入　<c-y>/

  <div>
    hello world
  </div>

8. 嵌套运算符> + ^

>例子

    div>ul>li

<c-y>,

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

+例子

    div+p+bq

<c-y>,

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

^例子

    div+div>p>span+em^bq

<c-y>,

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

*例子$$$补齐@-倒置

    ul>li.item$$$*5

<c-y>,

    <ul>
        <li class="-item005"></li>
        <li class="-item004"></li>
        <li class="-item003"></li>
        <li class="-item002"></li>
        <li class="-item001"></li>
    </ul>

9. id 用# class用.

    ul#test>li.item$$$*5{文本}

<c-y>,

    <ul id="test">
        <li class="item001"></li>
        <li class="item002"></li>
        <li class="item003"></li>
        <li class="item004"></li>
        <li class="item005"></li>
    </ul>

10. 文本用{}

    a{link}

<c-y>,

    <a href="">link</a>

Reference:

入门

url2

url3