vim Web開發

vim 下web開發html css js外掛程式Vim下的Web開發之html,CSS,javascript外掛程式 

HTML

下載HTML.zip

解壓HTML.zip，然後將裡面的所有檔案copy到C:\Program Files\Vim\vimfiles目錄下

首先，你應該把“ filetype plugin on ”寫入你的vimrc。

重啟vim。

建立一個test.html檔案。用gvim開啟按 ";html"看看會有什麼結果！注意";html"是英文的分號(；)

Javascript

轉載：http://panweizeng.com/archives/359

如果你喜歡vim，平時也寫寫javascript，那麼這篇文章就是為你而寫的：）如果你喜歡javascript，但是還沒有找到合適的編輯器，那麼請give vim a
try。

以下假定你對vim已經有所瞭解，另外所有外掛程式在gnome-terminal中都測試過，在其他終端中應該不會有太大問題。

1. 文法高亮－javascript.vim
   http://www.vim.org/scripts/script.php?script_id=1491
   
   該外掛程式安裝在~/.vim/syntax/目錄下。下載後需要修改一個地方，一般javascript編程，摺疊層數不需要太深，我自己設定為1，即：
   
   setlocal foldlevel=1。
   
   需要在.vimrc中加入
   1. " 開啟javascript摺疊
   2. let b:javascript_fold=1
   3. " 開啟javascript對dom、html和css的支援
   4. let javascript_enable_domhtmlcss=1

   截屏（點擊可查看大圖）
   ~/.vim/plugin下就可以

2. 變數標記和檢查－mark.vim

   http://www.vim.org/scripts/script.php?script_id=1238
   
   該外掛程式安裝到~/.vim/plugin/目錄。在對變數進行檢查和跟蹤的時候會很有用，同時還可以防止變數名拼字錯誤。開啟／關閉變數標記的預設快速鍵是m。也可以使用v選中一段進行標記。
   
   截屏（點擊可查看大圖）

   字典補全－javascript.dict

   1、autocomplet
   一個自動完成的外掛程式，當你輸入
   

   <div id="的時候，外掛程式能夠給你列出當前頁面的id值和CSS檔案中的對應id名稱，強烈推薦

    到這裏下載 javascript 的 dict , wget https://github.com/tyru/dotfiles/blob/master/dotfiles/.vim/dict/javascript.dict  應該用 git，，可是我不太會），然後將javascript.dict 放在 dict/ 底下
   1. "設定字典 ~/.vim/dict/javascript.dict是字典檔案的路徑
   2. autocmd FileType javascript set dictionary=~/.vim/dict/javascript.dict

   截屏（點擊可查看大圖）

   為了能夠自動開啟JavaScript檔案的自動完成功能，你需要將下面的代碼添加到你的~/.vimrc檔案中

   autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
   

3. 運行程式碼片段－spidermonkey

   http://www.mozilla.org/js/spidermonkey/
   
   有時想測試一個小東西，沒有必要寫一個html然後到瀏覽器去運行，spidermonkey能幫你忙，而且spidermonkey還能作一些很 geek的事情。ubuntu系統安裝很簡單，sudo apt-get install spidermonkey-bin，其他系統請參考網站的文檔。安裝完畢後，輸入js，則會進入一個js shell，和python類似。輸入help()斷行符號，會看到一個簡單的協助。
   
   在vim編寫javascript代碼後，輸入!js %即可執行當前檔案的代碼。也可以選中一段代碼然後執行:’<,'>!js，這樣會插入執行結果到當前檔案。
   
   截屏（點擊可查看大圖）

   雖然我不怎麼用，但是可能對你有一些協助

4. winmanager 類似資源管理員，如果從editplus或者其他圖形編輯器轉過來的朋友，這個可能很有用。
   
   截屏（點擊可查看大圖）
5. 
   minibufexplorer 類似標籤頁，管理當前開啟的檔案
   Tlist可以顯示代碼結構

   VIM實在是深不可測，可以說是個萬能的editor，而且所需系統資源極少，適合老舊電腦。不過學習曲綫比較陡。這陣子看了一些關於javascript,jquery,xhtml,css的tutorial，就想說把vim設定成一個好用的IDE，作業起來方便。

