<wbr style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"><span style="color:#464646">VIM實在是深不可測,可以說是個萬能的editor,而且所需系統資源極少,適合老舊電腦。不過學習曲綫比較陡。這陣子看了一些關於javascript,jquery,xhtml,css的tutorial,就想說把vim設定成一個好用的IDE,作業起來方便。</span> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> 1:安裝JQeury 語法顏色</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>到這裏下載:http://www.vim.org/scripts/script.php?script_id=2416 ,儲存到 syntax底下。</wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>然後在 .vimrc 加入這一行 :<span style="word-wrap:normal; word-break:normal; line-height:normal; font-family:arial,helvetica,sans-serif; font-size:14px">au BufRead,BufNewFile jquery.*.js set ft=javascript syntax=jquery</span></wbr></wbr> </div> <div style="font-family:simsun; font-size:14px; line-height:21px"><span style="color:#ff0000"><br></span></div> <div style="font-family:simsun; font-size:14px; line-height:21px"><span style="color:#ff0000">2:安裝縮排</span></div> <div style="font-family:simsun; font-size:14px; line-height:21px"> <div class="entry" style="border:0px; margin:0px; padding:10px 10px 10px 5px; font-family:arial,helvetica,clean,sans-serif; font-size:12px; line-height:16px; background-color:rgb(249,249,249)"> <p style="border:0px; margin-top:1em; margin-bottom:1em; padding-top:0px; padding-bottom:0px; line-height:25px; overflow:hidden"> <a href="http://www.vim.org/scripts/script.php?script_id=1397">http://www.vim.org/scripts/script.php?script_id=1397</a></p> <p style="color:rgb(70,70,70); border:0px; margin-top:1em; margin-bottom:1em; padding-top:0px; padding-bottom:0px; line-height:25px; overflow:hidden"> 今天依然介绍vim这个大杀器的一个插件:xml.vim。 可以在<a title="xml.vim" href="http://www.vim.org/scripts/script.php?script_id=1397" style="">这里</a>下载这个插件,非常小只有50几kb,把它复制到~/.vim/ftpplugin目录下,然后在vim的配置文件 ~/.vimrc 中添加一行:</p> <p style="color:rgb(70,70,70); border:0px; margin-top:1em; margin-bottom:1em; padding-top:0px; padding-bottom:0px; line-height:25px; overflow:hidden"> filetype plugin indent on</p> <p style="color:rgb(70,70,70); border:0px; margin-top:1em; margin-bottom:1em; padding-top:0px; padding-bottom:0px; line-height:25px; overflow:hidden"> 保存,重新用vim或者Gvim打开一个html文件,或者html.erb文件,在通常模式下,输入gg=G 会发现vim帮我们自动格式化了html代码,所有的缩进都很完美。</p> </div> <p class="infobottom" style="color:rgb(70,70,70); border:0px; margin-top:1em; margin-bottom:1em; padding-top:0px; padding-bottom:0px; font-style:italic; font-family:arial,helvetica,clean,sans-serif; background-color:rgb(249,249,249)"> Tags: vim</p> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> 3:安裝Javascript 語法顏色</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>到這裏下載 :<wbr><a href="http://www.vim.org/scripts/script.php?script_id=1491" style="text-decoration:none; color:rgb(64,96,116)">http://www.vim.org/scripts/script.php?script_id=1491</a><wbr>,放在syntax 底下。</wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="font-family:simsun; font-size:14px; line-height:21px"><span style="color:rgb(204,0,0)">4:javascript 語法檢查</span></div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>這個不算太好用,不像pyflakes可以及時的檢查錯誤,先用着吧。首先安裝 javascriptlint ,下載 <wbr>:http://www.javascriptlint.com/download/jsl-0.3.0-src.tar.gz <wbr>, 然後解壓縮。在該目錄內執行:</wbr></wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>(1) make -f Makefile.ref all <wbr>,執行完會產生以下目錄</wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>(2) cd Linux_All_DBG.OBJ/</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>(3) sudo cp jsl jscpucfg /usr/local/bin/</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>(4) jsl -help:conf > jsl.conf <wbr>(照<a href="http://blogs.linux.ie/kenguest/2007/03/18/integrating-javascript-lint-with-vim/" style="text-decoration:none; color:rgb(64,96,116)">http://blogs.linux.ie/kenguest/2007/03/18/integrating-javascript-lint-with-vim/</a><wbr>的說明做 jsl -help:conf > etc/jsl.conf 會出現 permission denied,,就算用 sudo 還是不行,,所以就先輸出成 jsl.conf 再 cp 進 /etc )</wbr></wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>(5) cp jsl.conf /etc/</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>然後在 .vimrc 加入:</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>set makeprg=jsl\ -nologo\ -nofilelisting\ -nosummary\ -nocontext\ -conf\ '/etc/jsl.conf'\ -process\ %</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>set errorformat=%f(%l):\ %m</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>inoremap <silent> <F5> <C-O>:make<CR></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>map <silent> <F5> :make<CR></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>按F5 就會執行syntax的檢查,,,檢查的有點太詳細了。。我還是比較想用類似 pyflakes的plugin.....</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> 5: <wbr>javascript 自動補完 autocomplete</wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>到這裏下載 javascript 的 dict , wget<wbr>https://github.com/tyru/dotfiles/blob/master/dotfiles/.vim/dict/javascript.dict<wbr></wbr></wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>( 應該用 git,,可是我不太會),然後將javascript.dict 放在 dict/ 底下</wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>再來,下載 neocomlcache.vim 。wget<wbr>https://github.com/downloads/Shougo/neocomplcache</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>這個有點意思,,vba是 vim ball ,,不是M$的那個VBA。 先把<wbr>neocomplcache-6.1.vba 放到.vim的目錄底下, 然後用 vim 打開它,執行 : source <wbr>% ,,,竟然就自動安裝好了,,這個好,不用一個一個檔案copy到對應目錄。</wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>然後在 .vimrc 加入:</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> autocmd FileType js :set dictionary+=~/.vim/dict/javascript.dict</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> set complete+=k</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> let g:neocomplcache_enable_at_startup = 1</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> let g:neocomplcache_enable_auto_select = 0</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> function! InsertTabWrapper()</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>let col = col('.') - 1</wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>if !col || getline('.')[col - 1] !~ '\k'</wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr><wbr>return "\"</wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>else</wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr><wbr>if pumvisible()</wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr><wbr><wbr><wbr>return "\"</wbr></wbr></wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr><wbr>else</wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr><wbr><wbr><wbr>return "\\"</wbr></wbr></wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr><wbr>end</wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>endif</wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> endfunction</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> inoremap = InsertTabWrapper()</div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>使用起來有點問題,根據<a href="http://tahir0u.com/2011/05/14/356.html" style="text-decoration:none; color:rgb(64,96,116)">http://tahir0u.com/2011/05/14/356.html</a><wbr>,要按tab才會跳出autocomplete的選項,可是變成不用按也會跑出來,而且按了tab還沒用,,,不過這算是比較方便的dict了。</wbr></wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> 6:安裝zendcoding ,到這裏下載<wbr><a href="http://www.vim.org/scripts/script.php?script_id=2981" style="text-decoration:none; color:rgb(64,96,116)">http://www.vim.org/scripts/script.php?script_id=2981</a></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>解壓縮到相應目錄底下, 不用改 .vimrc 。這個plugin也挺神奇的,寫html很省事,舉例如下:</wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>在 insert模式 ,輸入 <wbr>hml:5 , 然後 按住 control + y + , (這個是逗號),放開之後,就出現了以下tags</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <div><br></div> <div><!DOCTYPE HTML></div> <div><html lang="en"></div> <div><head></div> <div><wbr><wbr><meta charset="UTF-8"></wbr></wbr></div> <div><wbr><wbr><title></title></wbr></wbr></div> <div></head></div> <div><body></div> <div><br></div> <div></body></div> <div></html></div> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <br> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr>呵呵,,這樣少打很多字呢。照<a href="http://tahir0u.com/2011/05/14/356.html" style="text-decoration:none; color:rgb(64,96,116)">http://tahir0u.com/2011/05/14/356.html</a><wbr>的設定有點問題。。不過介紹的插件很不錯</wbr></wbr></wbr> </div> <br></wbr>