Vim ZenCoding 插件使用教程

Tutorial for Emmet.vim                                                    mattn <[e-mail]>1. Expand an Abbreviation  Type the abbreviation as 'div>p#foo$*3>a' and type '<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. Wrap with an Abbreviation  Write as below.  ---------------------  test1  test2  test3  ---------------------  Then do visual select(line wise) and type '<c-y>,'.  Once you get to the 'Tag:' prompt, type 'ul>li*'.  ---------------------  <ul>      <li>test1</li>      <li>test2</li>      <li>test3</li>  </ul>  ---------------------  If you type a tag, such as 'blockquote', then you'll see the following:  ---------------------  <blockquote>      test1      test2      test3  </blockquote>  ---------------------3. Balance a Tag Inward  type '<c-y>d' in insert mode.4. Balance a Tag Outward  type '<c-y>D' in insert mode.5. Go to the Next Edit Point  type '<c-y>n' in insert mode.6. Go to the Previous Edit Point  type '<c-y>N' in insert mode.7. Update an <img>’s Size  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" />  ---------------------8. Merge Lines  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>  ---------------------9. Remove a Tag  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.  ---------------------  ---------------------10. 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>  ---------------------11. Toggle Comment  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>  ---------------------12. Make an anchor from a URL  Move cursor to URL  ---------------------  http://www.google.com/  ---------------------  Type '<c-y>a'  ---------------------  <a href="http://www.google.com/">Google</a>  ---------------------13. Make some quoted text from 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>  ---------------------14. Installing emmet.vim for the language you are using:  # cd ~/.vim  # unzip emmet-vim.zip  Or if you are using pathogen.vim:  # cd ~/.vim/bundle # or make directory  # unzip /path/to/emmet-vim.zip  Or if you get the sources from the repository:  # cd ~/.vim/bundle # or make directory  # git clone http://github.com/mattn/emmet-vim.git15. Enable emmet.vim for the language you using.  You can customize the behavior of the languages you are using.  ---------------------  # cat >> ~/.vimrc  let g:user_emmet_settings = {  \  'php' : {  \    'extends' : 'html',  \    'filters' : 'c',  \  },  \  'xml' : {  \    'extends' : 'html',  \  },  \  'haml' : {  \    'extends' : 'html',  \  },  \}  ---------------------