1：安裝JQeury 語法顏色    到這裏下載：http://www.vim.org/scripts/script.php?script_id=2416 ，儲存到 syntax底下。    然後在 .vimrc 加入這一行 ：au BufRead,BufNewFile jquery.*.js set ft=javascript syntax=jquery
2：安裝縮排

http://www.vim.org/scripts/script.php?script_id=1397

今天依然介紹vim這個大殺器的一個外掛程式：xml.vim。 可以在這裡下載這個外掛程式，非常小隻有50幾kb，把它複製到~/.vim/ftpplugin目錄下，然後在vim的設定檔 ~/.vimrc 中添加一行：

filetype plugin indent on

儲存，重新用vim或者Gvim開啟一個html檔案，或者html.erb檔案，在通常模式下，輸入gg=G 會發現vim幫我們自動格式化了html代碼，所有的縮排都很完美。

Tags: vim

3：安裝Javascript 語法顏色    到這裏下載 ： http://www.vim.org/scripts/script.php?script_id=1491 ，放在syntax 底下。4：javascript 語法檢查     這個不算太好用，不像pyflakes可以及時的檢查錯誤，先用著吧。首先安裝 javascriptlint ,下載  ：http://www.javascriptlint.com/download/jsl-0.3.0-src.tar.gz  ， 然後解壓縮。在該目錄內執行：     (1) make -f Makefile.ref all   ，執行完會產生以下目錄     (2) cd Linux_All_DBG.OBJ/     (3) sudo cp jsl jscpucfg /usr/local/bin/     (4) jsl -help:conf > jsl.conf  (照http://blogs.linux.ie/kenguest/2007/03/18/integrating-javascript-lint-with-vim/ 的說明做
jsl -help:conf > etc/jsl.conf 會出現 permission denied，，就算用 sudo 還是不行，，所以就先輸出成 jsl.conf 再 cp 進 /etc )     (5) cp jsl.conf /etc/     然後在 .vimrc 加入：     set makeprg=jsl\ -nologo\ -nofilelisting\ -nosummary\ -nocontext\ -conf\ '/etc/jsl.conf'\ -process\ %     set errorformat=%f(%l):\ %m     inoremap <silent> <F5> <C-O>:make<CR>     map <silent> <F5> :make<CR>     按F5 就會執行syntax的檢查，，，檢查的有點太詳細了。。我還是比較想用類似 pyflakes的plugin.....5:  javascript 自動補完 autocomplete     到這裏下載 javascript 的 dict , wget https://github.com/tyru/dotfiles/blob/master/dotfiles/.vim/dict/javascript.dict    （ 應該用 git，，可是我不太會），然後將javascript.dict 放在 dict/ 底下    再來，下載 neocomlcache.vim 。wget https://github.com/downloads/Shougo/neocomplcache    這個有點意思，，vba是 vim ball ,,不是M$的那個VBA。 先把 neocomplcache-6.1.vba 放到.vim的目錄底下， 然後用 vim 打開它，執行 : source  % ，，，竟然就自動安裝好了，，這個好，不用一個一個檔案copy到對應目錄。      然後在 .vimrc 加入：autocmd FileType js :set dictionary+=~/.vim/dict/javascript.dictset complete+=klet g:neocomplcache_enable_at_startup = 1let g:neocomplcache_enable_auto_select = 0function! InsertTabWrapper()    let col = col('.') - 1    if !col || getline('.')[col - 1] !~ '\k'        return "\"    else        if pumvisible()            return "\"        else            return "\\"        end    endifendfunctioninoremap = InsertTabWrapper()     使用起來有點問題，根據http://tahir0u.com/2011/05/14/356.html ，要按tab才會跳出autocomplete的選項，可是變成不用按也會跑出來，而且按了tab還沒用，，，不過這算是比較方便的dict了。6：安裝zendcoding ,到這裏下載 http://www.vim.org/scripts/script.php?script_id=2981    解壓縮到相應目錄底下， 不用改 .vimrc 。這個plugin也挺神奇的，寫html很省事，舉例如下：    在 insert模式 ，輸入  hml:5 , 然後 按住 control + y + , (這個是逗號），放開之後，就出現了以下tags<!DOCTYPE HTML><html lang="en"><head>    <meta charset="UTF-8">    <title></title></head><body></body></html>    呵呵，，這樣少打很多字呢。照http://tahir0u.com/2011/05/14/356.html 的設定有點問題。。不過介紹的外掛程式很不錯