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，但是还没有找到合适的编辑器，那么请givevima 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名称，强烈推荐
   下载地址
   

   <wbr>到這裏下載 javascript 的 dict , wget<wbr>https://github.com/tyru/dotfiles/blob/master/dotfiles/.vim/dict/javascript.dict<wbr></wbr></wbr></wbr>

   應該用 git，，可是我不太會），然後將javascript.dict 放在 dict/ 底下

    

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

   截屏（点击可查看大图）

    

   为了能够自动开启JavaScript文件的自动完成功能，你需要将下面的代码添加到你的~/.vimrc文件中

   autocmdFileTypejavascriptsetomnifunc=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可以显示代码结构

<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 &gt; 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 &gt; 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 &lt;silent&gt; &lt;F5&gt; &lt;C-O&gt;:make&lt;CR&gt;</wbr></wbr></wbr> </div> <div style="color:rgb(70,70,70); font-family:simsun; font-size:14px; line-height:21px"> <wbr><wbr><wbr>map &lt;silent&gt; &lt;F5&gt; :make&lt;CR&gt;</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>&lt;!DOCTYPE HTML&gt;</div> <div>&lt;html lang="en"&gt;</div> <div>&lt;head&gt;</div> <div><wbr><wbr>&lt;meta charset="UTF-8"&gt;</wbr></wbr></div> <div><wbr><wbr>&lt;title&gt;&lt;/title&gt;</wbr></wbr></div> <div>&lt;/head&gt;</div> <div>&lt;body&gt;</div> <div><br></div> <div>&lt;/body&gt;</div> <div>&lt;/html&gt;</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>