iT邦幫忙

DAY 6
3

快寫HTML靜態網頁系列 第 6

vim裡用 snipmate 快寫HTML及程式碼

縮寫擴展的方式好像很好用,
即然可以用在 HTML 上,
也會有類似的機制用在寫程式上?
snipmate 可以加快寫碼的速度。
安裝snipmate
要先安裝vim-snipmate
或者從vim官方網的套件下載zip檔;
但裡面不包括任何程式語言的小片段,
之後再要把vim-snippets裝上,
就可支援各種程式語言語法。

在github上的版本是0.86,而vim官方網的zip檔案是0.83,
前者需要先安裝 Pathogen
後者只要把zip檔案,全部解壓到 .vim 的目錄,
然後在其他暫時的目錄,下載snippets:

$ git clone https://github.com/honza/vim-snippets.git
cd vim-snippets/
cp -r snippets ~/.vim/

而在 .vimrc 裡要加上 :filetype plugin on 這設定,
就會根據 vim 編輯的 副檔名,
來判斷去讀哪一種語言的snippets。

用tab鍵縮寫擴展
當 vi xxx.html 後,
只要鍵入所定義的縮寫,
然後按 tab 鍵,就會擴展完整的碼。
可參考 .vim/snippets 裡個別的定義檔。
https://github.com/honza/vim-snippets/blob/master/snippets/html.snippets
以 link 這縮寫為例,

snippet link
        <link rel="${1:stylesheet}" href="${2:/css/master.css}" type="text/css" media="${3:screen}" charset="utf-8"`Close()`>${4}

鍵入link、按tab後會產生

<link rel="stylesheet" href="/css/master.css" type="text/css" media="screen" charset="utf-8">

而游標會停在裡面的第一個值供修改,再按tab移到下一個…
所以在snippet檔裡${數字}提供了用tab改變游標所停的位置,
也可加:值,放預設值。

而編寫其他程式語言,
就編寫ruby,就是副檔名為rb檔時,
鍵入 def 按tab,就出現
def method_name

end

寫好方法名稱後,tab鍵就移到下一行的編寫位置。

相關類似的套件
其實在vim裡,
可以利用snippets來快速寫程式碼的engine有幾種,
而snipmate只是其中的一種,
此篇文章比較了不同engine的特色:
text snippets, skeletons, templates

系列文章列表


上一篇
emmet 實現 zen coding 在 vim 環境中
下一篇
輕量的標籤語言 HAML
系列文
快寫HTML靜態網頁27
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
凍仁翔
iT邦新手 3 級 ‧ 2013-09-24 11:48:34

vim-snipmate 時在下有搭配 vim-addon-mw-utils, tlib_vimvim-snippets 使用,還挺不賴的!

我要留言

立即登入留言