使用vim來編寫javascript代碼

如果你喜歡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中加入

    

   1234	" 開啟javascript摺疊let b:javascript_fold=1" 開啟javascript對dom、html和css的支援let javascript_enable_domhtmlcss=1

   截屏（點擊可查看大圖）
   

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

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

1. 字典補全－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中加入

12	"設定字典 ~/.vim/dict/javascript.dict是字典檔案的路徑autocmd FileType javascript set dictionary=~/.vim/dict/javascript.dict

截屏（點擊可查看大圖）

1. YUI自動補全

待續…

1. 運行程式碼片段－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，這樣會插入執行結果到當前檔案。
截屏（點擊可查看大圖）

1. 語法檢查和快速調試－javascriptlint

http://www.javascriptlint.com/
這個工具的代碼基於Douglas Crockford’s的jslint，在代碼檢查方面很強大，可以說非常苛刻。如果從頭開始寫代碼，建議經常用它來檢查代碼，能明顯提高代碼的品質。下載時不要從程式碼程式庫check out最新版本，而是下載穩定的0.3.0版本。

123456

cd jsl-0.3.0/src/ #這裡的jsl-0.3.0是解壓縮目錄make -f Makefile.ref allcd 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中加入

12345

"設定javascriptlintautocmd FileType javascript set makeprg=/home/xp/bin/js/jsl -nologo -nofilelisting -nosummary -nocontext -conf '/home/xp/bin/js/jsl.conf' -process %autocmd FileType javascript set errorformat=%f(%l): %mautocmd FileType javascript inoremap <silent> <F9> <C-O>:make<CR>autocmd FileType javascript map <silent> <F9> :make<CR>

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

1. 其他常用外掛程式
   雖然我不怎麼用，但是可能對你有一些協助
   winmanager 類似資源管理員，如果從editplus或者其他圖形編輯器轉過來的朋友，這個可能很有用。
   截屏（點擊可查看大圖）
   
   minibufexplorer 類似標籤頁，管理當前開啟的檔案
   Tlist可以顯示代碼結構