vim Web開發

來源:互聯網
上載者:User
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中都測試過,在其他終端中應該不會有太大問題。

  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

    截屏(點擊可查看大圖)
    ~/.vim/plugin下就可以

  2. 變數標記和檢查-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/ 底下
    1. "設定字典 ~/.vim/dict/javascript.dict是字典檔案的路徑
    2. autocmd FileType javascript set dictionary=~/.vim/dict/javascript.dict

    截屏(點擊可查看大圖)

    為了能夠自動開啟JavaScript檔案的自動完成功能,你需要將下面的代碼添加到你的~/.vimrc檔案中

    autocmd FileType javascript set omnifunc=javascriptcomplete#CompleteJS

  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,這樣會插入執行結果到當前檔案。

    截屏(點擊可查看大圖)

    雖然我不怎麼用,但是可能對你有一些協助

  4. winmanager 類似資源管理員,如果從editplus或者其他圖形編輯器轉過來的朋友,這個可能很有用。

    截屏(點擊可查看大圖)

  5. 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 的設定有點問題。。不過介紹的外掛程式很不錯

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.