vim Web开发

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.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  的設定有點問題。。不過介紹的插件很不錯