Vim ZenCoding 插件使用教程

2 篇文章 0 订阅
Tutorial for Emmet.vim
                                                    mattn <mattn.jp@gmail.com>

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.git

15. 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',
  \  },
  \}
  ---------------------
安装方法: 1.将VIM_Config/.vim 拷到 ~/目录下 2.将VIM_Config/.vimrc 拷到 ~/目录下 3.将make_cscope.sh 拷到 ~/目录下 4. chmod +x ~/make_cscope.sh 使用方法: 若代码位于 /data/code 则 1) cd /data/code 2) ~/make_cscope.sh 3)在当前目录下 vim 指定文件 (因为cscope.out在当前目录下, 若不在当前目录打开vim,则cscope.out 不会自己加载,要手动加载). 4).Ctrl+]将跳到光标所在变量或函数的定义处 Ctrl+T返回 附录: ========================== 使用cscope ========================== Step 4 用cscope为源文件创建数据库,生成cscope.out文件 命令提示符中进入源码根目录运行cscope -Rkb (如果没有这一步,使用cscope时会提示没有连接) Step 5 为源文件添加对应的数据库连接 打开编辑文件,vim底行模式, :cs a F:\...\cscope.out 查看是否已经连接到对应数据库 :cs s Step 6 使用cscope浏览源码 你可以使用vim底行中使用cscope的命令; 也可以应用cscope的键盘映射进行快速操作。 在VIM使用cscope非常简单,首先调用“cscope add”命令添加一个cscope数据库, 然后就可以调用“cscope find”命令进行查找了。VIM支持8种cscope的查询功能, 如下:例如,我们想在代码中查找调用work()函数的函数,我们可以输入: “:cs find c work”,回车后发现没有找到匹配的功能,可能并没有函数调用work()。 我们再输入“:cs find s work”,查找这个符号出现的位置,现在vim列出了这个符号出现的所有位置。 我们还可以进行字符串查找,它会双引号或单引号括起来的内容中查找。还可以输入一个正则表达式, 这类似于egrep程序的功能。 s: 查找C语言符号,即查找函数名、宏、枚举值等出现的地方 g: 查找函数、宏、枚举等定义的位置,类似ctags所提供的功能 d: 查找本函数调用的函数 c: 查找调用本函数的函数 t: 查找指定的字符串 e: 查找egrep模式,相当于egrep功能,但查找速度快多了 f: 查找并打开文件,类似vim的find功能 i: 查找包含本文件的文
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值