在Vim里玩Zen Coding

Zen coding in vim
Zen Coding確實是一個很不錯的快速寫代碼的方式,自@zen_coding發布以來,受到了不少前端人士的追捧和青睞。試想只要輸入div#content>h1+p即可得到<div id="content"><h1></h1><p></p></div>這麼一段代碼,無疑減少了很多次對鍵盤的敲擊,省力省鍵盤。你想更多的了解Zen Coding可以戳此查看更詳細的介紹。

Vim之前我有做過簡單的介紹,與其說介紹,不如說是簡單的折騰。而Zen Coding的官方項目地址Google Code上還木有Zen Coding的vim插件,倒是在VIM的主頁上找到了VIM 的 Zen Coding 插件ZenCoding.vim。如果想跟進這個插件的版本的話,可以Github上找到這個VIM插件的的最新情況http://github.com/mattn/zencoding-vim

ZenCoding.vim插件提供的默認展開代碼的快捷鍵是,也就是Ctrl + y and Comma。例如輸入html:5_(_為游標的位置),然後輸入「<c-y>,」,就會展開成

<!DOCTYPE HTML> 
 <html lang="en"> 
<head> 
    <title></title> 
    <meta charset="UTF-8"> 
</head> 
<body> 
      _ 
</body> 
</html>

輸入div#foo$*2>div.bar,然後輸入「<c-y>,」就會展開成

<div id="foo1"> 
   <div class="bar">_</div> 
</div> 
<div id="foo2"> 
    <div class="bar"></div> 
</div>

當然,你也可以根據自己的習慣設置展開代碼的快捷鍵,你可以通過在你的vimrc配置文件里寫入以下配置來覆蓋zencoding.vim插件的默認設置。

let g:user_zen_settings = { 
  \  'indentation' : '  ', 
  \  'perl' : { 
  \    'aliases' : { 
  \      'req' : 'require ' 
  \    }, 
  \    'snippets' : { 
  \      'use' : "use strict\nuse warnings\n\n", 
  \      'warn' : "warn \"|\";", 
  \    } 
  \  } 
  \} 
 
  let g:user_zen_expandabbr_key = '<c-e>'    "設置為ctrl+e展開
 
  let g:use_zen_complete_tag = 1

截圖中的例子:
如果你在這段文本外面包裹這段縮寫div#header>ul#navigation>li.item$*>a>span:

About Us
Products
News
Blog
Contact Up

你將會得到以下結果:

<div id="header">
	<ul id="navigation">
		<li class="item1"><a href=""><span>About Us</span></a></li>
		<li class="item2"><a href=""><span>Products</span></a></li>
		<li class="item3"><a href=""><span>News</span></a></li>
		<li class="item4"><a href=""><span>Blog</span></a></li>
		<li class="item5"><a href=""><span>Contact Up</span></a></li>
	</ul>
</div>

目前就目前我對zencoding.vim 0.27版的測試來說,選中文字用div#header>ul#navigation>li.item$*>a>span包括的時候出現了文本內容插入到錯誤的位置的問題,提交bug給作者了。
2010/03/08 22:11 更新:作者回復說修復了。在0.28版本中增加了更多的快捷鍵操作,所以下面的自定義快捷鍵配置無法生效了。可前往http://github.com/mattn/zencoding-vim獲取最新版本。
2010/03/09 20:05 更新:經過和作者的探討,原來的快捷鍵已經改為,不會和撤銷衝突,另外上條更新所說的自定義快捷鍵重新可用了。

zencoding.vim更新十分頻繁,大家可以關注下。
VIM官方插件地址:ZenCoding.vim
zencoding.vim在Github的地址:http://github.com/mattn/zencoding-vim
Zen Coding官方地址:http://code.google.com/p/zen-coding/
Zen Coding官方提供的速查手冊(PDF):http://zen-coding.googlecode.com/files/ZenCodingCheatSheet.pdf

  • Robin

    為啥我把zencoding.vim考到plugin中,嗯 ctrl+z+, 就什麼也沒有了。

    • @Robin 所以我修改了vimrc的配置改成ctrl+e了,我也不知道那個怎麼輸入似乎是衝突還是怎麼的

  • 這個……vim是挺好,但我還是習慣np++,但np++下沒有zen coding一直沒解決,作者好像也無能為力

  • 嘿嘿,問一下,怎麼不要自動備份文件的功能?

  • 這次也有 notepad++ 的插件了,感覺這樣寫代碼太爽了

  • 看來vim你已經上手了,我cp代碼多,所以這個Zen Coding暫時對我沒用,哈

  • 樓主是高手啊,介紹個學習JS相對較好的書籍行嗎?

  • 唔,純路過……插不上話了……

  • coda+zencode
    vim以前用linux時用過兩年
    mac下的vim不好用
    換textmate

  • 我還是習慣自己手寫HTML,頁面結構自己留個印象這樣才好寫CSS

    • @bolo 哦,這個怎麼就不是手寫html了…

    • @Leeiio 主要是懶學新的書寫規則,習慣逐個字元敲

  • Thanks for nice entry about zencoding.vim :mrgreen:

    • @mattn You are welcome,zencoding.vim is really useful and powerful.

  • cricy

    在網上找到你的發言:「我的macvim老是和輸入法衝突,英文輸入老是切到中文…而且dock會彈出兩個macvim…還是用espresso了。」

    不知道這個問題解決了沒?我也有一樣的問題,最不方便的就是英文輸入法自動切換到中文輸入法。看看能解決不?

  • vt

    zencoding 確實強大,以前都不知道 vim 還有這麼好的插件 😛
    thanks for sharing

  • 不知道現在zencoding支持中文不

  • 很贊 不過占時沒看懂

  • 我用e-texteditor。CSS部分展開有誤,不知道博主有沒有辦法。m:a原本是margin:auto;它卻是氣死人了。

  • Pingback: 在vim上嘗試了一下zen coding,用來寫html文件倒是快了很多 | simon的個人日誌()

  • wtz

    你好!我是在安裝zen coding不成功時。找到你的blog.看到你的文章。似乎很easy!.為灑我的就沒有效果??我是在windows xp 下安裝gvim7.0 的。安裝好後。我接下來在vim的官網下載了最新的zen coding 插件。解壓下來有三個文件(autoload doc plugin)我分別把這三個文件下的文件(zencoing.vim zencoding.txt zencoding.vim )放在我的vim安裝目錄下相應的文件下下。可我重啟vim 輸入 div 然後空格 再按ctrl+y+,(是在插入模式下輸入的) 根本沒有生成html代碼
    請問這是什麼原因呀?期待您的回復.謝謝了!

  • oliex

    小問題一枚,生成的代碼默認為tab縮進,即使我將縮進更改為空格,他也是使用tab。

    • @oliex 這個應該可以偶挺難搞過修改插件來替換成空格

    • oliex

      @Leeiio 真的嗎?我找找看。

    • @oliex 不需要修改插件,只需要在~/.vimrc里寫下配置就ok了
      let g:user_zen_settings = {
      ‘indentation’ : ‘ ‘,
      }

  • 我安裝了就是Ctrl+Y都木有反應,不知道什麼原因,練習HJKL的俄羅斯方塊都運行成功的了呀~~

    • 動蕩不安

      ctrl+y還需要加英文逗號「,」哦。

  • Pingback: Vim相關資料大全 | 天天三國殺()