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"是英文的分號(；)

css

似乎很久沒有關注 Vim 的動向了，在 Vim 腳本列表中找到個非常好的 CSS 顏色顯示插件。

這個插件可以很直觀的顯示 CSS 文件中定義的顏色，如下圖所示。這樣我們就不用一邊用 Vim 寫 CSS ，一邊查那該死的色表了。

安裝這個插件非常簡單(繼續戳這里下載)，只要將這個文件拷貝到

$VIMRUNTIME/after/syntax/

目錄下就可以了（沒有的話新建一個）。這樣說可能不怎么直觀，那么 Windows 用戶拷貝到

C:\Program Files\Vim\vimfiles\after\syntax\

這個目錄下（如果你是默認安裝 Vim 的話）；而 *ix 系統用戶則拷貝到

$HOME/.vim/after/syntax/

這里目錄下就可以了。

而代碼提示插件用的是AutoComplPop，還在使用DW或者aptana等一些工具的朋友們肯定對代碼彈出提示情有獨鐘，這款插件的功能可以說是有 過之而無不及啊，當然如果你不喜歡這種自動的代碼提示的話可以不用裝。需要的朋友還是戳這里下載。

?

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

   截屏（點擊可查看大圖）

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

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

   字典補全－javascript.dict

   http://lazy-people.org/browser/project/dotfiles/users/dann/.vim/dict/javascript.dict?rev=122
   該字典可以放在任意目錄，我一般放在~/.vim/dict/目錄中。使用字典補全需要在插入模式下，快捷鍵是Ctrl+X，然后Ctrl+K。有些javascript內置函數名超長，經常記不住，這時候字典就比較有用。字典其實就是一個普通文件，里面是關鍵詞的列表，一行一個，所以你也可以加入一些你在項目中經常使用的函數。
   另外需要在.vimrc中加入

   1. "設置字典 ~/.vim/dict/javascript.dict是字典文件的路徑
   2. autocmd FileType javascript set dictionary=~/.vim/dict/javascript.dict

   截屏（點擊可查看大圖）

   YUI自動補全

   待續…

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，這樣會插入執行結果到當前文件。
   截屏（點擊可查看大圖）

   語法檢查和快速調試－javascriptlint

   http://www.javascriptlint.com/
   這個工具的代碼基于Douglas Crockford’s的jslint，在代碼檢查方面很強大，可以說非常苛刻。如果從頭開始寫代碼，建議經常用它來檢查代碼，能明顯提高代碼的質量。下載時不要從代碼庫check out最新版本，而是下載穩定的0.3.0版本。
   $ cd jsl-0.3.0/src/ #這里的jsl-0.3.0是解壓縮目錄
   $ make -f Makefile.ref all
   $ cd Linux_All_DBG.OBJ/
   $ cp jsl jscpucfg /home/xp/bin/js/ #/home/xp/bin/js/要拷貝到的目錄，可以任意位置
   $ cd /home/xp/bin/js/
   $ jsl -help:conf > jsl.conf #生成默認配置文件
   另外需要在.vimrc中加入

   1. "設置javascriptlint
   2. autocmd FileType javascript set makeprg=/home/xp/bin/js/jsl -nologo -nofilelisting -nosummary -nocontext -conf '/home/xp/bin/js/jsl.conf' -process %
   3. autocmd FileType javascript set errorformat=%f(%l): %m
   4. autocmd FileType javascript inoremap <silent> <F9> <C-O>:make<CR>
   5. autocmd FileType javascript map <silent> <F9> :make<CR>

   使用時使用:make命令即可，或者使用F9快捷鍵。還需要理解的是quickfix，輸入命令help quickfix看以下文檔，主要涉及的命令有:cw :cn :cp等。
   截屏（點擊可查看大圖）

   其他常用插件

4. 雖然我不怎么用，但是可能對你有一些幫助
   winmanager 類似資源管理器，如果從editplus或者其他圖形編輯器轉過來的朋友，這個可能很有用。
   截屏（點擊可查看大圖）
5. 
   minibufexplorer 類似標簽頁，管理當前打開的文件
   Tlist可以顯示代碼結構

為了您的安全，請只打開來源可靠的網址

打開網站????取消

來自: http://hi.baidu.com/515314237/blog/item/189fbe0b317c181495ca6b8d.html