Arch Linux - 為 Vim 安裝加速 Web 開發套件 : Emmet-vim ( Install Emmet-vim for Vim on Arch Linux )

Emmet 是一個可以快速提升 Web developer 工作效率的工具，先前也寫過一篇關於 Sublime Text 2 使用 Emmet 套件。本篇將介紹如何在 Vim 中安裝、使用 Emmet-vim。( 其他 Arch Linux 相關教學可以參考本篇整理 )



前置作業：
安裝 Vim 套件的方法很多，接下來將透過 Vim 套件管理工具 Vundle 來進行，因此若未安裝 Vundle 可以參考本篇。

---

安裝 Emmet-vim：
透過 Vundle 安裝 Vim 的套件很簡單，在 Vim 設定檔中 ( /etc/vimrc 或 ~/.vimrc ) 加入套件即可，設定方式參考如下：
註：因 Syntax highlight 問題，請原諒我 Vim script 註解寫得很奇怪，感謝！

" 部分內容省略... "
set rtp+=~/.vim/bundle/Vundle.vim
call vundle#begin()

Plugin 'gmarik/Vundle.vim'
" 加入 Emmet-vim 套件 "
Plugin 'mattn/emmet-vim'

call vundle#end()
filetype plugin indent on

接著輸入在 Vim 中輸入下方安裝指令，等待最下方顯示 Done 即完成安裝。

:PluginInstall

---

使用 Emmet-vim：
因 Emmet-vim 功能強大，這邊先列出幾個基本用法：
1. 建立 html 5 檔案，首先建立一個 .html 檔案

vim test.html

於檔案中輸入 html:5_ ( "_" 為游標位置 )，接著輸入 Ctrl + Y + ,，Emmet-vim 就會自動幫你產生一個基本的 html 5 網頁內容。

2. 快速產生 html tag，我們可以在 Vim 中輸入以下內容

div#testID>div.testClass>li*3

接著一樣輸入 Ctrl + Y + ,，Emmet-vim 就會自動產生 html 元素，如下：

<div id="testID">
    <div class="testClass">
        <li></li>
        <li></li>
        <li></li>
    </div>
</div>

針對 Emmet-vim 更多的指令與操作方式可以參考這裡。

---

Environment :
  ・ Arch Linux
  ・ Raspberry Pi Model B

Reference :
  ・ Emmet-vim github