Emmet.vim教程翻译

诗书塞外翻译, 禁止转载

原文地址:https://raw.githubusercontent.com/mattn/emmet-vim/master/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. 将文本扩展为HTML

  输入如下内容.
  ---------------------
  test1
  test2
  test3
  ---------------------
  用visual模式选定上面内容然后敲击'<c-y>,'.
  当你看到'Tag:'提示符时, 输入 'ul>li*'.
  ---------------------
  <ul>
      <li>test1</li>
      <li>test2</li>
      <li>test3</li>
  </ul>
  ---------------------

  如果你输入一个标签, 例如'blockquote', 你会得到下面这样的结果:
  ---------------------
  <blockquote>
      test1
      test2
      test3
  </blockquote>
  ---------------------

3. 按照标签层次,缩小选择范围

  在输入模式下敲击 '<c-y>d'

4. 按照标签层次,扩大选择范围

  在输入模式下敲击 '<c-y>D'

5. 到下一个可编辑点

  在输入模式下敲击 '<c-y>n'

6. 到上一个可编辑点

  在输入模式下敲击 '<c-y>N'


7. 更新img标签大小

  把光标移动到img标签上
  ---------------------
  <img src="foo.png" />
  ---------------------
  在img标签上敲击 '<c-y>i'
  ---------------------
  <img src="foo.png" width="32" height="48" />
  ---------------------

8. 合并行

  选择包含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>
  ---------------------

9. 删除一个标签

  将光标移动到要删除的标签上
  ---------------------
  <div class="foo">
      <a>cursor is here</a>
  </div>
  ---------------------
  输入模式下敲击 '<c-y>k'
  ---------------------
  <div class="foo">

  </div>
  ---------------------

  再敲击一次 '<c-y>k'
  ---------------------

  ---------------------

10. 拆分/合并标签

  将光标移动到代码块内
  ---------------------
  <div class="foo">
      cursor is here
  </div>
  ---------------------
  输入模式下敲击 '<c-y>j'
  ---------------------
  <div class="foo"/>
  ---------------------

  再次敲击 '<c-y>j'
  ---------------------
  <div class="foo">
  </div>
  ---------------------

11. 开关注释

  将光标移动到代码块内
  ---------------------
  <div>
      hello world
  </div>
  ---------------------
  输入模式下敲击 '<c-y>/'
  ---------------------
  <!-- <div>
      hello world
  </div> -->
  ---------------------
  再次敲击 '<c-y>/'
  ---------------------
  <div>
      hello world
  </div>
  ---------------------

12. 将URL转换为a标签

  将光标移动到URL上
  ---------------------
  http://www.google.com/
  ---------------------
  输入 '<c-y>a'
  ---------------------
  <a href="http://www.google.com/">Google</a>
  ---------------------

13. 从URL上获取一段描述

  将光标移动到URL上
  ---------------------
  http://github.com/
  ---------------------
  输入 '<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. 为你使用的语言安装emmet-vim:

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

  或者,你在使用 pathogen.vim:

  # cd ~/.vim/bundle # or make directory
  # unzip /path/to/emmet-vim.zip

  或者,你想从仓库直接获取源码:

  # cd ~/.vim/bundle # or make directory
  # git clone http://github.com/mattn/emmet-vim.git

15. 为你使用的语言启用 emmet.vim .

  你可以自定义你使用的语言的行为

  ---------------------
  # cat >> ~/.vimrc
  let g:user_emmet_settings = {
  \  'php' : {
  \    'extends' : 'html',
  \    'filters' : 'c',
  \  },
  \  'xml' : {
  \    'extends' : 'html',
  \  },
  \  'haml' : {
  \    'extends' : 'html',
  \  },
  \}
  ---------------------

 

2月15日11:00到13:00网站停机维护,13:00前恢复
iPy智能助手 双击展开
查看更多聊天记录
(Ctrl+回车)换行