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中都測試過,在其他終端中應該不會有太大問題。
- 文法高亮-javascript.vim
http://www.vim.org/scripts/script.php?script_id=1491
該外掛程式安裝在~/.vim/syntax/目錄下。下載後需要修改一個地方,一般javascript編程,摺疊層數不需要太深,我自己設定為1,即:
setlocal foldlevel=1。
需要在.vimrc中加入
- " 開啟javascript摺疊
- let b:javascript_fold=1
- " 開啟javascript對dom、html和css的支援
- let javascript_enable_domhtmlcss=1
截屏(點擊可查看大圖)
~/.vim/plugin下就可以
- 變數標記和檢查-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/ 底下
- "設定字典 ~/.vim/dict/javascript.dict是字典檔案的路徑
- autocmd FileType javascript set dictionary=~/.vim/dict/javascript.dict
截屏(點擊可查看大圖)
為了能夠自動開啟JavaScript檔案的自動完成功能,你需要將下面的代碼添加到你的~/.vimrc檔案中
autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS
- 運行程式碼片段-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,這樣會插入執行結果到當前檔案。
截屏(點擊可查看大圖)
雖然我不怎麼用,但是可能對你有一些協助
- winmanager 類似資源管理員,如果從editplus或者其他圖形編輯器轉過來的朋友,這個可能很有用。
截屏(點擊可查看大圖)
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 的設定有點問題。。不過介紹的外掛程式很不錯