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.dict set complete+=k let g:neocomplcache_enable_at_startup = 1 let g:neocomplcache_enable_auto_select = 0 function! InsertTabWrapper() ???let col = col('.') - 1 ???if !col || getline('.')[col - 1] !~ '\k' ???????return "\" ???else ???????if pumvisible() ???????????return "\" ???????else ???????????return "\\" ???????end ???endif endfunction inoremap = 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?的設定有點問題。。不過介紹的插件很不錯

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的vim Web开发的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。